pago_servicios.js

document.addEventListener("DOMContentLoaded", function () {
    const buscarClienteInput = document.getElementById("buscarCliente");
    const btnBuscarCliente = document.getElementById("btnBuscarCliente");

    btnBuscarCliente.addEventListener("click", function () {
        const query = buscarClienteInput.value.trim();
        if (query === "") {
            alert("Ingrese un nombre o documento para buscar.");
            return;
        }

        fetch(`/api/clientes/buscar/?query=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert("Cliente no encontrado.");
                } else {
                    actualizarDatosCliente(data[0]);
                }
            })
            .catch(error => {
                console.error("Error al buscar cliente:", error);
                alert("Ocurrió un error al buscar el cliente.");
            });
    });

    function actualizarDatosCliente(cliente) {
        document.getElementById("nombreCliente").textContent = cliente.nombre;
        document.getElementById("direccionCliente").textContent = cliente.direccion || "No registrada";
        document.getElementById("telefonoCliente").textContent = cliente.telefono || "No registrado";
        document.getElementById("servicioCliente").textContent = cliente.servicio || "Sin servicio";
    }
});


    // --- CARGAR MESES PENDIENTES ---
    function cargarPagosPendientes(pagos) {
        listaPagosPendientes.innerHTML = ""; // Limpiar antes de cargar nuevos datos
        if (!pagos || pagos.length === 0) {
            listaPagosPendientes.innerHTML = "<p class='text-muted'>No hay pagos pendientes.</p>";
            return;
        }

        pagos.forEach(pago => {
            const div = document.createElement("div");
            div.classList.add("form-check");

            div.innerHTML = `
                <input type="checkbox" class="form-check-input mes-pago" id="mes-${pago.mes}" value="${pago.monto}" data-mes="${pago.mes}">
                <label class="form-check-label" for="mes-${pago.mes}">${pago.mes} - $${pago.monto}</label>
            `;

            listaPagosPendientes.appendChild(div);
        });

        actualizarTotal(); // Asegurar que el total se actualice al cargar
    }

    // --- ACTUALIZAR TOTAL CUANDO SE SELECCIONAN MESES ---
    listaPagosPendientes.addEventListener("change", function () {
        actualizarTotal();
    });

    function actualizarTotal() {
        let total = 0;
        mesesSeleccionados = [];
        document.querySelectorAll(".mes-pago:checked").forEach(checkbox => {
            total += parseFloat(checkbox.value);
            mesesSeleccionados.push(checkbox.dataset.mes);
        });

        totalCobrar.textContent = `$${total.toFixed(2)}`;
    }

    // --- ABRIR MODAL AL COBRAR ---
    btnCobrar.addEventListener("click", function () {
        if (!clienteSeleccionado) {
            alert("Debe seleccionar un cliente primero.");
            return;
        }

        if (mesesSeleccionados.length === 0) {
            alert("Seleccione al menos un mes para cobrar.");
            return;
        }

        if (formaPago.value === "") {
            alert("Seleccione una forma de pago.");
            return;
        }

        modalBoleta.show();
    });

    // --- CONFIRMAR COBRO ---
    btnConfirmarCobro.addEventListener("click", function () {
        const numeroBoleta = inputNumeroBoleta.value.trim();
        if (numeroBoleta === "") {
            alert("Ingrese un número de boleta.");
            return;
        }

        // ENVIAR DATOS AL BACKEND
        fetch("/api/pagos/registrar/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
            },
            body: JSON.stringify({
                cliente_id: clienteSeleccionado.id,
                meses: mesesSeleccionados,
                total: parseFloat(totalCobrar.textContent.replace("$", "")),
                forma_pago: formaPago.value,
                numero_boleta: numeroBoleta
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("Error en el registro del pago.");
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert("Pago registrado correctamente.");
                location.reload();
            } else {
                alert("Error al registrar el pago.");
            }
        })
        .catch(error => {
            console.error("Error en el pago:", error);
            alert("Ocurrió un error al procesar el pago.");
        });
    });