@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">
	<div class="row">
    	    <button onclick="history.back();" class="btn btn-outline-dark">Regresar</button>
    	</div>
    <form class="row g-3" id="household-form">
        @csrf
	<!-- Campo oculto para enviar el form_id -->
    	<input type="hidden" name="form_id" value="1">
        <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="DHV1" class="form-label">Correlativo del Segmento Cartográfico</label>
            <select id="DHV1" name="DHV1" 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="DHV2" class="form-label">Región de Salud</label>
            <input type="text" id="DHV2" class="form-control" name="DHV2" readonly>
        </div>
	</div>
	<div class="row">

        <!-- Departamento -->
        <div class="col-md-6">
            <label for="DHV3" class="form-label">Departamento</label>
            <input type="text" id="DHV3" class="form-control" name="DHV3" readonly>
        </div>

        <!-- Municipio -->
        <div class="col-md-6">
            <label for="DHV4" class="form-label">Municipio</label>
            <input type="text" id="DHV4" class="form-control" name="DHV4" readonly>
        </div>
	</div>
        <div class="row">
        <!-- Distrito -->
        <div class="col-md-6">
            <label for="DHV5" class="form-label">Distrito</label>
            <input type="text" id="DHV5" class="form-control" name="DHV5" readonly>
        </div>

        <!-- Área -->
        <div class="col-md-6">
            <label for="DHV6" class="form-label">Área</label>
            <input type="text" id="DHV6" class="form-control" name="DHV6" readonly>
        </div>
	</div>
        <div class="row">
	<div class="col-md-6">
	    <label for="DHV7" class="form-label">Orden de vivienda</label>
	    <input type="number" id="DHV7" name="DHV7" class="form-control" placeholder="Ingrese el orden de vivienda" min="0" max="9999" required>
	</div>
	<div class="col-md-6">
	    <label for="DHV8" class="form-label">Número de casa</label>
	    <input type="number" id="DHV8"  name="DHV8" class="form-control" placeholder="Ingrese el número de casa" min="1" max="30" required>
	</div>
	</div>
        <!-- Sección Datos del Encuestador -->
	 <div class="row sub survey-section">
            <h3 class="subtitle">DATOS DEL ENCUESTADOR(A)</h3>
        </div>
	<div class="row">
        <!-- Nombre de Encuestador(a) -->
        <div class="col-md-8">
            <label for="DEM1" class="form-label">Nombre de encuestador(a):</label>
            <input type="text" id="DEM1" class="form-control" name="DEM1" value="{{ $user->name }}" readonly>
        </div>
	 <div class="col-md-4">
            <label for="DEM2" class="form-label">Equipo:</label>
            <input type="text" id="DEM2" 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="DEM3">¿Es miembro del equipo? (DEM3):</label><br>
    	   <input type="radio" id="DEM3_1" name="DEM3" value="Factible"> <label for="DEM3_1">Factible</label><br>
    	   <input type="radio" id="DEM3_2" name="DEM3" value="No Factible"><label for="DEM3_2">No factible... Pase a reprogramacion</label>

        </div>
        <div class="col-md-6">
            <label for="DEM4" class="form-label">Fecha de visita y levantamiento de datos</label>
            <input type="text" id="DEM4" class="form-control" name="DEM4" value="{{ $currentDate }}" readonly>
        </div>
        </div>
        <div class="row">
        <!-- Hora de Inicio -->
        <div class="col-md-6">
            <label for="DEM5" class="form-label">Hora de Inicio</label>
            <input type="text" id="DEM5" class="form-control" name="DEM5" value="{{ $currentTime }}" readonly>
        </div>
        <!-- Hora de Finalización -->
        <div class="col-md-6">
            <label for="DEM6" class="form-label">Hora de Finalización</label>
            <input type="text" id="DEM6" class="form-control" name="DEM6" readonly>
        </div>
	</div>
       	 <!-- Sección Listado de Miembros del Hogar -->
         <div class="row sub survey-section">
            <h3 class="subtitle">LISTADO DE MIEMBROS DEL HOGAR</h3>
        </div>
	<div class="row">
	    <div class="col-md-12">
		<label for="MH1">Número de Miembros del Hogar:</label>
		<input type="number" id="MH1" name="MH1" class="form-control" value="0" readonly>
	    </div>
	</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 rowspan="2">No. de línea</th>
        		    <th rowspan="2">Nombre y Apellido</th>
        		    <th colspan="3">Fecha de nacimiento</th> <!-- Colspan para subcolumnas -->
        		    <th colspan="3">Edad</th> <!-- Colspan para subcolumnas -->
        		    <th rowspan="2">Sexo</th>
        		    <th rowspan="2">Madre biológica</th>
        		    <th rowspan="2">Padre biológico</th>
        		    <th rowspan="2">Cuidador principal</th>
        		    <th rowspan="2">Acciones</th>
        		</tr>
        		<!-- Segunda fila de encabezado (subcolumnas) -->
        		<tr>
         	  	    <th>Día</th>
            		    <th>Mes</th>
       		     	    <th>Año</th>
            		    <th>Día</th>
            		    <th>Mes</th>
            		    <th>Año</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 miembro</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 }
        ]
    });
    $('#DHV1').change(function() {
        var segmentId = $(this).val();
        if (segmentId) {
            $.ajax({
               url: '/household-visit/segment-detail/' + segmentId,
               type: 'GET',
               success: function(data) {
                    if (data) {
                        $('#DHV2').val(data.region);
                        $('#DHV3').val(data.department);
                        $('#DHV4').val(data.muni);
                        $('#DHV5').val(data.distrito);
                        $('#DHV6').val(data.area);
                    }
                }
            });
        } else {
            // Limpiar los inputs si no hay un segmento seleccionado
            $('#DHV2').val('');
            $('#DHV3').val('');
            $('#DHV4').val('');
            $('#DHV5').val('');
            $('#DHV6').val('');
        }
    });
    $('#DHV1').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' });
    	var DEM3Value = $("input[name='DEM3']:checked").val();  // Esto obtiene el valor del radio seleccionado
    	let DEM4Value = $('#DEM4').val(); // Obtener la fecha
    	if (DEM4Value.includes('/')) {
            DEM4Value = formatDateToMySQL(DEM4Value); // Convertir formato
            $('#DEM4').val(DEM4Value); // Actualizar el valor
    	}
 	let DEM5Value = $('#DEM5').val(); // Obtener el valor del tiempo
    	if (DEM5Value.includes('AM') || DEM5Value.includes('PM')) {
        DEM5Value = formatTimeToMySQL(DEM5Value); // Convertir al formato MySQL
        $('#DEM5').val(DEM5Value); // Actualizar el valor
        }
	
	// Asignar el valor al campo DEM6
    	$('#DEM6').val(currentTime);
	console.log(DEM3Value);
	$('#DEM3').val(DEM3Value);

        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
	if (birthDate > today) {
            // Si es mayor, marcar como inválido y salir
            $row.find('.day-birth, .month-birth, .year-birth').addClass('is-invalid').val('');
            alert('La fecha de nacimiento no puede ser mayor a la fecha actual.');
            return;
        }
        if (ageDays < 0) {
            ageMonths--;
            ageDays += new Date(yearBirth, monthBirth, 0).getDate();
        }
        if (ageMonths < 0) {
            ageYears--;
            ageMonths += 12;
        }

        // 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