@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">
    <div class="form-container sections">
    <form class="row g-3" id="household-form">
        @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">
            <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">
            <label for="DEM2" class="form-label">ES3. Equipo:</label>
            <input type="text" id="ES3" class="form-control" name="DEM2" value="{{ $teamNumber }}" readonly>
        </div>
        </div>
	<div class="row">
        <!-- Fecha de Visita y Levantamiento de Datos -->
         <div class="col-md-6">
           <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <label for="US4" class="form-label">Municipio</label>
            <input type="text" id="US4" class="form-control" name="US4" readonly>
        </div>
	 <div class="row">
        <!-- Distrito -->
        <div class="col-md-4">
            <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">
            <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">
            <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="miembrosTable" class="table table-striped table-bordered">
                <thead>
                    <!-- Primera fila de encabezado -->
                        <tr>
                            <th>Código de Institución</th>
                            <th>Nombre del establecimiento/local</th>
                            <th>Nombre y apellidos de personal de apoyo</th> <!-- Colspan para subcolumnas -->
                            <th>Código de 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>Codigo de resultado final de coordinación</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-success" disabled>Agregar coordinación</button>
        </div>

        <div class="col-12">
            <button type="submit" class="btn btn-primary">Continuar</button>
        </div>

    </form>
    </div>
</div>
@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 = $('#miembrosTable').DataTable({
        "language": {
                url: '/js/i18n/es-MX.json'
        },
    "fixedColumns": true,
    "paging": false,
    "scrollCollapse": true,
    "scrollX": true,
    "autoWidth": false,
    "ordering": false, // Desactiva el ordenamiento globalmente
        "columnDefs": [
            { "width": "10%", "targets": 0 },
            { "width": "20%", "targets": 1 },
            { "width": "10%", "targets": [2, 3, 4] },
            { "width": "10%", "targets": [5, 6, 7] },
            { "width": "15%", "targets": 8 },
            { "width": "15%", "targets": 9 },
            { "width": "15%", "targets": 10 },
            { "width": "15%", "targets": 11 },
            { "width": "15%", "targets": 12 }
        ]
    });
    $('#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);
                    }
                }
            });
        } else {
            // Limpiar los inputs si no hay un segmento seleccionado
            $('#US2').val('');
            $('#US3').val('');
            $('#US4').val('');
            $('#US5').val('');
            $('#US6').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
    $('#household-form').on('submit', function(e) {
        e.preventDefault(); // Evita el envío normal del formulario

        var currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        let ES4Value = $('#ES4').val(); // Obtener la fecha
        if (ES4Value.includes('/')) {
            ES4Value = formatDateToMySQL(DEM4Value); // Convertir formato
            $('#ES4').val(DEM4Value); // 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 = {
            DHV1: $('#DHV1').val(),
            DHV2: $('#DHV2').val(),
            DHV3: $('#DHV3').val(),
            DHV4: $('#DHV4').val(),
            DHV5: $('#DHV5').val(),
            DHV6: $('#DHV6').val(),
            DHV7: $('#DHV7').val(),
            DHV8: $('#DHV8').val(),
        };
        var pollsterData = {
            DEM1: $('#DEM1').val(),
            DEM2: $('#DEM2').val(),
            DEM3: DEM3Value,
            DEM4: DEM4Value,
            DEM5: DEM5Value,
            DEM6: $('#DEM6').val(),
            MH1: $('#MH1').val(),
        };

        // Empaquetar las respuestas del DataTable (coordinaciones locales)
        var tableData = [];
        $('#miembrosTable tbody tr').each(function() {
            var row = {
                MH2_1: $(this).find('input[name="MH2_1[]"]').val(),
                MH2_2: $(this).find('input[name="MH2_2[]"]').val(),
                MH2_3_1: $(this).find('input[name="MH2_3_1[]"]').val(),
                MH2_3_2: $(this).find('input[name="MH2_3_2[]"]').val(),
                MH2_3_3: $(this).find('input[name="MH2_3_3[]"]').val(),
                MH2_4_1: $(this).find('input[name="MH2_4_1[]"]').val(),
                MH2_4_2: $(this).find('input[name="MH2_4_2[]"]').val(),
                MH2_4_3: $(this).find('input[name="MH2_4_3[]"]').val(),
                MH2_5: $(this).find('select[name="MH2_5[]"]').val(),
                MH2_6: $(this).find('input[name="MH2_6[]"]').val(),
                MH2_7: $(this).find('input[name="MH2_7[]"]').val(),
                MH2_8: $(this).find('input[name="MH2_8[]"]').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("survey.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><input type="text" name="MH2_2[]" class="form-control" required placeholder="Ingrese el nombre completo" size="50"></td>
        <td><input type="number" name="MH2_3_1[]" class="form-control date day-birth" min="1" max="31" placeholder="Día" required></td>
        <td><input type="number" name="MH2_3_2[]" class="form-control date month-birth" min="1" max="12" placeholder="Mes" required></td>
        <td><input type="number" name="MH2_3_3[]" class="form-control date year-birth" min="1900" max="2025" placeholder="Año" required></td>
        <td><input type="number" name="MH2_4_1[]" class="form-control date day-age" min="1" max="31" placeholder="Día" required></td>
        <td><input type="number" name="MH2_4_2[]" class="form-control date month-age" min="1" max="12" placeholder="Mes" required></td>
        <td><input type="number" name="MH2_4_3[]" class="form-control date year-age" min="1" max="125" placeholder="Año" required></td>

        <td>
            <select name="MH2_5[]" class="form-select select2" required>
                <option value="">Seleccione un segmento...</option>
                <option value="1">Hombre</option>
                <option value="2">Mujer</option>
            </select>
        </td>
        <td><input type="number" name="MH2_6[]" class="form-control mother-biological" required></td>
        <td><input type="number" name="MH2_7[]" class="form-control father-biological" required></td>
        <td><input type="number" name="MH2_8[]" class="form-control primary-caregiver" required></td>
        <td>
            <button type="button" class="btn btn-danger remove-row">Eliminar</button>
        </td>
    </tr>`;

    // Manejar la eliminación de filas
    $('#miembrosTable 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();
});
$(document).on('input', '.day-birth, .month-birth, .year-birth', function () {
    const $row = $(this).closest('tr');

    // Obtener valores de fecha de nacimiento
    const dayBirth = parseInt($row.find('.day-birth').val()) || 0;
    const monthBirth = parseInt($row.find('.month-birth').val()) || 0;
    const yearBirth = parseInt($row.find('.year-birth').val()) || 0;

    const $dayAge = $row.find('.day-age');
    const $monthAge = $row.find('.month-age');
    const $yearAge = $row.find('.year-age');

    // Resetear todos los campos y validaciones
    $row.find('.day-birth, .month-birth, .year-birth').removeClass('is-invalid is-valid');
    $dayAge.val('').prop('readonly', false);
    $monthAge.val('').prop('readonly', false);
    $yearAge.val('').prop('readonly', false);

    // Manejar caso especial: todos los valores son 99
    switch (true) {
        case dayBirth === 99 && monthBirth === 99 && yearBirth === 99:
            $row.find('.day-birth, .month-birth, .year-birth')
                .addClass('is-valid')
                .prop('readonly', true);
            $dayAge.val('').prop('readonly', false);
            $monthAge.val('').prop('readonly', false);
            $yearAge.val('').prop('readonly', false);
        return;

        case dayBirth === 99 && monthBirth === 99:
            $row.find('.day-birth, .month-birth')
                .addClass('is-valid')
                .prop('readonly', true);
            $dayAge.val('').prop('readonly', true);
            $monthAge.val('').prop('readonly', true);
            $yearAge.val('').prop('readonly', false);
        return;

        case monthBirth === 99:
            $row.find('.month-birth').addClass('is-valid').prop('readonly', true);
            break;

        case yearBirth === 99:
            $row.find('.year-birth').addClass('is-valid').prop('readonly', true);
            break;
    }
      switch (true) {
        case $dayAge === 99 && $monthAge === 99:
            $row.find('.day-age, .month-age')
                .addClass('is-valid')
                .prop('readonly', true);
            return; // No continuar con otras validaciones

        case $dayAge === 99:
            $row.find('.day-age').addClass('is-valid').prop('readonly', true);
            break;

        case $monthAge === 99:
            $row.find('.month-age').addClass('is-valid').prop('readonly', true);
            break;

    }

    // Validar cada campo individualmente
    if (dayBirth >= 1 && dayBirth <= 31) {
        $row.find('.day-birth').addClass('is-valid');
    } else if (dayBirth !== 99) {
        $row.find('.day-birth').addClass('is-invalid');
    }

    if (monthBirth >= 1 && monthBirth <= 12) {
        $row.find('.month-birth').addClass('is-valid');
    } else if (monthBirth !== 99) {
        $row.find('.month-birth').addClass('is-invalid');
    }

    if (yearBirth >= 1900 && yearBirth <= 2025) {
        $row.find('.year-birth').addClass('is-valid');
    } else if (yearBirth !== 99) {
        $row.find('.year-birth').addClass('is-invalid');
    }
    // Validar que la fecha esté completa
    const isDateComplete = dayBirth >= 1 && dayBirth <= 31 &&
                           monthBirth >= 1 && monthBirth <= 12 &&
                           yearBirth >= 1900 && yearBirth <= 2025;

    // Calcular edad si la fecha está completa
    if (isDateComplete) {
        const today = new Date();
        const birthDate = new Date(yearBirth, monthBirth - 1, dayBirth);
        let ageYears = today.getFullYear() - birthDate.getFullYear();
        let ageMonths = today.getMonth() - birthDate.getMonth();
        let ageDays = today.getDate() - birthDate.getDate();
        const $motherField = $row.find('.mother-biological');
        const $fatherField = $row.find('.father-biological');
        const $caregiverField = $row.find('.primary-caregiver');
        // Ajustar cálculos para meses y días negativos

        // Inhabilitar campos de edad y asignar valores
        if (ageYears > 0) {
            $row.find('.day-age, .month-age').val('').prop('readonly', true);
            $row.find('.year-age').val(ageYears).prop('readonly', true);
        } else if (ageMonths > 0) {
            $row.find('.day-age').val('').prop('readonly', true);
            $row.find('.month-age').val(ageMonths).prop('readonly', true);
            $row.find('.year-age').val('').prop('readonly', true);
        } else {
            $row.find('.day-age').val(ageDays).prop('readonly', true);
            $row.find('.month-age, .year-age').val('').prop('readonly', true);
        }
        if (ageYears > 17) {
            $motherField.prop('readonly', true);
            $fatherField.prop('readonly', true);
            $caregiverField.prop('readonly', true);
        }else{
            $motherField.prop('readonly', false);
            $fatherField.prop('readonly', false);
            $caregiverField.prop('readonly', false);
        }
        // Marcar campos como válidos
        $row.find('.day-birth, .month-birth, .year-birth').removeClass('is-invalid').addClass('is-valid');
    } else {
        // Si no está completa, limpiar y habilitar los campos de edad
        $row.find('.day-age, .month-age, .year-age').val('').prop('readonly', false);
        $row.find('.day-birth, .month-birth, .year-birth').removeClass('is-valid').addClass('is-invalid');
    }

});
</script>
@endpush