@extends('layouts.dashboard')

@section('dashboard')

@php
    use Carbon\Carbon;

    $fechaDesde = Carbon::now()->startOfMonth()->format('Y-m-d');
    $fechaHasta = Carbon::today()->format('Y-m-d');
@endphp

    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Cuentas por pagar</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Cuentas por pagar</h1>
        </div>
        <div class="col-md-auto align-self-center">
            <div class="dropdown mb-md-2">
                <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton-1"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opciones</button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-1">
                    <form method="post" id="form-cuentas-por-pagar-excel" action="{{ route('excel-cuentas-por-pagar') }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="fechaDesde">
                        <input type="hidden" name="fechaHasta">
                        <input type="hidden" name="valorBusqueda">
                        <input type="hidden" name="tipoBusqueda">
                        <input type="hidden" name="estadoPago">
                        <button type="button" class="dropdown-item small border-0 bg-transparent w-100 blq-btn"
                            onclick="crearExcelCuentasPorPagar()">Descargar
                            Excel</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md">
            <form method="post" class="row row-mini align-items-end justify-content-end form-registro form-enter" id="form-cuentas-por-pagar" onsubmit="return buscarPagoProveedor()">
                {{ csrf_field() }}
                <div class="col-md-auto form-group pr-0">
                    <label class="small mb-0">Desde:</label>
                    <input type="date" id="fecha-desde" name="fecha-desde" class="form-control form-control-sm input-date" value="{{ request('fecha-desde', $fechaDesde) }}">
                </div>

                <div class="col-md-auto form-group pr-0">
                    <label class="small mb-0">Hasta:</label>
                    <input type="date" id="fecha-hasta" name="fecha-hasta" class="form-control form-control-sm input-date" value="{{ request('fecha-hasta', $fechaHasta) }}">
                </div>
                <div class="form-group col-auto pr-0">
                    <label for="estado-pago" class="small mb-0">Estado</label>
                    <select name="estado-pago" id="estado-pago" class="form-control form-control-sm">
                        <option value="">Seleccione el estado..</option>
                        <option value="Pendiente">Pendiente</option>
                        <option value="Pagada Parcialmente">Pagada Parcialmente</option>
                        <option value="Vencida">Vencida</option>
                        <option value="Pagada Totalmente">Pagada Totalmente</option>
                    </select>
                </div>
                <div class="form-group col-auto">
                    <div class="row no-gutters align-items-end">
                        <div class="col-5 dropdown">
                            <button class="dropdown-toggle form-control form-control-sm" type="button" id="tipo-busqueda" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nº
                                folio</button>
                            <ul class="dropdown-menu rounded-0 p-0 m-0" aria-labelledby="tipo-busqueda" style="">
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2" onclick="tipoBusquedaDTE(this, 'folio', 'number')">Nº folio</button></li>
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2" onclick="tipoBusquedaDTE(this, 'rut', 'rut')">RUT Proveedor</button></li>
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2" onclick="tipoBusquedaDTE(this, 'nombre', 'text')">Nombre / Razón social</button></li>
                            </ul>
                        </div>
                        <div class="col">
                            <input type="number" id="buscar" name="buscar" class="form-control form-control-sm" min="1" placeholder="Buscar">
                        </div>
                    </div>
                </div>
                

                <div class="col-md-auto form-group text-right pl-md-1">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>

    </div>

    <div class="card">
        <div class="card-body border-top border-primary rounded-top box-resumen-cuentas-por-pagar" style="border-width: 4px !important;">
            @include('dashboard.cuentas-por-pagar.div-resumen-cuentas-por-pagar')
        </div>
        <div class="card-body">
            <div class="table-responsive table-cuentas-por-pagar">
                @include('dashboard.cuentas-por-pagar.table-cuentas-por-pagar')
            </div>
        </div>
    </div>
    {{-- <div class="d-flex justify-content-center mt-3">
        {{ $dteRecibidos->links() }}
    </div> --}}
            
@endsection

@section('scripts')
    <script>
        function abrirModalPago(dteRecibidoId, tipoDePago){

            fetch("{{ route('modal-pago-proveedor') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    dteRecibidoId: dteRecibidoId,
                    tipoDePago: tipoDePago,
                    modalPagoProveedor: true
                })
            
            })
            .then(response => response.json())
            .then(data => {
                
                if(data.success){
                    // Insertar el contenido en el modal
                    document.getElementById("modal-ajax").innerHTML = data.viewModalPagoProveedor;
                    const modalElement = document.getElementById("modal-subajax");
                    const bootstrapModal = new bootstrap.Modal(modalElement, {
                        backdrop: "static"
                    });
                    bootstrapModal.show();
                    $(".select2").select2();
                }
                
            
            })
            .catch(error => {
                console.error("Error al cargar el modal:", error);
            });
        }

        function habilitarCamposCheque(formaDePago) {
            const chequeFieldsContainer = document.querySelector('.cheque-fields');
            if (!chequeFieldsContainer) return;

            const chequeGroups = chequeFieldsContainer.querySelectorAll('.form-group');

            const mostrarEnTransferencia = ['numero-cuenta', 'banco', 'numero-transferencia', 'fecha-de-pago-transferencia'];
            const mostrarEnCheque = ['numero-cuenta', 'numero-cheque', 'fecha-cobro-cheque', 'estado-cheque', 'banco'];

            chequeGroups.forEach(group => {
                const inputOrSelect = group.querySelector('input, select');
                if (!inputOrSelect) return;

                const fieldId = inputOrSelect.id;
                let mostrarCampo = false;
                let esObligatorio = false;

                if (formaDePago == 1) { // Transferencia
                    mostrarCampo = mostrarEnTransferencia.includes(fieldId);
                    esObligatorio = (fieldId === 'banco'); // solo banco obligatorio
                } else if (formaDePago == 2) { // Cheque
                    mostrarCampo = mostrarEnCheque.includes(fieldId);
                    esObligatorio = true; // todos obligatorios
                }

                if (mostrarCampo) {
                    group.classList.remove('d-none');
                    if (esObligatorio) {
                        inputOrSelect.setAttribute('required', 'required');
                    } else {
                        inputOrSelect.removeAttribute('required');
                    }
                } else {
                    group.classList.add('d-none');
                    inputOrSelect.removeAttribute('required');
                    inputOrSelect.value = ''; // Limpiar valor
                }

                // Asterisco visual solo para el banco
                if (fieldId === 'banco') {
                    const label = group.querySelector('label');
                    if (label) {
                        const existingSpan = label.querySelector('span.href-rosa');
                        if ((formaDePago == 1 || formaDePago == 2) && !existingSpan) {
                            const span = document.createElement('span');
                            span.className = 'href-rosa';
                            span.textContent = '*';
                            label.appendChild(span);
                        } else if ((formaDePago != 1 && formaDePago != 2) && existingSpan) {
                            existingSpan.remove();
                        }
                    }
                }
            });
        }



        function registrarPagoProvedor(dteRecibidoId) {

            var selectFormaDePago       = document.getElementById('forma-de-pago');
            var metodoPagoId            = selectFormaDePago.value;
            
            // var inputFechaDePago        = document.getElementById('fecha-de-pago');
            // var fechaDePago             = inputFechaDePago.value;

            var inputSaldo              = document.getElementById('saldo');
            var saldo                   = inputSaldo.value;
            saldo = saldo.replace(/\$/g, '').replace(/\./g, '').trim();
            saldo = parseFloat(saldo);
            
            var textAreaComentarios     = document.getElementById('comentarios');
            var comentario              = textAreaComentarios.value;

            //CAMPO DE TRANSFERENCIA
            var inputNumeroCuenta       = document.getElementById('numero-cuenta');
            var numeroCuenta            = inputNumeroCuenta.value;

            //CAMPOS DE CHEQUE
            var inputNumeroCheque       = document.getElementById('numero-cheque');
            var numeroCheque            = inputNumeroCheque.value;

            var inputFechaCobroCheque   = document.getElementById('fecha-cobro-cheque');
            var fechaCobroCheque        = inputFechaCobroCheque.value;

            var selectEstadoCheque      = document.getElementById('estado-cheque');
            var estadoCheque            = selectEstadoCheque.value;
            
            var inputbanco              = document.getElementById('banco');
            var banco                   = inputbanco.value;
            

            var inputTipoDePago         = document.getElementById('tipo-de-pago');
            var tipoDePago              = inputTipoDePago.value;

            var inputMontoAbonado       = document.getElementById('monto-abonado');
            var montoAbonado = null;

            //CAMPOS DE TRANSFERENCIA
            var inputNumeroTransferencia    = document.getElementById('numero-transferencia');
            var numeroTransferencia         = inputNumeroTransferencia.value;

            var inputFechaPagoTransferencia    = document.getElementById('fecha-de-pago-transferencia');
            var fechaPagoTransferencia         = inputFechaPagoTransferencia.value;
            
            if (inputMontoAbonado) {
                montoAbonado = inputMontoAbonado.value;
                
                montoAbonado = parseFloat(montoAbonado);

                if (!montoAbonado || parseFloat(montoAbonado) <= 0) {
                    alert('El monto abonado debe ser mayor a 0.');
                    return false; // Detiene el proceso si el valor es inválido
                }
                
                if (montoAbonado > saldo) {
                    alert('El monto abonado no puede ser mayor al saldo pendiente.');
                    return false; // Detiene el proceso si el valor es inválido
                }
            }

            
            var data = new URLSearchParams();
            data.append('dteRecibidoId', dteRecibidoId);
            data.append('metodoPagoId', metodoPagoId);
            //data.append('fechaDePago', fechaDePago);
            data.append('comentario', comentario);
            data.append('numeroCuenta', numeroCuenta);
            data.append('numeroCheque', numeroCheque);
            data.append('fechaCobroCheque', fechaCobroCheque);
            data.append('estadoCheque', estadoCheque);
            data.append('banco', banco);
            data.append('tipoDePago', tipoDePago);
            data.append('montoAbonado', montoAbonado);
            data.append('numeroTransferencia', numeroTransferencia);
            data.append('fechaPagoTransferencia', fechaPagoTransferencia);
            modalCargando();
            //Enviar la solicitud fetch
            fetch('/dashboard/registrar-pago-proveedor', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
                },
                body: data.toString()
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); //Parsear la respuesta JSON
            })
            .then(data => {
                cerrarCargando();
                if (data.success) {
                    
                    simpleAlert(data.message);
                    buscarPagoProveedor();
                    cerrarModal();
                    //limpiarCarritoOrdenDeCompra();
                    //window.open(data.url, '_blank');
                } else {
                    alert(data.message)
                    console.log(data.error)
                    cerrarModal();
                }
                
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
                cerrarModal();
            });

            return false;
        }

        function eliminarPagoProveedor(metodoPagoId){

            fetch("{{ route('eliminar-pago-proveedor') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    metodoPagoId: metodoPagoId
                })
            
            })
            .then(response => response.json())
            .then(data => {
                
                if(data.success){
                    simpleAlert(data.message);
                    buscarPagoProveedor();
                    cerrarModal();
                }else{
                    alert(data.message)
                    console.log(data.error)
                    cerrarModal();
                }
                
            
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
                cerrarModal();
            });
        }

        function buscarPagoProveedor() {

            var inputFechaDesde       = document.getElementById('fecha-desde');
            var fechaDesde            = inputFechaDesde.value;

            var inputFechaHasta       = document.getElementById('fecha-hasta');
            var fechaHasta            = inputFechaHasta.value;

            var inputEstadoPago       = document.getElementById('estado-pago');
            var estadoPago            = inputEstadoPago.value;

            var tipoBusqueda          = document.getElementById('tipo-busqueda').innerText;

            var inputBuscar           = document.getElementById('buscar');
            var buscar                = inputBuscar.value;
            
            var data = new URLSearchParams();
            data.append('fechaDesde', fechaDesde);
            data.append('fechaHasta', fechaHasta);
            data.append('estadoPago', estadoPago);
            data.append('tipoBusqueda', tipoBusqueda);
            data.append('buscar', buscar);

            //modalCargando();
            //Enviar la solicitud fetch
            fetch('/dashboard/buscar-cuenta-por-pagar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
                },
                body: data.toString()
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); //Parsear la respuesta JSON
            })
            .then(data => {
                //cerrarCargando();
                if (data.success) {
                    
                    cargarTablaResumenPagos(data.viewResumenCuentasPorPagar, data.viewTableCuentasPorPagar);
                    //simpleAlert(data.message);
                    //cerrarModal();
                    
                } else {
                    alert(data.message)
                    console.log(data.error)
                    //cerrarModal();
                }
                
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
                //cerrarModal();
            });

            return false;
        }

        function cargarTablaResumenPagos(viewResumenCuentasPorPagar, viewTableCuentasPorPagar){
            document.querySelector('.box-resumen-cuentas-por-pagar').innerHTML = viewResumenCuentasPorPagar;
            document.querySelector('.table-cuentas-por-pagar').innerHTML = viewTableCuentasPorPagar;
        }

        //var tipoBusqueda          = document.getElementById('tipo-busqueda').innerText;
        document.addEventListener('click', function (e) {
            if (e.target.matches('.pagination a')) {
                e.preventDefault();
                const url = e.target.getAttribute('href');

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: new URLSearchParams({
                        fechaDesde: document.getElementById('fecha-desde').value,
                        fechaHasta: document.getElementById('fecha-hasta').value,
                        estadoPago: document.getElementById('estado-pago').value,
                        tipoBusqueda: document.getElementById('tipo-busqueda').innerText,
                        buscar: document.getElementById('buscar').value,
                    }).toString()
                })
                .then(response => response.json())
                .then(data => {
                    document.querySelector('.table-cuentas-por-pagar').innerHTML = data.viewTableCuentasPorPagar;
                    document.querySelector('.box-resumen-cuentas-por-pagar').innerHTML = data.viewResumenCuentasPorPagar;
                });
            }
        });

        window.addEventListener('DOMContentLoaded', function () {
            buscarPagoProveedor();
        });

        function crearExcelCuentasPorPagar() {
            const formCuentasPorPagar = document.querySelector("#form-cuentas-por-pagar");
            const formExcel = document.querySelector("#form-cuentas-por-pagar-excel");

            if (formCuentasPorPagar && formExcel) {
                const fechaDesde = formCuentasPorPagar.querySelector('#fecha-desde')?.value ?? '';
                const fechaHasta = formCuentasPorPagar.querySelector('#fecha-hasta')?.value ?? '';
                const estadoPago = formCuentasPorPagar.querySelector('#estado-pago')?.value ?? '';
                const tipoBusqueda = formCuentasPorPagar.querySelector('#tipo-busqueda')?.innerText ?? '';
                const valorBusqueda = formCuentasPorPagar.querySelector('#buscar')?.value ?? '';

                formExcel.querySelector("[name=fechaDesde]").value = fechaDesde;
                formExcel.querySelector("[name=fechaHasta]").value = fechaHasta;
                formExcel.querySelector("[name=estadoPago]").value = estadoPago;
                formExcel.querySelector("[name=tipoBusqueda]").value = tipoBusqueda;
                formExcel.querySelector("[name=valorBusqueda]").value = valorBusqueda;

                formExcel.submit();
            }
        }
    </script>   
@endsection