@extends('layout.master', ['activePage' => 'analisis_cartera', 'menuParent' => 'Reportes', 'titlePage' => 'Analisis de cartera'])

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

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

        .btn-generate:hover {
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !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> {{ __('Analisis de cartera') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <!-- Form Analisis Cartera -->
    <div class="col-lg-12">
        <form action="#" id="frm_analisis_cart" method="POST">
            <div class="container mb-2 mt-2">
                <div class="row">
                    <div class="col-md-6"><span><u>TERRA SERVICIOS FINANCIEROS</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="w-100">
                    <div class="form-group row mb-3">
                        <div class="col-lg-12">
                            <div class="text-center d-flex justify-content-center">
                                <label class="field">Parámetros de la consulta:</label>
                                <label class="radio radio-lg">
                                    <input type="radio" checked="checked" name="parametros" value="0" id="chkAnalitico"
                                        class="mr-2 ml-5">
                                    Analitico</label>

                                <label class="radio radio-lg">
                                    <input type="radio" name="parametros" value="1" class="mr-2 ml-5" id="chkCondensado">
                                    Condensado</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-4 m-auto">
                            <div class="text-center d-flex justify-content-center">
                                <label class="field">Ordenar por <b style="color: red !important">*</b>:</label>
                                <select class="form-control form-control-sm" style="font-size: 8px" id="orderBy" name="orderBy">
                                    <option value="0" selected>-Seleccione una opción-</option>
                                    @foreach ($order_by_options as $order_option => $order_descr)
                                        <option value="{{ $order_option }}">{{ $order_descr }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <hr>

                    {{-- Formulario de los selects sucursal, rutas y morosidad --}}
                    <div class="form-group row m-auto justify-content-between">
                        <div class="col-md-3 ml-2">
                            <label class="field row">Sucursal <b style="color: red !important">*</b></label>
                            <select id="sucursales" class="form-control form-control-sm row" style="font-size: 8px"
                                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>
                        </div>

                        <div class="col-md-4">
                            <label class="field row">Rutas de cobro <b style="color: red !important">*</b></label>
                            <select id="rutas" class="form-control form-control-sm row" style="font-size: 8px" name="rutas[]"
                                multiple="multiple" onchange="handleSelectChange(this)">
                                <option value="0" selected>- TODAS -</option>
                                @foreach ($rutas_cobro as $ruta)
                                    <option value="{{ $ruta->id }}">
                                        {{ $ruta->ruta . ' - ' . $ruta->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <div class="m-auto d-flex justify-content-between">
                                <label class="field">Morosidad<b style="color: red !important">*</b></label>
                                <div class="col-6">
                                    <label class="radio">
                                        <input type="radio" checked="checked" name="morosidadOptions" value="0" id="chkMorosidadCorte"
                                            class="mr-1">
                                        Al corte
                                    </label>
                                </div>
                                <div class="col-6">
                                    <label class="radio">
                                        <input type="radio" name="morosidadOptions" value="1" class="mr-1" id="chkMorosidadActual">
                                        Actual
                                    </label>
                                </div>
                            </div>

                            <select id="morosidad" class="form-control form-control-sm row" style="font-size: 8px" name="morosidad[]"
                                multiple="multiple" onchange="handleSelectChange(this, true)">
                                <option value="14" selected>- TODAS -</option>
                                @foreach ($morosidad_options as $morosidad_option => $morosidad_desc)
                                    <option value="{{ $morosidad_option }}"> {{ $morosidad_desc }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Se termina formulario de los selects sucursal, rutas y morosidad --}}

                    <hr class="mt-3 mb-3">

                    {{-- Formulario de los selects tipo_cliente y tipo_corte --}}
                    <div class="form-group row m-auto justify-content-center">
                        <div class="col-md-3 ml-2">
                            <label class="field row">Tipo de cliente <b style="color: red !important">*</b></label>
                            <select id="tipoCliente" class="form-control form-control-sm row" style="font-size: 8px" name="tipoCliente[]"
                                multiple="multiple" onchange="handleSelectChange(this)">
                                <option value="0" selected>- TODOS -</option>
                                @foreach ($tipos_clientes as $tipo_cliente)
                                    <option value="{{ $tipo_cliente->id }}">
                                        {{ $tipo_cliente->tipo_cliente . ' - ' . $tipo_cliente->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="field row">Tipo de corte <b style="color: red !important">*</b></label>
                            <select id="tipoCorte" class="form-control form-control-sm row" style="font-size: 8px" name="tipoCorte[]"
                                multiple="multiple" onchange="handleSelectChange(this)">
                                <option value="0" selected>- TODAS -</option>
                                @foreach ($tipos_corte as $tipo_corte)
                                    <option value="{{ $tipo_corte->id }}">
                                        {{ $tipo_corte->tipo . ' - ' . $tipo_corte->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Se termina formulario de los selects tipo_cliente y tipo_corte --}}

                    <div class="col-md-12 d-flex justify-content-center mt-3 mb-3">
                        <button type="button" id="btnGenerate" name="btnGenerate"
                            class="btn btn-primary btn-generate ml-1 mr-1">Generar analisis</button>

                        <button type="button" id="btnRestoreOptions" name="btnRestoreOptions"
                            class="btn btn-light btn-generate ml-1 mr-1">Restaurar selecciones</button>
                    </div>

                    <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>
        </form>
    </div>
    <!-- Form Analisis Cartera -->
@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">
        $(document).ready(function() {
            const fieldsEmptyMessageOptions = {
                icon: 'warning',
                title: '¡Campos vacíos!',
                html: 'Todos los campos marcados con un <b style="color: red !important">*</b> son obligatorios.',
            }

            const workDoneMessageOptions = {
                icon: 'success',
                title: '¡Hecho!',
                text: 'Los documentos se descargarán en breve.',
                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 Toast = Swal.mixin({
                toast: true,
                position: 'bottom-end',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                    toast.addEventListener('click', () => {
                        Swal.close();
                    });
                }
            })

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

                if(fieldsAreEmpty()){
                    return Toast.fire(fieldsEmptyMessageOptions)
                }

                const formData = new FormData($("#frm_analisis_cart")[0]);

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

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

                        Swal.fire(workDoneMessageOptions)

                        const pdfUrl = res.pdfUrl;
                        const pdfFileName = res.pdfFileName

                        let linkPdf = document.createElement('a');

                        linkPdf.href = pdfUrl;

                        linkPdf.download = pdfFileName;

                        linkPdf.click();
                        linkPdf.remove();

                        if(res.isAnalitico){
                            const csvUrl = res.csvUrl;
                            const csvFileName = res.csvFileName

                            let linkCsv = document.createElement('a');

                            linkCsv.href = csvUrl;

                            linkCsv.download = csvFileName;

                            linkCsv.click();
                            linkCsv.remove();
                        }
                    },
                    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'
                        })
                    }
                })
            })

            $('#btnRestoreOptions').on('click',() => {
                restoreOptions();
            })
        })

        function restoreOptions(){
            const selectSucursales  = document.getElementById("sucursales")
            const selectRutas       = document.getElementById("rutas")
            const selectMorosidad   = document.getElementById("morosidad")
            const selectTipoCliente = document.getElementById("tipoCliente")
            const selectTipoCorte   = document.getElementById("tipoCorte")

            const chkBtnAnalitico   = document.getElementById("chkAnalitico")
            const chkBtnMoroCorte   = document.getElementById("chkMorosidadCorte")

            selectSucursales.selectedIndex  = 0;
            selectRutas.selectedIndex       = 0;
            selectMorosidad.selectedIndex   = 0;
            selectTipoCliente.selectedIndex = 0;
            selectTipoCorte.selectedIndex   = 0;

            chkBtnAnalitico.checked = "checked"
            chkBtnMoroCorte.checked = "checked"
        }

        function handleSelectChange(select, isMorosidad = false) {
            const allValue = isMorosidad ? '14' : '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;
                }
            }
        }

        function fieldsAreEmpty(){
            const selectSucursales  = document.getElementById("sucursales")
            const selectRutas       = document.getElementById("rutas")
            const selectMorosidad   = document.getElementById("morosidad")
            const selectTipoCliente = document.getElementById("tipoCliente")
            const selectTipoCorte   = document.getElementById("tipoCorte")
            const selectOrderBy     = document.getElementById("orderBy")

            if (selectSucursales.selectedOptions.length <= 0) {
                return true;
            }

            if (selectRutas.selectedOptions.length <= 0) {
                return true;
            }

            if (selectMorosidad.selectedOptions.length <= 0) {
                return true;
            }

            if (selectTipoCliente.selectedOptions.length <= 0) {
                return true;
            }

            if (selectTipoCorte.selectedOptions.length <= 0) {
                return true;
            }

            if (selectOrderBy.value === "0") {
                return true;
            }

            return false;
        }

    </script>
@endpush