@extends('layouts.app')

@section('content')
<div class="container py-4">
    {{-- Encabezado del Panel --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-0">
                <i class="bi bi-people-fill text-primary me-2"></i>Gestión de Usuarios
            </h2>
            <p class="text-muted small mb-0">Administre los accesos para el personal de COIRCO y el Jurado.</p>
        </div>
        <a href="{{ route('admin.usuarios.create') }}" class="btn btn-dark shadow-sm" style="border-bottom: 3px solid #C9A050;">
            <i class="bi bi-person-plus-fill me-1"></i> Nuevo Usuario
        </a>
    </div>

    {{-- Alertas de Feedback --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm mb-4">
            <i class="bi bi-check-circle me-2"></i> {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger border-0 shadow-sm mb-4">
            <i class="bi bi-exclamation-triangle me-2"></i> {{ session('error') }}
        </div>
    @endif

    {{-- Tabla de Usuarios --}}
    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tablaUsuarios">
                    <thead class="bg-light">
                        <tr>
                            <th class="border-0">Usuario</th>
                            <th class="border-0">Rol</th>
                            <th class="border-0">Correo Electrónico</th>
                            <th class="border-0">Fecha de Alta</th>
                            <th class="border-0 text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($usuarios as $u)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-soft-primary p-2 me-3 text-primary bg-light">
                                        <i class="bi bi-person fs-5"></i>
                                    </div>
                                    <div class="fw-bold">{{ $u->name }}</div>
                                </div>
                            </td>
                            <td>
                                @if($u->role === 'admin')
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2">ADMIN</span>
                                @elseif($u->role === 'jurado')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">JURADO</span>
                                @else
                                    <span class="badge bg-light text-dark border px-3 py-2">{{ strtoupper($u->role ?? 'S/R') }}</span>
                                @endif
                            </td>
                            <td>{{ $u->email }}</td>
                            <td class="text-muted">
                                {{-- Solución al error format() on null --}}
                                <i class="bi bi-calendar3 me-1"></i>
                                {{ $u->created_at ? $u->created_at->format('d/m/Y') : 'Sin fecha' }}
                            </td>
                            <td class="text-end">
                                <div class="btn-group shadow-sm">
                                    <a href="{{ route('admin.usuarios.edit', $u->id) }}" class="btn btn-white btn-sm border" title="Editar">
                                        <i class="bi bi-pencil text-dark"></i>
                                    </a>
                                    
                                    {{-- El administrador no puede borrarse a sí mismo --}}
                                    @if(Auth::id() !== $u->id)
                                        <form action="{{ route('admin.usuarios.destroy', $u->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Está seguro de eliminar a este usuario? Perderá el acceso de inmediato.')">
                                            @csrf 
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-white btn-sm border text-danger" title="Eliminar">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    @else
                                        <button class="btn btn-white btn-sm border text-muted" disabled title="No puedes eliminarte">
                                            <i class="bi bi-shield-lock"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Script para inicializar DataTables (opcional pero recomendado) --}}
<script>
    $(document).ready(function() {
        $('#tablaUsuarios').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
            },
            pageLength: 10,
            responsive: true,
            dom: '<"d-flex justify-content-between mb-3"f>rt<"d-flex justify-content-between mt-3"ip>',
        });
    });
</script>

<style>
    .bg-primary-subtle { background-color: #e7f1ff; }
    .bg-success-subtle { background-color: #e6fcf5; }
    .btn-white { background: #fff; }
    .btn-white:hover { background: #f8f9fa; }
    .dataTables_filter input {
        border-radius: 20px;
        padding: 5px 15px;
        border: 1px solid #ddd;
        outline: none;
    }
    .dataTables_filter input:focus {
        border-color: #C9A050;
        box-shadow: 0 0 0 0.2rem rgba(201, 160, 80, 0.25);
    }
</style>
@endsection