@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}

<style>
        .ui-autocomplete-input {
            font-size: 14px;
            padding-top: 0px !important;
            z-index: 1000;
            position: relative;
        }

        .ui-menu .ui-menu-item a {
            font-size: 12px;
        }

        .ui-autocomplete {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000 !important;
            float: left;
            display: none;
            min-width: 160px;
            width: 160px;
            padding: 4px 0;
            margin: 2px 0 0 0;
            list-style: none;
            background-color: #ffffff;
            border-color: #ccc;
            border-color: rgba(0, 0, 0, 0.2);
            border-style: solid;
            border-width: 1px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            *border-right-width: 2px;
            *border-bottom-width: 2px;
        }

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }

        .ui-menu-item>a.ui-corner-all {
            display: block;
            padding: 3px 15px;
            clear: both;
            font-weight: normal;
            line-height: 18px;
            color: #555555;
            white-space: nowrap;
            text-decoration: none;
        }

        .ui-state-hover,
        .ui-state-active {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            background-image: none;
        }

        input[type="date"].form-control-sm {
            padding: .25rem .5rem !important;
        }

        .btn-submit:hover {
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !important
        }

        .icon-large {
            font-size: 2em !important;
        }

        .btn-csv {
            background-color: #A0A0A0 !important;
            color: white !important;
            border-color: #A0A0A0 !important
        }
        .btn-excel {
            background-color: #00994C !important;
            color: white !important;
            border-color: #00994C !important
        }

        .results-table{
            margin: 20px !important;
            padding: .2rem !important;
            th {
                color: white !important;
                font-size: 12px !important;
            };
            td {
                text-align: center !important;

            };


            .table_body {
                margin-bottom: 10px !important;
            }
        }

        .nav-item:hover {
            background-color: #E8C552 !important;
        }

        .nav-item .active:hover {
            background-color: #0b305d !important;
            color: white !important;
        }

        .nav-item .active {
            background-color: #0b305d !important;
            color: white !important;
        }

        .nav-link.disabled {
            pointer-events: none;
            color: #6c757d;
            cursor: not-allowed;
        }

        .select2-container .select2-selection--single .select2-selection__rendered  {
            display: contents;
        }

        .select2-container--bootstrap {
            min-width: 15rem !important;
        }

        .input-group-text {
            max-height: 2rem !important;
        }

        .text-bold {
            font-weight: bold !important;
        }

        .icon-xl {
            font-size: 3em !important;
        }
    </style>
@endpush

@section('content')
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Catalogos')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('CATALOGO DE IMPRESORAS')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="layout-px-spacing">
        <div class="container-fluid p-0">
            <div class="row justify-content-center">
                    <div class="col-md-12 justify-content-center mt-3">
                        <div class="row justify-content-center">
                            <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3" title="Crear una nueva impresora." onclick="openNewRecord()">
                                <i class="las la-plus-square icon-large"></i>
                                <span class="ml-2">Añadir una nueva impresora</span>
                            </button>
                            <button type="button" class="btn btn-outlined-secondary btn-submit d-inline-flex align-items-center mb-3 ml-3" title="Recargar." onclick="cargarCatalogo()">
                                <i class="las la-sync"></i>
                                <span class="ml-2">Recargar</span>
                            </button>
                        </div>
                    </div>

                <div class="col-md-12">
                    <div class="results-table col-md-11">
                        <table id="catalogo_impresoras" class="table table-responsive-lg">
                            <thead>
                                <tr>
                                    @foreach ($camposCatalogo as $campo)
                                        <th style="text-align: center">{{ $campo }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody id="table_body">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade draggable" id="modal-guardar-info" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Guardar información</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <form action="#" method="POST" id="frm_impresora">
                        <input type="hidden" id="id" name="id">
                        <div class="row justify-content-center">
                            <div class="col-md-4">
                                <label class="text-bold">IP: <span class="text-danger">*</span></label>
                                <input id="ip" name="ip" type="text" oninput="validarBtnGuardar()" class="form-control form-control-sm" required>
                            </div>
                            <div class="col-md-4">
                                <label class="text-bold">Cola: <span class="text-danger">*</span></label>
                                <input id="cola" name="cola" type="text" oninput="validarBtnGuardar()" class="form-control form-control-sm" required>
                            </div>
                            <div class="col-md-4">
                                <label class="text-bold">Lenguaje:</label>
                                <select id="lenguaje" name="lenguaje" class="form-control form-control-sm" onchange="validarBtnGuardar()">
                                    @foreach ($lenguajes as $lenguaje)
                                        <option value="{{ $lenguaje }}">{{ $lenguaje }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-4">
                                <label class="text-bold">Descripcion:</label>
                                <input id="comentario" name="comentario" type="text" oninput="validarBtnGuardar()" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4">
                                <label class="text-bold">Dominio: <span class="text-danger">*</span></label>
                                <input id="dominio" name="dominio" type="text" oninput="validarBtnGuardar()" class="form-control form-control-sm" required>
                            </div>
                            <div class="col-md-4">
                                <label class="text-bold">Protocolo: <span class="text-danger">*</span></label>
                                <input id="protocolo" name="protocolo" type="text" oninput="validarBtnGuardar()" class="form-control form-control-sm" required>
                            </div>
                        </div>

                    </form>

                    <div class="row justify-content-center mt-2">
                        <div class="col-md-4 d-flex justify-content-center">
                            <button type="button" id="btnSave" class="btn btn-primary btn-submit btn-sm d-inline-flex align-items-center" title="Guardar información." onclick="saveRecord()" disabled>
                                <i class="las la-save icon-xl mr-2"></i> <span style="font-size: 1.3em !important">Guardar</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        const ajaxErrorMessage = {
            icon: 'error',
            title: '¡Lo sentimos!',
            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
        }

        const recordStoredSuccess = {
            icon: 'success',
            title: '¡Registro guardado!',
        }

        const infoForbidden = {
            icon: 'warning',
            title: '¡La información faltante!',
        }

        $(document).ready(() => {
            $('#catalogo_impresoras').dataTable({ scrollX: true, responsive: true, paging: false});
            cargarCatalogo();

            $('#modal-guardar-info').on('shown.bs.modal', function () {
                $('#ip').focus();
            });

            $('#modal-guardar-info').on('hidden.bs.modal', function () {
                $('#frm_impresora input').val('');
            });
        })

        function cargarCatalogo() {
            $.ajax({
                url: "{{ url('catalogos/impresoras/obtener-impresoras') }}",
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                    }, 500);

                    if(jqXHR.status == 200) {
                        fillTable(res.info, res.columnas);
                    }
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function fillTable(data, columnas) {
            const columnKeys = Object.keys(columnas);
            const columns = columnKeys.map(function (key) {
                return columnas.length == key + 1 ? {
                    data: columnas[key],
                    render: $.fn.dataTable.render.text()
                } : {
                    data: columnas[key],
                }
            });

            $('#catalogo_impresoras').dataTable().fnDestroy();
            $('#catalogo_impresoras').dataTable({
                responsive: true,
                processing: true,
                autoWidth: true,
                scrollX: true,
                scrollY: '400px',
                paging: false,
                data: data,
                columns: columns,
                order: [
                    [0, "asc"]
                ],
            });

            $('#catalogo_impresoras').DataTable().columns.adjust();
        }

        function editInfo(id, info) {
            $('#id').val(id);
            $('#ip').val(info.ip);
            $('#cola').val(info.cola);
            $('#lenguaje').val(info.lenguaje);
            $('#comentario').val(info.comentario);
            $('#dominio').val(info.dominio);
            $('#protocolo').val(info.protocolo);

            $('#modal-guardar-info').modal('show');
        }

        function openNewRecord() {
            $('#modal-guardar-info').modal('show');
        }

        function saveRecord() {
            const formData = new FormData($('#frm_impresora')[0]);
            console.log(formData);
            const url = $('#id').val() == '' ? '/guardar-impresora' : '/actualizar-impresora';

            $.ajax({
                url: "{{ url('catalogos/impresoras') }}" + url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    $('#modal-guardar-info').modal('hide');

                    fillTable(res.info, res.columnas);
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        recordStoredSuccess.html = '¡La <b>información</b> se ha guardado correctamente!';

                        Swal.fire(recordStoredSuccess);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        if(error.status == 422) {
                            infoForbidden.html = error.responseText;
                            Swal.fire(infoForbidden);
                            return;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function updateEstatus(id) {
            let formData = new FormData();
            formData.append('id', id);

            $.ajax({
                url: "{{ url('catalogos/impresoras/actualizar-estatus') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {

                    fillTable(res.info, res.columnas);

                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        recordStoredSuccess.html = '¡El estatus de la <b>paquetera</b> se ha actualizado correctamente!';

                        Swal.fire(recordStoredSuccess);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        if(error.status == 422) {
                            Swal.fire(noDescriptionProvided);
                            return;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })

        }

        function validarBtnGuardar() {
            let form = $('#frm_impresora')[0];
            $('#btnSave').attr('disabled', !form.checkValidity());
        }
    </script>
@endpush