@extends('layouts.layouts')

@section('title', 'Gestión de Usuarios')

@section('styles')
<style>
    .container-custom {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    .card-form {
        background-color: #fff;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>
@endsection

@section('mainPage')
<div class="container-custom">
    <div class="card-form">
    <div class="row">
        <div class="col-md-12">
            <h2>Gestión de Usuarios</h2>
            <p>Lista de usuarios registrados en el sistema.</p>
            <hr>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            {{-- Formulario de búsqueda --}}
            <form action="{{ route('users.index') }}" method="GET" class="d-flex">
                <input type="text" name="search" class="form-control me-2" placeholder="Buscar por nombre, email o rol..." value="{{ request('search') }}">
                <button class="btn btn-outline-secondary" type="submit">Buscar</button>
            </form>
        </div>
        <div class="col-md-6 text-end">
            {{-- Botón para crear un nuevo usuario --}}
            <a href="{{ route('users.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Crear Nuevo Usuario
            </a>
        </div>
    </div>

    @if($usuarios->isEmpty() && request('search'))
    <div class="alert alert-warning" role="alert">
        No se encontraron usuarios que coincidan con la búsqueda.
    </div>
    @elseif($usuarios->isEmpty())
    <div class="alert alert-info" role="alert">
        No hay usuarios registrados en el sistema.
    </div>
    @else
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="bg-primary text-white">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Email</th>
                    <th scope="col">Rol</th>
                    <th scope="col">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($usuarios as $usuario)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $usuario->name }}</td>
                    <td>{{ $usuario->email }}</td>
                    <td>{{ ucfirst($usuario->role) }}</td>
                    <td>
                        {{-- Enlaces de acción (editar y eliminar) --}}
                        <a href="{{ route('users.edit', $usuario->id) }}" class="btn btn-sm btn-outline-info" title="Editar">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('users.destroy', $usuario->id) }}" method="POST" class="d-inline form-eliminar">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Paginación --}}
    <div class="d-flex justify-content-center mt-4">
        {{ $usuarios->links('pagination::bootstrap-5') }}
    </div>
    @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const forms = document.querySelectorAll('.form-eliminar');
        forms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault(); // Evita que el formulario se envíe de forma tradicional

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "No podrás revertir esta acción.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Si el usuario confirma, envía el formulario
                        this.submit();
                    }
                });
            });
        });
    });
</script>
@endsection