@extends('layout.master',['activePage' => 'consulta_transacciones', 'menuParent' => 'Consultas', 'titlePage' => __('Consulta Transacciones')])

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! 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') !!}
    {{-- {!! Html::style('plugins/table/datatable/dt-global_style.css') !!} --}}
    <style>
    .btn-excel {
            background-color: #28a745;
            color: white;
    }
    .btn-pdf {
        background-color: #007bff;
        color: white;
    }

    .field {
            font-weight: bold;
            font-size: 15px !important;
    }

    .form-control:not(select){
        padding: 8px 10px !important;
    }

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

    };


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

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

    .row-documento {
        background-color: yellow !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);"> {{ __('Reportes') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{ __('Consulta de Transacciones') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <!--  Form Consulta Transacciones start -->
    <form action="#" method="POST" id="frm_consulta_transacciones" class="mt-3">
        <div class="col-md-8 m-auto">
            <div class="statbox widget box box-shadow mb-2">
                <div class="widget-content widget-content-area">
                    <label class="field d-flex justify-content-center mb-2">Ingrese la serie y el folio a consultar a continuación:<span style="color: red">*</span></label>
                    <div class="row mb-2">
                        <div class="form-group d-flex justify-content-center col-md-12">
                            <input type="text" name="serie" id="inputSerie" class="w-25 mr-2 form-control form-control-sm" onkeypress="validateChars(event)">
                            <input type="text" name="numero_referencia" class="w-25 mr-2 form-control form-control-sm" onkeydown="validateNumber(event)">
                            <button type="button" class="btn w-auto btn-primary btn-submit d-flex align-items-center" id="btnSubmit">
                                <i class="las la-search"></i> <span class="ml-2">Consultar</span>
                            </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!--  Form Consulta Transacciones end -->

    <!-- Tabla de resultados -->
    <div class="resluts-table" id="results_div">
        <label class="d-flex justify-content-center" style="font-size: 22px !important;">Resultados de la consulta:</label>
        <span id="label_cliente_suma" class="d-flex justify-content-center" style="font-size: 15px !important;">Cliente y suma de totales...</span>
        <table id="resluts_table" class="table table-responsive-sm table-sm">
            <thead>
                <tr>
                    @foreach ($columnas as $columna)
                        <th style="text-align: center">{{$columna}}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody id="table_body">
            </tbody>
        </table>
        <span><b>Nota:</b> El resultado que se muestre subrayado en <b>amarillo</b> se considera un <u>documento</u>.</span>
    </div>
    <!-- Tabla de resultados -->

@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') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script text="javascript">
        $(document).ready(() => {
            const noContentMessageOptions = {
                icon: 'info',
                title: '¡Sin contenido!',
                text: 'La consulta no obtuvo ningún resultado.',
                confirmButtonText: 'Aceptar'
            }

            const workDoneMessageOptions = {
                icon: 'success',
                title: '¡Hecho!',
                text: 'La información se mostrará en la tabla.',
                confirmButtonText: 'Aceptar'
            }

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

            const outOfRangeMessage = {
                icon: 'error',
                title: '¡Serie fuera de rango!',
                html: 'La serie que ha sido ingresada no esta en nuestro <b>rango de acciones</b>, recuerde que los folios deben empezar por <b>"R"</b>, <b>"P"</b> o <b>"F"</b>'
            }

            const emptyInputsMessage = {
                icon: 'warning',
                title: '¡Campos obligatorios!',
                html: 'Los campos <b>serie</b> y <b>número de referencia</b> son necesarios para continuar.'
            }

            $('#results_div').hide();
            $('#resluts_table').DataTable({scrollX: true});

            $('#btnSubmit').on('click', () => {
                formData = new FormData($('#frm_consulta_transacciones')[0]);

                if(formData.get('serie').length === 0 || formData.get('numero_referencia').length === 0) {
                    return Swal.fire(emptyInputsMessage)
                }

                $.ajax({
                    url: "{{ url('/consultas/consulta-transacciones') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

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

                            Swal.fire(workDoneMessageOptions);

                            const textoInfoCliente = res.textoInfoCliente;
                            const textoSumaImportes = res.textoSumaImportes;

                            $('#label_cliente_suma').text(textoInfoCliente + ' ' + textoSumaImportes);

                            $('#results_div').show();

                            const resultado         = res.resultado;
                            const columnasServidor  = res.columnas;
                            const totalDocumentos   = res.totalDocumentos;

                            const columnKeys = Object.keys(columnasServidor);
                            const columnas = columnKeys.map(key => ({
                                data: columnasServidor[key]
                            }));

                            $('#resluts_table').dataTable().fnDestroy();

                            $('#resluts_table').dataTable({
                                lengthMenu: [10, 20, 50, 100, 200, 500],
                                processing: true,
                                autoWidth: true,
                                scrollX: true,
                                data: resultado,
                                columns: columnas,
                                order: [],
                                createdRow: function(row, data, dataIndex) {
                                    if (dataIndex <= totalDocumentos) {
                                        $(row).addClass('row-documento');
                                    }
                                }
                            });

                            $('#resluts_table').DataTable().columns.adjust();
                        }, 1000);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                            if(error.status == 422)
                                return Swal.fire(outOfRangeMessage);

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

        function validateChars(event) {
            const input = document.getElementById('inputSerie');

            if (input.value.length >= 3) {
                event.preventDefault();
            }
        }

    </script>
@endpush