@extends('layout.master', ['activePage' => 'actualizar_pago_minimo', 'menuParent' => 'Operaciones', 'titlePage' => 'Actualizar pago minimo'])

@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-size: 0.9rem !important;
            font-family: Arial, Helvetica, sans-serif
        }

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


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

        .campo-nota {
            margin-top: 2% !important;
            label {
                font-size: 1rem !important;
                .precaucion {
                    color: #FF3333 !important;
                }
            };

            a {
                color: #0000CC
            }

            a:hover {
                font-weight: bold !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> {{ __('Actualizar pago minimo') }}</span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </li>
                </ul>
            </header>
        </div>
        <!--  Navbar Ends / Breadcrumb Area Ends -->

        <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">
                        <span style="font-size: 1rem !important">Ingrese la siguiente información:</span>

                        <form action="#" method="POST" id="frm_actualizar_pago_minimo" 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>
                                <label class="field mr-3 mt-2">Firma electrónica:</label>
                                <input type="password" name="firma" id="firma" class="form-control form-cont mr-3" style="max-width: 10% !important" maxlength="18" oninput="enableProcessButton()">
                                <button type="button" id="btnProcess" name="btnProcess" class="btn btn-primary btn-process mr-3" title="Generar archivo">
                                    <i class="las la-sync"><span class="field ml-1">Procesar</span></i>
                                </button>
                            </div>
                        </form>

                        <div class="campo-nota">
                            <label><b>Nota:</b> El archivo solo puede contener <b>dos columnas</b>, especificamente llamadas <b>NumCuenta</b>, para enlistar los numeros de <u>cuenta a modificar</u>, y <b>PagoMinimo</b> que corresponde al <u>monto a modificar</u> para cada cuenta. <span class="precaucion">Cualquier dato incorrecto que interfiera en el proceso <u>(número de cuenta no existente, columna nombrada incorrectamente o columnas adicionales innecesarias)</u> causara un error de archivo y <b>no se llevará a cabo ninguna acción.</b></span></label>
                        </div>

                    </div>
                    <div class="d-flex justify-content-center mt-5">
                        <a class="btn btn-primary btn-process" href="{{ asset('assets/material/examples/ActualizarPagoMinimoExample.csv') }}" download> Descargar archivo de ejemplo</a>

                    </div>
                </div>
            </div>
        </div>

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

        const signatureLengthNotValidMessageOptions = {
            icon: 'warning',
            title: '¡El tamaño de la firma es demasiado corto!',
            html: 'Se requiere <b>al menos un cliente</b> para continuar.',
            confirmButtonText: 'Aceptar'
        }

        let fileNotValidMessageOptions = {
            icon: 'error',
            title: '¡Archivo no válido!',
            html: 'El archivo enviado no tiene un contenido válido, por favor revíselo e intentelo de nuevo.',
            confirmButtonText: 'Aceptar'
        }

        const unauthorizedMessageOptions = {
            icon: 'error',
            title: '¡No autorizado!',
            html: 'El usuario o contraseña ingresados no son correctos.',
            confirmButtonText: 'Aceptar'
        }

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

        let workDoneMessageOptions = {
            icon: 'success',
            title: '¡Hecho!',
            text: '',
            confirmButtonText: 'Aceptar'
        }

        $(document).ready(function() {

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

            if(!isSignatureLengthValid() && !inputFileHasItem())
                $('#btnProcess').attr('disabled', true);


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

                if(!isSignatureLengthValid())
                    return Swal.fire(signatureLengthNotValidMessageOptions);

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

                $.ajax({
                    url: "{{ url('/reportes/actualizar-pago-minimo') }}",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: formData,

                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");
                            workDoneMessageOptions.html = res;
                            return Swal.fire(workDoneMessageOptions);
                        }, 1000);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                            if(error.status == 400)
                                return Swal.fire(fileNotValidMessageOptions);

                            if(error.status == 401)
                                return Swal.fire(unauthorizedMessageOptions);

                            if(error.status == 404) {
                                fileNotValidMessageOptions.html = error.responseText;
                                return Swal.fire(fileNotValidMessageOptions);
                            }

                            Swal.fire(ajaxErrorMessage)

                        }, 1000);
                    }
                })
            })

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

        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);

            if(isSignatureLengthValid())
                $('#btnProcess').attr('disabled', false);
        }

        function isSignatureLengthValid(){
            const signature = $("#firma").val();
            return signature.length > 0
        }

        function enableProcessButton(){
            if(isSignatureLengthValid() && inputFileHasItem())
                $('#btnProcess').attr('disabled', false);
            else
                $('#btnProcess').attr('disabled', true);
        }
        function inputFileHasItem() {
            let fileInput = document.getElementById('input_file');
            return fileInput.files.length > 0
        }
    </script>

@endpush