@extends('layouts.app')

@section('titulo', 'Estudiantes')
@section('subtitulo', 'Gestión de alumnos, matrículas y estados')

@php
    $estadoClases = [
        'preinscrito' => 'bg-blue-50 text-blue-600',
        'matriculado' => 'bg-emerald-50 text-emerald-600',
        'activo'      => 'bg-emerald-50 text-emerald-600',
        'egresado'    => 'bg-violet-50 text-violet-600',
        'suspendido'  => 'bg-amber-50 text-amber-600',
        'retirado'    => 'bg-red-50 text-red-600',
    ];
    $q = request('q');
    $estadoActual = request('estado');
@endphp

@section('contenido')
<div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-5">
    <form method="GET" class="relative flex-1 max-w-md">
        <svg class="h-5 w-5 text-slate-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
        @if ($estadoActual)<input type="hidden" name="estado" value="{{ $estadoActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar por nombre, código o documento..."
               class="w-full rounded-xl border border-slate-200 bg-white pl-11 pr-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100">
    </form>
    <a href="{{ route('estudiantes.create') }}"
       class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold px-4 py-2.5 shadow-lg shadow-brand-500/30 transition">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
        Nuevo estudiante
    </a>
</div>

{{-- Filtros por estado --}}
<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('estudiantes.index', array_filter(['q' => $q])) }}"
       class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ ! $estadoActual ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">
        Todos <span class="opacity-70">({{ $total }})</span>
    </a>
    @foreach (\App\Models\Estudiante::ESTADOS as $estado)
        <a href="{{ route('estudiantes.index', array_filter(['q' => $q, 'estado' => $estado])) }}"
           class="text-sm px-3.5 py-1.5 rounded-lg font-medium capitalize transition {{ $estadoActual === $estado ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">
            {{ $estado }} <span class="opacity-70">({{ $conteos[$estado] ?? 0 }})</span>
        </a>
    @endforeach
</div>

<div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-slate-400 border-b border-slate-100">
                    <th class="px-6 py-4 font-semibold">Estudiante</th>
                    <th class="px-6 py-4 font-semibold">Código</th>
                    <th class="px-6 py-4 font-semibold">Programa</th>
                    <th class="px-6 py-4 font-semibold">Contacto</th>
                    <th class="px-6 py-4 font-semibold text-center">Estado</th>
                    <th class="px-6 py-4 font-semibold text-right">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($estudiantes as $e)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-4">
                            <a href="{{ route('estudiantes.show', $e) }}" class="flex items-center gap-3 group">
                                <div class="h-10 w-10 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center text-xs font-bold">{{ $e->iniciales() }}</div>
                                <div>
                                    <p class="font-semibold text-slate-800 group-hover:text-brand-600 transition">{{ $e->nombre_completo }}</p>
                                    <p class="text-xs text-slate-400">{{ $e->tipo_documento }}: {{ $e->documento ?? '—' }}</p>
                                </div>
                            </a>
                        </td>
                        <td class="px-6 py-4 text-slate-500 font-mono text-xs">{{ $e->codigo }}</td>
                        <td class="px-6 py-4">
                            <p class="text-slate-700">{{ $e->programa ?? '—' }}</p>
                            <p class="text-xs text-slate-400">{{ $e->nivel }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-slate-600">{{ $e->telefono ?? '—' }}</p>
                            <p class="text-xs text-slate-400">{{ $e->email }}</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ $estadoClases[$e->estado] ?? 'bg-slate-100 text-slate-600' }}">{{ $e->estado }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('estudiantes.show', $e) }}" title="Ver ficha" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-brand-50 text-slate-500 hover:text-brand-600 flex items-center justify-center transition">
                                    <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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </a>
                                <a href="{{ route('estudiantes.edit', $e) }}" title="Editar" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-brand-50 text-slate-500 hover:text-brand-600 flex items-center justify-center transition">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-slate-400">
                        No se encontraron estudiantes @if($q || $estadoActual)con esos filtros @endif
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-5">{{ $estudiantes->links() }}</div>
@endsection