@extends('layouts.app')

@section('title', 'Permisos')

@section('css')
    <style>
        #permisos thead {
            background-color: #343a40;
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Lista de Permisos</h4>
            <div class="align-self-center">
                <a href="{{ route('permisos.create') }}" class="btn btn-success btn-sm">Nuevo Permiso</a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="permisos" class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>Nombre</th>
                            <th>Descripcion</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            $('#permisos').DataTable({
                processing: true,
                serverSide: true,
                ajax: URLs + '/mostrar-permisos',
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'description', name: 'description' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                responsive: true,
                autoWidth: false,
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado - disculpa",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No se encuentran registros",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });
        });

        // Evento para el boton eliminar
        $(document).on('click', '.btn-eliminar', function (e) {
            e.preventDefault(); // Prevenir el envío del formulario por defecto
            var form = $(this).closest('form'); // Obtener el formulario más cercano al botón de eliminar
            Swal.fire({
                title: "Estas seguro?",
                text: "Revisa bien el registro seleccionado!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Si, eliminar!",
                cancelButtonText: "Cancelar"
            }).then((result) => {
                if (result.isConfirmed) {
                    form.unbind('submit').submit(); // Enviar el formulario específico
                }
            });
        });

        // Evento para el boton de restaurar registros
        $(document).on('click', '.btn-restaurar', function (e) {
            e.preventDefault(); // Prevenir el envío del formulario por defecto
            var url = $(this).attr('href');  // Obtener el formulario más cercano al botón de restaurar
            Swal.fire({
                title: "¿Estás seguro?",
                text: "¡El registro será restaurado!",
                icon: "info",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Sí, restaurar!",
                cancelButtonText: "Cancelar"
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url; // Enviar el formulario específico
                }
            });
        });
    </script>
@endsection