@extends('layouts.app')
@section('title', 'Roles')

@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 align-items-center">
                <div class="col-sm-6">
                    <h1 class="mb-3" style="font-weight:700; color:#0b5ed7;">
                        <i class="fas fa-user-shield"></i> Gestión de Roles
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}"><i class="fas fa-home"></i></a></li>
                        <li class="breadcrumb-item active">Roles</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <div class="container-fluid">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                <div class="ml-auto">
                    @can('crear-rol')
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalCrearRol">
                            <i class="fa fa-plus mr-1"></i> Nuevo Rol
                        </button>
                    @endcan
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive" style="position: relative; min-height: 150px;">
                    <table id="tablaRoles" class="table table-striped table-bordered dt-responsive nowrap"
                        style="width: 100%;">
                        <thead>
                            <tr class="table-info text-center">
                                <th></th>
                                <th class="text-center">Acciones</th>
                                <th>#</th>
                                <th>Nombre del Rol</th>
                                <th>Permisos Asignados</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal crear --}}
    @can('crear-rol')
        @include('roles.create')
    @endcan

    {{-- Contenedor para modales AJAX --}}
    <div id="modal-container-roles"></div>

@endsection

@section('scripts')
    @parent

    <script>
        $(document).ready(function() {

            if (typeof initCrudModals === 'function') {
                initCrudModals(
                    'Rol',
                    {{ $flashHasModal ? 'true' : 'false' }},
                    {{ $flashHasValidation ? 'true' : 'false' }},
                    '{{ $flashModal }}'
                );
            }
            @if ($flashHasModal && $flashModal === 'modalCrearRol' && $flashHasValidation)
                $('#modalCrearRol').one('shown.bs.modal', function() {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Error!',
                        text: '{{ addslashes($flashValidation) }}',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Entendido'
                    });
                });
            @endif
            @if (session('modal') && str_starts_with(session('modal'), 'modalEditarRol'))
                @php $idRol = str_replace('modalEditarRol', '', session('modal')); @endphp
                $.get('{{ url('roles') }}/{{ $idRol }}/modal-edit', function(html) {
                    $('#modal-container-roles').html(html);
                    $('#modalEditarRol{{ $idRol }}').modal('show');
                    @if (session('validation_error'))
                        $('#modalEditarRol{{ $idRol }}').one('shown.bs.modal', function() {
                            Swal.fire({
                                icon: 'error',
                                title: '¡Error!',
                                text: '{{ addslashes(session('validation_error')) }}',
                                confirmButtonColor: '#d33',
                                confirmButtonText: 'Entendido'
                            });
                        });
                    @endif
                });
            @endif

            @if (session('validation_error') && !session('modal'))
                Swal.fire({
                    icon: 'error',
                    title: '¡Error!',
                    text: '{{ addslashes(session('validation_error')) }}',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Entendido'
                });
            @endif

            // DataTable con Yajra server-side
            var table = $('#tablaRoles').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('roles.datatable') }}',
                    error: function(xhr) {
                        console.error('Error DataTable:', xhr.responseText);
                    }
                },
                responsive: true,
                autoWidth: false,
                order: [],
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                dom: '<"d-flex justify-content-between align-items-center mb-3"lf>rt<"d-flex justify-content-between align-items-center mt-3"ip>',
                language: {
                    processing: '<div class="dt-custom-processing"><span></span><span></span><span></span></div>',
                    search: "Buscar:",
                    lengthMenu: "Mostrar _MENU_ registros",
                    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 a 0 de 0 registros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    zeroRecords: "No se encontraron resultados",
                    emptyTable: "Ningún dato disponible",
                    paginate: {
                        first: "Primero",
                        previous: "Anterior",
                        next: "Siguiente",
                        last: "Último"
                    }
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        defaultContent: ''
                    },
                    {
                        data: 'acciones',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'nombre_fmt',
                        searchable: true
                    },
                    {
                        data: 'permisos_fmt',
                        searchable: false
                    },
                ],
                initComplete: function() {
                    $('.dataTables_filter input')
                        .addClass('form-control form-control-sm shadow-sm rounded-pill')
                        .attr('placeholder', 'Buscar...')
                        .attr('autocomplete', 'off')
                        .attr('type', 'search');
                    $('.dataTables_length select')
                        .addClass('form-select form-select-sm shadow-sm rounded-pill');
                    $('.dataTables_wrapper').addClass('pb-3');
                }
            });

            // EDITAR via AJAX
            $(document).on('click', '.btn-editar-rol', function() {
                var id = $(this).data('id');
                $('#modal-container-roles').html('');
                $.get('{{ url('roles') }}/' + id + '/modal-edit', function(html) {
                    $('#modal-container-roles').html(html);
                    $('#modalEditarRol' + id).modal('show');
                }).fail(function() {
                    Swal.fire('Error', 'No se pudo cargar el formulario', 'error');
                });
            });

            // VER via AJAX
            $(document).on('click', '.btn-ver-rol', function() {
                var id = $(this).data('id');
                $('#modal-container-roles').html('');
                $.get('{{ url('roles') }}/' + id + '/modal-show', function(html) {
                    $('#modal-container-roles').html(html);
                    $('#verRolModal' + id).modal('show');
                }).fail(function() {
                    Swal.fire('Error', 'No se pudo cargar los detalles', 'error');
                });
            });

        });
    </script>

    @if (session('validation_error'))
        @php session()->forget('validation_error'); @endphp
    @endif

@endsection