@extends('layout.master',['activePage' => 'importacion_cfdi', 'menuParent' => 'Configuración', 'titlePage' => __('Importacion de CFDI compras POS')])

@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/apex/apexcharts.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    {{-- {!! Html::style('plugins/table/datatable/dt-global_style.css') !!} --}}

    <style>
        .field {
            font-style: oblique;
            font-weight: bold;
        }

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

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

            };


            .table_body {
                margin-bottom: 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);"> {{ __('Configuracion') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{ __('Importacion de CFDI compras POS') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->


    <!--  Form Importacion CFDI start -->
    <div class="col-md-12">

        <div class="container mb-2 mt-2">
            <div class="row">
                <div class="col-md-6"><span><u>{{ $nombre_empresa }}</u></span></div>
                <div class="col-md-6 text-md-right"><b>FECHA:</b> {{ $fecha_hora }}</div>
            </div>
        </div>

        <div class="statbox widget box box-shadow mb-2">
            <div class="widget-content widget-content-area">

                <form action="#" method="post" id="frm_import_cfdi_pos">
                    <div class="col-lg-12 d-flex justify-content-center">
                        <div class="d-flex justify-content-center">
                            <label>Desde</label>
                            <input id="fecha_desde" name="fecha_desde"
                                class="form-control form-control-sm  ml-2 mr-2" type="date"
                                style="font-size: 8px">
                            <label>Hasta</label>
                            <input id="fecha_hasta" name="fecha_hasta"
                                class="form-control form-control-sm  ml-2 mr-2" type="date"
                                style="font-size: 8px">
                        </div>
                    </div>
                </form>
            </div>

            <div class="form-group row">
                <div class="col-md-12 d-flex justify-content-center mt-3">
                    <button type="button" id="btnSubmit" name="btnSubmit" class="btn btn-primary btn-submit">Obtener importación</button>
                </div>
            </div>

            <div class="cfdi-table">

                <table id="cfdi_results_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>

            </div>
        </div>


    </div>
    <!--  Form Importacion CFDI ends -->

@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>

        $(document).ready(function() {

            $('#cfdi_results_table').DataTable({scrollX: true});

            const workDoneMessageOptions = {
                icon: 'success',
                title: '¡Hecho!',
                text: 'Consulta realizada con éxito.',
                confirmButtonText: 'Aceptar'
            }

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

            const datesNotValidMessageOptions = {
                icon: 'warning',
                title: '¡Datos incorrectos!',
                text: 'Las fechas ingresadas son incorrectas, la fecha hasta debe ser mayor a la fecha desde.',
                confirmButtonText: 'Aceptar'
            }

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

                if(!isDatesValid())
                    return Swal.fire(datesNotValidMessageOptions)

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

                $.ajax({
                    url: "{{ url('/configuracion/importacion-cfdi-pos') }}",
                    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);

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

                            $('#cfdi_results_table').dataTable().fnDestroy();
                            $('#cfdi_results_table').DataTable({
                                lengthMenu: [10, 20, 50, 100, 200, 500],
                                processing: true,
                                autoWidth: true,
                                scrollX: true,
                                data: tableInfo,
                                columns: columns,
                                order: [
                                    [0, "desc"]
                                ],
                            });

                            const url = res.pdfUrl;
                            const fileName = res.pdfName

                            let link = document.createElement('a');
                            link.href = url;
                            link.download = fileName;

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

                            Swal.fire(workDoneMessageOptions)



                        }, 1000);
                    },
                    error: (error) => {
                        $("#loadingModal").modal("hide");
                        Swal.fire({
                            icon: 'error',
                            title: '¡Ha ocurrido un error!',
                            text: "Ha ocurrido un error, intentelo de nuevo más tarde.",
                            confirmButtonText: 'Aceptar'
                        })
                    }
                })
            })


        })

        function isDatesValid() {
            return ($('#fecha_hasta').val() >= $('#fecha_desde').val()) && ($('#fecha_desde').val() != null) && $('#fecha_hasta').val() != null
        }
    </script>
@endpush