clientes.js

document.addEventListener('DOMContentLoaded', function() {


    // Función para cargar avenidas (se mantiene sin cambios)
    // clientes.js
function cargarAvenidas(zonaId, avenidaSelectId, avenidaSeleccionada = null) {
    let avenidaSelect = document.getElementById(avenidaSelectId);
    if (!avenidaSelect || !zonaId) return;

    avenidaSelect.innerHTML = "<option value=''>Cargando avenidas...</option>";

    fetch(`/get_avenidas/${zonaId}/`)
        .then(response => {
            if (!response.ok) throw new Error(`Error ${response.status}`);
            return response.json();
        })
        .then(data => {
            avenidaSelect.innerHTML = "<option value=''>Selecciona una avenida</option>";
            if (data.avenidas && data.avenidas.length > 0) {
                data.avenidas.forEach(avenida => {
                    let option = document.createElement("option");
                    option.value = avenida.id;
                    option.textContent = avenida.nombre;
                    if (avenidaSeleccionada == avenida.id) option.selected = true;
                    avenidaSelect.appendChild(option);
                });
            } else {
                avenidaSelect.innerHTML = "<option value=''>No hay avenidas</option>";
            }
        })
        .catch(error => {
            console.error("Error al cargar avenidas:", error);
            avenidaSelect.innerHTML = "<option value=''>Error al cargar</option>";
        });
}

    // Eventos para cargar avenidas (se combinan los listeners repetidos)
    const zonaSelect = document.getElementById("id_zona");
    const editZonaSelect = document.getElementById("edit_zona");

    if (zonaSelect) {
        zonaSelect.addEventListener("change", function () {
            let zonaId = this.value;
            console.log(" Cargando avenidas para la zona seleccionada:", zonaId);
            cargarAvenidas(zonaId, "id_avenida");
        });
    }

    if (editZonaSelect) {
        editZonaSelect.addEventListener("change", function () {
            let zonaId = this.value;
            console.log(" Cargando avenidas para zona en edición:", zonaId);
            cargarAvenidas(zonaId, "edit_avenida");
        });
    }

// --- EDICIÓN DE CLIENTE ---
document.querySelectorAll(".btn-editar").forEach(button => {
    button.addEventListener("click", function () {
        let clienteId = this.getAttribute("data-id");

        fetch(`/clientes/${clienteId}/`, { method: "GET" })
        .then(response => {
            if (!response.ok) {
                throw new Error(`Error ${response.status}: No se pudo obtener la información del cliente.`);
            }
            return response.json();
        })
        .then(data => {
            console.log("Datos recibidos del cliente:", data);

            // Llenar los campos del formulario de edición
            document.getElementById("edit_id").value = data.id;
            document.getElementById("edit_documento").value = data.documento;
            document.getElementById("edit_nombre").value = data.nombre;
            document.getElementById("edit_apellido_paterno").value = data.apellido_paterno;
            document.getElementById("edit_apellido_materno").value = data.apellido_materno;
            document.getElementById("edit_fecha_nacimiento").value = data.fecha_nacimiento;
            document.getElementById("edit_sexo").value = data.sexo;
            document.getElementById("edit_telefono").value = data.telefono;
            document.getElementById("edit_email").value = data.email;

            // Cargar la dirección, zona y avenida desde el array "direcciones"
            if (data.direcciones && data.direcciones.length > 0) {
                document.getElementById("edit_direccion").value = data.direcciones[0].direccion;
                document.getElementById("edit_zona").value = data.direcciones[0].zona_id || "";
                // Si tienes la función cargarAvenidas, la llamas para actualizar el select de avenidas:
                cargarAvenidas(data.direcciones[0].zona_id, "edit_avenida", data.direcciones[0].avenida_id);
            } else {
                document.getElementById("edit_direccion").value = "";
                document.getElementById("edit_zona").value = "";
                document.getElementById("edit_avenida").value = "";
            }

            // Manejo del campo 'edit_estatus' (cambiar esta línea)
            const estatusElement = document.getElementById("edit_estatus");
            if (estatusElement) {
                console.log("Elemento 'edit_estatus' encontrado.");
                estatusElement.value = data.estatus ? "1" : "0"; // Establecer el valor del <select>
            } else {
                console.error("El elemento 'edit_estatus' no fue encontrado.");
            }

            // Mostrar el modal de edición
            $("#modalEditarCliente").modal("show");

            // Configurar el submit del formulario de edición
            const formEditarCliente = document.getElementById('formEditarCliente');
            formEditarCliente.action = `/clientes/${clienteId}/`; // URL correcta

            formEditarCliente.onsubmit = function(event) {
                event.preventDefault();
                const formData = new FormData(formEditarCliente);

                fetch(formEditarCliente.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {throw new Error(err.error || `Error ${response.status}: No se pudo guardar los cambios del cliente.`)});
                    }
                    return response.json();
                })
                .then(data => {
                    console.log("Respuesta del servidor:", data);
                    $('#modalEditarCliente').modal('hide');
                    Swal.fire("Éxito", data.mensaje, "success").then(() => {
                        window.location.reload();
                    });
                })
                .catch(error => {
                    console.error("Error al guardar los cambios del cliente:", error);
                    Swal.fire("Error", error.message, "error");
                });
            };
        })
        .catch(error => {
            console.error("Error al obtener datos del cliente:", error);
            Swal.fire("Error", error.message, "error");
        });
    });
});




function editarCliente(clienteId) {
    // Nota: Asegúrate de tener definida "formData" si la usas aquí;
    // de lo contrario, si lo usas sólo en el submit del modal, elimina esta línea.
    fetch(`/clientes/${clienteId}/`, { // URL corregida
        method: 'POST',
        body: formData, // Asegúrate de definir "formData" si es necesario o elimínalo
        headers: {
          'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
      })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => {throw new Error(err.error || `Error ${response.status}: No se pudo obtener la información del cliente.`)});
        }
        return response.json();
    })
    .then(data => {
        console.log("Datos recibidos del cliente:", data);

        document.getElementById("edit_documento").value = data.documento;
        document.getElementById("edit_nombre").value = data.nombre;
        document.getElementById("edit_apellido_paterno").value = data.apellido_paterno;
        document.getElementById("edit_apellido_materno").value = data.apellido_materno;
        document.getElementById("edit_fecha_nacimiento").value = data.fecha_nacimiento;
        document.getElementById("edit_sexo").value = data.sexo;
        document.getElementById("edit_telefono").value = data.telefono;
        document.getElementById("edit_email").value = data.email;

        // Reemplazamos la antigua asignación de data.direccion por la lectura del array "direcciones"
        if (data.direcciones && data.direcciones.length > 0) {
            document.getElementById("edit_direccion").value = data.direcciones[0].direccion;
            // Asumiendo que tu vista ahora incluye zona_id y avenida_id en cada dirección
            document.getElementById("edit_zona").value = data.direcciones[0].zona_id || "";
            document.getElementById("edit_avenida").value = data.direcciones[0].avenida_id || "";
        } else {
            document.getElementById("edit_direccion").value = "";
            document.getElementById("edit_zona").value = "";
            document.getElementById("edit_avenida").value = "";
        }

        // Manejo de data.estatus (si es numérico)
        const editEstatusCheckbox = document.getElementById("edit_estatus");
        if (typeof data.estatus === 'number') {
            editEstatusCheckbox.checked = data.estatus === 1;
        } else {
            editEstatusCheckbox.checked = data.estatus;
        }

        const formEditarCliente = document.getElementById('formEditarCliente');
        formEditarCliente.action = `/clientes/${clienteId}/`; // URL corregida

        formEditarCliente.onsubmit = function(event) {
            event.preventDefault();
            const formData = new FormData(formEditarCliente);
            fetch(formEditarCliente.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {throw new Error(err.error || `Error ${response.status}: No se pudo guardar los cambios del cliente.`)});
                }
                return response.json();
            })
            .then(data => {
                console.log("Respuesta del servidor:", data);
                $('#modalEditarCliente').modal('hide');
                window.location.reload();
                Swal.fire("Éxito", data.message, "success");
            })
            .catch(error => {
                console.error("Error al guardar los cambios del cliente:", error);
                Swal.fire("Error", error.message, "error");
            });
        };

        $('#modalEditarCliente').modal('show');
    })
    .catch(error => {
        console.error("Error al obtener datos del cliente:", error);
        Swal.fire("Error", error.message, "error");
    });
}



   // --- ELIMINACIÓN DE CLIENTE ---
   document.querySelectorAll(".btn-eliminar").forEach(btn => {
    btn.addEventListener("click", async function () {
        let clienteId = this.getAttribute("data-id");

        Swal.fire({
            title: "¿Estás seguro?",
            text: "Esta acción no se puede deshacer.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Sí, eliminar",
            cancelButtonText: "Cancelar"
        }).then(async (result) => {
            if (result.isConfirmed) {
                try {
                    let response = await fetch(`/clientes/eliminar/${clienteId}/`, {
                        method: "DELETE"
                    });

                    let data = await response.json();

                    if (response.ok) {
                        Swal.fire("Eliminado", "El cliente ha sido eliminado.", "success");

                        //  Eliminar fila de la tabla sin recargar la página
                        let fila = document.querySelector(`tr[data-id="${clienteId}"]`);
                        if (fila) {
                            fila.remove();
                        }
                    } else {
                        Swal.fire("Error", "No se pudo eliminar el cliente.", "error");
                    }
                } catch (error) {
                    console.error("❌ Error en la solicitud:", error);
                    Swal.fire("Error", "No se pudo eliminar el cliente.", "error");
                }
            }
        });
    });
});



document.addEventListener("DOMContentLoaded", function () {
    const formNuevoCliente = document.getElementById("formNuevoCliente");

    if (formNuevoCliente) {
        formNuevoCliente.addEventListener("submit", async function (event) {
            event.preventDefault(); // Evita el envío tradicional del formulario

            try {
                // Mostrar un indicador de carga
                Swal.fire({
                    title: "Procesando...",
                    html: "Por favor, espere.",
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    },
                });

                // Crear un FormData con los datos del formulario
                const formData = new FormData(this);

                // Enviar la solicitud al servidor
                const response = await fetch("/clientes/agregar/", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}", // Asegúrate de incluir el token CSRF
                    },
                });

                // Verificar si la respuesta es exitosa
                if (response.ok) {
                    const data = await response.json();

                    // Mostrar mensaje de éxito
                    Swal.fire({
                        icon: "success",
                        title: "Éxito",
                        text: data.mensaje || "Cliente agregado correctamente.",
                    }).then(() => {
                        // Construir la nueva fila para la tabla
                        const nuevaFila = `
                            <tr data-id="${data.id}">
                                <td class="documento">${data.documento}</td>
                                <td class="nombre">${data.nombre} ${data.apellido_paterno} ${
                            data.apellido_materno || ""
                        }</td>
                                <td class="telefono">${data.telefono}</td>
                                <td class="email">${data.email || ""}</td>
                                <td>
                                    <span class="badge estatus ${
                                        data.estatus ? "bg-success" : "bg-danger"
                                    }">
                                        ${data.estatus ? "Activo" : "Inactivo"}
                                    </span>
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-primary" href="/clientes/${data.id}/">Ver detalle</a>
                                    <button class="btn btn-info btn-sm btn-editar" data-id="${data.id}">
                                        <i class="fa fa-edit"></i> Editar
                                    </button>
                                    <button class="btn btn-danger btn-sm btn-eliminar" data-id="${data.id}">
                                        <i class="fa fa-trash"></i> Eliminar
                                    </button>
                                </td>
                            </tr>
                        `;

                        // Insertar la nueva fila en la tabla
                        document.querySelector("table tbody").insertAdjacentHTML("beforeend", nuevaFila);

                        // Cerrar el modal y limpiar el formulario
                        $("#modalAgregarCliente").modal("hide");
                        formNuevoCliente.reset();

                        // Enfocar un elemento visible (opcional)
                        document.querySelector("body").focus();
                    });
                } else {
                    // Manejar errores de la respuesta
                    const errorData = await response.json();
                    const errorMessage =
                        errorData.error || errorData.message || "No se pudo agregar el cliente.";
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: errorMessage,
                    });
                }
            } catch (error) {
                // Manejar errores inesperados
                console.error("❌ Error en la solicitud:", error);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Ocurrió un error inesperado. Por favor, inténtalo de nuevo.",
                });
            }
        });
    } else {
        console.error("El formulario 'formNuevoCliente' no fue encontrado.");
    }
});


document.addEventListener("DOMContentLoaded", function () {
    const direccionesContainer = document.getElementById("direcciones");
    const agregarDireccionBtn = document.getElementById("agregarDireccion");

    if (direccionesContainer && agregarDireccionBtn) {
        let contadorDirecciones = 1;

        // Función para clonar y modificar nuevas direcciones
        const clonarDireccion = () => {
            contadorDirecciones++;

            // 1. Clonar la primera dirección (que ya tiene las zonas procesadas por Django)
            const primeraDireccion = document.querySelector(".direccion");
            const clon = primeraDireccion.cloneNode(true);

            // 2. Actualizar elementos del clon
            clon.querySelector("h5").textContent = `Dirección ${contadorDirecciones}`;

            // 3. Limpiar valores y agregar eventos
            clon.querySelectorAll("select, input").forEach(elemento => {
                elemento.value = ""; // Limpiar valores

                // Agregar evento change para zonas
                if (elemento.name === "zona[]") {
                    elemento.addEventListener("change", function() {
                        const avenidaSelect = this.closest(".direccion").querySelector("select[name='avenida[]']");
                        cargarAvenidas(this.value, avenidaSelect.id);
                    });
                }
            });

            // 4. Agregar al contenedor
            direccionesContainer.appendChild(clon);
        };

        // Evento para botón agregar dirección
        agregarDireccionBtn.addEventListener("click", clonarDireccion);

        // Cargar avenidas para la primera dirección
        document.querySelectorAll("select[name='zona[]']").forEach(zonaSelect => {
            zonaSelect.addEventListener("change", function() {
                const avenidaSelect = this.closest(".direccion").querySelector("select[name='avenida[]']");
                cargarAvenidas(this.value, avenidaSelect.id);
            });
        });

    } else {
        console.error("Elementos requeridos no encontrados");
    }
});

// Función para cargar avenidas (debe estar definida)
function cargarAvenidas(zonaId, avenidaSelectId) {
    const avenidaSelect = document.getElementById(avenidaSelectId);
    if (!zonaId || !avenidaSelect) return;

    avenidaSelect.innerHTML = '<option value="">Cargando...</option>';

    fetch(`/get_avenidas/${zonaId}/`)
        .then(response => response.json())
        .then(data => {
            avenidaSelect.innerHTML = '<option value="">Selecciona avenida</option>';
            data.avenidas.forEach(avenida => {
                const option = document.createElement("option");
                option.value = avenida.id;
                option.textContent = avenida.nombre;
                avenidaSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error("Error:", error);
            avenidaSelect.innerHTML = '<option value="">Error al cargar</option>';
        });
}


});