@extends('layouts.menu')

@section('tittle')
    SOLICITUDES DE TOKEN
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-end">
                        <div class="col">
                            <h3 class="page-title">SOLICITUDES DE TOKEN</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date1 }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-info btn-sm text-white w-100"
                                id="btnReload">Recargar</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="misSolicitudesToken" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Token Solicitado desde Sucursal</th>
                                    <th class="text-center">FK Solicitud</th>
                                    <th class="text-center">Token</th>
                                    <th class="text-center">Usado</th>
                                    <th class="text-center">Tipo Token</th>
                                    <th class="text-center">Modulo</th>
                                    <th class="text-center">Fecha Hora Solicitado</th>
                                    <th class="text-center">Comentario</th>
                                    <th class="text-center">Autorizado/Rechazado Por</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <div class="modal fade" id="modalDetallesToken" tabindex="-1" aria-labelledby="modalDetallesTokenLabel"
        aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color: rgb(116, 0, 0)">
                    <h5 class="modal-title" id="modalDetallesTokenLabel" style="color: #fff">DETALLES SOLICITUD</h5>
                    <button type="button" class="btn-close close_modal_detalle_solicitud" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body">


                    <div class="row">
                        <div class="table-responsive">

                            <table id="detailsTableToken"
                                class="table rounded-4 table-sm table-bordered table-striped align-middle mb-0 bg-white table-principal"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Documento</th>
                                        <th class="text-center"># Mov. Original</th>
                                        <th class="text-center">Cantidad</th>
                                        <th class="text-center">Descripcion</th>
                                        <th class="text-center">Valor</th>
                                        <th class="text-center">Observaciones</th>
                                        <th class="text-center">Tabla</th>
                                        <th class="text-center">Revisado</th>
                                        <th class="text-center">Revisado Por</th>
                                    </tr>
                                </thead>

                                <tbody>

                                </tbody>
                            </table>

                        </div>
                    </div>


                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-disabled close_modal_detalle_solicitud"
                        data-bs-dismiss="modal">Cerrar</button>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brftlip";

            $('#tokenMenu, #misTokensSolicitados').addClass('active');

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2500,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var misSolicitudesToken;

            $('#btnReload').click(function(e) {
                e.preventDefault();

                misSolicitudesToken.ajax.reload(null, false);
            });

            function getmisSolicitudesTokens() {
                date1 = $('#periodoInicio').val();
                date2 = $('#periodoFinal').val();

                $("#misSolicitudesToken").DataTable().clear().destroy();

                misSolicitudesToken = $("#misSolicitudesToken").DataTable({
                    orderCellsTop: true,
                    deferRender: true,
                    scrollX: true,
                    scrollY: '400px',
                    scrollCollapse: true,
                    pageLength: 50,
                    initComplete: function() {
                        misSolicitudesToken.columns.adjust().draw();
                    },
                    buttons: [{
                            extend: 'excel',
                            text: '<i class="fas fa-file-excel"></i>',
                            titleAttr: 'Excel',
                            className: 'btn btn-success',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="fas fa-file-pdf"></i>',
                            titleAttr: 'PDF',
                            className: 'btn btn-danger',
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print"></i>',
                            titleAttr: 'Imprimir',
                            className: 'btn btn-null',
                        }
                    ],
                    ajax: {
                        url: "http://3.230.160.184:81/API/token/get/mis/solicitud",
                        method: "POST",
                        data: {
                            user_id: "{{ Session::get('userName') }}",
                            date1: date1,
                            date2: date2
                        },
                        dataSrc: "data",
                    },
                    language: {
                        url: "{{ URL::asset('json/es-ES.json') }}",
                    },
                    dom: buttons,
                    columns: [{
                            data: 'id_solicitud'
                        },
                        {
                            data: 'sucursal',
                            className: 'text-wrap'
                        },
                        {
                            data: 'fk_solicitud'
                        },
                        {
                            data: 'token'
                        },
                        {
                            data: 'usado_value',
                            render: function(data, type, full, meta) {

                                var badge = "";

                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">Sin Utilizar</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">Utilizado</span>';
                                }

                                return badge;
                            }
                        },
                        {
                            data: 'tipo_token'
                        },
                        {
                            data: 'modulo'
                        },
                        {
                            data: 'fecha_hora_solicitud',
                            className: 'text-wrap'
                        },
                        {
                            data: 'comentario',
                            className: 'text-wrap'
                        },
                        {
                            data: 'autorizado_rechazado_por',
                            className: 'text-wrap'
                        },
                        {
                            data: 'estado',
                            render: function(data, type, full, meta) {

                                var badge = "";

                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-info">Solicitado</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">Autorizado</span>';
                                } else if (data == "2") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">Rechazado</span>';
                                } else if (data == "3") {
                                    badge +=
                                        '<span class="badge badge-pill badge-disabled" style="background-color: grey;">Cancelada</span>';
                                }

                                return badge;
                            }
                        },

                        {
                            data: null,
                            render: function(data, type, full, meta) {

                                var badge = "";

                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info btn-sm btnVerDetallesHistorial text-white' data-id='" +
                                    data.id_solicitud +
                                    "' title='Ver Detalles'><i class='material-icons'>visibility</i></button></div></div>";

                                return badge;
                            }
                        },
                    ],
                    order: ["0", "desc"]
                });
            }
            getmisSolicitudesTokens();

            $('.pickedDate').change(function(e) {
                e.preventDefault();

                getmisSolicitudesTokens();
            });


            $(document).on('click', '.btnVerDetalles, .btnVerDetallesHistorial', function() {
                id_solicitud = $(this).data('id');
                var history = 0;
                $('#rechazarBtn').css('visibility', 'visible');
                $('#rechazarBtn').css('height', 'auto');

                if ($(this).hasClass('btnVerDetallesHistorial')) {
                    history = 1;
                    $('#rechazarBtn').css('visibility', 'hidden');
                    $('#rechazarBtn').css('height', '0');
                }

                $('#id_hidden').val(id_solicitud);

                $("#detailsTableToken").DataTable().clear().destroy();

                detailsTableToken = $("#detailsTableToken").DataTable({
                    orderCellsTop: true,
                    deferRender: true,
                    scrollX: true,
                    scrollY: '400px',
                    scrollCollapse: true,
                    pageLength: 50,
                    buttons: [{
                            extend: 'excel',
                            text: '<i class="fas fa-file-excel"></i>',
                            titleAttr: 'Excel',
                            className: 'btn btn-success',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="fas fa-file-pdf"></i>',
                            titleAttr: 'PDF',
                            className: 'btn btn-danger',
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print"></i>',
                            titleAttr: 'Imprimir',
                            className: 'btn btn-null',
                        }
                    ],
                    ajax: {
                        url: "http://3.230.160.184:81/API/token/get/details/solicitud",
                        method: "POST",
                        data: {
                            id_solicitud: id_solicitud
                        },
                        dataSrc: "data",
                    },
                    language: {
                        url: "{{ URL::asset('json/es-ES.json') }}",
                    },
                    dom: 'rtlip',
                    columns: [{
                            data: 'id_detalle'
                        },
                        {
                            data: 'documento',
                            className: 'text-wrap'
                        },
                        {
                            data: 'id_mov_original'
                        },
                        {
                            data: 'cantidad',
                            className: 'text-center'
                        },
                        {
                            data: 'descripcion',
                            className: 'text-wrap'
                        },
                        {
                            data: 'valor',
                            className: 'text-wrap'
                        },
                        {
                            data: 'observacion',
                            className: 'text-wrap'
                        },
                        {
                            data: 'tabla',
                            className: 'text-wrap'
                        },
                        {
                            data: 'revisado',
                            className: 'text-center',
                            render: function(data, type, row) {
                                var badge = "";

                                if (history == 1) {
                                    if (data == "1") {
                                        badge +=
                                            "<span class='badge badge-pill badge-success'>Revisado</span>";
                                    } else if (data == "0") {
                                        badge +=
                                            "<span class='badge badge-pill badge-danger'>Sin Revisar</span>";
                                    }
                                } else {
                                    badge +=
                                        '<input type="checkbox" class="revisar-checkbox" ' +
                                        (data == 1 ? 'checked disabled' : '') +
                                        ' data-detalle-id="' + row.id_detalle + '">';
                                }

                                return badge;
                            }
                        },
                        {
                            data: 'revisado_por'
                        }
                    ],
                    initComplete: function() {
                        detailsTableToken.columns.adjust().draw();
                    }
                });

                $('#modalDetallesToken').modal('show');

                $('#modalDetallesToken').on('shown.bs.modal', function() {
                    detailsTableToken.columns.adjust().draw();
                });
            });





        });
    </script>
@endsection