clientes.js

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


    // Función para cargar avenidas (se mantiene sin cambios)
    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}: No se pudo obtener las avenidas`);
                }
                return response.json();
            })
            .then(data => {
                avenidaSelect.innerHTML = "<option value=''>Selecciona una avenida</option>";

                if (!data.avenidas || data.avenidas.length === 0) {
                    avenidaSelect.innerHTML = "<option value=''>No hay avenidas disponibles</option>";
                    return;
                }

                data.avenidas.forEach(avenida => {
                    let option = document.createElement("option");
                    option.value = avenida.id;
                    option.textContent = avenida.nombre;
                    if (avenidaSeleccionada && avenida.id == avenidaSeleccionada) {
                        option.selected = true;
                    }
                    avenidaSelect.appendChild(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);

            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 = "";
            }

            document.getElementById("edit_estatus").checked = data.estatus;

            // 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");

    formNuevoCliente.addEventListener("submit", async function(event) {
        event.preventDefault(); // Evita recargar la página

        try {
            let formData = new FormData(this);

            Swal.fire({
                title: "Procesando...",
                html: "Por favor, espere.",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            let response = await fetch("/clientes/agregar/", {
                method: "POST",
                body: formData
            });

            if (response.ok) {
                const data = await response.json();

                // Opción A: Mostrar mensaje, insertar fila en la tabla y cerrar modal sin recargar
                Swal.fire("Éxito", data.mensaje || "Cliente agregado correctamente.", "success")
                  .then(() => {
                    // Construir la nueva fila y agregarla al tbody
                    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>
                    `;
                    document.querySelector("table tbody").insertAdjacentHTML("beforeend", nuevaFila);
                    $('#modalAgregarCliente').modal('hide');
                    formNuevoCliente.reset();
                    // Opcional: reubicar el foco en un elemento visible
                    document.querySelector("body").focus();
                  });

                // Opción B: Recargar la página
                // Swal.fire("Éxito", data.mensaje || "Cliente agregado correctamente.", "success")
                //   .then(() => {
                //     $('#modalAgregarCliente').modal('hide');
                //     formNuevoCliente.reset();
                //     window.location.reload();
                //   });

            } else {
                try {
                    const errorData = await response.json();
                    const errorMessage = errorData.error || errorData.message || "No se pudo agregar el cliente.";
                    Swal.fire("Error", errorMessage, "error");
                } catch (parseError) {
                    console.error("Error al parsear la respuesta de error:", parseError);
                    Swal.fire("Error", "Ocurrió un error al procesar la respuesta del servidor.", "error");
                }
            }
        } catch (error) {
            console.error("❌ Error en la solicitud:", error);
            Swal.fire("Error", "Ocurrió un error inesperado.", "error");
        }
    });
});





});