@extends('layout.master',['activePage' => 'directorio_clientes', 'menuParent' => 'Reportes', 'titlePage' => __('Directorio de clientes')])

@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') !!}
    <style>
        .btn-excel {
            background-color: #28a745 !important;
            color: white;
            border-color: #28a745 !important;
        }

        .btn-pdf {
            background-color: #C62A2A !important;
            color: white;
            border-color: #C62A2A !important;
        }
        .text-right{
            text-align: right;
        }

        .date-input.form-control-sm {
            padding: .40rem .5rem;
        }

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

        .required {
            color: red !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> {{ __('Directorio de clientes') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <!--  Form Directorio Clientes start -->
    <div class="col-lg-10 m-auto">
        <form action="#" method="POST" id="frm_directorio_clientes">
            <div class="statbox widget box box-shadow mb-2">
                <div class="widget-content widget-content-area">
                    <div class="row">

                        <div class="col-md-6">

                            <div class="form-group">
                                <span>Agente(s) <b class="required">*</b></span>
                                <select class="w-100 form-select" id="agentes" name="agentes[]" size="5"
                                        multiple onchange="handleSelectChange(this)">
                                    <option value="0" selected>TODOS</option>
                                    @foreach ($agentes as $agente)
                                        <option value="{{ $agente->id }}">{{ $agente->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="col mb-2">
                                <div class="form-group row">
                                    <label class="col-4 font-weight-bold" for="fecha_ultimo_movimiento">Fecha del ultimo movimiento <b class="required">*</b></label>
                                    <input id="fecha_ultimo_movimiento" name="fecha_ultimo_movimiento"
                                    class="form-control form-control-sm date-input col-8" type="date"
                                    style="font-size: 10px" value="{{ $fecha_actual }}">
                                </div>
                            </div>

                            <div class="col mb-2">
                                <div class="form-group row">
                                    <label class="col-4 font-weight-bold">Estatus del cliente <b class="required">*</b></label>
                                    <div class="col-8">
                                        <select class="w-100 form-control form-control-sm" id="estatus_cliente" name="estatus_cliente">
                                            @foreach ($opciones_estatus as $index => $estatus)
                                                <option value="{{ $index }}">{{ $estatus }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col mb-2">
                                <div class="form-group row">
                                    <label class="col-4 font-weight-bold">Ruta de Cobro <b class="required">*</b></label>
                                    <div class="col-8">
                                        <select class="w-100 form-control form-control-sm" id="rutas_cobro" name="rutas_cobro">
                                            <option value="0" selected>TODAS</option>
                                            @foreach ($rutas as $ruta)
                                                <option value="{{ $ruta->id }}">{{ $ruta->descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col mb-2">
                                <div class="form-group row">
                                    <label class="col-4 font-weight-bold">Saldo <b class="required">*</b></label>
                                    <div class="col-8">
                                        <select class="w-100 form-control form-control-sm" id="con_saldo" name="con_saldo">
                                            @foreach ($opciones_saldo as $index => $opcion)
                                                <option value="{{ $index }}">{{ $opcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col mb-2">
                                <div class="form-group row">
                                    <label class="col-4 font-weight-bold">Mostrar saldo <b class="required">*</b></label>
                                    <div class="col-8">
                                        <fieldset class="d-flex justify-content-center">
                                            <label class="radio radio-lg col-md-4">
                                                <input type="radio" checked="checked" name="mostrar_saldo" value="1"
                                                    class="mr-3"> Si
                                            </label>

                                            <label class="radio radio-lg col-md-4">
                                                <input type="radio"  name="mostrar_saldo" value="0"
                                                    class="mr-3"> No
                                            </label>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <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 mr-2">
                            <i class="las la-search"></i> Consultar
                        </button>

                        <div id="results_div">
                            <a href="#" class="btn btn-primary btn-pdf mr-2" id="btnPdf">
                                <i class="las la-file-pdf"></i> Descargar PDF
                            </a>

                            <a href="#" class="btn btn-primary btn-excel" id="btnExcel">
                                <i class="las la-file-excel"></i> Descargar Excel
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <!--  Form Directorio Clientes 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() {

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

            const requiredInputsMessageOptions = {
                icon: 'warning',
                title: '¡Campos requeridos!',
                html: 'Los campos marcados con un asterisco <b>(*)</b> son requeridos.',
                confirmButtonText: 'Aceptar'
            }

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

            const workDoneMessageOptions = {
                icon: 'success',
                title: '¡Hecho!',
                text: 'Los documentos estan disponibles para su descarga.',
                confirmButtonText: 'Aceptar'
            }

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

            $('#btnSubmit').on('click', function() {

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

                if(!formData.get('fecha_ultimo_movimiento')) {
                    return Swal.fire(requiredInputsMessageOptions);
                }

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

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

                            Swal.fire(workDoneMessageOptions);

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

                            const pdf = res.pdfInfoDescarga;
                            const pdfUrl = pdf.pdfUrl;
                            const pdfFileName = pdf.pdfFileName;

                            const excel = res.excelInfoDescarga;
                            const excelUrl = excel.excelUrl;
                            const excelFileName = excel.excelFileName;

                            let btnPdf = document.getElementById('btnPdf');
                            btnPdf.href = pdfUrl;
                            btnPdf.download = pdfFileName;

                            let btnExcel = document.getElementById('btnExcel');
                            btnExcel.href = excelUrl;
                            btnExcel.download = excelFileName;

                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                            if(error.status == 422) {
                                return Swal.fire(requiredInputsMessageOptions)
                            }
                            Swal.fire(ajaxErrorMessage)
                        }, 500);
                    }
                });
            })
        });

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