document.querySelectorAll(".servicio-search").forEach(setupServicioSearch);

function setupServicioSearch(searchInput) {
    const row = searchInput.closest("tr");
    const suggestionsList = row.querySelector(".servicio-suggestions");
    const servicioIdInput = row.querySelector(".servicio-id");
    const precioUnitarioInput = row.querySelector(".precio-unitario");

    // Verificar si ya hay un servicio seleccionado
    if (servicioIdInput.value) {
        suggestionsList.style.display = "none"; // Ocultar sugerencias si ya hay selección
        updateSubtotal(row); // Recalcular subtotal al cargar la página
    }

    // Filtrar sugerencias mientras se escribe
    searchInput.addEventListener("input", () => {
        const searchText = searchInput.value.toLowerCase();
        const items = suggestionsList.querySelectorAll(".servicio-item");

        let hasMatch = false;

        items.forEach((item) => {
            const name = item.getAttribute("data-name").toLowerCase();
            const match = name.includes(searchText);
            item.style.display = match ? "block" : "none";
            if (match) hasMatch = true;
        });

        // Mostrar sugerencias solo si hay coincidencias y si el usuario está escribiendo
        suggestionsList.style.display = hasMatch ? "block" : "none";
    });

    // Mostrar sugerencias solo si el usuario borra el servicio y empieza a escribir otro
    searchInput.addEventListener("focus", () => {
        if (!servicioIdInput.value) {
            suggestionsList.style.display = "block";
        }
    });

    // Seleccionar un servicio de la lista
    suggestionsList.addEventListener("click", (event) => {
        const selectedItem = event.target.closest(".servicio-item");
        if (!selectedItem) return;

        searchInput.value = selectedItem.getAttribute("data-name");
        servicioIdInput.value = selectedItem.getAttribute("data-id");
        precioUnitarioInput.value = selectedItem.getAttribute("data-precio");

        updateSubtotal(row);
        suggestionsList.style.display = "none";
    });

    // Ocultar sugerencias al hacer clic fuera
    document.addEventListener("click", (event) => {
        if (!row.contains(event.target)) {
            suggestionsList.style.display = "none";
        }
    });

    // Si el usuario borra el campo, volver a mostrar la lista
    searchInput.addEventListener("input", () => {
        if (searchInput.value.trim() === "") {
            servicioIdInput.value = ""; // Borrar el ID del servicio
            suggestionsList.style.display = "block";
        }
    });
}

// Recalcula los costos al cargar la página
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".servicio-search").forEach((searchInput) => {
        const row = searchInput.closest("tr");
        updateSubtotal(row);
    });
});

document
    .querySelector("#tabla-servicios tbody")
    .addEventListener("input", (event) => {
        const row = event.target.closest("tr");
        if (!row) return;

        if (event.target.classList.contains("cantidad")) {
            const cantidadInput = event.target;
            let cantidad = parseFloat(cantidadInput.value);
            if (isNaN(cantidad) || cantidad < 1) {
                cantidadInput.value = 1; // Asignar 1 si la cantidad es inválida o negativa
            }
            updateSubtotal(row);
        }

        if (event.target.classList.contains("precio-unitario")) {
            const precioInput = event.target;
            let precioUnitario = parseFloat(precioInput.value);
            if (isNaN(precioUnitario) || precioUnitario < 0) {
                precioInput.value = 0; // Asignar 0 si el precio es inválido o negativo
            }
            updateSubtotal(row);
        }
    });

document
    .querySelector("#tabla-servicios tbody")
    .addEventListener("change", (event) => {
        const row = event.target.closest("tr");
        if (!row) return;

        if (event.target.classList.contains("servicio-select")) {
            updateServicio(row);
        }
    });

// Inicializa eventos relacionados al paciente
const pacienteIdEl = document.getElementById("paciente-id");
if (pacienteIdEl) {
    pacienteIdEl.addEventListener("change", updatePacienteData);
}

// Agrega un nuevo servicio
function validateAndAddServicio() {
    const rows = document.querySelectorAll("#tabla-servicios tbody tr");
    for (let row of rows) {
        const searchInput = row.querySelector(".servicio-search");
        const servicioIdInput = row.querySelector(".servicio-id");

        // Verifica si el campo de búsqueda está vacío o si no se ha seleccionado un servicio
        if (!searchInput.value || !servicioIdInput.value) {
            alert(
                "Debe seleccionar un servicio antes de agregar otro nuevo."
            );
            return; // Detiene la ejecución si no se cumple la validación
        }
    }
    addServicio(); // Solo se llama a addServicio si todas las validaciones son correctas
}

function addServicio() {
    const table = document.querySelector("#tabla-servicios tbody");
    const index = table.children.length;

    const row = document.createElement("tr");
    row.innerHTML = `
        <input type="hidden" name="servicios[${index}][id]" value="" />
        <td><input type="number" name="servicios[${index}][cantidad]" class="form-control cantidad" min="1" value="1"></td>
        <td>
            <input type="text" name="servicios[${index}][servicio_name]" class="form-control servicio-search" placeholder="Escriba para buscar servicio" autocomplete="off">
            <input type="hidden" name="servicios[${index}][servicio_id]" class="servicio-id" value="">
            <ul class="servicio-suggestions" style="list-style-type: none; padding-left: 0; margin-top: 5px; max-height: 150px; overflow-y: auto;">
            <style>
                .servicio-item {
                    padding: 10px;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }
                .servicio-item:hover {
                    background-color: #111;
                }
            </style>
            ${serviciosData
                .map(
                    (t) => `
                <li class="servicio-item"
                    data-id="${t.id}"
                    data-name="${t.nombre}"
                    data-precio="${t.costo}">
                    ${t.nombre}
                </li>`
                )
                .join("")}
        </ul>



        </td>
        <td><input type="number" name="servicios[${index}][precio_unitario]" class="form-control precio-unitario" step="0.01" min="0" value="0"></td>
        <td><input type="number" name="servicios[${index}][descuento]" class="form-control descuento" step="0.01" min="0" max="100" value="0"></td>
        <td><input type="text" name="servicios[${index}][total]" class="form-control subtotal" readonly value="0"></td>
        <td><textarea name="servicios[${index}][observaciones]" class="form-control" placeholder="Observaciones..." rows="1" maxlength="500"></textarea></td>
        <td class="text-center">
            <button type="button" class="btn btn-danger btn-remove-row">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;

    table.appendChild(row);
    updateSubtotal(row);

    const searchInput = row.querySelector(".servicio-search");
    const suggestionsList = row.querySelector(".servicio-suggestions");
    const servicioIdInput = row.querySelector(".servicio-id");
    const precioUnitarioInput = row.querySelector(".precio-unitario");

    // Filtrar las sugerencias a medida que se escribe
    searchInput.addEventListener("input", () => {
        const searchText = searchInput.value.toLowerCase();
        const items = suggestionsList.querySelectorAll(".servicio-item");

        items.forEach((item) => {
            const name = item.getAttribute("data-name").toLowerCase();
            if (name.includes(searchText)) {
                item.style.display = "block"; // Mostrar sugerencia si coincide
            } else {
                item.style.display = "none"; // Ocultar sugerencia si no coincide
            }
        });
    });

    // Seleccionar un servicio al hacer clic
    suggestionsList.addEventListener("click", (event) => {
        const selectedItem = event.target.closest(".servicio-item");
        if (!selectedItem) return;

        const servicioId = selectedItem.getAttribute("data-id");
        const servicioName = selectedItem.getAttribute("data-name");
        const servicioPrecio = selectedItem.getAttribute("data-precio");

        // Establecer el nombre en el input de búsqueda
        searchInput.value = servicioName;

        // Establecer el ID en el input hidden
        servicioIdInput.value = servicioId;

        // Establecer el precio en el input de precio unitario
        precioUnitarioInput.value = servicioPrecio;

        // Recalcular el subtotal con el precio actualizado
        updateSubtotal(row);

        // Ocultar las sugerencias después de seleccionar un servicio
        suggestionsList.style.display = "none";
    });

    // Ocultar las sugerencias al hacer clic fuera del campo de búsqueda
    document.addEventListener("click", (event) => {
        if (!row.contains(event.target)) {
            suggestionsList.style.display = "none";
        }
    });

    // Mostrar las sugerencias al hacer clic en el input
    searchInput.addEventListener("focus", () => {
        suggestionsList.style.display = "block";
    });

    // Elimina una fila
    document
        .querySelector("#tabla-servicios tbody")
        .addEventListener("click", (event) => {
            if (event.target.closest(".btn-remove-row")) {
                event.target.closest("tr").remove();
                calculateTotal();
            }
        });
}

// Actualiza los datos del paciente seleccionado
function updatePacienteData(event) {
    const pacienteId = event.target.value;
    const paciente = pacientesData.find((p) => p.id == pacienteId) || {};

    document.getElementById("paciente-direccion").value =
        paciente.direccion || "";
    document.getElementById("paciente-dni").value = paciente.dni || "";
}

// Actualiza los valores de servicio (precio unitario y subtotal)
function updateServicio(row) {
    const select = row.querySelector(".servicio-select");
    const servicioId = select.value;
    const precioUnitarioInput = row.querySelector(".precio-unitario");

    const servicio =
        serviciosData.find((t) => t.id == servicioId) || {};
    precioUnitarioInput.value = servicio.costo || "0";
    updateSubtotal(row);
}

// Calcula el subtotal de una fila aplicando descuento por ítem
function updateSubtotal(row) {
    const cantidad = parseFloat(row.querySelector(".cantidad").value) || 0;
    const precioUnitario = parseFloat(row.querySelector(".precio-unitario").value) || 0;
    const descuentoEl = row.querySelector(".descuento");
    const descuento = descuentoEl ? parseFloat(descuentoEl.value) || 0 : 0;
    const subtotalInput = row.querySelector(".subtotal");

    let subtotal = cantidad * precioUnitario;
    if (descuento > 0) {
        subtotal = subtotal - (subtotal * descuento / 100);
    }
    subtotalInput.value = subtotal.toFixed(2);
    calculateTotal();
}

// Aplica el descuento general a cada fila (modifica el campo descuento de cada ítem)
function applyGeneralDiscount() {
    const descuentoGeneral = parseFloat(document.getElementById("descuento-general").value) || 0;
    document.querySelectorAll("#tabla-servicios tbody tr").forEach(row => {
        const descuentoEl = row.querySelector(".descuento");
        if (descuentoEl) {
            descuentoEl.value = descuentoGeneral;
        }
        updateSubtotal(row);
    });
}

// Suma los subtotales de cada ítem (ya incluyen sus descuentos individuales)
function calculateTotal() {
    const subtotales = Array.from(document.querySelectorAll(".subtotal")).map(
        (input) => parseFloat(input.value) || 0
    );
    const total = subtotales.reduce((sum, value) => sum + value, 0);

    document.getElementById("subtotal").value = total.toFixed(2);
    document.getElementById("total").value = total.toFixed(2);
    document.getElementById("total-visible").value = total.toFixed(2);
}

// Inicializa los servicios existentes al cargar la página
function initializeServicios() {
    const rows = document.querySelectorAll("#tabla-servicios tbody tr");
    rows.forEach((row) => updateSubtotal(row));
    calculateTotal();
}

initializeServicios();