@extends('layouts.app')

@php $editar = $horario->exists; @endphp

@section('titulo', $editar ? 'Editar horario' : 'Nuevo horario')
@section('subtitulo', 'Asigna curso, docente, aula, día y hora')

@section('contenido')
<div class="max-w-2xl">
    <a href="{{ route('horarios.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600 mb-4">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        Volver a horarios
    </a>

    @if ($errors->any())
        <div class="mb-5 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    @php $in = 'w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100 transition'; @endphp

    <form method="POST" action="{{ $editar ? route('horarios.update', $horario) : route('horarios.store') }}"
          class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-8 space-y-4">
        @csrf
        @if ($editar) @method('PUT') @endif

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Programa / Curso</label>
                <select name="programa_id" class="{{ $in }}">
                    <option value="">— Sin programa —</option>
                    @foreach ($programas as $p)
                        <option value="{{ $p->id }}" @selected(old('programa_id', $horario->programa_id) == $p->id)>{{ $p->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Nombre del curso / sesión</label>
                <input type="text" name="curso" value="{{ old('curso', $horario->curso) }}" placeholder="Ej: Inglés B1" class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Docente</label>
                <select name="docente_id" class="{{ $in }}">
                    <option value="">— Sin asignar —</option>
                    @foreach ($docentes as $d)
                        <option value="{{ $d->id }}" @selected(old('docente_id', $horario->docente_id) == $d->id)>{{ $d->nombre_completo }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Aula / Ambiente</label>
                <select name="aula_id" class="{{ $in }}">
                    <option value="">— Sin asignar —</option>
                    @foreach ($aulas as $a)
                        <option value="{{ $a->id }}" @selected(old('aula_id', $horario->aula_id) == $a->id)>{{ $a->nombre }} ({{ $a->capacidad }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Sección / Grupo</label>
                <input type="text" name="seccion" value="{{ old('seccion', $horario->seccion) }}" class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Día <span class="text-red-500">*</span></label>
                <select name="dia" required class="{{ $in }}">
                    @foreach (\App\Models\Horario::DIAS as $num => $nombre)
                        <option value="{{ $num }}" @selected(old('dia', $horario->dia) == $num)>{{ $nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Hora inicio <span class="text-red-500">*</span></label>
                <input type="time" name="hora_inicio" value="{{ old('hora_inicio', substr((string) $horario->hora_inicio, 0, 5)) }}" required class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Hora fin <span class="text-red-500">*</span></label>
                <input type="time" name="hora_fin" value="{{ old('hora_fin', substr((string) $horario->hora_fin, 0, 5)) }}" required class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Estado <span class="text-red-500">*</span></label>
                <select name="estado" required class="{{ $in }} capitalize">
                    @foreach (['activo', 'inactivo'] as $estado)
                        <option value="{{ $estado }}" @selected(old('estado', $horario->estado) == $estado)>{{ ucfirst($estado) }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="flex items-center justify-between gap-3 pt-4 border-t border-slate-100">
            @if ($editar)
                <button form="del-horario" type="submit" class="text-sm text-red-500 hover:text-red-600 font-medium">Eliminar</button>
            @else
                <span></span>
            @endif
            <div class="flex items-center gap-3">
                <a href="{{ route('horarios.index') }}" class="px-5 py-2.5 rounded-xl text-slate-600 font-medium hover:bg-slate-100 transition">Cancelar</a>
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold shadow-lg shadow-brand-500/30 transition">
                    {{ $editar ? 'Guardar cambios' : 'Agregar horario' }}
                </button>
            </div>
        </div>
    </form>

    @if ($editar)
        <form id="del-horario" method="POST" action="{{ route('horarios.destroy', $horario) }}" onsubmit="return confirm('¿Eliminar este horario?');" class="hidden">
            @csrf @method('DELETE')
        </form>
    @endif
</div>
@endsection