@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>Cheques Recibidos</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Cheques Recibidos</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-cheques-recibidos-excel" action="{{ route('excel-cheques-recibidos') }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="fechaDesde">
                        <input type="hidden" name="fechaHasta">
                        <input type="hidden" name="valorBusqueda">
                        <input type="hidden" name="tipoBusqueda">
                        <div id="input-estados"></div>
                        <button type="button" class="dropdown-item small border-0 bg-transparent w-100 blq-btn"
                            onclick="crearExcelChequesRecibidos()">Descargar
                            Excel</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md">
            <form method="post" action="{{ route('buscar-cheques-recibidos-clientes') }}" class="row row-mini align-items-end justify-content-end form-registro form-enter" id="form-cheques-recibidos"
                onsubmit="return listarChequesRecibidos(this.id, true)">
                {{ 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="fechaDesde"
                        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="fechaHasta"
                        class="form-control form-control-sm input-date" value="{{ request('fecha-hasta', $fechaHasta) }}">
                </div>
                <div class="form-group col-auto col-md-4">
                    <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="valor-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="cambiarValorBusqueda(this, 'folio')">Nº Folio</button></li>
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="cambiarValorBusqueda(this, 'rut')">RUT Cliente</button></li>
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="cambiarValorBusqueda(this, 'nombre')">Nombre / Razón social</button>
                                </li>
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="cambiarValorBusqueda(this, 'estado')">Estado</button>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <input type="number" id="busqueda" name="valorBusqueda" 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">
                    <input type="hidden" name="offset">
                    <input type="hidden" name="tipoBusqueda" value="folio">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card" id="list-cheques-recibidos">
        @include('dashboard.cheques.clientes.table-cheques-recibidos')
    </div>
@endsection

@section('scripts')
    <script>
        cargarPaginacion();

        function cargarPaginacion() {
            document.querySelectorAll(".list-paginacion a").forEach(function(el) {
                const href = el.getAttribute("href");
                const pageParam = href.split("page=")[1];

                el.setAttribute("href", "javascript: void(0)");
                el.setAttribute("onclick", "cambiarPaginaChequesRecibidos(" + pageParam + ")");
            });
        }

        function cambiarPaginaChequesRecibidos(offset) {
            const offsetInput = document.querySelector("[name=offset]");
            if (offsetInput) {
                offsetInput.value = offset;
            }
            listarChequesRecibidos('form-cheques-recibidos');
        }

        function listarChequesRecibidos(id, nopage = false) {
            if (nopage) {
                const offsetInput = document.querySelector("[name=offset]");
                if (offsetInput) {
                    offsetInput.value = "";
                }
            }

            var form = document.getElementById(id);
            var action = form.getAttribute('action');
            let formData = new FormData(form);

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al mostrar las ventas');
                    }
                    return response.text(); // Convertir la respuesta a texto
                })
                .then(data => {
                    document.getElementById('list-cheques-recibidos').innerHTML = data;
                    document.querySelectorAll(".select2").forEach(function(element) {
                        $(element).select2();
                    });
                    cargarPaginacion();
                })
                .catch(error => {});

            return false;
        }

        function cambiarValorBusqueda(input, tipo) {
            const text = input.textContent;
            const tipoBusqueda = document.getElementById("valor-busqueda");
            if (tipoBusqueda) {
                tipoBusqueda.textContent = text;
            }
            const formVentas = document.querySelector("#form-cheques-recibidos");
            const campoTipo = formVentas.querySelector("[name=tipoBusqueda]");
            if (campoTipo) {
                campoTipo.value = tipo;
            }

            const buscar = document.getElementById("busqueda");

            const select2Container = formVentas.querySelector(".select2-container");
            if(select2Container) {
                select2Container.remove();
            }

            const campoBusquedaInput = formVentas.querySelector("input#busqueda");
            if(!campoBusquedaInput) {
                buscar.outerHTML = `<input type="number" id="busqueda" name="valorBusqueda" class="form-control form-control-sm" placeholder="Buscar">`;
            }
            if (buscar) {
                buscar.classList.remove("input-number");
                buscar.removeAttribute("min");
                buscar.removeAttribute("max");
                buscar.removeAttribute("step");
                switch (tipo) {
                    case "folio":
                        buscar.setAttribute("type", "number");
                        buscar.setAttribute("min", "1");
                        buscar.setAttribute("step", "1");
                        break;

                    case "rut":
                        buscar.setAttribute("type", "text");
                        buscar.classList.add("input-number");
                        break;

                    case "nombre":
                        buscar.setAttribute("type", "search");
                        break;

                    case "estado":
                        buscar.outerHTML = `<select name="estado[]" id="busqueda" class="form-control form-control-sm select2" multiple="multiple" data-toggle="select2" data-placeholder="Estados">
                                                <option value="">Seleccione el estado..</option>
                                                <option value="emitido">Emitido</option>
                                                <option value="depositado">Depositado</option>
                                                <option value="rechazado">Rechazado</option>
                                                <option value="cobrado">Cobrado</option>
                                            </select>`;
                        document.querySelectorAll(".select2").forEach(function(element) {
                            $(element).select2();
                        });
                        break;
                }

                buscar.value = '';
                buscar.focus();
            }
        }

        function modalCambiarEstadoCheque(pagoClienteId) {
            fetch("{{ route('modal-cambiar-estado-cheque-cliente') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    pagoClienteId: pagoClienteId
                })
            
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Hubo un problema al mostrar el modal');
                }
                return response.text();
            })
            .then(data => {
                document.getElementById('modal-ajax').innerHTML = data;
                document.querySelectorAll('#modal-ajax .select2').forEach(element => {
                    $(element).select2();
                });
                var modalElement = document.getElementById('modal-subajax');
                var modal = new bootstrap.Modal(modalElement, {
                    backdrop: 'static'
                });
                modal.show();
            })
            .catch(error => {});
        }

        function modalHistorialMovimientosCheque(pagoClienteId) {
            fetch("{{ route('modal-historial-movimientos-cheque-cliente') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    pagoClienteId: pagoClienteId
                })
            
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Hubo un problema al mostrar el modal');
                }
                return response.text();
            })
            .then(data => {
                document.getElementById('modal-ajax').innerHTML = data;
                document.querySelectorAll('#modal-ajax .select2').forEach(element => {
                    $(element).select2();
                });
                var modalElement = document.getElementById('modal-subajax');
                var modal = new bootstrap.Modal(modalElement, {
                    backdrop: 'static'
                });
                modal.show();
            })
            .catch(error => {});
        }

        function cargarChequeRecibido(pagoClienteId) {
            fetch('{{ route('cargar-cheque-recibido-cliente') }}', {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        pagoClienteId: pagoClienteId
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al cargar los cheques recibidos');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('cheque-recibido-' + pagoClienteId).outerHTML = data;
                })
                .catch(error => {
                    console.log(error);
                });
        }

        function cargarResumenChequesRecibidos() {
            var fechaDesde = document.getElementById('fecha-desde').value;
            var fechaHasta = document.getElementById('fecha-hasta').value;
            fetch('{{ route('cargar-resumen-cheques-recibidos-cliente') }}', {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        fechaDesde: fechaDesde,
                        fechaHasta: fechaHasta,
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al cargar el resumen de los cheques recibidos');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('resumen-cheques-recibidos').innerHTML = data;
                })
                .catch(error => {
                    console.log(error);
                });
        }

        function cambiarEstadoChequeRecibido(id) {
            confirmAlert("¿Desea cambiar el estado del cheque recibido al cliente?", function() {
                modalCargando();
                var form = document.getElementById(id);
                var action = form.getAttribute('action');

                let formData = new FormData(form);

                fetch(action, {
                        method: 'POST',
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        cerrarCargando();
                        if (data.errors) {
                            console.log(data.errors);
                            simpleAlert(data.errors);
                        }
                        if (data.success) {
                            cerrarModal();
                            cargarChequeRecibido(data.pagoClienteId);
                            cargarResumenChequesRecibidos();
                            simpleAlert(data.message);
                        }
                    })
                    .catch(error => {
                        cerrarCargando();
                        simpleAlert(error);
                    });
            });
            return false;
        }

        function eliminarEstadoCheque(pagoClienteId, estado) {
            confirmAlert("¿Desea eliminar el cheque emitido al cliente?", function() {
                fetch('{{ route('eliminar-estado-cheque-recibido') }}', {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            pagoClienteId: pagoClienteId,
                            estado: estado,
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        cerrarCargando();
                        if (data.errors) {
                            console.log(data.errors);
                            simpleAlert(data.errors);
                        }
                        if (data.success) {
                            cerrarModal();
                            cargarChequeRecibido(data.pagoClienteId);
                            cargarResumenChequesRecibidos();
                            simpleAlert(data.message);
                        }
                    })
                    .catch(error => {
                        cerrarCargando();
                        simpleAlert(error);
                    });
            });
        }

        function crearExcelChequesRecibidos() {
            const formCheques = document.querySelector("#form-cheques-recibidos");
            const formExcel = document.querySelector("#form-cheques-recibidos-excel");

            if (formCheques && formExcel) {
                const fechaDesde = formCheques.querySelector("[name=fechaDesde]")?.value ?? '';
                const fechaHasta = formCheques.querySelector("[name=fechaHasta]")?.value ?? '';
                const tipoBusqueda = formCheques.querySelector("[name=tipoBusqueda]")?.value ?? '';
                const valorBusqueda = formCheques.querySelector("[name=valorBusqueda]")?.value ?? '';

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

                // Limpiar todo lo que ya tenga el contenedor
                const contenedor = formExcel.querySelector("#input-estados");
                contenedor.innerHTML = "";
                const estados = formCheques.querySelector(".select-estados");
                if (estados && estados.length > 0) {
                    const seleccionados = estados
                            ? Array.from(estados.selectedOptions).map(opt => opt.value)
                            : [];

                    // Generar un input hidden por cada valor seleccionado
                    seleccionados.forEach(valor => {
                        const hidden = document.createElement("input");
                        hidden.type  = "hidden";
                        hidden.name  = "estado[]";
                        hidden.value = valor;
                        contenedor.appendChild(hidden);
                    });
                }

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