@extends('layouts.app')

@section('titulo', 'Nuevo cargo')
@section('subtitulo', 'Genera una cuota, pensión o concepto de cobro')

@section('contenido')
<div class="max-w-2xl">
    <a href="{{ route('pagos.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 pagos
    </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('pagos.store') }}" class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-8 space-y-4">
        @csrf
        <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>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Concepto <span class="text-red-500">*</span></label>
                <select name="concepto" required class="{{ $in }}">
                    @foreach (['matricula' => 'Matrícula', 'pension' => 'Pensión', 'materiales' => 'Materiales', 'examen' => 'Examen', 'certificado' => 'Certificado', 'otro' => 'Otro'] as $val => $lab)
                        <option value="{{ $val }}" @selected(old('concepto', $pago->concepto) == $val)>{{ $lab }}</option>
                    @endforeach
                </select>
            </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: Pensión Julio, Cuota 3" class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Monto (S/) <span class="text-red-500">*</span></label>
                <input type="number" step="0.01" min="0.01" name="monto" value="{{ old('monto') }}" required class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Fecha de vencimiento</label>
                <input type="date" name="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}" class="{{ $in }}">
            </div>
            <div class="sm:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Observaciones</label>
                <textarea name="observaciones" rows="2" class="{{ $in }}">{{ old('observaciones') }}</textarea>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
            <a href="{{ route('pagos.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">
                Generar cargo
            </button>
        </div>
    </form>
</div>
@endsection