<section x-show="step === 1" x-transition x-ref="step1" x-data="{
            modalidad: <?php echo \Illuminate\Support\Js::from($b['modalidad'] ?? 'CAPITA')->toHtml() ?>,
            numero_contrato: <?php echo \Illuminate\Support\Js::from($b['numero_contrato'] ?? '')->toHtml() ?>,
            nit: <?php echo \Illuminate\Support\Js::from($b['nit'] ?? '')->toHtml() ?>,
            tipo_red: <?php echo \Illuminate\Support\Js::from($b['tipo_red'] ?? '')->toHtml() ?>,
            prestador: <?php echo \Illuminate\Support\Js::from($b['prestador'] ?? '')->toHtml() ?>,
            tipo_red: <?php echo \Illuminate\Support\Js::from($b['tipo_red'] ?? '')->toHtml() ?>,
            complejidad: <?php echo \Illuminate\Support\Js::from($b['complejidad'] ?? '')->toHtml() ?>,
            fecha_inicio: <?php echo \Illuminate\Support\Js::from($b['fecha_inicio'] ?? '')->toHtml() ?>,
            fecha_final:  <?php echo \Illuminate\Support\Js::from($b['fecha_final'] ?? '')->toHtml() ?>,
            fecha_firma:  <?php echo \Illuminate\Support\Js::from($b['fecha_firma_contrato'] ?? '')->toHtml() ?>,
            departamento: <?php echo \Illuminate\Support\Js::from($b['departamento'] ?? '')->toHtml() ?>,
            municipio:    <?php echo \Illuminate\Support\Js::from($b['municipio'] ?? '')->toHtml() ?>,
            contratante:  <?php echo \Illuminate\Support\Js::from($b['contratante'] ?? 'Objeto contrato')->toHtml() ?>,
            objeto:  <?php echo \Illuminate\Support\Js::from($b['objeto'] ?? 'Objeto contrato')->toHtml() ?>,

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

            calcDuracion() {
              if (!this.fecha_inicio || !this.fecha_final) { this.duracion_meses = null; return; }
              const fi = new Date(this.fecha_inicio), ff = new Date(this.fecha_final);
              if (isNaN(fi) || isNaN(ff)) { this.duracion_meses = null; return; }
              let months = (ff.getFullYear() - fi.getFullYear()) * 12 + (ff.getMonth() - fi.getMonth()) + 1;
              if (months < 0) months = 0; this.duracion_meses = months;
            },
            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">
        
        <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" name="basicos[fecha_inicio]" :value="fecha_inicio">
        </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">
        </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">
          <label class="field-label">Nivel de complejidad</label>
          <input class="field-control ro" x-model="complejidad" readonly>
          <input type="hidden" name="basicos[complejidad]" :value="complejidad">
          
        </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" 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>
          <input id="input_valor_per_capita" type="number" step="0.01" min="0" class="field-control"
  name="basicos[valor_per_capita]"
  x-model.number="valor_per_capita"
  @input.debounce.200="
    calcValorTotal;
    // 🔊 avisa a quien escuche (matriz)
    window.dispatchEvent(new CustomEvent('valor-per-capita', { detail: valor_per_capita || 0 }))
  "
  required>

        </div>

        <div class="field">
          <label class="field-label">Valor total mes (auto)</label>
          <input class="field-control ro" :value="valor_total_mes.toFixed(2)" readonly>
          <input type="hidden" name="basicos[valor_total_mes]" :value="valor_total_mes.toFixed(2)">
          <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 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>
<?php /**PATH C:\xampp\htdocs\Auditoria-app\resources\views/formularios/sections/_datos_basicos.blade.php ENDPATH**/ ?>