@extends('layouts.app')

@section('titulo', 'Nueva matrícula')
@section('subtitulo', 'Inscribe a un estudiante en un programa')

@php $sim = auth()->user()->empresa?->simbolo ?? 'S/'; @endphp

@section('contenido')
<div class="max-w-2xl">
    <a href="{{ route('admisiones.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 admisiones
    </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="{{ route('admisiones.store') }}" class="space-y-5">
        @csrf

        {{-- Datos de la matrícula --}}
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7">
            <h3 class="font-bold text-slate-800 mb-5">Datos de la matrícula</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Estudiante <span class="text-red-500">*</span></label>
                    <select name="estudiante_id" required class="{{ $in }}">
                        <option value="">— Selecciona —</option>
                        @foreach ($estudiantes as $e)
                            <option value="{{ $e->id }}" @selected(old('estudiante_id', $preselect) == $e->id)>{{ $e->nombre_completo }} · {{ $e->codigo }}</option>
                        @endforeach
                    </select>
                    <p class="text-xs text-slate-400 mt-1">¿No está en la lista? <a href="{{ route('estudiantes.create') }}" class="text-brand-600 hover:underline">Regístralo primero</a>.</p>
                </div>
                <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 <span class="text-red-500">*</span></label>
                        <select name="programa_id" id="programa" required class="{{ $in }}" onchange="prefill()">
                            <option value="">— Selecciona —</option>
                            @foreach ($programas as $p)
                                <option value="{{ $p->id }}" data-precio="{{ $p->precio }}" data-nivel="{{ $p->nivel }}" @selected(old('programa_id') == $p->id)>{{ $p->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Nivel / Ciclo</label>
                        <input type="text" name="nivel" id="nivel" value="{{ old('nivel') }}" class="{{ $in }}">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Periodo</label>
                        <input type="text" name="periodo" value="{{ old('periodo') }}" placeholder="Ej: 2026-I" class="{{ $in }}">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Fecha <span class="text-red-500">*</span></label>
                        <input type="date" name="fecha" value="{{ old('fecha', now()->format('Y-m-d')) }}" 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 (\App\Models\Matricula::ESTADOS as $estado)
                                @if ($estado !== 'anulado')
                                    <option value="{{ $estado }}" @selected(old('estado', 'matriculado') == $estado)>{{ ucfirst($estado) }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Observación</label>
                    <input type="text" name="observacion" value="{{ old('observacion') }}" class="{{ $in }}">
                </div>
            </div>
        </div>

        {{-- Cargos --}}
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7">
            <h3 class="font-bold text-slate-800 mb-1">Generar cargos (opcional)</h3>
            <p class="text-sm text-slate-500 mb-4">Crea automáticamente los cargos de matrícula y pensiones en el módulo de Pagos.</p>
            <div class="space-y-4">
                <label class="flex items-center gap-2.5 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="gen_matricula" value="1" @checked(old('gen_matricula')) class="rounded border-slate-300 text-brand-500 focus:ring-brand-400 h-4 w-4">
                    Generar cargo de matrícula
                </label>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Monto de matrícula ({{ $sim }})</label>
                    <input type="number" step="0.01" min="0" name="monto_matricula" id="monto_matricula" value="{{ old('monto_matricula', 0) }}" class="{{ $in }} sm:max-w-xs">
                </div>
                <div class="grid sm:grid-cols-2 gap-4 pt-2 border-t border-slate-100">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">N.º de pensiones a generar</label>
                        <input type="number" min="0" max="12" name="gen_pensiones" value="{{ old('gen_pensiones', 0) }}" class="{{ $in }}">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Monto por pensión ({{ $sim }})</label>
                        <input type="number" step="0.01" min="0" name="monto_pension" id="monto_pension" value="{{ old('monto_pension', 0) }}" class="{{ $in }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('admisiones.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">Registrar matrícula</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    function prefill() {
        const opt = document.getElementById('programa').selectedOptions[0];
        if (!opt || !opt.value) return;
        const precio = parseFloat(opt.dataset.precio || '0');
        const nivel = opt.dataset.nivel || '';
        if (nivel && !document.getElementById('nivel').value) document.getElementById('nivel').value = nivel;
        const mp = document.getElementById('monto_pension');
        if (mp && (!mp.value || mp.value === '0')) mp.value = precio.toFixed(2);
        const mm = document.getElementById('monto_matricula');
        if (mm && (!mm.value || mm.value === '0')) mm.value = (precio / 2).toFixed(2);
    }
</script>
@endpush
@endsection