@extends('adminlte::page')

@section('content_header')
    <h1>Listado del personal {{ $tipo }}</b></h1>
    <hr>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Personal {{ $tipo }} registrados</h3>

                    <div class="card-tools">
                        <a href="{{ url('/admin/personal/create/' . $tipo) }}" class="btn btn-primary">Crear nuevo
                            personal</a>
                    </div>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Nro</th>
                                <th style="text-align: center">Rol</th>
                                <th style="text-align: center">Apellidos y nombres</th>
                                <th style="text-align: center">Carnet de identidad</th>
                                <th style="text-align: center">Teléfono</th>
                                <th style="text-align: center">Profesión</th>
                                <th style="text-align: center">Correo</th>
                                <th style="text-align: center">Estado</th>
                                <th style="text-align: center">Fotografía</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($personals as $personal)
                                <tr>
                                    <td style="text-align:center"> {{ $loop->iteration }}</td>
                                    <td>{{ $personal->usuario->roles->pluck('name')->implode(',') }}</td>
                                    <td>{{ $personal->apellidos }} {{ $personal->nombres }}</td>
                                    <td>{{ $personal->ci }}</td>
                                    <td>{{ $personal->telefono }}</td>
                                    <td>{{ $personal->profesion }}</td>
                                    <td>{{ $personal->usuario->email }}</td>
                                    <td style="text-align:center">{{ $personal->usuario->estado }}</td>
                                    <td style="text-align: center">
                                        <img src="{{ url($personal->foto) }}" width=100px;" alt="Foto de perfil" </td>
                                    <td>
                                        <div class="row d-flex justify-content-center">
                                                <form action="{{ url('/admin/personal/' . $personal->id . '/inactivar') }}"
                                                    method="POST" style="margin-left: 3px;">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="submit" class="btn btn-danger btn-sm"
                                                        title="Inactivar usuario">
                                                        <i class="fas fa-user-check"></i> Inactivar
                                                    </button>
                                                </form>
                                                <form action="{{ url('/admin/personal/' . $personal->id . '/activar') }}"
                                                    method="POST" style="margin-left: 3px;">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="submit" class="btn btn-secondary btn-sm"
                                                        title="Activar usuario">
                                                        <i class="fas fa-user-check"></i> Activar
                                                    </button>
                                                </form>
                                            <a href="{{ url('/admin/personal/' . $personal->id . '/formaciones') }}"
                                                class="btn btn-warning btn-sm"><i class="fas fa-tasks"></i>Formaciones</a>
                                            <a href="{{ url('/admin/personal/show/' . $personal->id) }}"
                                                class="btn btn-info btn-sm"><i class="fas fa-eye"></i>Mostrar</a>
                                            <a href="{{ url('/admin/personal/' . $personal->id . '/edit') }}"
                                                class="btn btn-success btn-sm"><i class="fas fa-pencil-alt"></i>Editar</a>

                                            <form action="{{ url('admin/personal/' . $personal->id) }}" method="post"
                                                id="miFormulario{{ $personal->id }}">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                    onclick="preguntar{{ $personal->id }}(event)">
                                                    <i class="fas fa-trash"></i> Eliminar
                                                </button>
                                            </form>
                                        </div>

                                        <script>
                                            function preguntar{{ $personal->id }}(event) {
                                                event.preventDefault();

                                                Swal.fire({
                                                    title: '¿Desea eliminar este registro?',
                                                    text: 'Si lo elimina No podrá revertir esta acción',
                                                    icon: 'question',
                                                    showDenyButton: true,
                                                    confirmButtonText: 'Eliminar',
                                                    confirmButtonColor: '#a5161d',
                                                    denyButtonColor: '#270a0a',
                                                    denyButtonText: 'Cancelar',
                                                }).then((result) => {
                                                    if (result.isConfirmed) {
                                                        // JavaScript puro para enviar el formulario
                                                        document.getElementById('miFormulario{{ $personal->id }}').submit();
                                                    }
                                                });
                                            }
                                        </script>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col-md-12 -->
    </div>
@stop

@section('css')
    <style>
        #example1_wrapper .dt-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15px;
            background-color: transparent;
            box-shadow: none;
            border: none;
        }

        #example1_wrapper .btn {
            color: #fff;
            border-radius: 4px;
            padding: 5px 15px;
            font-size: 14px;
        }

        .btn-danger {
            background-color: #dc3545;
            border: none;
        }

        .btn-success {
            background-color: #28a745;
            border: none;
        }

        .btn-info {
            background-color: #17a2b8;
            border: none;
        }

        .btn-warning {
            background-color: #ffc107;
            border: none;
        }

        .btn-default {
            background-color: #6e7176;
            border: none;
        }
    </style>
@stop

@section('js')
    @if (session('mensaje'))
        <script>
            Swal.fire({
                title: {!! json_encode(session('titulo') ?? (session('icono') == 'success' ? '¡Éxito!' : '¡Error!')) !!},
                text: {!! json_encode(session('mensaje')) !!},
                icon: "{{ session('icono') }}",
                confirmButtonText: 'Aceptar',
                confirmButtonColor: "{{ session('icono') == 'success' ? '#28a745' : '#d33' }}"
            });
        </script>
    @endif

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: `{!! implode('<br>', $errors->all()) !!}`,
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                });
            @elseif (session('mensaje'))
                Swal.fire({
                    icon: '{{ strtolower(session('icono')) }}',
                    title: '{{ session('mensaje') }}',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                });
            @endif

            $('#example1').DataTable({
                "pageLength": 5,
                "language": {
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Administrativo",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Administrativo",
                    "infoFiltered": "(filtrado de _MAX_ total Administrativo)",
                    "lengthMenu": "Mostrar _MENU_ Administrativo",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "No se encontraron resultados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                buttons: [{
                        text: '<i class="fas fa-copy"></i> COPIAR',
                        extend: 'copy',
                        className: 'btn btn-default'
                    },
                    {
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        extend: 'pdf',
                        className: 'btn btn-danger',
                        customize: function(doc) {
                            doc.pageOrientation = 'landscape';
                            doc.pageSize = 'A4';
                            var colCount = doc.content[1].table.body[0].length;
                            let widths = [];
                            for (let i = 0; i < colCount; i++) {
                                widths.push(i === 0 ? 18 : '*');
                            }
                            doc.content[1].table.widths = widths;
                            doc.styles.tableHeader.fontSize = 7;
                            doc.defaultStyle.fontSize = 6;
                            doc.pageMargins = [5, 5, 5, 5];
                        }
                    },
                    {
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        extend: 'csv',
                        className: 'btn btn-info'
                    },
                    {
                        text: '<i class="fas fa-file-excel"></i> EXCEL',
                        extend: 'excel',
                        className: 'btn btn-success'
                    },
                    {
                        text: '<i class="fas fa-print"></i> IMPRIMIR',
                        extend: 'print',
                        className: 'btn btn-warning'
                    }
                ]
            }).buttons().container().appendTo('#example1_wrapper .row:eq(0)');
        });
    </script>

    @include('footer')
@stop