// Inicializar la variable servicioIndex según el número de servicios existentes
let servicioIndex = document.querySelectorAll('.servicio').length;

function addServicio() {
    const container = document.getElementById('servicios-container');
    const newDiv = document.createElement('div');
    newDiv.className = 'servicio';

    const controlHTML = `
        <h3>Servicio #${servicioIndex + 1}</h3>
        <!-- Campo oculto para el ID del registro de servicio -->
        <input type="hidden" name="registros_servicios[${servicioIndex}][id]" value="" />

        <!-- Menú desplegable para seleccionar servicio -->
        <label for="servicio-select-${servicioIndex}">Nombre del Servicio</label>
        <select name="registros_servicios[${servicioIndex}][servicio_id]"
                id="servicio-select-${servicioIndex}"
                class="servicio-select"
                data-index="${servicioIndex}"
                required>
            <option value="">Seleccionar Servicio</option>
            ${serviciosData.map(s => `<option value="${s.id}">${s.nombre}</option>`).join('')}
        </select>

        <!-- Campos para mostrar detalles del servicio -->
        <input type="hidden" name="registros_servicios[${servicioIndex}][nombre]"
               id="nombre-${servicioIndex}"
               class="servicio-nombre"
               readonly  />

        <label for="descripcion-${servicioIndex}">Descripción</label>
        <input type="text" name="registros_servicios[${servicioIndex}][descripcion]"
               id="descripcion-${servicioIndex}"
               class="servicio-descripcion"
               readonly />

        <label for="costo-${servicioIndex}">Costo</label>
        <input type="number" name="registros_servicios[${servicioIndex}][costo]"
               id="costo-${servicioIndex}"
               class="servicio-costo"
               readonly />
    `;

    newDiv.innerHTML = controlHTML;
    container.appendChild(newDiv);

    // Agregar evento de cambio dinámico al nuevo select
    const select = newDiv.querySelector('.servicio-select');
    select.addEventListener('change', function () {
        const index = this.getAttribute('data-index'); // Índice del servicio
        const servicioId = this.value; // ID del servicio seleccionado

        // Buscar los datos del servicio seleccionado
        const servicio = serviciosData.find(s => s.id == servicioId);

        if (servicio) {
            // Actualizar los campos correspondientes
            document.getElementById(`nombre-${index}`).value = servicio.nombre;
            document.getElementById(`descripcion-${index}`).value = servicio.descripcion;
            document.getElementById(`costo-${index}`).value = servicio.costo;
        } else {
            // Si no se selecciona un servicio válido, limpiar los campos
            document.getElementById(`nombre-${index}`).value = '';
            document.getElementById(`descripcion-${index}`).value = '';
            document.getElementById(`costo-${index}`).value = '';
        }
    });

    servicioIndex++;
}
function removeRowServicio() {
    const container = document.getElementById('servicios-container');
    if (servicioIndex >= length) {
        container.removeChild(container.lastChild);
        servicioIndex--;
    }
}
