@extends('layouts.main')
@section('content')
<link rel="stylesheet" href="{{ asset('css/survey.css') }}">
<div class="container">
<!-- Alerta Offline -->
<div  id="offline-alert" class="alert alert-warning d-none align-items-center justify-content-center" role="alert">
  <i class='bx bx-wifi-off mr-2' style="font-size:1.5rem;"></i>
  <span>Estás sin conexión. No recargues esta página hasta recuperar internet.</span>
</div>


    <div class="form-container sections">
    <form class="row g-3" id="coordinationForm" action="{{ route('coordination.store') }}">
        @csrf
        <!-- Campo oculto para enviar el form_id -->
        <input type="hidden" name="form_id" value="1">
        <!-- Sección Datos del Encuestador -->
         <div class="row sub survey-section">
            <h3 class="subtitle">SECCIÓN: DATOS DEL SUPERVISOR Y ENCUESTADORES (ES)</h3>
        </div>
        <div class="row">
        <!-- Nombre de Encuestador(a) -->
        <div class="col-md-8 col-sm-12">
            <label for="ES1" class="form-label">ES1. Nombre de supervisor(a):</label>
            <input type="text" id="ES1" class="form-control" name="ES1" value="{{ $user->name }}" readonly>
        </div>
         <div class="col-md-4 col-sm-12">
            <label for="ES3" class="form-label">ES3. Equipo:</label>
            <input type="text" id="ES3" class="form-control" name="ES3" value="{{ $team->name  }}" readonly>
        </div>
        </div>
	<div class="row">
        <!-- Fecha de Visita y Levantamiento de Datos -->
         <div class="col-md-6 col-sm-12">
           <label form="ES2">ES2. Nombre de encuestadores: </label><br>
           <input type="text" id="ES2_1" name="ES2" value="{{ $pollsters[0]->name ?? ''  }}"><br>
           <input type="text" id="ES2_2" name="ES2" value="{{ $pollsters[1]->name ?? '' }}"><br>
           <input type="text" id="ES2_3" name="ES2" value="{{ $pollsters[2]->name ?? ''  }}">
        </div>
        <div class="col-md-6 col-sm-12">
            <label for="ES4" class="form-label">Fecha de coordinación</label>
            <input type="text" id="ES4" class="form-control" name="ES4" value="{{ $currentDate }}" readonly>
        </div>
        </div>
        <div class="row">
        <!-- Hora de Inicio -->
        <div class="col-md-6 col-sm-12" >
            <label for="ES5" class="form-label">Hora de Inicio</label>
            <input type="text" id="ES5" class="form-control" name="ES5" value="{{ $currentTime }}" readonly>
        </div>
        <!-- Hora de Finalización -->
        <div class="col-md-6 col-sm-12">
            <label for="ES6" class="form-label">Hora de Finalización</label>
            <input type="text" id="ES6" class="form-control" name="ES6" readonly>
        </div>
        </div>
	<div class="row sub survey-section">
            <h3 class="subtitle">DATOS DEL HOGAR A VISITAR</h3>
        </div>

        <!-- Correlativo del Segmento Cartográfico -->
        <div class="row">
        <div class="col-md-6 col-sm-12">
            <label for="US1" class="form-label">Correlativo del Segmento Cartográfico</label>
            <select id="US1" name="US1" class="form-select select2" required>
                <option value="">Seleccione un segmento...</option>
                @foreach($segmentUser as $segment)
                    <option value="{{ $segment->correlativo_segmento }}">{{ $segment->correlativo_segmento }}</option>
                @endforeach
            </select>
        </div>

        <!-- Región de Salud -->
        <div class="col-md-6 col-sm-12">
            <label for="US2" class="form-label">Región de Salud</label>
            <input type="text" id="US2" class="form-control" name="US2" readonly>
        </div>
        </div>
        <div class="row">

        <!-- Departamento -->
        <div class="col-md-6 col-sm-12">
            <label for="US3" class="form-label">Departamento</label>
            <input type="text" id="US3" class="form-control" name="US3" readonly>
        </div>
        <!-- Municipio -->
        <div class="col-md-6 col-sm-12">
            <label for="US4" class="form-label">Municipio</label>
            <input type="text" id="US4" class="form-control" name="US4" readonly>
        </div>
	</div>
	 <div class="row">
        <!-- Distrito -->
        <div class="col-md-4 col-sm-12">
            <label for="US5" class="form-label">Distrito</label>
            <input type="text" id="US5" class="form-control" name="US5" readonly>
        </div>

        <!-- Área -->
        <div class="col-md-4 col-sm-12">
            <label for="US6" class="form-label">Área</label>
            <input type="text" id="US6" class="form-control" name="US6" readonly>
        </div>
	 <!-- Cantón -->
        <div class="col-md-4 col-sm-12">
            <label for="US7" class="form-label">Nombre del cantón</label>
            <input type="text" id="US7" class="form-control" name="US7" readonly>
        </div>
        </div>

	<!-- Datos de personal de apoyo -->
         <div class="row sub survey-section">
            <h3 class="subtitle">SECCIÓN: COORDINACIÓN Y DESIGNACIÓN DE PERSONAL DE APOYO(CA)</h3>
        </div>
        <!-- Tabla de Registros Agregados con DataTables -->
        <div class="col-12 mb-3 table-responsive">
            <table id="personalApoyoTable" class="table table-striped table-bordered">
                <thead>
                    <!-- Primera fila de encabezado -->
                        <tr>
			    <th>#</th>
                            <th>Nombre del establecimiento/local</th>
                            <th>Nombre y apellidos de personal de apoyo</th> <!-- Colspan para subcolumnas -->
                            <th>Cargo que desempeña</th> <!-- Colspan para subcolumnas -->
                            <th>Número de teléfono de contácto (Móvil o fijo)</th>
                            <th>Correo electrónico institucional o personal</th>
                            <th>Acciones</th>
                        </tr>
                </thead>
                <tbody id="coordination-rows">
                    <!-- Las filas se agregarán aquí dinámicamente -->
                </tbody>
            </table>
        </div>
        <!-- Botón para agregar más coordinaciones -->
        <div class="col-12 mb-3">
           <button type="button" id="addRow" class="btn btn-outline-purple w-100" disabled>Agregar coordinación</button>
        </div>

        <button id="btnContinuar" type="submit" class="btn btn-purple w-100">
            Continuar
        </button>

    </form>
    <hr>
    <h4>Formularios Guardados Offline</h4>
    
</div>
<div id="offlineFormsContainer" class="mt-3"></div>

    </div><div id="coordination-config"
     data-api="/coordination/store"
     data-csrf="{{ csrf_token() }}">
</div>
@endsection
@vite(['resources/js/coordination/index.js'])