// obtener los demás datos de la base de datos de contactos para mostrarlas en la ui
async function get_contact_data(btn) {
  try {
      let id = btn.dataset.id;
      let modalBody = document.querySelector("#modalBody");
      
      let response = await fetch('/user/get-contact-data', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id }),
          credentials: 'include'
      });

      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

      let { data } = await response.json();

      let contact = {
          fecha: data[0],
          fecha_hora: data[1],
          nombre: data[2],
          apellido: data[3],
          correo: data[4],
          estado: data[5],
          telefono: data[6],
          tamano_empresa: data[7],
          rol_contacto: data[8],
          tipo_industria: data[9],
          comentarios: data[10],
          estatus: data[11] ?? "Sin Estatus"
      };

    //   modalBody.innerHTML = `
    //       <p><b><i class="bi bi-calendar4-week"></i></b> ${contact.fecha} - ${contact.fecha_hora}</p>
    //       <p><b><i class="bi bi-person-fill"></i></b> ${contact.nombre} ${contact.apellido}</p>
    //       <p><b><i class="bi bi-envelope-at-fill"></i></b> ${contact.correo}</p>
    //       <p><b><i class="bi bi-pin-map-fill"></i></b> ${contact.estado}</p>
    //       <p><b><i class="bi bi-telephone-fill"></i></b> ${contact.telefono}</p>
    //       <p><b><i class="bi bi-people-fill"></i></b> ${contact.tamano_empresa}</p>
    //       <p><b><i class="bi bi-person-vcard"></i></b> ${contact.rol_contacto}</p>
    //       <p><b><i class="bi bi-shop"></i></b> ${contact.tipo_industria}</p>
    //       <p><b><i class="bi bi-wrench-adjustable"></i></b> ${contact.estatus}</p>
    //       <p><b><i class="bi bi-file-earmark-font-fill"></i></b> ${contact.comentarios}</p>
    //   `;
    modalBody.innerHTML = `
    <div class="row">
        <div class="col-md-6">
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-calendar4-week"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Fecha y Hora</span>
                    <span class="modal-contact-value">${contact.fecha} - ${contact.fecha_hora}</span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-person-fill"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Nombre</span>
                    <span class="modal-contact-value">${contact.nombre} ${contact.apellido}</span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-envelope-at-fill"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Correo</span>
                    <span class="modal-contact-value">
                        <a href="mailto:${contact.correo}">${contact.correo}</a>
                    </span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-telephone-fill"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Teléfono</span>
                    <span class="modal-contact-value">
                        <a href="tel:${contact.telefono}">${contact.telefono}</a>
                    </span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-pin-map-fill"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Estado</span>
                    <span class="modal-contact-value">${contact.estado}</span>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-people-fill"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Tamaño de Empresa</span>
                    <span class="modal-contact-value">${contact.tamano_empresa}</span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-person-vcard"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Rol de Contacto</span>
                    <span class="modal-contact-value">${contact.rol_contacto}</span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-shop"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Industria</span>
                    <span class="modal-contact-value">${contact.tipo_industria}</span>
                </div>
            </div>
            
            <div class="modal-contact-item">
                <div class="modal-contact-icon"><i class="bi bi-wrench-adjustable"></i></div>
                <div class="modal-contact-content">
                    <span class="modal-contact-label">Estatus</span>
                    <span class="modal-contact-value badge bg-info text-dark">${contact.estatus}</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="comments-container mt-3">
        <div class="modal-contact-item">
            <div class="modal-contact-icon"><i class="bi bi-file-earmark-font-fill"></i></div>
            <div class="modal-contact-content">
                <span class="modal-contact-label">Comentarios</span>
                <span class="modal-contact-value">${contact.comentarios || 'Sin comentarios'}</span>
            </div>
        </div>
    </div>
`;
  } catch (error) {
      console.error('Error al obtener datos:', error);
  }
}

document.getElementById('dbContact').addEventListener('click', (event) => {
  const button = event.target.closest('button.btn-primary[data-id]');
  if (button) {
      get_contact_data(button);
  }
});

