@extends('layout.master', ['activePage' => 'envio_tarjetas_sucursales', 'menuParent' => 'Operaciones', 'titlePage' => 'Envio de tarjetas a sucursales'])

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('assets/css/apps/tickets.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    {!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
    {!! Html::style('assets/css/forms/checkbox-theme.css') !!}

    <style>
        .field {
            font-size: 0.9rem !important;
            font-family: Arial, Helvetica, sans-serif
        }

        .btn-generate:hover:not(:disabled) {
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !important;
        }

        .btn-generate {
            max-height: 40px !important;
        }

        .form-control-sm {
            max-height: 60px !important;
            width:  1% !important;
            width: 400px !important;
        }

        .info-icon {
            color: #3333FF;
            font-size: 0.9rem !important;
        }

        .btn-delete-file:hover:not(:disabled) {
            background-color: #FF3333 !important;
            color: white !important;
            border-color: #FF3333 !important;
        }

        .div-table{
            th {
                color: white !important;
                font-size: 12px !important;
            };
            td {
                text-align: center !important;

            };

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

        .dataTables_length{
            float : left;
        }

        /* .btn-table {
            margin-left: 10px !important;
        } */
    </style>
@endpush

@section('content')

    <!--  Navbar Starts / Breadcrumb Area Starts -->
    <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);"> {{ __('CR') }}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{ __('Operaciones') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{ __('Envio de tarjetas a sucursales') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <!-- Form Envio Tarjetas Sucursales -->
    <div class="col-lg-12">

            <div class="statbox widget box box-shadow ml-5 mr-5 p-5 mt-4">
                <div class="w-100">

                    <div class="row">

                        <div class="col-lg-12">
                            <span class="field">Párametros para el documento:</span>
                            <a href="#" style="icon-info"><i class="las la-question-circle"></i></a>
                        </div>

                        <form action="#" method="POST" id="frm_env_clientes" class="col-lg-12">
                            <div class="d-flex mt-2">
                                <label class="field mr-3 mt-2">Archivo:</label>
                                <input class="form-control  form-control-file mr-3" type="file" name="input_file" id="input_file" accept="{{ $files_allowed }}" onchange="checkFileSize(event);">
                                <button type="button" id="btnClearFile" name="btnClearFile" class="btn btn-delete-file mr-3" title="Eliminar archivo"><i class="las la-times"></i></button>
                                <button class="btn btn-primary btn-generate mr-3" type="button" onclick="downloadExampleFile()">
                                    <i class="las la-download"><span class="field ml-1">Descargar archivo de ejemplo</span></i>
                                </button>
                                <button type="button" id="btnGenerate" name="btnGenerate" class="btn btn-primary btn-generate mr-3" title="Generar archivo">
                                    <i class="las la-file"><span class="field ml-1">Generar</span></i>
                                </button>
                            </div>
                        </form>


                        <hr class="col-lg-12" id="separador_temporal">

                        <div class="col-lg-12">
                            <span class="field">Párametros para la consulta:</span>
                            <a href="#" style="icon-info"><i class="las la-question-circle"></i></a>
                        </div>

                        <form action="#" method="POST" id="frm_env_tarj_suc" class="col-lg-12">
                            <div class=" d-flex  mt-2">
                                <label class="field mr-3 mt-1">Sucursal:</label>
                                <select id="sucursales" class="form-control form-control-sm mr-3" style="font-size: 10px"
                                    name="sucursales[]" multiple="multiple" onchange="handleSelectChange(this)">
                                    <option value="0" selected>- TODOS -</option>
                                    @foreach ($sucursales as $sucursal)
                                        <option value="{{ $sucursal->id }}">
                                            {{ $sucursal->sucursal . ' - ' . $sucursal->descripcion }}</option>
                                    @endforeach
                                </select>
                                <label class="field mr-3 mt-1">Tipo:</label>
                                <select id="tipo" class="form-control form-control-sm mr-3" name="tipo" >
                                    @foreach ($tipos as $key => $tipo)
                                        <option value="{{ $key }}"> {{ $tipo }} </option>
                                    @endforeach
                                </select>
                                <button type="button" id="btnQuery" name="btnQuery" class="btn btn-primary btn-generate">Consultar</button>
                            </div>
                        </form>

                        <div class="col-lg-12 mt-3">
                            <label style="font-size: 12px !important"><b>Nota:</b> Para <u>seleccionar</u> múltiples opciones,
                                <u>mánten presionada</u> la tecla Ctrl (Windows) o Cmd ⌘ (Mac) y luego da click a cada
                                opción. Para quitar la selección de <b>TODOS</b>, primero selecciona otra opción<u> sin presionar la
                                    tecla antes mencionada</u>.</label>
                        </div>


                        <div class="col-lg-12">
                            <hr>
                            <table id="query_results_table" class="div-table  table-responsive-sm table-sm nowrap">
                                <thead>
                                    <tr>
                                        @foreach ($columnas as $columna)
                                            <th style="text-align: center">{{$columna}}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody id="table_body">
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
    </div>
    <!-- Form Envio Tarjetas Sucursales -->

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    {!! Html::script('assets/js/basicui/sweet_alerts.js') !!}
    {!! Html::script('assets/js/custom.js') !!}
    {!! Html::script('plugins/notification/snackbar/snackbar.min.js') !!}
    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}
    {!! Html::script('assets/js/basicui/inputmask.js') !!}
@endpush

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

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

        const fileSizeErrorMessage = {
            icon: 'error',
            title: '¡Demasiado pesado!',
            html: 'El archivo que ha tratado de ingresar supera el limite de 10MB, por favor, seleccione otro.'
        }

        const noFileErrorMessage = {
            icon: 'error',
            title: '¡Sin archivo!',
            html: 'Se requiere un archivo para continuar.'
        }

        const noContentMessageOptions = {
            icon: 'info',
            title: '¡Sin contenido!',
            text: 'La consulta no obtuvo ningún resultado, no se generó ningún documento.',
            confirmButtonText: 'Aceptar'
        }

        const noContentInFileMessageOptions = {
            icon: 'warning',
            title: '¡Sin contenido dentro del archivo!',
            html: 'No hay ninguna <b>palabra clave</b> dentro del documento enviado, por favor, revíselo e intentelo de nuevo.',
            confirmButtonText: 'Aceptar'
        }

        const noCheckBoxSelectedMessgaeOptions = {
            icon: 'warning',
            title: '¡No ha seleccionado clientes!',
            html: 'Se requiere <b>al menos un cliente</b> para continuar.',
            confirmButtonText: 'Aceptar'
        }

        const workDoneMessageOptions = {
                icon: 'success',
                title: '¡Hecho!',
                text: 'El documento se descargará en breve.',
                confirmButtonText: 'Aceptar'
            }

        let seleccionarTodo = true;

        $(document).ready(function(){

            if(!inputFileHasItem())
                $('#btnClearFile').attr('disabled', true);

            $('#btnGenerate').attr('disabled', true);
            $('#query_results_table').DataTable(
                {
                    scrollX: true,
                    columnDefs: [
                        {
                            "targets": -1,
                            "orderable": false
                        }
                    ]
                }
            );

            $('#btnGenerate').on('click', () => {

                let cuentasArray = getAllAccountCheckboxes();
                let tarjetasArray = getAllCardsCheckboxes();

                if(cuentasArray.length == 0 && tarjetasArray.length == 0)
                    return Swal.fire(noCheckBoxSelectedMessgaeOptions);

                let formData = new FormData($('#frm_env_clientes')[0]);

                if(cuentasArray.length != 0)
                    cuentasArray.forEach(cuenta => {
                        formData.append("cuentas_seleccionadas[]", cuenta);
                    });
                else
                    formData.append("cuentas_seleccionadas[]", []);

                if(tarjetasArray.length != 0)
                    tarjetasArray.forEach(cuenta => {
                        formData.append("cuentas_seleccionadas_tarjetas[]", cuenta);
                    });
                else
                    formData.append("cuentas_seleccionadas_tarjetas[]", [])

                // return console.log(formData);
                $.ajax({
                    url: "{{ url('/operaciones/envio-tarjetas-sucursales/generar-documento') }}",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: formData,

                    beforeSend: () => {
                        // $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        $("#loadingModal").modal("hide");

                        if(jqXHR.status == 204)
                            return Swal.fire(noContentInFileMessageOptions);

                        Swal.fire(workDoneMessageOptions);
                        const pdf = res.archivo_pdf

                        const pdfUrl = pdf.url;
                        const pdfFileName = pdf.fileName

                        let link = document.createElement('a');
                        link.href = pdfUrl;
                        link.download = pdfFileName;

                        link.click();
                        link.remove();

                        const docxArray = res.archivos_generados
                        // return console.log(docxArray);
                        for (const archivo in docxArray) {

                            const docxUrl = docxArray[archivo];
                            const docxFileName = archivo

                            let link = document.createElement('a');
                            link.href = docxUrl;
                            link.download = docxFileName;

                            link.click();
                            link.remove();
                        }
                    },
                    error: (error) => {
                        $("#loadingModal").modal("hide");
                        ajaxErrorMessage.html = error.responseText
                        Swal.fire(ajaxErrorMessage)
                    }
                })
            })

            $('#btnQuery').on("click", (event) => {
                event.target.disabled = true;
                const formData = new FormData($("#frm_env_tarj_suc")[0]);

                $.ajax({
                    url: "{{ url('/operaciones/envio-tarjetas-sucursales/consulta') }}",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: formData,

                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            event.target.disabled = false;
                            $("#loadingModal").modal("hide");

                            if(jqXHR.status == 204)
                                return Swal.fire(noContentMessageOptions);

                            const tableInfo = res.table_info;
                            const columnKeys = Object.keys(res.columnas);
                            const columns = columnKeys.map(key => ({
                                data: res.columnas[key]
                            }));

                            $('#query_results_table').dataTable().fnDestroy();
                            $('#query_results_table').dataTable({
                                lengthMenu: [10, 20, 50, 100, 200, 500],
                                processing: true,
                                autoWidth: true,
                                scrollX: true,
                                data: tableInfo,
                                columns: columns,
                                order: [
                                    [0, "desc"]
                                ],
                                columnDefs: [
                                    {
                                        "targets": -1,
                                        "title": `
                                                    <label class="checkbox d-flex justify-content-center">
                                                        <input type="checkbox" class="cbx-formatos" onclick="selectAllCheckboxes()">
                                                            <span style="margin-right: 10px !important"></span> <label style="color: white !important; margin-top: 5px !important">Seleccionar todo</label>
                                                    </label>
                                                `,
                                        "orderable": false
                                    }
                                ]
                            });

                            $('#query_results_table').DataTable().columns.adjust();

                            $("#btnGenerate").attr('disabled', false);
                        }, 1000);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            event.target.disabled = false;
                            $("#loadingModal").modal("hide");
                            Swal.fire(ajaxErrorMessage)
                        }, 1000);
                    }
                })
            })

            $('#btnClearFile').on('click', () => {
                let fileInput = document.getElementById('input_file');
                fileInput.value = '';
                $('#btnClearFile').attr('disabled', true);
            })

            $('.custom-button-container').on('click', 'button', function() {
                console.log('Haz hecho clic en el botón personalizado');
                // Aquí puedes añadir la lógica que desees al hacer clic en el botón
            });
        });

        function checkFileSize(event) {
            let file = event.target.files[0];
            if (!file) return Swal.fire(noFileErrorMessage);

            const maxSizeInBytes = '{{ $max_file_size }}';

            if (file.size > maxSizeInBytes) {
                event.target.value = ''; // Esto borra la selección del archivo
                return Swal.fire(fileSizeErrorMessage);
            }

            $('#btnClearFile').attr('disabled', false);
        }

        function inputFileHasItem() {
            let fileInput = document.getElementById('input_file');
            return fileInput.files.length > 0
        }

        function handleSelectChange(select) {
            if (select.value === '0') {
                const options = select.options;
                options[0].selected = true;
                for (let i = 1; i < options.length; i++) {
                    options[i].selected = false;
                }
            }
        }

        function getAllAccountCheckboxes() {
            const checkBoxes = document.getElementsByName('seleccionarCliente[]');

            const arrayCuentasId = Array.from(checkBoxes)
                .filter(checkBox => checkBox.checked)
                .map(checkBox => checkBox.value);

            return arrayCuentasId;
        }

        function getAllCardsCheckboxes() {
            const checkBoxes = document.getElementsByName('seleccionarTarjeta[]');

            const arrayCuentasId = Array.from(checkBoxes)
                .filter(checkBox => checkBox.checked)
                .map(checkBox => checkBox.value);

            return arrayCuentasId;
        }

        function selectAllCheckboxes() {
            const checkBoxesCliente = document.getElementsByName('seleccionarCliente[]');
            const checkBoxesTarjeta = document.getElementsByName('seleccionarTarjeta[]');

            if(seleccionarTodo) {
                Array.from(checkBoxesCliente).forEach(checkBox => checkBox.checked = true);
                Array.from(checkBoxesTarjeta).forEach(checkBox => checkBox.checked = true);
            } else {
                Array.from(checkBoxesCliente).forEach(checkBox => checkBox.checked = false);
                Array.from(checkBoxesTarjeta).forEach(checkBox => checkBox.checked = false);
            }
            seleccionarTodo = !seleccionarTodo;
        }

        function downloadExampleFile() {
            const pdfUrl = "{{ $ejemplo_ruta }}"
            const pdfFileName = "EnvioTarjetasSucursalesMachoteExample.docx"

            let link = document.createElement('a');
            link.href = pdfUrl;
            link.download = pdfFileName;

            link.click();
            link.remove();
        }
    </script>
@endpush