document.addEventListener("DOMContentLoaded", function() {
    var buscarBtn = document.getElementById("buscarBtn");

    //Añadir un evento al boton de buscar
    buscarBtn.addEventListener("click", function() {
        var codigoPostal = document.getElementById("codigo_postal").value;
        console.log(codigoPostal);

        //verificar si el codigo postal esta vacio
        if (codigoPostal) {
            //crear la url para la peticion
            var url = "./php/buscarCodigo.php?codigo_postal=" + encodeURIComponent(codigoPostal);
            
            //Realiza una solicitud HTTP GET a la URL especificada
            fetch(url)
                .then(response => {
                    //console.log("Estado de la respuesta:", response.status);
                    //console.log("Contenido de la respuesta:", response);
                    // Verifica si la respuesta del servidor es exitosa
if (!response.ok) {
    throw new Error("Error en la respuesta del servidor");
                } 
//Convierte la respuesta a formato JSON
return response.json();


                })
                .then(data => {
                    var estadoSelect = document.getElementById("id_estado");
                    var municipioSelect = document.getElementById("id_municipio");
                    var coloniaSelect = document.getElementById("id_colonia");

                    // Inicializa los elementos select con una opción por defecto
                    estadoSelect.innerHTML = "<option value=''>Seleccionar Estado</option>";
                    municipioSelect.innerHTML = "<option value=''>Seleccionar Municipios</option>";
                    coloniaSelect.innerHTML = "<option value=''>Seleccionar Colonia</option>";

                    // Verifica si se recibieron datos
                    if (data.length > 0) {
                        //Crea conjuntos para almacenar estados, ciudades y colonias únicos
                        let estados = new Set();
                        let municipios = new Set();
                        let colonias = [];

                            // Itera sobre cada fila de datos recibidos
                        data.forEach(row => {
                            estados.add(row.estado);
                            municipios.add(row.municipio);
                            colonias.push(row.colonia);
                        });

                        //Añade las opciones de estados al elemento select
                        estados.forEach(estado => {
                            estadoSelect.innerHTML += "<option value='" + estado + "'>" + estado + "</option>";
                        });

                        //Añade las opciones de ciudades al elemento select
                        municipios.forEach(municipio => {
                            municipioSelect.innerHTML += "<option value='" + municipio + "'>" + municipio + "</option>";
                        });
                            
                        //Añade las opciones de colonias al elemento select
                        colonias.forEach(colonia => {
                            coloniaSelect.innerHTML += "<option value='" + colonia + "'>" + colonia + "</option>";
                        });
                    } else {
                        alert("No se encontraron datos para el código postal ingresado.");
                    }
                })
                .catch(error => {
                    console.error("Error en la solicitud:", error);
                });
        } else {
            alert("Por favor, ingrese un código postal.");
        }
    });
});