{% extends 'base.html' %}

{% block content %}
<section class="page-view active">
  <div class="view-header">
    <div class="view-title">
      <h2><i data-lucide="user-check" style="color:var(--efintel-blue);"></i> {{ title }}</h2>
      <p>Formulario de alta y edición de especialista I+D+i con taxonomía (categorías 1 a 7) y nivel TRL.</p>
    </div>
    <div>
      <a href="{% url 'talent:candidate_list' %}" class="btn-primary" style="background:var(--efintel-gray); text-decoration:none;">
        <i data-lucide="arrow-left" style="width:16px;"></i> Volver a Cartera
      </a>
    </div>
  </div>

  <div class="data-card" style="max-width:800px; margin:0 auto; padding:2rem;">
    <form method="post" class="modern-form">
      {% csrf_token %}
      
      {% if form.non_field_errors %}
      <div class="alert alert-danger">
        {% for err in form.non_field_errors %}
          <p>{{ err }}</p>
        {% endfor %}
      </div>
      {% endif %}

      <div class="form-grid" x-data="regionComunaData()">
        {% for field in form %}
          {% if field.name == 'city' %}
            <div class="form-group">
              <label for="region_select" class="form-label">Región</label>
              <select id="region_select" x-model="selectedRegion" @change="updateComunas" class="form-control" required>
                <option value="">Seleccione Región...</option>
                <template x-for="(comunas, region) in regionsData" :key="region">
                  <option :value="region" x-text="region" :selected="region === selectedRegion"></option>
                </template>
              </select>
            </div>
            <div class="form-group">
              <label for="comuna_select" class="form-label">Comuna / Ciudad</label>
              <select id="comuna_select" x-model="selectedComuna" @change="updateCity" class="form-control" required>
                <option value="">Seleccione Comuna...</option>
                <template x-for="comuna in availableComunas" :key="comuna">
                  <option :value="comuna" x-text="comuna" :selected="comuna === selectedComuna"></option>
                </template>
              </select>
            </div>
            <!-- Hidden original field to be submitted -->
            <input type="hidden" name="city" id="id_city" x-model="finalCity" />
          {% else %}
            <div class="form-group {% if field.name == 'summary' or field.name == 'address' %}full-width{% endif %}">
              <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
              {{ field }}
              {% if field.help_text %}
                <small class="form-help">{{ field.help_text }}</small>
              {% endif %}
              {% if field.errors %}
                <div class="form-error">
                  {% for err in field.errors %}
                    <span>{{ err }}</span>
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
      </div>

<script>
function regionComunaData() {
  const data = {{ regions_json|safe }};
  const initialCity = "{{ form.city.value|default:'' }}";
  
  let initReg = "";
  let initCom = "";
  
  if (initialCity) {
      // Find which region has this comuna
      for (const [reg, coms] of Object.entries(data)) {
          if (coms.includes(initialCity)) {
              initReg = reg;
              initCom = initialCity;
              break;
          }
      }
      if (!initReg) {
          // If not found in communes, might just be free text or old data.
          initCom = initialCity;
      }
  }

  return {
    regionsData: data,
    selectedRegion: initReg,
    selectedComuna: initCom,
    availableComunas: initReg ? data[initReg] : [],
    finalCity: initialCity,
    
    updateComunas() {
      this.availableComunas = this.selectedRegion ? this.regionsData[this.selectedRegion] : [];
      this.selectedComuna = "";
      this.finalCity = "";
    },
    
    updateCity() {
      this.finalCity = this.selectedComuna;
    }
  }
}
</script>

      <div class="form-actions">
        <a href="{% url 'talent:candidate_list' %}" class="btn-secondary">
          Cancelar
        </a>
        <button type="submit" class="btn-primary">
          <i data-lucide="save"></i> Guardar Especialista
        </button>
      </div>
    </form>
  </div>
</section>
{% endblock %}