@extends('adminlte::page')

@section('title', 'Usuarios')

@section('css')
    <style>
        /* Capa de bloqueo para la sincronización */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .table-vcenter td {
            vertical-align: middle !important;
        }
    </style>
@stop

@section('content_header')
    <div class="container-fluid">
        {{-- Mensaje de Éxito --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="icon fas fa-check-circle mr-2"></i>
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Mensaje de Error --}}
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                <i class="icon fas fa-exclamation-triangle mr-2"></i>
                {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        {{-- Nivel 1: Migas de pan --}}
        <div class="row">
            <div class="col-12">
                @include('components.breadcrumbs', ['items' => ['Usuarios' => 'users']])
            </div>
        </div>

        {{-- Nivel 2: Título y Acciones --}}
        <div class="row align-items-center justify-content-between mt-2">
            <div class="col-auto">
                <h1 class="m-0 text-dark">
                    <i class="fas fa-users mr-2 text-primary"></i>Gestión de Usuarios
                </h1>
            </div>
            <div class="col-auto d-flex">
                {{-- Formulario Sincronización WP --}}
                <form action="{{ route('users.sync_wp') }}" method="POST" id="sync-wp-form" class="mr-2">
                    @csrf
                    <button type="submit" class="btn btn-danger shadow-sm">
                        <i class="fas fa-sync-alt mr-1"></i> Sincronizar desde WordPress
                    </button>
                </form>

                {{-- Botón Crear Nuevo --}}
                <a href="{{ route('users.create') }}" class="btn btn-success shadow-sm">
                    <i class="fas fa-plus-circle mr-1"></i> Crear Nuevo Usuario
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div id="loading-overlay" style="display: none;">
    <div class="spinner-border text-primary" role="status" style="width: 3.5rem; height: 3.5rem;">
        <span class="sr-only">Cargando...</span>
    </div>
    <h4 class="mt-4 text-dark font-weight-bold">Sincronización Bidireccional</h4>
    <p class="text-muted text-center">
        Estamos creando usuarios y vinculando IDs en WordPress.<br>
        Por favor, no cierre la ventana.
    </p>
</div>
<div class="card shadow-sm">
    <div class="card-body">
        <table id="users-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th>ID</th>
                    <th class="no-export no-sort">Foto</th>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Rol</th>
                    <th>Estado</th>
                    <th class="no-export no-sort">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td class="text-center">
                        <img src="{{ asset('storage/avatars/' . $user->avatar) }}" 
                             class="img-circle elevation-1" style="width: 35px; height: 35px; object-fit: cover;">
                    </td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td><span class="badge badge-info">{{ strtoupper($user->role) }}</span></td>
                    <td>{!! $user->active ? '<span class="badge badge-success">Activo</span>' : '<span class="badge badge-warning">Inactivo</span>' !!}</td>
                    <td>
                        <div class="btn-group">
                            <a href="{{ route('users.edit', $user) }}" class="btn btn-xs btn-default text-primary mx-1 shadow-sm" title="Editar">
                                <i class="fa fa-lg fa-fw fa-pen"></i>
                            </a>
                            <form action="{{ route('users.destroy', $user) }}" method="POST" class="d-inline delete-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-xs btn-default text-danger mx-1 shadow-sm" title="Eliminar">
                                    <i class="fa fa-lg fa-fw fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#users-table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "dom": '<"row"<"col-md-12"B>>' + // Fila de botones arriba
                '<"row mt-2"<"col-md-6"l><"col-md-6"f>>' + // Paginación y Buscador
                'rt' + 
                '<"row"<"col-md-6"i><"col-md-6"p>>', // Info y Páginas
            "buttons": [
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel"></i> Excel',
                    className: 'btn btn-success btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fas fa-file-csv"></i> CSV',
                    className: 'btn btn-info btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf"></i> PDF',
                    className: 'btn btn-danger btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print"></i> Imprimir',
                    className: 'btn btn-secondary btn-sm',
                    exportOptions: { columns: ':not(.no-export)' }
                }
            ],
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
            },
        });

        // Mostrar pantalla de carga al sincronizar
        $('#sync-wp-form').on('submit', function() {
            $('#loading-overlay').fadeIn(300);
            $(this).find('button').attr('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> Sincronizando...');
        });

        // Confirmación de eliminación simple
        $('.delete-form').on('submit', function(e) {
            e.preventDefault();
            if (confirm('¿Estás seguro de que deseas eliminar este usuario?')) {
                this.submit();
            }
        });
    });
</script>
@stop