{% extends 'menu/menu.html' %}
{% load static %}

{% block title %}✏️ Editar tu NexID{% endblock %}

{% block body %}

<style>
  /* Avatar Preview Styles */
  .avatar-preview {
    display: block;
    margin: 0 auto 1rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
  }
</style>

<h4 class="mb-4 fw-bold text-center">✏️ Editar tu NexID</h4>

<form id="nexid-form" action="{% url 'update_nexid' %}"
      method="post" enctype="multipart/form-data"
      class="w-75 mx-auto">
  {% csrf_token %}

  <div class="text-center mb-4">
    {% if foto_perfil %}
      <img id="preview-avatar" src="{{ foto_perfil }}"
           class="avatar-preview" alt="Avatar">
    {% else %}
      <img id="preview-avatar" src="{% static 'img/default_avatar.png' %}"
           class="avatar-preview" alt="Avatar">
    {% endif %}
    <input type="file" name="foto_perfil" accept="image/*"
           class="form-control form-control-sm mt-2"
           onchange="loadPreview(this)">
  </div>

  <input type="hidden" name="id_usuario" value="{{ id_usuario }}">

  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label">Nombre</label>
      <input type="text" name="nombre" value="{{ nombre }}"
             class="form-control" required>
    </div>
    <div class="col-md-6">
      <label class="form-label">Apellidos</label>
      <input type="text" name="apellido" value="{{ apellido }}"
             class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">ID Cliente</label>
      <input type="text" name="identidad" value="{{ identidad }}"
             class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">Correo electrónico</label>
      <input type="email" name="correo" value="{{ correo }}"
             class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">Teléfono</label>
      <input type="text" name="telefono" value="{{ telefono }}"
             class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">Dirección</label>
      <input type="text" name="direccion" value="{{ direccion }}"
             class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">Representante de negocio</label>
      <input type="text" name="representante_negocio"
             value="{{ representante_negocio }}" class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">RTN de negocio</label>
      <input type="text" name="rtn_negocio" value="{{ rtn_negocio }}"
             class="form-control">
    </div>
    <div class="col-md-12">
      <label class="form-label">Descripción del negocio</label>
      <textarea name="descripcion_negocio" rows="3"
                class="form-control">{{ descripcion_negocio }}</textarea>
    </div>
  </div>

  <button type="submit" class="btn btn-primary w-100 mt-4">
    Guardar cambios
  </button>
</form>

{% endblock %}

{% block scripts %}
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Toast de éxito si llega ?updated=1
      const params = new URLSearchParams(window.location.search);
      if (params.get('updated') === '1') {
        Swal.fire({
          toast: true,
          position: 'top-right',
          icon: 'success',
          title: '✅ Información actualizada correctamente',
          showConfirmButton: false,
          timer: 2500,
          timerProgressBar: true
        });
      }

      // Previsualización de avatar
      window.loadPreview = (input) => {
        if (input.files && input.files[0]) {
          const reader = new FileReader();
          reader.onload = (e) => {
            document.getElementById('preview-avatar').src = e.target.result;
          };
          reader.readAsDataURL(input.files[0]);
        }
      };
    });
  </script>
{% endblock %}