lista_clientes.html

{% extends 'base.html' %}
{% block content %}

<div class="container mt-4">
    <input type="hidden" id="id_cliente" name="id_cliente">
    <input type="hidden" id="id_direccion_instalacion" name="id_direccion_instalacion">

    <h2>Mantenimiento de Clientes</h2>
    <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#modalAgregarCliente">
        <i class="fa fa-plus"></i> Nuevo Registro
    </button>
    <form method="get">
        <input type="text" name="q" placeholder="Buscar clientes..." value="{{ request.GET.q }}">
        <button type="submit">Buscar</button>
    </form>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>N° Documento</th>
                <th>Cliente</th>
                <th>Móvil</th>
                <th>Email</th>
                <th>Estado</th>
                <th>Direcciones</th>
                <th>Acción</th>
            </tr>
        </thead>
        <tbody>
            {% for cliente in clientes %}
            <tr data-id="{{ cliente.id }}">
                <td class="documento">{{ cliente.documento }}</td>
                <td class="nombre">{{ cliente.nombre }} {{ cliente.apellido_paterno }}{% if cliente.apellido_materno %} {{ cliente.apellido_materno }}{% endif %}</td>
                <td class="telefono">{{ cliente.telefono }}</td>
                <td class="email">{{ cliente.email }}</td>
                <td>
                    <span class="badge estatus {% if cliente.estatus %}bg-success{% else %}bg-danger{% endif %}">
                        {% if cliente.estatus %}Activo{% else %}Inactivo{% endif %}
                    </span>
                </td>
                <td>
                    <ul>
                        {% for direccion in cliente.direcciones.all %}
                        <li>{{ direccion.direccion }} ({{ direccion.zona.nombre }})</li>
                        {% endfor %}
                    </ul>
                </td>
                <td>
                    <a class="btn btn-sm btn-primary" href="{% url 'detalle_cliente_html' cliente.id %}">
                        Ver detalle
                    </a>
                    <button class="btn btn-info btn-sm btn-editar" data-id="{{ cliente.id }}">
                        <i class="fa fa-edit"></i> Editar
                    </button>
                    <button class="btn btn-danger btn-sm btn-eliminar" data-id="{{ cliente.id }}">
                        <i class="fa fa-trash"></i> Eliminar
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Modal para Registrar Cliente -->
<div class="modal fade" id="modalAgregarCliente" tabindex="-1" aria-labelledby="modalAgregarClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Registrar Cliente</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form id="formNuevoCliente" method="POST">
          {% csrf_token %}
          <div class="modal-body">
            <div class="container-fluid">
              <h5>Información del Cliente</h5>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="documento">N° Documento (*)</label>
                    <input type="text" class="form-control" name="documento" id="documento" required>
                  </div>
                  <div class="form-group">
                    <label for="nombre">Nombre (*)</label>
                    <input type="text" class="form-control" name="nombre" id="nombre" required>
                  </div>
                  <div class="form-group">
                    <label for="apellido_paterno">Apellido Paterno (*)</label>
                    <input type="text" class="form-control" name="apellido_paterno" id="apellido_paterno" required>
                  </div>
                  <div class="form-group">
                    <label for="apellido_materno">Apellido Materno</label>
                    <input type="text" class="form-control" name="apellido_materno" id="apellido_materno">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="telefono">Móvil (*)</label>
                    <input type="text" class="form-control" name="telefono" id="telefono" required>
                  </div>
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email">
                  </div>
                  <div class="form-group">
                    <label for="sexo">Sexo (*)</label>
                    <select name="sexo" id="sexo" class="form-control" required>
                      <option value="">Seleccionar</option>
                      <option value="M">Masculino</option>
                      <option value="F">Femenino</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="estatus">Estado (*)</label>
                    <select name="estatus" id="estatus" class="form-control" required>
                      <option value="1">Activo</option>
                      <option value="0">Inactivo</option>
                    </select>
                  </div>
                </div>
              </div>
              <hr>
              <h5>Direcciones</h5>
              <div id="direccion_formset">
                <div class="direccion-form row">
                  <div class="col-md-5">
                    <label for="zona">Zona (*)</label>
                    <select name="zona" class="form-control" required>
                      <option value="">Selecciona una zona</option>
                      {% for zona in zonas %}
                      <option value="{{ zona.id }}">{{ zona.nombre }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="col-md-5">
                    <label for="direccion">Dirección (*)</label>
                    <input type="text" class="form-control" name="direccion" required>
                  </div>
                  <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-success btn-sm add-direccion"><i class="fa fa-plus"></i></button>
                    <button type="button" class="btn btn-danger btn-sm remove-direccion ml-2"><i class="fa fa-minus"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">Guardar</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          </div>
        </form>
      </div>
    </div>
</div>

<script>
  document.getElementById('formNuevoCliente').addEventListener('submit', function(event) {
      event.preventDefault();  // Evita el envío tradicional del formulario

      const formData = new FormData(this);

      fetch("{% url 'agregar_cliente' %}", {
          method: 'POST',
          body: formData,
          headers: {
              'X-CSRFToken': '{{ csrf_token }}'
          }
      })
      .then(response => response.json())
      .then(data => {
          if (data.success) {
              alert("Cliente agregado exitosamente");
              location.reload();  // 🔥 Recargar la página para ver los cambios
          } else {
              console.error("Errores:", data.errors);
              alert("Error: " + JSON.stringify(data.errors));  // 🔥 Mostrar errores reales
          }
      })
      .catch(error => {
          console.error('Error:', error);
          alert("Ocurrió un error inesperado. Revisa la consola.");
      });
  });
  </script>



{% endblock %}