<section x-show="step === 1" x-transition x-ref="step1" x-data="{
            modalidad: @js($b['modalidad'] ?? 'CAPITA'),
            numero_contrato: @js($b['numero_contrato'] ?? ''),
            nit: @js($b['nit'] ?? ''),
            tipo_red: @js($b['tipo_red'] ?? ''),
            prestador: @js($b['prestador'] ?? ''),
            tipo_red: @js($b['tipo_red'] ?? ''),
            complejidad: @js($b['complejidad'] ?? ''),
            fecha_inicio: @js($b['fecha_inicio'] ?? ''),
            fecha_final:  @js($b['fecha_final'] ?? ''),
            fecha_firma:  @js($b['fecha_firma_contrato'] ?? ''),
            fecha_inicio_norm: @js($b['fecha_inicio_norm'] ?? ''),
            fecha_final_norm:  @js($b['fecha_final_norm'] ?? ''),
            fecha_firma_norm:  @js($b['fecha_firma_contrato_norm'] ?? ''),
            departamento: @js($b['departamento'] ?? ''),
            municipio:    @js($b['municipio'] ?? ''),
            municipio_id: @js($b['municipio_id'] ?? ''),
            contratante:  @js($b['contratante'] ?? 'Objeto contrato'),
            objeto:  @js($b['objeto'] ?? 'Objeto contrato'),


            nivel_complejidad: '',
            nivel_atencion: '',
            poblacion_inicial: null,
            valor_per_capita: null,
            valor_total_mes: 0,
            duracion_meses: null,

            valor_per_capita: 0,
  valor_per_capita_str: '',

  moneyLocale: 'es-CO',
  moneyCurrency: 'COP',
  moneyDecimals: 0, // pon 2 si necesitas centavos

  init() {
    this.valor_per_capita_str = this.formatMoney(this.valor_per_capita);
  },
  formatMoney(n) {
    const num = Number(n || 0);
    return new Intl.NumberFormat(this.moneyLocale, {
      style: 'currency',
      currency: this.moneyCurrency,
      minimumFractionDigits: this.moneyDecimals,
      maximumFractionDigits: this.moneyDecimals
    }).format(num);
  },
  parseMoney(str) {
    if (typeof str === 'number') return str;
    // deja escribir libre, pero convierte al número real (es-CO)
    let s = String(str ?? '')
      .replace(/[^\d,.-]/g, '')  // quita todo menos dígitos, coma, punto y signo
      .replace(/\.(?=\d{3}(\D|$))/g, '') // quita puntos de miles
      .replace(',', '.');        // coma -> punto decimal
    const num = Number(s);
    return isNaN(num) ? 0 : num;
  },


            parseFecha(str, norm){
              if (norm) { const d = new Date(norm); if (!isNaN(d)) return d; }
              const s = (str||'').trim();
              if (!s) return new Date('');
              if (s.includes('/')) { const [d,m,y] = s.split('/').map(v=>parseInt(v,10)); return new Date(y, (m||1)-1, d||1); }
              const dflt = new Date(s); return dflt;
            },

            periodo_eval: @js($periodoSel ?? ''),

            calcDuracion() {
              if (!this.fecha_inicio && !this.fecha_inicio_norm) { this.duracion_meses = null; return; }
              if (!this.fecha_final && !this.fecha_final_norm)   { this.duracion_meses = null; return; }
              const fi = this.parseFecha(this.fecha_inicio, this.fecha_inicio_norm), ff = this.parseFecha(this.fecha_final, this.fecha_final_norm);
              if (isNaN(fi) || isNaN(ff)) { this.duracion_meses = null; return; }
              let months = (ff.getFullYear() - fi.getFullYear()) * 12 + (ff.getMonth() - fi.getMonth());
              if (months < 0) months = 0; this.duracion_meses = months;
              // (Opcional) duración en días
              const Ms = 24*60*60*1000; this.duracion_dias = Math.max(0, Math.round((ff - fi)/Ms) + 1);
            },
            calcValorTotal() {
              const p = Number(this.poblacion_inicial || 0);
              const v = Number(this.valor_per_capita || 0);
              this.valor_total_mes = p * v;
            }
         }" x-init="calcDuracion(); calcValorTotal()" class="sec sec-basicos">

  <h2 class="sec-title" style="color:var(--c-blue-900)">
    Datos básicos <span class="badge badge-required">* Obligatorio</span>
  </h2>

  <div class="grid md:grid-cols-3 gap-6">
    @php
      $basePeriodo = trim(($seleccion['trimestre'] ?? ''));
      $periodoOpts = [];
      if ($basePeriodo === '') {
        $periodoOpts = ['I', 'I-II', 'I-II-III', 'I-II-III-IV'];
      } elseif ($basePeriodo === 'I') {
        $periodoOpts = ['I-II', 'I-II-III', 'I-II-III-IV'];
      } elseif ($basePeriodo === 'I-II') {
        $periodoOpts = ['I-II-III', 'I-II-III-IV'];
      } elseif ($basePeriodo === 'I-II-III') {
        $periodoOpts = ['I-II-III-IV'];
      } else {
        $periodoOpts = [$basePeriodo];
      }
      $periodoSel = $periodoOpts[0] ?? $basePeriodo;
    @endphp

    <div class="field is-required md:col-span-3">
      <label class="field-label">Periodo evaluado</label>
      <select id="periodo_select" class="field-control" x-model="periodo_eval"
        x-init="$nextTick(()=>{ document.getElementById('hd_trimestre_eval').value=periodo_eval; window.dispatchEvent(new CustomEvent('periodo-cambio',{ detail: periodo_eval })); })"
        @change="document.getElementById('hd_trimestre_eval').value=periodo_eval; window.dispatchEvent(new CustomEvent('periodo-cambio',{ detail: periodo_eval })); window.dispatchEvent(new CustomEvent('sync-resumen'));">
        @foreach ($periodoOpts as $opt)
          <option value="{{ $opt }}" @selected($opt === $periodoSel)>{{ $opt }}</option>
        @endforeach
      </select>
      <input type="hidden" id="hd_trimestre_eval" name="trimestre_eval" value="{{ $periodoSel }}">
    </div>
    {{-- Hidden sincronizados --}}
    <input type="hidden" name="basicos[departamento]" :value="departamento">
    <input type="hidden" name="basicos[municipio]" :value="municipio">



    <div class="field">
      <label class="field-label">Modalidad</label>
      <input class="field-control ro" x-model="modalidad" readonly>
      <input type="hidden" name="basicos[modalidad]" :value="modalidad">
    </div>

    <div class="field">
      <label class="field-label">Número Contrato</label>
      <input class="field-control ro" x-model="numero_contrato" readonly>
      <input type="hidden" name="basicos[numero_contrato]" :value="numero_contrato">
    </div>

    <div class="field">
      <label class="field-label">NIT</label>
      <input class="field-control ro" x-model="nit" readonly>
      <input type="hidden" name="basicos[nit]" :value="nit">
    </div>

    <div class="field md:col-span-2">
      <label class="field-label">Prestador</label>
      <input class="field-control ro" x-model="prestador" readonly>
      <input type="hidden" name="basicos[prestador]" :value="prestador">
    </div>

    <div class="field">
      <label class="field-label">Duración (meses)</label>
      <input class="field-control ro" x-model="duracion_meses" readonly>
      <input type="hidden" name="basicos[duracion_contrato]" :value="duracion_meses">
    </div>

    <div class="field">
      <label class="field-label">Fecha Inicio</label>
      <input class="field-control ro" x-model="fecha_inicio" readonly>
      <input type="hidden" id="hd_fecha_inicio_raw" name="basicos[fecha_inicio]" :value="fecha_inicio">
      <input type="hidden" id="hd_fecha_inicio_norm" name="basicos[fecha_inicio_norm]" :value="fecha_inicio_norm">
    </div>

    <div class="field">
      <label class="field-label">Fecha Final</label>
      <input class="field-control ro" x-model="fecha_final" readonly>
      <input type="hidden" name="basicos[fecha_final]" :value="fecha_final">
      <input type="hidden" name="basicos[fecha_final_norm]" :value="fecha_final_norm">
    </div>

    <div class="field1">
      <label class="field-label">Nivel de atención</label>
      <input class="field-control ro" x-model="tipo_red" readonly>
      <input type="hidden" name="basicos[tipo_red]" :value="tipo_red">
    </div>

    <div class="field is-required">
      <label class="field-label">Nivel de complejidad</label>
      <select class="field-control" x-model="complejidad" name="basicos[complejidad]" required>
        <option value="">Seleccione una opcion</option>
        <option value="MEDIANA">MEDIANA</option>
        <option value="BAJA">BAJA</option>
        <option value="ALTA">ALTA</option>
      </select>
    </div>
    <div class="field">
      <label class="field-label">Departamento</label>
      <input class="field-control ro" x-model="departamento" readonly>
      <input type="hidden" name="seleccion['departamento']" :value="departamento">
    </div>

    <div class="field">
      <label class="field-label">Municipio</label>
      <input class="field-control ro" x-model="municipio_id" readonly>
    </div>

    <div class="field">
      <label class="field-label">Sede</label>
      <input class="field-control ro" x-model="municipio" readonly>
      <input type="hidden" name="seleccion['municipio']" :value="municipio">
    </div>


    <div class="field md:col-span-2">
      <label class="field-label">Contratante</label>
      <input class="field-control ro" x-model="contratante" readonly>
      <input type="hidden" name="basicos[contratante]" :value="contratante">
    </div>

    <div class="field md:col-span-3">
      <label class="field-label">Objeto del contrato</label>
      <input class="field-control ro" x-model="objeto" readonly>
      <input type="hidden" name="basicos[contratante]" :value="objeto">
    </div>



    <div class="field is-required">
      <label class="field-label">Población inicial</label>
      <input type="number" min="0" class="field-control" name="basicos[poblacion_inicial]"
        x-model.number="poblacion_inicial" @input.debounce.200="calcValorTotal" required>
    </div>

<div class="field is-required">
  <label class="field-label">Valor per cápita</label>

  <!-- Visible (texto) sin formatear mientras escribes -->
  <input id="input_valor_per_capita"
         type="text"
         class="field-control"
         x-model="valor_per_capita_str"
         inputmode="decimal" autocomplete="off"
         @focus="
           // al enfocar, muestra sin formato
           valor_per_capita_str = String(valor_per_capita)
             .replace('.', moneyDecimals ? '.' : ',');"
         @input.debounce.200ms="
           // actualiza el número real, pero NO formatea el campo
           valor_per_capita = parseMoney(valor_per_capita_str);
           calcValorTotal();
           window.dispatchEvent(new CustomEvent('valor-per-capita', { detail: valor_per_capita || 0 }));
         "
         @blur="
           // al salir, ahora sí formatea
           valor_per_capita = parseMoney(valor_per_capita_str);
           valor_per_capita_str = formatMoney(valor_per_capita);
         "
         @keydown="
           // permite dígitos, coma/punto y teclas de edición
           k=$event.key, ok=['Backspace','Delete','ArrowLeft','ArrowRight','Home','End','Tab','Enter'];
           if(!(/\d/.test(k) || k===',' || k==='.' || ok.includes(k))) $event.preventDefault();
         "
         required>

  <!-- Oculto (numérico real para el backend) -->
  <input type="hidden" name="basicos[valor_per_capita]"
         :value="Number(valor_per_capita).toFixed(moneyDecimals)">
</div>




    <div class="field">
  <label class="field-label">Valor total mes (auto)</label>
  <input class="field-control ro" :value="formatMoney(valor_total_mes)" readonly>
  <input type="hidden" name="basicos[valor_total_mes]" :value="Number(valor_total_mes).toFixed(moneyDecimals)">
  <p class="field-help">Se calcula con población × per cápita.</p>
</div>



    <div class="field is-required">
      <label class="field-label">Número de informe</label>
      <input class="field-control" name="basicos[numero_informe]" required>
    </div>

    <div class="field">
      <label class="field-label">Novedad contractual</label>
      <input class="field-control" name="basicos[novedad_contractual]">
    </div>

    <div class="field">
      <label class="field-label">Fecha firma contrato</label>
      <input class="field-control ro" x-model="fecha_firma" readonly>
      <input type="hidden" name="basicos[fecha_firma_contrato]" :value="fecha_firma">
    </div>

    <div class="field">
      <label class="field-label">Duración (días)</label>
      <input class="field-control ro" :value="duracion_dias ?? ''" readonly>
    </div>


    <div class="field md:col-span-3">
      <label class="field-label">Anexos disponibles</label>
      <textarea class="field-control" rows="3" name="basicos[anexos_disponibles]"></textarea>
    </div>

    <template x-if="tipo_red && tipo_red.toUpperCase() === 'COMPLEMENTARIA'">
      <div class="field md:col-span-3">
        <!-- Espacio para campos adicionales cuando la red es complementaria -->
      </div>
    </template>
  </div>
</section>
