@extends('adminlte::page')

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

@section('plugins.Datatables', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-shield-alt text-primary"></i> Roles</h1>
        @can('roles.create')
            <a href="{{ route('roles.create') }}" class="btn btn-primary btn-premium" title="Crear Nuevo Rol">
                <i class="fas fa-plus"></i> Nuevo Rol
            </a>
        @endcan
    </div>
@stop

@section('content')
    {{-- PANELES KPI CLICABLES --}}
    <div class="row mb-3" id="metricas-container">
        <div class="col-lg-4 col-12">
            <div class="filter-box" data-filter="all" style="cursor: pointer;">
                <x-data.info-box label="Total Roles" value="..." id="stat-total" icon="fas fa-shield-alt" color="primary" />
            </div>
        </div>
        <div class="col-lg-4 col-6">
            <div class="filter-box" data-filter="admin" style="cursor: pointer; opacity: 0.6;">
                <x-data.info-box label="Administrativos" value="..." id="stat-admin" icon="fas fa-user-shield" color="success" />
            </div>
        </div>
        <div class="col-lg-4 col-6">
            <div class="filter-box" data-filter="operativo" style="cursor: pointer; opacity: 0.6;">
                <x-data.info-box label="Operativos" value="..." id="stat-operativo" icon="fas fa-user-cog" color="info" />
            </div>
        </div>
    </div>

    <x-ui.card shadow="shadow-sm">
        <x-slot:header>
            <x-ui.card-header title="Listado de Roles" icon="fas fa-list text-primary" />
        </x-slot:header>

        <div class="table-responsive p-0">
            <table id="roles-table" class="table table-hover w-100 mb-0">
                <thead class="bg-light">
                    <tr>
                        <th>ID</th>
                        <th>Nombre del Rol</th>
                        <th>Usuarios Asignados</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </x-ui.card>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
    <style>
        .filter-box { transition: all 0.2s ease-in-out; }
        .filter-box:hover { transform: translateY(-2px); }
    </style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        let currentFilter = 'all';

        // Cargar métricas
        $.get('/api/v1/roles/stats', function(res) {
            $('#stat-total .info-box-number').text(res.total);
            $('#stat-admin .info-box-number').text(res.admin);
            $('#stat-operativo .info-box-number').text(res.operativo);
        });

        // DataTable
        const table = $('#roles-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/api/v1/roles',
                data: function(d) { d.filtro = currentFilter; }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'users_count', name: 'users_count', searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' }
            ],
            order: [[0, 'asc']],
            language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json' },
            drawCallback: function() {
                // Attach delete logic or tooltips here if necessary
            }
        });

        // Filtros por KPI
        $('.filter-box').on('click', function() {
            currentFilter = $(this).data('filter');
            $('.filter-box').css('opacity', '0.6');
            $(this).css('opacity', '1');
            table.ajax.reload();
        });

        // Delete action handling
        $('#roles-table').on('click', '.btn-delete-action', function() {
            const url = $(this).data('url');
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.delete(url)
                        .then(res => {
                            Swal.fire('¡Eliminado!', res.data.message, 'success');
                            table.ajax.reload();
                        })
                        .catch(err => {
                            Swal.fire('Error', err.response?.data?.message || 'Error al eliminar', 'error');
                        });
                }
            });
        });
    });
</script>
@stop