@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-5xl mx-auto space-y-8">
        <section>
            <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Nueva evaluación</p>
            <h2 class="font-headline-lg text-headline-lg text-primary mb-2">Crear campaña</h2>
            <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                Define la ventana de disponibilidad y el material visual que verá el alumno al ingresar al cuestionario.
            </p>
        </section>

        @if ($errors->any())
            <div class="rounded-lg border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
                Revisa los campos marcados antes de continuar.
            </div>
        @endif

        <form class="bg-white rounded-xl border border-outline-variant p-8 shadow-[0px_4px_20px_rgba(0,0,0,0.04)] space-y-6"
            action="{{ route('admin.evaluaciones.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div>
                <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="titulo">Título</label>
                <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                    id="titulo" name="titulo" type="text" value="{{ old('titulo') }}" required />
                @error('titulo')
                    <p class="mt-1 font-body-sm text-body-sm text-error">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="descripcion">Descripción</label>
                <textarea class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                    id="descripcion" name="descripcion" rows="4">{{ old('descripcion') }}</textarea>
            </div>

            <div>
                <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="banner">Banner</label>
                <input class="mt-2 w-full rounded-lg border border-outline-variant p-3 font-body-sm text-body-sm"
                    id="banner" name="banner" type="file" accept=".jpg,.jpeg,.png,.webp" />
                @error('banner')
                    <p class="mt-1 font-body-sm text-body-sm text-error">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="inicio">Inicio</label>
                    <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                        id="inicio" name="inicio" type="date" value="{{ old('inicio') }}" required />
                </div>
                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="inicio_hora">Hora inicio</label>
                    <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                        id="inicio_hora" name="inicio_hora" type="time" value="{{ old('inicio_hora') }}" />
                </div>
                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="fin">Fin</label>
                    <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                        id="fin" name="fin" type="date" value="{{ old('fin') }}" required />
                </div>
                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="fin_hora">Hora fin</label>
                    <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                        id="fin_hora" name="fin_hora" type="time" value="{{ old('fin_hora') }}" />
                </div>
            </div>

            <div class="flex justify-end gap-3 border-t border-outline-variant pt-6">
                <a class="rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-on-surface-variant"
                    href="{{ route('admin.evaluaciones.index') }}">Cancelar</a>
                <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
                    Crear campaña
                </button>
            </div>
        </form>
    </div>
@endsection