@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}

<style>

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    input[type="date"].form-control {
        padding: 7px 16px !important;
    }

    .hidden-input {
        display: none !important;
    }

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

    .margin-radio-group {
        margin-bottom: .8rem !important;
    }

    .btn-pdf {
        background-color: #c62e2e !important;
        color: white !important;
        border-color: #c62e2e !important
    }
    .btn-excel {
        background-color: #3ec782 !important;
        color: white !important;
        border-color: #3ec782 !important
    }

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

    .btn-submit:disabled {
        background-color: #5b595b !important;
        color: white !important;
        border-color: #5b595b !important

    }
    .icon-large {
        font-size: 1.5em !important;
    }
</style>
@endpush

@section('content')

    <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);"> {{__('Catalogos')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('PROGRAMACION PAGOS PROVEEDORES')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="col d-flex justify-content-center mt-3">
        <form action="#" method="POST" id="frm_prog_pag_prv" class="col-md-6">
            <div class="statbox widget box box-shadow mb-2">
                <div class="widget-content widget-content-area">

                    <div class="row align-items-center mt-2">
                        <h6 class="font-weight-bold ml-3">PROGRAMAR PAGOS POR: </h6>
                        <div class="col-md-6">
                            <div class="btn-group btn-group-programar btn-group-sm margin-radio-group" role="group" aria-label="Seleccionar opción">
                                <input type="radio" id="radio-semana" name="programar_por" value="semana" onchange="selectProgramarOption(this); validateFormContent()" hidden>
                                <label class="btn btn-outline-secondary active" for="radio-semana">Semana</label>

                                <input type="radio" id="radio-fecha" name="programar_por" value="fecha" onchange="selectProgramarOption(this); validateFormContent()" hidden>
                                <label class="btn btn-outline-secondary" for="radio-fecha">Fecha</label>
                            </div>
                        </div>
                    </div>

                    <div class="row d-flex justify-content-center">
                        <div class="col-md-6">
                            <label class="font-weight-bold">Semana: <span class="text-danger">*</span></label>
                            <input type="text" name="semana" id="semana" class="form-control form-control-sm" oninput="validateWeeksOfYear(this); validateFormContent()" required>

                            <label class="font-weight-bold hidden-input">Fecha: <span class="text-danger">*</span></label>
                            <input type="date" name="fecha" id="fecha" class="form-control form-control-sm hidden-input" oninput="validateFormContent()">
                        </div>
                    </div>


                    <div class="row align-items-center mt-3">
                        <h6 class="font-weight-bold ml-3">PROVEEDOR: </h6>
                        <div class="col-md-6">
                            <div class="btn-group btn-group-proveedor btn-group-sm margin-radio-group" role="group" aria-label="Seleccionar opción">
                                <input type="radio" name="opciones_proveedor" id="radio-todos" value="todos" onchange="selectProveedorOption(this); validateFormContent()" hidden>
                                <label class="btn btn-outline-secondary active" for="radio-todos">Todos</label>

                                <input type="radio" name="opciones_proveedor" id="radio-proveedor" value="proveedor" onchange="selectProveedorOption(this); validateFormContent()" hidden>
                                <label class="btn btn-outline-secondary" for="radio-proveedor">Seleccionar proveedor</label>
                            </div>
                        </div>

                    </div>

                    <div id="search_proveedor_div" class="row hidden-input">
                        <input type="hidden" class="form-control form-control-sm" id="id_proveedor" name="id_proveedor" oninput="validateFormContent()">
                        <div class="col-lg-4">
                            <label>Proveedor: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="proveedor_search" onkeydown="if (event.key === 'Enter') { searchProveedor(); } else { validateNumber(event); }">
                        </div>
                        <div class="col-lg-6">
                            <label>Nombre: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm bs-popover" id="name_proveedor" data-container="body" data-trigger="hover" data-content="Teclea el nombre del proveedor a buscar.">
                        </div>
                        <div class="col-lg-2">
                            <button class="btn btn-primary btn-submit mt-4" type="button" onclick="searchProveedor()">Buscar</button>
                        </div>
                    </div>

                    <div class="row align-items-center mt-3">
                        <div class="col-md-5 ml-1 mt-4">
                            <h6 class="font-weight-bold">TIPOS DE DOCUMENTOS: </h6>
                            <div class="btn-group btn-group-tipos-doc btn-group-sm margin-radio-group" role="group" aria-label="Seleccionar opción">
                                <input type="radio" id="radio-facturas" name="tipo_documento" value="facturas" onchange="selectTiposDocOption(this)" checked hidden>
                                <label class="btn btn-outline-secondary active" for="radio-facturas">Facturas</label>

                                <input type="radio" id="radio-remisiones" name="tipo_documento" value="remisiones" onchange="selectTiposDocOption(this)" hidden>
                                <label class="btn btn-outline-secondary" for="radio-remisiones">Remisiones</label>

                                <input type="radio" id="radio-tipos-todos" name="tipo_documento" value="todos" onchange="selectTiposDocOption(this)" hidden>
                                <label class="btn btn-outline-secondary" for="radio-tipos-todos">Todos</label>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <h6 class="font-weight-bold">Moneda: </h6>
                            <select id="selectLimitType" class="form-control form-control-sm text-center" name="moneda">
                                <option value="0" selected>Todas</option>
                                @foreach ($monedas as $moneda)
                                    <option value="{{ $moneda->id }}">{{ $moneda->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <span style="color: black"><b>Importante: </b> Los importes se mostrarán en <b>moneda nacional</b> cuando se <b>seleccione la opción "TODAS LAS MONEDAS".</b> </span>
                    <hr>

                    <div class="row m-auto">
                        <div class="col text-right">
                            <button type="button" id="btnPdf" class="btn btn-pdf btn-submit btn-lg d-inline-flex align-items-center mb-3" onclick="sendRequest('pdf')" disabled>
                                <i class="las la-file-pdf icon-large"></i>
                                <span class="ml-2">Procesar PDF</span>
                            </button>
                            <button type="button" id="btnExcel" class="btn btn-excel btn-submit btn-lg d-inline-flex align-items-center mb-3" onclick="sendRequest('excel')" disabled>
                                <i class="las la-file-excel icon-large"></i>
                                <span class="ml-2">Procesar Excel</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

@push('plugin-scripts')
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/basicui/inputmask.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>

        const noContentMessageOptions = {
            icon: 'info',
            title: '¡Sin contenido!',
            text: 'La consulta no obtuvo ningún resultado.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

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

        $(document).ready(() => {
            $('#radio-semana').prop('checked', true);

            $('#name_proveedor').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('catalogos/proveedores/buscar-por-nombre')}}",
                        dataType: 'json',
                        data: {
                            nombre: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    searchProveedorById(ui.item.id);
                },
                selectFirst: true,
                minLength: 3
            });
        })

        function selectProgramarOption(input) {
            $('.btn-group-programar .btn').removeClass('active');

            if ($(input).is(':checked')) {
                if(input.value == 'semana') {
                    $('#semana').removeClass('hidden-input');
                    $('#fecha').addClass('hidden-input');
                    $('#semana').prev('label').removeClass('hidden-input');
                    $('#semana').prop('required', true);
                    $('#fecha').prev('label').addClass('hidden-input');
                    $('#fecha').prop('required', false);
                } else {
                    $('#fecha').removeClass('hidden-input');
                    $('#semana').addClass('hidden-input');
                    $('#fecha').prev('label').removeClass('hidden-input');
                    $('#fecha').prop('required', true);
                    $('#semana').prev('label').addClass('hidden-input');
                    $('#semana').prop('required', false);
                }

                $(input).next('label').addClass('active');
            }
        }

        function selectProveedorOption(input) {
            $('.btn-group-proveedor .btn').removeClass('active');

            if ($(input).is(':checked')) {
                fillProviderData([])
                if(input.value == 'todos') {
                    $('#search_proveedor_div').addClass('hidden-input');
                    $('#id_proveedor').prop('required', false);
                } else {
                    $('#search_proveedor_div').removeClass('hidden-input');
                    $('#id_proveedor').prop('required', true);
                }

                $(input).next('label').addClass('active');
            }
        }

        function validateWeeksOfYear(input) {
            input.value = input.value.replace(/[^\d.]/g, '')

            if(input.value > 52) {
                input.value = 52
            }
        }

        function searchProveedor() {
            const proveedor = $('#proveedor_search').val();
            $.ajax({
                url: "{{ url('operaciones/programacion-pagos-proveedores/buscar-proveedor-por-numero') }}",
                data: {
                    numero: proveedor
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")

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

                        fillProviderData(res);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function searchProveedorById(id) {
            $.ajax({
                url: "{{ url('operaciones/programacion-pagos-proveedores/buscar-proveedor') }}",
                data: {
                    id: id
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")

                        fillProviderData(res);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function fillProviderData(data) {
            const idProvider = data.id;
            const nameProvider = data.nombre;
            const numberProvider = data.numero;

            $('#id_proveedor').val(idProvider);
            $('#name_proveedor').val(nameProvider);
            $('#proveedor_search').val(numberProvider);

            validateFormContent()
        }

        function validateFormContent() {
            let form = $('#frm_prog_pag_prv')[0];
            let hiddenInputs = $('#frm_prog_pag_prv input[type=hidden][required]');
            let hiddenInputsValidation = true;

            hiddenInputs.each(function() {
                if($(this).val() == '') {
                    hiddenInputsValidation = false;
                    return false;
                }
            })

            let isValid = form.checkValidity() && hiddenInputsValidation;


            $('#btnPdf').attr('disabled', !isValid);
            $('#btnExcel').attr('disabled', !isValid);
        }

        function sendRequest(type) {
            let formData = new FormData($('#frm_prog_pag_prv')[0]);
            formData.delete('programar_por');

            validateProgramarPagosField(formData);

            $.ajax({
                url: "{{ url('operaciones/programacion-pagos-proveedores/generar-') }}" + type,
                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 url = type == 'pdf' ? res.pdfInfo.pdfUrl : res.excelInfo.excelUrl;
                        const fileName = type == 'pdf' ? res.pdfInfo.pdfFileName : res.excelInfo.excelFileName;

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

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

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

        function validateProgramarPagosField(formData) {
            let inputGroup = $('#frm_prog_pag_prv input[name="programar_por"]')

            inputGroup.each(function() {
                if ($(this).is(':checked')) {
                    if($(this).val() == 'semana') {
                        formData.delete('fecha');
                        return false;
                    } else {
                        formData.delete('semana');
                        return false;
                    }
                }
            })
        }

        function selectTiposDocOption(input) {
            $('.btn-group-tipos-doc .btn').removeClass('active');

            if ($(input).is(':checked')) {
                $(input).next('label').addClass('active');
            }
        }

    </script>

@endpush