{{-- resources/views/cepros/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Lista de Centros Educativos')

@section('content')
    <div class="container">
        <h1 class="mb-4 text-white"><i class="bi bi-building me-2"></i> Lista de Centros Educativos</h1>

        @if (session('success'))
            <div class="alert alert-success shadow-sm mb-3">{{ session('success') }}</div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="{{ route('cepros.create') }}" class="btn btn-primary shadow-sm"><i class="bi bi-plus-circle me-2"></i> Crear Nuevo Centro</a>
            <form class="d-flex">
                <input class="form-control me-2 shadow-sm" type="search" placeholder="Buscar Centro..." aria-label="Search">
                <button class="btn btn-outline-light shadow-sm" type="submit"><i class="bi bi-search"></i></button>
            </form>
        </div>

        <div class="card bg-dark shadow-sm text-white">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-dark m-0 align-middle">
                        <thead>
                            <tr class="text-white">
                                <th scope="col">Nombre</th>
                                <th scope="col">Provincia</th>
                                <th scope="col">Nivel</th>
                                <th scope="col" class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($cepros as $cepro)
                                <tr>
                                    <td>{{ $cepro->nom_cepro }}</td>
                                    <td>{{ $cepro->prov_cepro ?? 'No especificado' }}</td>
                                    <td>{{ $cepro->nivel ?? 'No especificado' }}</td>
                                    <td class="text-end">
                                        <div class="d-flex justify-content-end">
                                            <a href="{{ route('cepros.show', $cepro) }}" class="btn btn-sm btn-outline-info shadow-sm me-1" title="Ver detalles"><i class="bi bi-eye"></i></a>
                                            <a href="{{ route('cepros.edit', $cepro) }}" class="btn btn-sm btn-outline-warning shadow-sm me-1" title="Editar centro"><i class="bi bi-pencil"></i></a>
                                            <form action="{{ route('cepros.destroy', $cepro) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" onclick="return confirm('¿Estás seguro de eliminar este centro educativo?')" title="Eliminar centro"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No hay centros educativos registrados.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-4 text-white">
            {{ $cepros->links() }} {{-- Muestra los enlaces de paginación --}}
        </div>
    </div>
@endsection