@extends('layouts.main')
@section('content')
<link rel="stylesheet" href="{{ asset('css/survey.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.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">
        @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 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>

        <div class="col-6">
            <button type="submit" class="btn btn-purple w-100">Continuar</button>
        </div>

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

    </div>
</div>
@endsection


@section('scripts')
    @vite(['resources/js/app.js'])
    <script src="{{ asset('js/offlineForms.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initOfflineForm({
                formId: 'offlineCoordinationForm',
                formElement: document.getElementById('coordinationForm'),
                containerId: 'offlineFormsContainer',
                maxForms: 5,
                onLoadCallback: (data) => {
                    console.log('Cargado coordinación offline:', data);
                },
                onDeleteCallback: (idx) => {
                    console.log('Eliminado coordinación offline idx:', idx);
                }
            });
        });
    </script>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<script>
$(document).ready(function() {

    // Inicializar DataTable con opciones de diseño compacto y scroll
   var table = $('#personalApoyoTable').DataTable({
        "language": {
		url:'/js/i18n/es-MX.json'
        },
    "fixedColumns": true,
    "paging": false,
    "searching": false,
    "scrollCollapse": true,
    "scrollX": true,
    "info": false,
    "autoWidth": false,
    "ordering": false, // Desactiva el ordenamiento globalmente
    });
    $('#US1').change(function() {
        var segmentId = $(this).val();
        if (segmentId) {
            $.ajax({
               url: '/household-visit/segment-detail/' + segmentId,
               type: 'GET',
               success: function(data) {
                    if (data) {
                        $('#US2').val(data.region);
                        $('#US3').val(data.department);
                        $('#US4').val(data.muni);
                        $('#US5').val(data.distrito);
                        $('#US6').val(data.area);
			$('#US7').val(data.canton);

                    }
                }
            });
        } else {
            // Limpiar los inputs si no hay un segmento seleccionado
            $('#US2').val('');
            $('#US3').val('');
            $('#US4').val('');
            $('#US5').val('');
            $('#US6').val('');
	    $('#US7').val('');

        }
    });
    $('#US1').change(function() {
        var segmentValue = $(this).val(); // Obtiene el valor seleccionado
        var addRow = $('#addRow');
        // Si se selecciona un segmento, habilita el botón; de lo contrario, deshabilítalo
        if (segmentValue) {
            addRow.prop('disabled', false); // Habilita el botón
        } else {
            addRow.prop('disabled', true); // Deshabilita el botón

        }
    });
    function formatDateToMySQL(date) {
        const [day, month, year] = date.split('/');
        return `${year}-${month}-${day}`; // Formato YYYY-MM-DD
    }
    function formatTimeToMySQL(time) {
    const [timePart, period] = time.split(' ');
    let [hours, minutes] = timePart.split(':');
    hours = period === 'PM' && hours !== '12' ? parseInt(hours) + 12 : hours;
    hours = period === 'AM' && hours === '12' ? '00' : hours;
    return `${hours}:${minutes}:00`; // Formato HH:mm:ss
    }

    // Manejar el envío del formulario
    $('#coordinationForm').on('submit', function(e) {
        e.preventDefault(); // Evita el envío normal del formulario
	console.log('Aca voy');
        var currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        let ES4Value = $('#ES4').val(); // Obtener la fecha
        if (ES4Value.includes('/')) {
            ES4Value = formatDateToMySQL(ES4Value); // Convertir formato
            $('#ES4').val(ES4Value); // Actualizar el valor
        }
        let ES5Value = $('#ES5').val(); // Obtener el valor del tiempo
        if (ES5Value.includes('AM') || ES5Value.includes('PM')) {
        ES5Value = formatTimeToMySQL(ES5Value); // Convertir al formato MySQL
        $('#ES5').val(ES5Value); // Actualizar el valor
        }
        // Asignar el valor al campo DEM6
        $('#ES6').val(currentTime);
        
        var headerData = {
            US1: $('#US1').val(),
            US2: $('#US2').val(),
            US3: $('#US3').val(),
            US4: $('#US4').val(),
            US5: $('#US5').val(),
            US6: $('#US6').val(),
            US7: $('#US7').val(),
        };
	const pollsterData = {
        ES1: $('#ES1').val(),
        ES2: $('#ES2').val(),
        ES3: $('#ES3').val() || '', // aseguramos que no sea undefined
        ES4: $('#ES4').val() || '',
        ES5: $('#ES5').val() || '',
        ES6: $('#ES6').val() || '',
        US1: $('#US1').val(),
    	};
        // Empaquetar las respuestas del DataTable (coordinaciones locales)
        var tableData = [];
        $('#personalApoyoTable tbody tr').each(function() {
            var row = {
                MH2_1: $(this).find('input[name="MH2_1[]"]').val(),
                MH2_2: $(this).find('select[name="MH2_2[]"]').val(),
                MH2_3: $(this).find('input[name="MH2_3[]"]').val(),
                MH2_4: $(this).find('select[name="MH2_4[]"]').val(),
                MH2_5: $(this).find('input[name="MH2_5[]"]').val(),
                MH2_6: $(this).find('input[name="MH2_6[]"]').val(),
            };
            tableData.push(row);
        });
        var isValid = true;

        if (isValid) {
        // Empaquetar toda la información en un solo objeto
        var formData = {
            _token: $('input[name="_token"]').val(),  // Token CSRF
            form_id: $('input[name="form_id"]').val(),
            section1: headerData,
            section2: pollsterData,
            section3: tableData
        };
        console.log('Datos enviados al servidor:', formData);
         $.ajax({
            url: '{{ route("coordination.store") }}', // Ruta del controlador que procesará el formulario
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                // Manejar la respuesta del servidor
                alert('Formulario enviado exitosamente');
                window.location.href = '{{ route("form.success") }}'; // Redirigir al éxito
            },
            error: function(xhr, status, error) {
            console.error('Error en el envío del formulario:', xhr.responseText);
            if (xhr.status === 422) {
                // Muestra los mensajes de error de validación
                let errors = xhr.responseJSON.errors;
                for (let field in errors) {
                    console.error(`Error en ${field}: ${errors[field]}`);
                }
                    alert('Por favor corrige los errores antes de enviar.');
                } else {
                    alert('Error al enviar el formulario. Inténtalo de nuevo.');
                }
            }
        });
        }
    });

    // Manejar el evento de agregar nueva coordinación
    $('#addRow').on('click', function() {
        // Crear un objeto jQuery a partir de la plantilla
        var $newRow = $(newMember);

        // Actualizar el DataTable para que reconozca la nueva fila
        table.row.add($newRow[0]).draw(false);

        // Actualizar Número de Línea
        updateLineNumbers();
    });
    // Plantilla para una nueva fila
    var newMember = `
    <tr class="coordination-entry">
        <td><input type="number" name="MH2_1[]" class="form-control line-number" readonly></td>
        <td><select name="MH2_2[]" class="form-select select2" required>
                <option value="">Institución...</option>
                <option value="1">Ministerio de Salud</option>
                <option value="2">Alcaldía</option>
		<option value="3">ADESCO</option>
		<option value="4">Junta directiva</option>
		<option value="5">Líder comunal</option>
		<option value="6">ONG</option>
                <option value="7">Otro</option>
            </select>
	</td>
        <td><input type="text" name="MH2_3[]" class="form-control" placeholder="Nombre completo" required></td>
        <td><select name="MH2_4[]" class="form-select select2" required>
                <option value="">Cargo que desempeña...</option>
                <option value="1">Director(a)</option>
                <option value="2">Médico consultante</option>
                <option value="3">Enfermero(a)</option>
                <option value="4">Inspector de saneamiento ambiental</option>
                <option value="5">Promotor(a) de salud</option>
                <option value="6">Alcalde</option>
                <option value="7">Líder</option>
		<option value="7">Otro</option>

            </select>
	</td>
        <td><input type="number" name="MH2_5[]" class="form-control" maxlength="8" placeholder="Teléfono fijo o móvil" required></td>
        <td><input type="email" name="MH2_6[]" class="form-control" placeholder="Correo electrónico" required></td>
        <td>
            <button type="button" class="btn btn-danger remove-row">Eliminar</button>
        </td>
    </tr>`;

    // Manejar la eliminación de filas
    $('#personalApoyoTable tbody').on('click', '.remove-row', function() {
    if (confirm("¿Estás seguro de que deseas eliminar esta fila?")) {
            // Obtener la fila actual donde se hizo clic en el botón "Eliminar"
            var $row = $(this).closest('tr');
            // Si el DataTable está en modo responsive y tiene una fila child, buscar la fila padre
            if ($row.hasClass('child')) {
                $row = $row.prev(); // La fila padre está antes de la fila .child
            }
            // Remover la fila del DataTable
            table.row($row).remove().draw(false);
            updateLineNumbers();
        }
    });
    function actualizarNumeroMiembros() {
        var totalMiembros = table.rows().count();
        $('#MH1').val(totalMiembros);
    }
    // Función para actualizar los números de línea
    function updateLineNumbers() {
        table.rows().nodes().each(function (row, index) {
            // Actualizar el número de línea en el input de cada fila
            var lineNumberInput = $(row).find('.line-number');
            var lineNumber = index + 1;

            // Actualizar el valor visual y el atributo value
            lineNumberInput.val(lineNumber); // Visual
            lineNumberInput.attr('value', lineNumber); // Enviar en el formulario
        });
    }
    // Llamar a actualizarNumeroMiembros cada vez que se modifiquen las filas
    table.on('draw', function () {
        updateLineNumbers(); // Actualizar números de línea
        actualizarNumeroMiembros(); // Actualizar total de miembros
    });
});
document.addEventListener('DOMContentLoaded', function () {
    // Añadir evento de input a todos los campos requeridos
    const requiredFields = document.querySelectorAll('[required]');
    const submitButton = document.querySelector('button[type="submit"]');

    function validateForm() {
                let allFilled = true;
                requiredFields.forEach(field => {
                    if (!field.value) {
                        allFilled = false;
                        field.classList.add('is-invalid');
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });
                submitButton.disabled = !allFilled;
            }

    requiredFields.forEach(field => {
        field.addEventListener('input', validateForm);
    });

    // Validar el formulario al cargar la página
    validateForm();
});
</script>
@endpush