@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">Editar evaluación</p>
            <h2 class="font-headline-lg text-headline-lg text-primary mb-2">{{ $campaign->titulo }}</h2>
            <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                Actualiza la información general, fechas de disponibilidad y banner de la campaña.
            </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.update', $campaign) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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', $campaign->titulo) }}" required />
            </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', $campaign->descripcion) }}</textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="banner">Reemplazar 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" />
                </div>
                @if ($campaign->banner_path)
                    <div>
                        <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-2">Banner actual</p>
                        <img class="h-32 w-full rounded-lg border border-outline-variant object-cover"
                            src="{{ route('admin.evaluaciones.asset', [$campaign, 'banner']) }}" alt="Banner actual" />
                    </div>
                @endif
            </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', $campaign->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', $campaign->inicio_hora ? substr($campaign->inicio_hora, 0, 5) : null) }}" />
                </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', $campaign->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', $campaign->fin_hora ? substr($campaign->fin_hora, 0, 5) : null) }}" />
                </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.show', $campaign) }}">Cancelar</a>
                <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
                    Guardar cambios
                </button>
            </div>
        </form>
    </div>
@endsection