@extends('layouts.app')

@section('titulo', 'Docentes')
@section('subtitulo', 'Plana docente, contratos y especialidades')

@php
    $estadoClases = [
        'activo'    => 'bg-emerald-50 text-emerald-600',
        'inactivo'  => 'bg-slate-100 text-slate-500',
        'licencia'  => 'bg-amber-50 text-amber-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, especialidad o código..."
               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('docentes.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 docente
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('docentes.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\Docente::ESTADOS as $estado)
        <a href="{{ route('docentes.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">Docente</th>
                    <th class="px-6 py-4 font-semibold">Especialidad</th>
                    <th class="px-6 py-4 font-semibold">Contrato</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 ($docentes as $d)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-4">
                            <a href="{{ route('docentes.show', $d) }}" 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">{{ $d->iniciales() }}</div>
                                <div>
                                    <p class="font-semibold text-slate-800 group-hover:text-brand-600 transition">{{ $d->nombre_completo }}</p>
                                    <p class="text-xs text-slate-400 font-mono">{{ $d->codigo }} · {{ $d->profesion }}</p>
                                </div>
                            </a>
                        </td>
                        <td class="px-6 py-4 text-slate-600">{{ $d->especialidad ?? '—' }}</td>
                        <td class="px-6 py-4 text-slate-600">{{ $d->etiquetaContrato() }}</td>
                        <td class="px-6 py-4">
                            <p class="text-slate-600">{{ $d->telefono ?? '—' }}</p>
                            <p class="text-xs text-slate-400">{{ $d->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[$d->estado] ?? 'bg-slate-100 text-slate-600' }}">{{ $d->estado }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('docentes.show', $d) }}" title="Ver" 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('docentes.edit', $d) }}" 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 docentes @if($q || $estadoActual)con esos filtros @endif
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

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