<!-- backend/templates/crear_lead.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nuevo Lead</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background: #f8f9fa;
    }
    h2 {
      color: #333;
    }
    form {
      max-width: 800px;
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    label {
      font-weight: bold;
      display: block;
      margin-top: 1rem;
    }
    input, select {
      width: 100%;
      padding: 0.5rem;
      margin-top: 0.5rem;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    button {
      margin-top: 2rem;
      padding: 0.75rem 1.5rem;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
    }
    .readonly {
      background-color: #e9ecef;
    }
  </style>
</head>
<body>
  <h2>Crear nuevo lead</h2>
  <form method="post">
    <label>Código Cliente</label>
    <input type="text" name="codigo_cliente" value="{{ codigo_cliente }}" readonly class="readonly">

    <label>Nombre Cliente</label>
    <input type="text" name="nombre" required>

    <label>Comuna</label>
    <select name="comuna">
      <option value="">Elige una comuna</option>
      {% for comuna in comunas %}
        <option value="{{ comuna }}">{{ comuna }}</option>
      {% endfor %}
      <option value="Por Confirmar">Por Confirmar</option>
    </select>

    <label>Teléfono</label>
    <input type="tel" name="telefono" pattern="[0-9]{9}" placeholder="+56 912345678" required>

    <label>Email</label>
    <input type="email" name="email">

    <label>Tipo Cliente</label>
    <select name="tipo_cliente" required>
      <option value="">Elige un tipo de cliente</option>
      <option value="Particular">Particular</option>
      <option value="Empresa">Empresa</option>
    </select>

    <label>Plataforma</label>
    <select name="plataforma" required>
      <option value="">Elige una plataforma</option>
      <option value="Whatsapp">Whatsapp</option>
      <option value="Instagram">Instagram</option>
      <option value="Formulario">Formulario</option>
      <option value="Email">Email</option>
    </select>

    <label>Fecha Evento</label>
    <input type="date" name="fecha_evento" required>

    <label>Marca</label>
    {% if marcas_disponibles|length == 1 %}
      <input type="text" name="marca" value="{{ marcas_disponibles[0] }}" readonly class="readonly">
    {% else %}
      <select name="marca">
        {% for marca in marcas_disponibles %}
          <option value="{{ marca }}">{{ marca }}</option>
        {% endfor %}
      </select>
    {% endif %}

    <button type="submit">Guardar Lead</button>
  </form>
</body>
</html>
