{% extends 'base.html' %}

{% block content %}
<section class="page-view active">
  <div class="view-header">
    <div class="view-title">
      <h2><i data-lucide="file-check-2" style="color:var(--efintel-blue);"></i> Generar Orden de Compra (OC)</h2>
      <p>Emisión oficial de Orden de Compra formal para envío a proveedor y conciliación 3-Way Match.</p>
    </div>
    <div>
      <a href="{% url 'procurement:purchase_order_list' %}" class="btn-primary" style="background:var(--efintel-gray); text-decoration:none;">
        <i data-lucide="arrow-left" style="width:16px;"></i> Volver
      </a>
    </div>
  </div>

  <div class="data-card" style="max-width:800px; margin:0 auto; padding:2rem;">
    <form method="post" class="modern-form" x-data="chileRegions()">
      {% csrf_token %}
      {% include "partials/_form_grid.html" %}

      <!-- Alpine JS for Region and Comuna injection into delivery_address -->
      <div style="margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 4px;">
        <label>Asistente de Dirección (Región/Comuna)</label>
        <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
          <select x-model="selectedRegion" @change="updateAddress()" class="form-control" style="flex: 1;">
            <option value="">-- Seleccionar Región --</option>
            <template x-for="(communes, region) in regions" :key="region">
              <option :value="region" x-text="region"></option>
            </template>
          </select>
          <select x-model="selectedComuna" @change="updateAddress()" class="form-control" style="flex: 1;" :disabled="!selectedRegion">
            <option value="">-- Seleccionar Comuna --</option>
            <template x-for="comuna in getCommunes()" :key="comuna">
              <option :value="comuna" x-text="comuna"></option>
            </template>
          </select>
        </div>
        <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
          Al seleccionar región y comuna, se agregarán automáticamente al campo "Lugar de Entrega".
        </small>
      </div>

      <div style="margin-top:1.5rem; display:flex; gap:1rem; justify-content:flex-end;">
        <a href="{% url 'procurement:purchase_order_list' %}" class="btn-secondary" style="text-decoration:none;">Cancelar</a>
        <button type="submit" class="btn-primary"><i data-lucide="printer" style="width:16px;"></i> Emitir Orden de Compra</button>
      </div>
    </form>
  </div>
</section>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('chileRegions', () => ({
        regions: {
            "Región de Arica y Parinacota": ["Arica", "Camarones", "Putre", "General Lagos"],
            "Región de Tarapacá": ["Iquique", "Alto Hospicio", "Pozo Almonte", "Camiña", "Colchane", "Huara", "Pica"],
            "Región de Antofagasta": ["Antofagasta", "Mejillones", "Sierra Gorda", "Taltal", "Calama", "Ollagüe", "San Pedro de Atacama", "Tocopilla", "María Elena"],
            "Región de Atacama": ["Copiapó", "Caldera", "Tierra Amarilla", "Chañaral", "Diego de Almagro", "Vallenar", "Alto del Carmen", "Freirina", "Huasco"],
            "Región de Coquimbo": ["La Serena", "Coquimbo", "Andacollo", "La Higuera", "Paihuano", "Vicuña", "Illapel", "Canela", "Los Vilos", "Salamanca", "Ovalle", "Combarbalá", "Monte Patria", "Punitaqui", "Río Hurtado"],
            "Región de Valparaíso": ["Valparaíso", "Casablanca", "Concón", "Juan Fernández", "Puchuncaví", "Quintero", "Viña del Mar", "Isla de Pascua", "Los Andes", "Calle Larga", "Rinconada", "San Esteban", "La Ligua", "Cabildo", "Papudo", "Petorca", "Zapallar", "Quillota", "Calera", "Hijuelas", "La Cruz", "Nogales", "San Antonio", "Algarrobo", "Cartagena", "El Quisco", "El Tabo", "Santo Domingo", "San Felipe", "Catemu", "Llaillay", "Panquehue", "Putaendo", "Santa María", "Quilpué", "Limache", "Olmué", "Villa Alemana"],
            "Región Metropolitana de Santiago": ["Cerrillos", "Cerro Navia", "Conchalí", "El Bosque", "Estación Central", "Huechuraba", "Independencia", "La Cisterna", "La Florida", "La Granja", "La Pintana", "La Reina", "Las Condes", "Lo Barnechea", "Lo Espejo", "Lo Prado", "Macul", "Maipú", "Ñuñoa", "Pedro Aguirre Cerda", "Peñalolén", "Providencia", "Pudahuel", "Quilicura", "Quinta Normal", "Recoleta", "Renca", "Santiago", "San Joaquín", "San Miguel", "San Ramón", "Vitacura", "Puente Alto", "Pirque", "San José de Maipo", "Colina", "Lampa", "Tiltil", "San Bernardo", "Buin", "Calera de Tango", "Paine", "Melipilla", "Alhué", "Curacaví", "María Pinto", "San Pedro", "Talagante", "El Monte", "Isla de Maipo", "Padre Hurtado", "Peñaflor"],
            "Región del Libertador General Bernardo O'Higgins": ["Rancagua", "Codegua", "Coinco", "Coltauco", "Doñihue", "Graneros", "Las Cabras", "Machalí", "Malloa", "Mostazal", "Olivar", "Peumo", "Pichidegua", "Quinta de Tilcoco", "Rengo", "Requínoa", "San Vicente", "Pichilemu", "La Estrella", "Litueche", "Marchihue", "Navidad", "Paredones", "San Fernando", "Chépica", "Chimbarongo", "Lolol", "Nancagua", "Palmilla", "Peralillo", "Placilla", "Pumanque", "Santa Cruz"],
            "Región del Maule": ["Talca", "Constitución", "Curepto", "Empedrado", "Maule", "Pelarco", "Pencahue", "Río Claro", "San Clemente", "San Rafael", "Cauquenes", "Chanco", "Pelluhue", "Curicó", "Hualañé", "Licantén", "Molina", "Rauco", "Romeral", "Sagrada Familia", "Teno", "Vichuquén", "Linares", "Colbún", "Longaví", "Parral", "Retiro", "San Javier", "Villa Alegre", "Yerbas Buenas"],
            "Región de Ñuble": ["Cobquecura", "Coelemu", "Ninhue", "Portezuelo", "Quirihue", "Ránquil", "Treguaco", "Bulnes", "Chillán Viejo", "Chillán", "El Carmen", "Pemuco", "Pinto", "Quillón", "San Ignacio", "Yungay", "Coihueco", "Ñiquén", "San Carlos", "San Fabián", "San Nicolás"],
            "Región del Biobío": ["Concepción", "Coronel", "Chiguayante", "Florida", "Hualqui", "Lota", "Penco", "San Pedro de la Paz", "Santa Juana", "Talcahuano", "Tomé", "Hualpén", "Lebu", "Arauco", "Cañete", "Contulmo", "Curanilahue", "Los Álamos", "Tirúa", "Los Ángeles", "Antuco", "Cabrero", "Laja", "Mulchén", "Nacimiento", "Negrete", "Quilaco", "Quilleco", "San Rosendo", "Santa Bárbara", "Tucapel", "Yumbel", "Alto Biobío"],
            "Región de La Araucanía": ["Temuco", "Carahue", "Cunco", "Curarrehue", "Freire", "Galvarino", "Gorbea", "Lautaro", "Loncoche", "Melipeuco", "Nueva Imperial", "Padre las Casas", "Perquenco", "Pitrufquén", "Pucón", "Saavedra", "Teodoro Schmidt", "Toltén", "Vilcún", "Villarrica", "Cholchol", "Angol", "Collipulli", "Curacautín", "Ercilla", "Lonquimay", "Los Sauces", "Lumaco", "Purén", "Renaico", "Traiguén", "Victoria"],
            "Región de Los Ríos": ["Valdivia", "Corral", "Lanco", "Los Lagos", "Máfil", "Mariquina", "Paillaco", "Panguipulli", "La Unión", "Futrono", "Lago Ranco", "Río Bueno"],
            "Región de Los Lagos": ["Puerto Montt", "Calbuco", "Cochamó", "Fresia", "Frutillar", "Los Muermos", "Llanquihue", "Maullín", "Puerto Varas", "Castro", "Ancud", "Chonchi", "Curaco de Vélez", "Dalcahue", "Puqueldón", "Queilén", "Quellón", "Quemchi", "Quinchao", "Osorno", "Puerto Octay", "Purranque", "Puyehue", "Río Negro", "San Juan de la Costa", "San Pablo", "Chaitén", "Futaleufú", "Hualaihué", "Palena"],
            "Región de Aysén del General Carlos Ibáñez del Campo": ["Coihaique", "Lago Verde", "Aysén", "Cisnes", "Guaitecas", "Cochrane", "O'Higgins", "Tortel", "Chile Chico", "Río Ibáñez"],
            "Región de Magallanes y de la Antártica Chilena": ["Punta Arenas", "Laguna Blanca", "Río Verde", "San Gregorio", "Cabo de Hornos", "Antártica", "Porvenir", "Primavera", "Timaukel", "Natales", "Torres del Paine"]
        },
        selectedRegion: '',
        selectedComuna: '',
        
        getCommunes() {
            return this.selectedRegion ? this.regions[this.selectedRegion] : [];
        },
        
        updateAddress() {
            const addressInput = document.getElementById('id_delivery_address');
            if (addressInput) {
                let current = addressInput.value.split(' - ')[0]; // keep the base address if present
                if (this.selectedRegion && this.selectedComuna) {
                    addressInput.value = `${current} - ${this.selectedComuna}, ${this.selectedRegion}`;
                }
            }
        }
    }));
});
</script>
{% endblock %}