let state = {
    cliente_id: "",
    rut: "",
    nombre: "",
    apellidoPaterno: "",
    apellidoMaterno: "",
    email: "",
    sucursal: "",
    tipoBusqueda: "",
    especialidad: "",
    servicio: "",
    profesional: null,
    horaReservada: "",
    fecha: "",
    hora: "",
    precio: 0,
    comision: 0,
    tiempo_duracion: 0,
    history: [], // Array para mantener el historial de pasos
};
let profesionalList = [];
let especialidadList = [];
let sucursalList = [];
let servicioList = [];
let imgServidor = "https://www.kola.cl";

var servicio_escogido;
var profesionalSeleccionado;
var txt_disponible = "disponible";
var txt_reservado = "reservada";
var txt_nodisponible = "no disponible";
var txt_no_se_puede_realizar = "esta hora no esta disponible para reservar";
var txt_no_hay_horas_dispobibles = "lo sentimos, el profesional no tiene disponibilidad horaria";
var txt_fecha = "fecha";
var txt_hora_inicio = "hora inicio";
var txt_hora_fin = "hora termino";
var txt_reserva_exitosa = "felicitaciones ha reservado esta hora";
var txt_aceptar = "aceptar";
var sucursalId;
var usuario;
var Toast;
var usuario = sessionStorage.getItem("cliente");
const idioma = navigator.language || navigator.userLanguage;
var id_prof;
var buscarTimeout;
var lafoto;
var id_serv;
var id_sucursal;
var una_sucursal = false;
var diccionarioCompleto = [];
var nomenclatura = [];
var configuracion;
// Datos de ejemplo (simulando backend

// Estado de la aplicación

// Configuración de SweetAlert2

// Inicialización
function init() {
    // Ocultar todos los pasos excepto el primero
    $(".step").removeClass("active previous");
    $("#step1").addClass("active");

    // Event listeners para botones de navegación
    $(".btn-next").on("click", handleNext);
    $(".option-btn").on("click", handleOptionSelect);
    $(".btn-back").on("click", handleBack);

    // Event listeners para filtros
    $("#searchProfesional").on("input", filterProfesionales);
    $("#filterEspecialidad").on("change", filterProfesionales);
    $("#filterSucursal").on("change", filterProfesionales);

    //  console.log("Usuario:", usuario);

    if (usuario) {
        $("#loader").show();

        usuario = JSON.parse(usuario);
        state.cliente_id = usuario.id;
        state.rut = usuario.rut;
        state.nombre = usuario.nombre;
        state.apellidoPaterno = usuario.apellido_paterno;
        state.apellidoMaterno = usuario.apellido_materno;
        state.email = usuario.correo;
        $("#step1").hide();


    }
    const params = new URLSearchParams(window.location.search);
    const profesional = params.get('profesional');
    const servicio = params.get('servicio');
    const sucursal = params.get('sucursal');
    if (profesional) {
        $('#filtrosProfesional').hide();
        //$('#btnBackProfesionales').hide(); // Ocultar el botón
        console.log("Profesional:", profesional);
        $('#filterSucursal').val("-1");
        state.sucursal = $('#filterSucursal').val();
        id_prof = profesional;
        id_serv = servicio;
        id_sucursal = state.sucursal;
        if (usuario == null) {

            showStep("step1");
        } else {
            $('#btnBackProfesionales').removeClass("btn-back");
            $('#btnBackProfesionales').hide();
            obtenerEspecialidad(state.sucursal);
            loadServicios(-1, -1, id_prof);
            if (id_serv && id_sucursal) {

                loadProfesionales(id_serv, id_sucursal, null, id_prof);
            }
            else if (id_serv) {

                loadProfesionales(id_serv, -1, null, id_prof);
            }
            else if (id_sucursal) {

                loadProfesionales(-1, id_sucursal, null, id_prof);
            }

            else {
                loadProfesionales(-1, -1, null, id_prof);
            }

            showStep("step5");
        }

    }

    // Event listener para el botón finalizar
    // $(".btn-finish").on("click", handleFinish);
}


function diccionario(callback) {
    $("#loader").show();
    let fechaActual = moment().format("YYYY-MM-DD");
    let configuracionLocalStorage = localStorage.getItem("configuracion");
    let fechaActualizacionLocalStorage = localStorage.getItem("fechaActualizacion");
    configuracion = JSON.parse(configuracionLocalStorage);
    const fechaActualDate = new Date(fechaActual);
    const fechaActualizacionDate = new Date(fechaActualizacionLocalStorage);
    if (fechaActualDate.getTime() > fechaActualizacionDate.getTime()) {
        localStorage.removeItem("diccionario");
        localStorage.removeItem("configuracion");
        localStorage.removeItem("fechaActualizacion");
        localStorage.removeItem("nomenclatura");
        obtenerDiccionarioDelServidor();
    }
    else {
        obtenerDiccionarioDelServidor();
    }
    init();
}
function obtenerDiccionarioDelServidor() {
    $.ajax({
        url: "api/diccionario",
        type: "get",
        success: function (response) {
            if (response.code == 0) {
                localStorage.setItem("diccionario", JSON.stringify(response.diccionario));
                localStorage.setItem("configuracion", JSON.stringify(response.configuracion));
                localStorage.setItem("nomenclatura", JSON.stringify(response.nomenclatura));
                localStorage.setItem("fechaActualizacion", JSON.stringify(moment().format("YYYY-MM-DD")));
                diccionarioCompleto = JSON.parse(localStorage.getItem("diccionario"));
                nomenclatura = JSON.parse(localStorage.getItem("nomenclatura"));
                configuracion = JSON.parse(localStorage.getItem("configuracion"));
                if (typeof callback === "function") callback();
            }
        },
    });
}
function traducir(texto, idioma) {
    const entrada = diccionarioCompleto.find(element => element.clave === texto);
    return entrada && entrada[idioma] ? entrada[idioma] : '$' + texto;
}

function obtenerNomenclatura(clave, idioma) {
    let entrada;
    if (clave.endsWith('s')) {
        entrada = nomenclatura.find(element => element.clave_pl === clave);
    } else {
        entrada = nomenclatura.find(element => element.clave === clave);
    }

    if (entrada) {
        const nomenclatura = entrada.nomenclature.find(nom => nom.idioma === idioma);
        if (nomenclatura) {
            if (clave.endsWith('s')) { // si la clave termina en 's', es plural
                return nomenclatura.plural;
            } else {
                return nomenclatura.singular;
            }
        }
    }
    return 'N$' + clave;
}
function showStep(stepId) {
    const $currentStep = $(".step.active");
    const $nextStep = $(`#${stepId}`);

    // Guardar el paso actual en el historial
    state.history.push($currentStep.attr("id"));

    $currentStep.removeClass("active").addClass("previous");
    $nextStep.removeClass("previous").addClass("active");

    // Si estamos yendo al paso de servicios, asegurarnos de que los servicios se carguen
    if (stepId === "step4A" && state.especialidad) {
        loadServicios(state.especialidad, state.sucursal);
    }

    // Mostrar/ocultar botón de retroceso
    if (state.history.length > 0) {
        $(".btn-back").show();
    } else {
        $(".btn-back").hide();
    }
}

function handleNext(e) {
    const currentStep = $(e.target).closest(".step");
    const nextStepId = $(e.target).data("next");

    // Validar y guardar datos según el paso actual
    if (!validateStep(currentStep.attr("id"))) {
        return;
    }

    showStep(nextStepId);
}

function handleBack() {
    if (state.history.length > 0) {

        const previousStepId = state.history.pop();
        const $currentStep = $(".step.active");
        const $previousStep = $(`#${previousStepId}`);

        $currentStep.removeClass("active");
        $previousStep.removeClass("previous").addClass("active");

        // Mostrar/ocultar botón de retroceso
        if (state.history.length > 0) {
            $(".btn-back").show();
        } else {
            $(".btn-back").hide();
        }

        // Hacer scroll al elemento con ID "superior" usando jQuery
        const $superior = $("#superior");
        if ($superior.length) {
            $("html, body").animate({
                scrollTop: $superior.offset().top
            }, 500); // 500 ms de duración para animación suave
        }
    }
}

// Validación de pasos
function validateStep(stepId) {
    switch (stepId) {
        case "step1":
            state.rut = $("#rut").val();
            if (!state.rut) {
                showError(traducir("Por favor ingresa tu RUT/DNI", configuracion.idioma));
                return false;
            }
            break;
        case "step1A":
            state.nombre = $("#nombre").val();
            if (!state.nombre) {
                showError(traducir("Por favor ingresa tu nombre", configuracion.idioma));
                return false;
            }
            break;
        case "step1B":
            state.apellidoPaterno = $("#apellidoPaterno").val();
            if (!state.apellidoPaterno) {
                showError(traducir("Por favor ingresa tu apellido paterno", configuracion.idioma));
                return false;
            }
            break;
        case "step1C":
            /*  state.apellidoMaterno = $("#apellidoMaterno").val();
              if (!state.apellidoMaterno) {
                  showError(traducir("Por favor ingresa tu apellido materno", configuracion.idioma));
                  return false;
              }*/
            break;
        case "step1D":
            state.email = $("#correoElectronico").val();
            console.log($("#correoElectronico").val());
            if (!state.email || !isValidEmail(state.email)) {
                showError(traducir("Por favor ingresa un email válido", configuracion.idioma));
                return false;
            } else {
                crearCliente();
            }
            break;
    }
    return true;
}

// Mostrar errores con SweetAlert2
function showError(message) {
    Toast.fire({
        icon: "error",
        title: message,
        timer: 3000,
        showConfirmButton: false,
        //timerProgressBar: false,/*probando/*

    });
}

// Validación de email
function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// Manejador unificado para botones de opciones
function handleOptionSelect(e) {
    const $button = $(e.target);
    const type = $button.data("type");
    const sucursal = $button.data("sucursal-id");
    const especialidad = $button.data("especialidad-id");
    const servicio = $button.data("servicio");

    if (sucursal) {
        state.sucursal = sucursal;
        showStep("step3");
    } else if (type) {
        state.tipoBusqueda = type;
        if (type === "especialidad") {
            showStep("step4");
        } else {
            showStep("step5");
            const sucursalListSelect = $("#filterSucursal");
            const especialidadListSelect = $("#filterEspecialidad");
            const servicioListSelect = $("#filterServicio");
            especialidadListSelect.val("-1");
            servicioListSelect.val("-1");
            var especialidadId = especialidadListSelect.val();
            loadServicios(especialidadId, state.sucursal);
            //  $sucursalList
            state.servicio = servicioListSelect.val();
            loadProfesionales(state.servicio, state.sucursal);
        }
    } else if (especialidad) {
        state.especialidad = especialidad;
        showStep("step4A");
    } else if (servicio) {
        state.servicio = servicio;
        showStep("step5");
        // loadProfesionales(state.servicio, state.sucursal);
    }
}







// Filtrado de profesionales
function filterProfesionales() {
    const searchTerm = $("#searchProfesional").val().toLowerCase();
    const especialidadFilter = $("#filterEspecialidad").val();
    const sucursalFilter = $("#filterSucursal").val();

    $(".profesional-card").each(function () {
        const $card = $(this);
        const nombre = $card.find("h3").text().toLowerCase();
        const especialidad = $card.find("p").first().text();
        const sucursal = state.sucursal;

        const matchesSearch = nombre.includes(searchTerm);
        const matchesEspecialidad =
            !especialidadFilter || especialidad === especialidadFilter;
        const matchesSucursal = !sucursalFilter || sucursal === sucursalFilter;

        $card.toggle(matchesSearch && matchesEspecialidad && matchesSucursal);
    });
}

// Manejadores de reserva



function handleFinish() {


    if (usuario && id_prof) {
        $('#btnVolverSucursal').removeClass('btn-back');
        $('#btnVolverSucursal').hide();
        $(".btn-back").hide()
        $('#btnReservar').show()

        $('#confirmacionTitle').show()
        $('#btnVolver').show()
        $('#btnOtraReserva').hide()
        $('#otraReserva').hide()
        $("#searchProfesional").val("");
        $("#filterEspecialidad").val("-1");
        $("#filterSucursal").val("-1");
        $(".servicios-grid").empty();


        state = {
            cliente_id: usuario.id,
            rut: usuario.rut,
            nombre: usuario.nombre,
            apellidoPaterno: usuario.apellido_paterno,
            apellidoMaterno: usuario.apellido_materno,
            email: usuario.correo,
            sucursal: "",
            tipoBusqueda: "",
            especialidad: "",
            servicio: "",
            profesional: id_prof,
            horaReservada: "",
            fecha: "",
            hora: "",
            precio: 0,
            comision: 0,
            tiempo_duracion: 0,
            history: [],
        };
        loadProfesionales(-1, -1, null, id_prof);
        showStep("step5");
    }
    else if (usuario) {
        if (sucursalList.length == 1) {

            $('#btnVolverBusqueda').removeClass('btn-back');
            $('#btnVolverBusqueda').hide();
            state = {
                cliente_id: usuario.id,
                rut: usuario.rut,
                nombre: usuario.nombre,
                apellidoPaterno: usuario.apellido_paterno,
                apellidoMaterno: usuario.apellido_materno,
                email: usuario.correo,
                sucursal: sucursalList[0].id,
                tipoBusqueda: "",
                especialidad: "",
                servicio: "",
                profesional: null,
                horaReservada: "",
                fecha: "",
                hora: "",
                precio: 0,
                comision: 0,
                tiempo_duracion: 0,
                history: [],
            };
            $("#searchProfesional").val("");
            $("#filterEspecialidad").val("");
            $("#filterSucursal").val("");
            $(".servicios-grid").empty();
            $(".profesionales-list").empty();
            $("#fichaProfesionalFoto").attr("src", "").attr("alt", "");
            $("#fichaProfesionalNombre").text("");
            $("#fichaProfesionalEspecialidad").text("");
            $("#fichaProfesionalSucursal").text("");
            $("#fichaProfesionalServicios").empty();
            $("#fichaProfesionalHorarios").empty();
            $('#btnReservar').show()
            $('#confirmacionTitle').show()
            $('#btnVolver').show()
            $('#btnOtraReserva').hide()
            $('#otraReserva').hide()
            showStep("step3")

        } else {
            $('#btnVolverSucursal').removeClass('btn-back');
            $('#btnVolverSucursal').hide();
            state = {
                cliente_id: usuario.id,
                rut: usuario.rut,
                nombre: usuario.nombre,
                apellidoPaterno: usuario.apellido_paterno,
                apellidoMaterno: usuario.apellido_materno,
                email: usuario.correo,
                sucursal: "",
                tipoBusqueda: "",
                especialidad: "",
                servicio: "",
                profesional: null,
                horaReservada: "",
                fecha: "",
                hora: "",
                precio: 0,
                comision: 0,
                tiempo_duracion: 0,
                history: [],
            };
            $("#searchProfesional").val("");
            $("#filterEspecialidad").val("");
            $("#filterSucursal").val("");
            $(".servicios-grid").empty();
            $(".profesionales-list").empty();
            $("#fichaProfesionalFoto").attr("src", "").attr("alt", "");
            $("#fichaProfesionalNombre").text("");
            $("#fichaProfesionalEspecialidad").text("");
            $("#fichaProfesionalSucursal").text("");
            $("#fichaProfesionalServicios").empty();
            $("#fichaProfesionalHorarios").empty();
            $('#btnReservar').show()
            $('#confirmacionTitle').show()
            $('#btnVolver').show()
            $('#btnOtraReserva').hide()
            $('#otraReserva').hide()
            showStep("step2")
        }

    }

    else if (id_prof) {
        $("#rut").val("");
        $("#nombre").val("");
        $("#apellidoPaterno").val("");
        $("#apellidoMaterno").val("");
        $("#email").val("");
        $("#searchProfesional").val("");
        $("#filterEspecialidad").val("");
        $("#filterSucursal").val("-1");
        $(".servicios-grid").empty();
        $("#nombreProfesional").text("");
        $("#horaReservada").text("");
        $("#nombrePaciente").text("");

        state = {
            cliente_id: "",
            rut: "",
            nombre: "",
            apellidoPaterno: "",
            apellidoMaterno: "",
            email: "",
            sucursal: "",
            tipoBusqueda: "",
            especialidad: "",
            servicio: "",
            profesional: id_prof,
            horaReservada: "",
            fecha: "",
            hora: "",
            precio: 0,
            comision: 0,
            tiempo_duracion: 0,
            history: [],
        };

        $('#btnReservar').show()
        $('#confirmacionTitle').show()
        $('#btnVolver').show()
        $('#btnOtraReserva').hide()
        $('#otraReserva').hide()
        //loadProfesionales(state.servicio, state.sucursal,id_prof);
        showStep("step1");
    }
    else {
        // Limpiar todos los campos del formulario
        $("#rut").val("");
        $("#nombre").val("");
        $("#apellidoPaterno").val("");
        $("#apellidoMaterno").val("");
        $("#email").val("");
        $("#searchProfesional").val("");
        $("#filterEspecialidad").val("");
        $("#filterSucursal").val("");

        // Limpiar el grid de servicios
        $(".servicios-grid").empty();

        // Limpiar la lista de profesionales
        $(".profesionales-list").empty();

        // Limpiar el resumen de reserva
        $("#nombreProfesional").text("");
        $("#horaReservada").text("");
        $("#nombrePaciente").text("");

        // Limpiar la ficha profesional
        $("#fichaProfesionalFoto").attr("src", "").attr("alt", "");
        $("#fichaProfesionalNombre").text("");
        $("#fichaProfesionalEspecialidad").text("");
        $("#fichaProfesionalSucursal").text("");
        $("#fichaProfesionalServicios").empty();
        $("#fichaProfesionalHorarios").empty();

        // Reiniciar el estado
        state = {
            cliente_id: "",
            rut: "",
            nombre: "",
            apellidoPaterno: "",
            apellidoMaterno: "",
            email: "",
            sucursal: "",
            tipoBusqueda: "",
            especialidad: "",
            servicio: "",
            profesional: null,
            horaReservada: "",
            fecha: "",
            hora: "",
            precio: 0,
            comision: 0,
            tiempo_duracion: 0,
            history: [],
        };

        $('#btnReservar').show()
        $('#confirmacionTitle').show()
        $('#btnVolver').show()
        $('#btnOtraReserva').hide()
        $('#otraReserva').hide()

        // Ocultar todos los pasos
        showStep("step1");
    }


}

function obtenerSucursal() {
    // $("#loader").show();
    if (usuario) {
        $('#btnVolverSucursal').removeClass('btn-back');
        $('#btnVolverSucursal').hide();
        $('#registro').hide();

    }
    $.ajax({
        url: "api/sucursalesSite",
        type: "get",
        success: function (response) {
            ////console.log(response.sucursales);
            if (!usuario || !id_prof) {
                $("#loader").hide();
            }

            if (response.sucursales) {
                const $sucursalList = $("#sucursales-grid");
                const sucursalListSelect = $("#filterSucursal");

                $sucursalList.empty().off('click', '.option-btn rectangulo');
                sucursalListSelect.empty().off('change');

                sucursalListSelect.append(`
                    <option value="-1">${traducir('Ver todas las sucursales', configuracion.idioma)}</option>
                `);


                sucursalList = response.sucursales;

                if (response.sucursales.length == 1) {
                    $('#step2').hide();
                    state.sucursal = response.sucursales[0].id;
                    sucursalId = response.sucursales[0].id;
                    sucursalListSelect.hide();
                    $('#btnVolverBusqueda').removeClass('btn-back');
                    $('#btnVolverBusqueda').hide();
                    una_sucursal = true;
                    if (usuario && !id_prof) {
                        $('#btnVolverBusqueda').removeClass('btn-back');
                        $('#btnVolverBusqueda').hide();
                        showStep("step3");
                    }

                    obtenerEspecialidad(sucursalId);
                } else {
                    showStep("step2");
                    response.sucursales.forEach((sucursales) => {
                        state.sucursal = sucursales;

                        $sucursalList.append(`
                            <button class="option-btn rectangulo" data-sucursal-id="${sucursales.id}">${sucursales.nombre}</button>
                         `);



                        sucursalListSelect.append(`
                            <option value="${sucursales.id}">${sucursales.nombre}</option>
                         `);


                    });


                    $sucursalList.find(".option-btn").on("click", function (event) {
                        const sucursalId = $(this).data("sucursal-id");
                        sucursalListSelect.val(sucursalId);
                        if (id_prof) {
                            obtenerEspecialidad(sucursalId);
                            loadServicios(-1, sucursalId, id_prof);
                            loadProfesionales(-1, sucursalId, null, id_prof);
                            showStep("step5");
                        }
                        // Si hay un usuario pero no hay profesional, se ejecuta lógica estándar
                        else {
                            handleOptionSelect.call(this, event);
                            obtenerEspecialidad(sucursalId);
                            // Puedes agregar showStep("step3"); aquí si aplica para este flujo
                        }
                        // 1) Primero llamas a handleOptionSelect (si necesita event o 'this')

                        // showStep("step3");
                    });


                    sucursalListSelect.on("change", function () {
                        state.tipoBusqueda = '';
                        var id_sucursal = $(this).val();
                        $("#filterServicio").val("-1");
                        var servicioId = $("#filterServicio").val();
                        //console.log("scursal seleccionada:", id_sucursal);
                        loadServicios(servicioId, id_sucursal);
                        obtenerEspecialidad(id_sucursal);
                        loadProfesionales(servicioId, id_sucursal);
                    })
                }

                //console.log(state.tipoBusqueda);
            }
        },
    });
}


function buscarCliente() {
    var dni = document.getElementById("rut").value;
    document.getElementById("nombre").value = "";
    document.getElementById("apellidoPaterno").value = "";
    document.getElementById("apellidoMaterno").value = "";
    document.getElementById("correoElectronico").value = "";
    dni = limpiarRut(dni);
    $("#loader").show();
    if (dni == '' || dni == null || dni == undefined) {
        $("#loader").hide();
        validateStep("step1");
    } else {
        $.ajax({
            url: "api/buscarCliente",
            type: "post",
            data: { dni: dni },
            success: function (response) {
                //console.log(response.cliente);
                $("#loader").hide();
                if (response.cliente) {

                    state.cliente_id = response.cliente.id;
                    state.rut = response.cliente.rut;
                    state.nombre = response.cliente.nombre;
                    state.apellidoPaterno = response.cliente.apellido_paterno;

                    if (id_prof) {
                        $('.btn-back').hide();
                        $('#registro').hide();
                        obtenerEspecialidad(state.sucursal);
                        loadServicios(-1, -1, id_prof);
                        console.log("Servicio:", id_serv);
                        if (id_serv != null && id_serv && id_sucursal) {

                            loadProfesionales(id_serv, id_sucursal, null, id_prof);
                        }
                        else if (id_serv) {

                            loadProfesionales(id_serv, -1, null, id_prof);
                        }
                        else if (id_sucursal) {

                            loadProfesionales(-1, id_sucursal, null, id_prof);
                        }

                        else {
                            loadProfesionales(-1, -1, null, id_prof);
                        }

                        showStep("step5");
                    }
                    else if (una_sucursal) {
                        $('#btnVolverBusqueda').addClass("btn-back");
                        $('#btnVolverBusqueda').show();
                        $('#registro').hide();
                        showStep("step3");
                    }
                    else {
                        $('#registro').hide();
                        showStep("step2");
                    }

                } else {
                    showStep("step1A");
                }
            },
        });
    }
}
var timeoutId = null;
function buscarCorreo() {
    // var dni = document.getElementById("rut").value;
    var correo = document.getElementById("correoElectronico").value;

    //   dni = limpiarRut(dni);
    //$("#loader").show();
    if (timeoutId !== null) {
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function () {
        $.ajax({
            url: "api/buscarCliente",
            type: "post",
            data: { correo: correo },
            success: function (response) {
                //console.log(response.cliente);
                $("#loader").hide();
                if (response.cliente) {
                    Swal.fire('Ya existe un usuario con este correo', '', 'info');
                    document.getElementById("correoElectronico").value = "";
                } else {
                    //  showStep("step1A");
                }
            },
        });
    }, 1000);

}

function crearCliente() {
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    $("#loader").show();
    datos = {
        _token: csrfToken,
        dni: document.getElementById("rut").value,
        nombre: document.getElementById("nombre").value,
        apellido_paterno: document.getElementById("apellidoPaterno").value,
        apellido_materno: document.getElementById("apellidoMaterno").value,
        correo: document.getElementById("correoElectronico").value
    }
    $.ajax({
        url: '/crearCliente',
        type: 'POST',
        data: JSON.stringify(datos),
        contentType: 'application/json',
        success: function (response) {

            if (response.code == 0) {
                $("#loader").hide();
                state.cliente_id = response.cliente.id;
                state.rut = response.cliente.rut;
                state.nombre = response.cliente.nombre;
                state.apellidoPaterno = response.cliente.apellido_paterno;
                if (id_prof) {
                    $('.btn-back').hide();
                    $('#registro').hide();
                    obtenerEspecialidad(state.sucursal);
                    loadServicios(-1, -1, id_prof);
                    loadProfesionales(-1, -1, null, id_prof);
                    showStep("step5");
                }


                else if (una_sucursal) {

                    $('#btnVolverBusqueda').removeClass("btn-back");
                    $('#btnVolverBusqueda').hide();
                    $('#registro').hide();
                    showStep("step3");
                }
                else {
                    $('#btnVolverBusqueda').removeClass("btn-back");
                    $('#btnVolverBusqueda').hide();
                    $('#registro').show();
                    showStep("step2");
                }


                // window.location.replace("../");
            }
            //alert('Datos guardados con éxito:', response);
        },
        error: function (error) {
            Swal.fire('Hubo un error intente mas tarde', '', 'info');
            $("#loader").hide();
        }
    });
}

function limpiarRut(rut) {
    return rut.replace(/[\.\-]/g, "").toUpperCase();
}

function obtenerEspecialidad(id_sucursal) {
    $.ajax({
        url: "api/especialidadesSite",
        type: "post",
        data: { id_sucursal: id_sucursal },
        success: function (response) {
            //console.log(response.especialidades);
            if (response.especialidades) {
                const $especialidadList = $("#especialidades-grid");
                const especialidadListSelect = $("#filterEspecialidad");

                $especialidadList.empty().off('click', '.option-btn');
                especialidadListSelect.empty().off('change');
                //  state.rut = response.cliente.rut;

                especialidadListSelect.append(`
                    <option value="-1">Ver todas las especialidades</option>
                `);
                especialidadList = response.especialidades;
                especialidadList.forEach((especialidades) => {
                    state.especialidad = especialidades;

                    $especialidadList.append(`
                        <button class="option-btn rectangulo" data-especialidad-id="${especialidades.id}">${especialidades.nombre}</button>
                        `);

                    especialidadListSelect.append(`
                        <option  value="${especialidades.id}">${especialidades.nombre}</option>
                        `);
                });

                $especialidadList
                    .find(".option-btn")
                    .on("click", function (event) {
                        handleOptionSelect.call(this, event);
                        var especialidadId = $(this).data("especialidad-id");
                        especialidadListSelect.val(especialidadId);
                    });


                $("#filterEspecialidad").on("change", function () {
                    var especialidadId = $(this).val();
                    //console.log("Especialidad seleccionada:", especialidadId);
                    var id_sucursal_seleccionada = $("#sucursalSelect").val();
                    //console.log("Sucursal seleccionada especialidad:", id_sucursal_seleccionada);
                    loadServicios(especialidadId, id_sucursal, function (servicios) {
                        if (servicios.length > 0) {
                            const primerServicioId = servicios[0].id;
                            $("#filterServicio").val(primerServicioId);
                            loadProfesionales(primerServicioId, id_sucursal);// importante: disparar el evento
                        }
                    });
                });

            }
        },
    });
}

// Carga de datos
function loadServicios(especialidadId, id_sucursal, callback, id_profesional) {
    // console.log("Cargando servicios para sucursal:", id_sucursal);
    if (id_profesional) {
        id_profesional = id_profesional;
    }
    $("#loader").show();
    $.ajax({
        url: "api/serviciosSite",
        type: "post",
        data: { id_especialidad: especialidadId, id_sucursal: id_sucursal, id_profesional: id_profesional },
        success: function (response) {

            if (response.servicios) {
                if (state.tipoBusqueda == "especialidad") {
                    $("#loader").hide();
                }

                state.servicios = response.servicios;
                servicioList = response.servicios;

                const $serviciosGrid = $("#step4A .servicios-grid");
                const servicioListSelect = $("#filterServicio");

                // Limpiar contenido y quitar listeners anteriores
                $serviciosGrid.empty().off('click', '.option-btn');
                servicioListSelect.empty().off('change');
                servicioListSelect.append(`
                    <option value="-1">Ver todos los servicios</option>
                `);
                // Generar botones y opciones del select
                servicioList.forEach((servicio) => {
                    const $button = $(`
                        <button class="option-btn rectangulo" data-servicio="${servicio.id}" data-precio="${servicio.precio}" data-comision="${servicio.comision}" data-tiempo="${servicio.tiempo}">
                            ${servicio.nombre}
                        </button>
                    `);
                    $serviciosGrid.append($button);

                    const $option = $(`
                        <option value="${servicio.id}" data-precio="${servicio.precio}" data-comision="${servicio.comision}" data-tiempo="${servicio.tiempo}">
                            ${servicio.nombre}
                        </option>
                    `);
                    servicioListSelect.append($option);
                });

                // Registrar eventos
                $serviciosGrid.on('click', '.option-btn', function () {
                    const servicioId = parseInt($(this).data('servicio'), 10);
                    const precio = parseFloat($(this).data('precio'));
                    const comision = parseFloat($(this).data('comision'));
                    const tiempo = parseFloat($(this).data('tiempo'));

                    state.servicio = servicioId;
                    state.precio = precio;
                    state.comision = comision;
                    state.tiempo_duracion = tiempo;

                    // Cambia visualmente el select sin activar change
                    servicioListSelect.val(servicioId);

                    // Ejecuta la lógica de profesionales
                    loadProfesionales(servicioId, id_sucursal);
                });

                servicioListSelect.on("change", function () {
                    const sucursalListSelect = $("#filterSucursal");
                    const sucursal_id = sucursalListSelect.val();
                    //console.log("Sucursal seleccionada servicio:", sucursal_id);
                    const servicioId = $(this).val();
                    const $selectedOption = $(this).find("option:selected");
                    const precio = parseFloat($selectedOption.data("precio"));
                    const comision = parseFloat($selectedOption.data("comision"));
                    const tiempo = parseFloat($selectedOption.data("tiempo"));

                    state.servicio = servicioId;
                    state.precio = precio;
                    state.comision = comision;
                    state.tiempo_duracion = tiempo;
                    // console.log("Servicio seleccionado:", servicioId);
                    if (especialidadId != -1 && servicioId == -1) {
                        const especialidadListSelect = $("#filterEspecialidad");
                        especialidadListSelect.val("-1");
                        loadServicios(especialidadListSelect.val(), sucursal_id);
                    }

                    id_prof = null;
                    //  console.log("pro seleccionado:", id_prof);
                    loadProfesionales(servicioId, sucursal_id);
                });

                if (typeof callback === "function") {
                    callback(servicioList);
                }

                // 🟢 Seleccionar automáticamente el primer servicio (si existe)
                if (servicioList.length > 0) {
                    // const firstServicio = servicioList[0];
                    //   servicioListSelect.val(firstServicio.id).trigger("change"); // Esto activa el .on("change")
                }
            }
        },
    });
}

function loadSelectPro(servicioId, id_sucursal) {
    loadProfesionales(servicioId, id_sucursal);
}




// Evento keyup separado



function loadProfesionales(id_servicio, id_sucursal, buscar, id_prof) {

    const $profesionalesList = $(".profesionales-list");
    $profesionalesList.empty();
    const servicioListSelect = $("#filterServicio");
    state.fecha = moment().format("YYYY-MM-DD");
    $("#loader").show();
    $.ajax({
        url: "api/listaProfesionalesSite",
        type: "post",
        data: { id_servicio: id_servicio, id_sucursal: id_sucursal, fecha: state.fecha, buscar: buscar, id_prof: id_prof },
        success: function (response) {
            if (response.code == 0) {
                $("#loader").hide();
                profesionalList = response.profesionales;
                if (profesionalList.length == 0) {
                    if (id_prof) {
                        $profesionalesList.append(`<h3>${traducir('El profesional no atiende en esta sucursal, seleccione otra sucursal', configuracion.idioma)}</h3>`);
                    } else {
                        $profesionalesList.append(`<h3>${traducir('No hay profesionales disponibles.', configuracion.idioma)}</h3>`);
                    }

                } else {

                    profesionalList.forEach((profesional) => {
                        lafoto = ('./img/nofoto-' + configuracion.idioma + '.png');
                        if (profesional.imagen != null) {
                            lafoto = imgServidor + profesional.imagen;
                            // $lafoto = $foto->nombre_archivo;
                        }
                        var profesionales;

                        if (state.tipoBusqueda === "especialidad" && servicioListSelect.val() != -1) {
                            profesionales = `
                            <div class="item-reserva-1 rectangulo">
 <div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-12">
<div class="foto"><img src="${lafoto}" alt="${profesional.nombre}" width="100%" class="cuadrado"></div>
<div class="datos-1">
<h3 class="nombre">${profesional.nombre} ${profesional.apellido_paterno}</h3>
<span class="especialidad"><strong>${traducir('especialidad', configuracion.idioma)} </strong>: ${profesional.especialidad.map((e) => `${e.nombre}`).join("")}</span><span class="especialidad">
<span class="servicio"><strong>${traducir('servicio', configuracion.idioma)} </strong>: ${profesional.servicios[0].nombre}</span>
</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-7">
                        <strong> <i class="fa fa-calendar-o" aria-hidden="true"></i> ${traducir('fecha de reserva', configuracion.idioma)}: </strong> ${profesional.servicios[0].horaLibre.fecha}
				</div>
				<div class="col-md-5">
                    <strong><i class="fa fa-clock-o" aria-hidden="true"></i> ${traducir('hora tiempo', configuracion.idioma)}:</strong>${profesional.servicios[0].horaLibre.hora_inicio}
				</div>
			</div>
			<div class="row">
				<div class="col-md-7">
<strong><i class="fa fa-map-marker" aria-hidden="true"></i> ${traducir('lugar', configuracion.idioma)}:</strong> ${resolverSucursal(profesional.servicios[0].id_sucursal)}
				</div>
				<div class="col-md-5">
<strong><i class="fa fa-user" aria-hidden="true"></i> ${traducir('costo servicio', configuracion.idioma)}:</strong>
                                            ${formatearMiles(profesional.servicios[0].precio)}
				</div>
			</div>
			<div class="row profesional-acciones">
				<div class="col-md-6">
                                  <button class=" option-btn rectangulo" data-profesional-id="${profesional.id}"  data-servicio-id="${profesional.servicios[0].id}">
                                        ${traducir('reservar esta hora', configuracion.idioma)}
                                    </button>
				</div>
				<div class="col-md-6">
                          <button class=" option-btn rectangulo" data-profesional-id="${profesional.id}"  data-servicio-id="${profesional.servicios[0].id}" data-action="ver-mas">
                                        ${traducir('ver mas opciones (calendario)', configuracion.idioma)}
                                    </button>
				</div>
			</div>
		</div>
	</div>

                        </div>`
                        } else {

                            let serviciosHTML = "";
                            if (Array.isArray(profesional.servicios)) {
                                for (let servicio of profesional.servicios) {
                                    const sucursal_id = $('#filterSucursal').val();
                                    if (sucursal_id == -1) {
                                        serviciosHTML += `<div class="row item-hora rectangulo">
	<div class="col-md-12">

<div class="row">
	<div class="col-md-12">
		<strong> <i class="fc fc-especialidad" aria-hidden="true"></i> ${traducir('especialidad', configuracion.idioma)}: </strong> ${profesional.especialidad.map((e) => `${e.nombre}`).join("")}
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<strong> <i class="fc fc-servicio" aria-hidden="true"></i> ${traducir('servicio', configuracion.idioma)}: </strong> ${servicio.nombre}
</div>
</div>


<div class="row">
	<div class="col-md-7">
		<strong> <i class="fa fa-calendar-o" aria-hidden="true"></i> ${traducir('fecha de reserva', configuracion.idioma)}: </strong> ${servicio.horaLibre.fecha}
	</div>
	<div class="col-md-5">
		<strong><i class="fa fa-clock-o" aria-hidden="true"></i> ${traducir('hora tiempo', configuracion.idioma)}:</strong> ${servicio.horaLibre.hora_inicio}
	</div>
</div>

<div class="row">
	<div class="col-md-7">
		<strong><i class="fa fa-map-marker" aria-hidden="true"></i> ${traducir('lugar', configuracion.idioma)}:</strong> ${resolverSucursal(servicio.id_sucursal)}
	</div>
	<div class="col-md-5">
		<strong><i class="fa fa-user" aria-hidden="true"></i> ${traducir('costo servicio', configuracion.idioma)}:</strong> ${formatearMiles(servicio.precio)}
	</div>
</div>

<div class="row profesional-acciones">
	<div class="col-md-6">
		<button class="option-btn rectangulo" data-profesional-id="${profesional.id}" data-servicio-id="${servicio.id}" data-sucursal-id="${servicio.id_sucursal}">
			${traducir('reservar esta hora', configuracion.idioma)}
		</button>
	</div>
	<div class="col-md-6">
		<button class="option-btn rectangulo" data-profesional-id="${profesional.id}" data-servicio-id="${servicio.id}" data-sucursal-id="${servicio.id_sucursal}"
			data-action="ver-mas">
			${traducir('ver mas opciones (calendario)', configuracion.idioma)}
		</button>
	</div>
</div>

</div>

</div>`;
                                    } else {
                                        serviciosHTML += `<div class="row item-hora rectangulo">
	<div class="col-md-12">

<div class="row">
	<div class="col-md-12">
		<strong> <i class="fc fc-especialidad" aria-hidden="true"></i> ${traducir('especialidad', configuracion.idioma)}: </strong> ${profesional.especialidad.map((e) => `${e.nombre}`).join("")}
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<strong> <i class="fc fc-servicio" aria-hidden="true"></i> ${traducir('servicio', configuracion.idioma)}: </strong> ${servicio.nombre}
</div>
</div>


<div class="row">
	<div class="col-md-7">
		<strong> <i class="fa fa-calendar-o" aria-hidden="true"></i> ${traducir('fecha de reserva', configuracion.idioma)}: </strong> ${servicio.horaLibre.fecha}
	</div>
	<div class="col-md-5">
		<strong><i class="fa fa-clock-o" aria-hidden="true"></i> ${traducir('hora tiempo', configuracion.idioma)}:</strong> ${servicio.horaLibre.hora_inicio}
	</div>
</div>

<div class="row">
	<div class="col-md-7">
	 &nbsp;
	</div>
	<div class="col-md-5">
		<strong><i class="fa fa-user" aria-hidden="true"></i> ${traducir('costo servicio', configuracion.idioma)}:</strong> ${formatearMiles(servicio.precio)}
	</div>
</div>

<div class="row profesional-acciones">
	<div class="col-md-6">
		<button class="option-btn rectangulo" data-profesional-id="${profesional.id}" data-servicio-id="${servicio.id}" data-sucursal-id="${servicio.id_sucursal}">
			${traducir('reservar esta hora', configuracion.idioma)}
		</button>
	</div>
	<div class="col-md-6">
		<button class="option-btn rectangulo" data-profesional-id="${profesional.id}" data-servicio-id="${servicio.id}" data-sucursal-id="${servicio.id_sucursal}"
			data-action="ver-mas">
			${traducir('ver mas opciones (calendario)', configuracion.idioma)}
		</button>
	</div>
</div>

</div>

</div>`;
                                    }

                                }
                            }





                            profesionales = `
 <!-- nuevo -->
<div class="item-reserva-2">

		 <div class="row">
				<div class="col-md-12">
<div class="foto"><img src="${lafoto}" alt="${profesional.nombre} ${profesional.apellido_paterno}" width="100%" class="cuadrado"></div>
<div class="datos-2 d-flex justify-content-between align-items-center">
<h3 class="nombre">${profesional.nombre} ${profesional.apellido_paterno}</h3>
</div>
				</div>
			</div>

 <div class="row">
		<div class="col-md-12 p-2">
${serviciosHTML}
		</div>

 </div>
	</div>
<!--- nuevo --> `;
                        }
                        $profesionalesList.append(profesionales);

                    });
                }



                showStep("step5");

                $(".option-btn").on("click", function () {
                    const profesionalId = $(this).data("profesional-id");
                    const servicioId = $(this).data("servicio-id");
                    const sucursalId = $(this).data("sucursal-id");
                    const action = $(this).data("action");

                    if (action === "ver-mas") {

                        if (sucursalId) {
                            //console.log('ENTRE POR SUCURSAL')
                            handleVerMasHoras(profesionalId, servicioId, sucursalId);
                        }
                        else if (servicioId) {
                            state.servicio = servicioId;
                            //console.log('ENTRE POR SERVICIO')

                            handleVerMasHoras(profesionalId, servicioId);
                        } else {
                            //console.log('ENTRE POR PROFESIONAL')
                            handleVerMasHoras(profesionalId);
                        }

                    } else {
                        if (sucursalId) {
                            //console.log('ENTRE POR SUCURSAL')
                            handleReserva(profesionalId, servicioId, sucursalId);
                        }
                        else if (servicioId) {
                            // console.log('ENTRE POR SERVICIO')
                            //   console.log("profesionalId" + profesionalId  + "servicioId" + servicioId)
                            handleReserva(profesionalId, servicioId);
                        } else {
                            //  console.log('ENTRE POR PROFESIONAL')
                            handleReserva(profesionalId);
                        }

                    }
                });




            } else {
                $("#loader").hide();
            }
        },
    });


}

function formatearMiles(numero) {
    const redondeado = Math.round(numero);
    return '$' + redondeado.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}
function buscarProfesional() {
    const buscar = $("#searchProfesional").val();
    const servicioId = $("#filterServicio").val();
    const id_sucursal = $("#filterSucursal").val();

    loadProfesionales(servicioId, id_sucursal, buscar);
}

function handleReserva(profesionalId, servicioId, sucursalId) {
    $('#btnOtraReserva').hide()
    $('#otraReserva').hide()
    if (sucursalId) {
        state.sucursal = sucursalId

    }
    state.servicio = servicioId
    //   console.log("profesionalId" + profesionalId  + "servicioId handleReserva" + state.servicio)
    if (state.servicio) {
        servicioId = state.servicio
    }
    if (servicioId) {

        const profesional = profesionalList.find((p) => p.id === profesionalId);
        const servicio = profesional.servicios.find((s) => s.id === servicioId);
        //console.log(JSON.stringify(servicio))
        //   servicio.horaLibre.fecha
        //console.log(servicio.horaLibre.fecha)
        state.fecha = servicio.horaLibre.fecha;
        state.profesional = profesional.id;
        //console.log(JSON.stringify(servicio));
        state.horaReservada = servicio.horaLibre.hora_inicio;
        state.tiempo_duracion = servicio.tiempo;
        state.servicio = servicioId
        state.id_box = servicio.id_box;
        state.precio = servicio.precio;
        state.comision = servicio.comision;
        // Actualizar resumen

        $("#nombreProfesional").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
        $("#servicioReservado").text(resolverServicio(state.servicio));
        $("#sucursalReservada").text(resolverSucursal(state.sucursal));
        $('#fechaReserva').text(state.fecha);
        $("#horaReservada").text(state.fecha + " " + state.horaReservada);
        $('#costoServicio').text(formatearMiles(state.precio));
        $("#nombrePaciente").text(state.nombre + " " + state.apellidoPaterno);

        showStep("confirmacion");
    } else {
        const profesional = profesionalList.find((p) => p.id === profesionalId);
        const servicio = profesional.servicios.find((s) => s.id === state.servicio);
        //      console.log('dede pro servicio: '+ JSON.stringify(servicio))
        state.fecha = moment().format("YYYY-MM-DD");
        state.profesional = profesional.id;
        //console.log(JSON.stringify(profesional.servicios) + " " + profesional.servicios[0].tiempo);
        state.horaReservada = servicio.horaLibre.hora_inicio;
        state.tiempo_duracion = servicio.tiempo;

        state.id_box = servicio.id_box;
        state.precio = servicio.precio;
        state.comision = servicio.comision;
        // Actualizar resumen

        $("#nombreProfesional").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
        $("#servicioReservado").text(resolverServicio(state.servicio));
        $("#sucursalReservada").text(resolverSucursal(state.sucursal));
        $('#costoServicio').text(formatearMiles(state.precio));
        $('#fechaReserva').text(state.fecha);
        $("#horaReservada").text(state.fecha + " " + state.horaReservada);
        $("#nombrePaciente").text(state.nombre + " " + state.apellidoPaterno);

        showStep("confirmacion");
    }

}

function handleVerMasHoras(profesionalId, servicioId, sucursalId) {
    $("#loader").show();
    $('#btnOtraReserva').hide()
    $('#otraReserva').hide()

    if (servicioId) {
        state.servicio = servicioId
    }

    if (sucursalId) {
        state.sucursal = sucursalId
    }

    const profesional = profesionalList.find((p) => p.id === profesionalId);
    state.profesional = profesional;
    if (!profesional) return;
    //$("#fichaProfesionalServiciosTitle").text('Servicio:' + resolverServicio(state.servicio));
    $("#fichaProfesionalServiciosTitle").text('' + resolverServicio(state.servicio));
    // Actualizar la ficha del profesional
    var lafoto = ('./img/nofoto-' + configuracion.idioma + '.png');
    if (profesional.imagen != null) {
        lafoto = imgServidor + profesional.imagen;
        // $lafoto = $foto->nombre_archivo;
    }
    $("#fichaProfesionalFoto")
        .attr("src", lafoto)
        .attr("alt", profesional.nombre);
    $("#fichaProfesionalNombre").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
    $("#fichaProfesionalEspecialidad").text(profesional.especialidad.map((e) => `${e.nombre} `).join(""));
    $("#fichaProfesionalSucursal").text(`Sucursal: ${resolverSucursal(state.sucursal)} `);

    const especialidad = Object.values(especialidadList).find(
        (e) => e.nombre === profesional.especialidad
    );
    const $serviciosList = $("#fichaProfesionalServicios");
    $serviciosList.empty();
    const $horariosGrid = $('#fichaProfesionalHorarios');
    $horariosGrid.empty().hide();
    $('#calendar').show();
    /*if (especialidad) {
        especialidad.servicios.forEach((servicio) => {
            $serviciosList.append(`
                        < div class="servicio-item" >
                        <span>${servicio}</span>
                        <button class="btn-reservar" data-servicio="${servicio}">Reservar</button>
                    </ >
                        `);
        });
    }*/

    // Cargar horarios
    // Event listeners para los botones de reserva
    /*  $(".btn-reservar").on("click", function () {
          const servicio = $(this).data("servicio");
          state.servicio = servicio;
          state.profesional = profesional;
          showStep("confirmacion");
      });

      */
    // Event listeners para los horarios


    state.profesional = profesionalId;
    servicioCalendario();

    // Mostrar el paso de la ficha
    showStep("step6");
}

function resolverSucursal($id) {
    var sucursal = sucursalList.find((sucursales) => sucursales.id === $id);
    if (sucursal.nombre != '' || sucursal.nombre != null) {
        return sucursal.nombre;
    } else {
        return "";
    }

}


function resolverServicio($id) {
    var servicio = servicioList.find((servicio) => servicio.id === $id);
    if (servicio.nombre != '' || servicio.nombre != null) {
        return servicio.nombre;
    } else {
        return "";
    }

}

function escapeHTML(str) {
    return String(str)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;")
        .replace(/\+/g, "&#43;"); // escapa el signo +
}


function servicioCalendario(fecha_inicio) {
    seleccion = "";
    var hoy;
    if (fecha_inicio) {
        const fechaParametro = moment(fecha_inicio);
        const hoyReal = moment(); // Fecha actual real

        // Si es el mismo mes y año => usar hoy
        if (fechaParametro.isSame(hoyReal, 'month') && fechaParametro.isSame(hoyReal, 'year')) {
            hoy = hoyReal.toDate();
        }
        // Si es anterior al mes actual => no mostrar nada
        else if (fechaParametro.isBefore(hoyReal, 'month') && fechaParametro.isSame(hoyReal, 'year')) {
            $("#loader").hide();
            return; // evita renderizar el calendario
        }
        // Para otros casos (mes futuro o año diferente) => usar la fecha dada
        else {
            hoy = fechaParametro.toDate();
        }
    } else {
        hoy = new Date(); // No se pasó ninguna fecha
    }

    // Calcula la fecha de fin sumando 2 meses a la fecha actual
    var fechaFin = new Date(hoy.getFullYear(), hoy.getMonth(), hoy.getDate() + 32);

    // Formatea la fecha en el formato "YYYY-MM-DD"
    var fechaInicioStr = hoy.toISOString().slice(0, 10);

    // Asegura que hora y minutos tengan 2 dígitos
    var hora = String(hoy.getHours()).padStart(2, '0');
    var minutos = String(hoy.getMinutes()).padStart(2, '0');

    // Concatena la hora al string
    fechaInicioStr += " " + hora + ":" + minutos;
    var horaActual = new Date().getHours();
    var fechaFinStr = fechaFin.toISOString().slice(0, 10);
    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    //   $("#loader").show();
    $('#calendar').fullCalendar('destroy');

    $.ajax({
        url: '/horasDisponiblesSite',
        method: 'POST',
        data: {
            _token: csrfToken,
            "servicio_id": state.servicio,
            "profesional_id": state.profesional,
            "sucursal_id": state.sucursal,
            "fecha_inicio": fechaInicioStr,
            "fecha_fin": fechaFinStr + " 23:59:59"
        },
        success: function (response) {
            var eventos = [];
            if (response.body && response.body.horas_disponibles) {
                for (const fecha in response.body.horas_disponibles) {
                    if (response.body.horas_disponibles.hasOwnProperty(fecha)) {
                        const horas = response.body.horas_disponibles[fecha];

                        for (var i = 0; i < horas.length; i++) {
                            let titulo = "";
                            let color = "";
                            const fechaHoraFin = moment(fecha + " " + horas[i].hora_fin, "YYYY-MM-DD HH:mm");
                            if (fechaHoraFin > moment()) {

                            } else {
                                //   titulo = txt_nodisponible;
                                //  color = '#808080'
                            }
                            titulo = txt_disponible;
                            color = '#008000';

                            var evento = {
                                reserva: horas[i], // Store the hour details
                                title: titulo,
                                description: ' <br> divFecha: ' +
                                    escapeHTML(fecha) + + ' <br>Hora: ' + horas[i].hora_inicio +
                                    ' <br>Hora fin: ' + horas[i].hora_fin +
                                    ' <br>Estado: ' + (horas[i].reserva ? txt_reservado : txt_disponible),
                                start: moment(fecha + ' ' + horas[i].hora_inicio, "YYYY-MM-DD HH:mm"),
                                end: moment(fecha + ' ' + horas[i].hora_fin, "YYYY-MM-DD HH:mm"),
                                color: color,
                                textColor: '#ffffff'
                            };



                            $("#loader").hide();
                            eventos.push(evento);
                        }
                    }
                }
            }
            $("#loader").hide();
            cargarCalendario(eventos, hoy);
            // Ahora "eventos" contiene los datos del servicio
            //  //console.log(eventos);
        },
        error: function (error) {
            // Manejar errores aquí.
            $("#loader").hide();
            console.error(error);
        }
    });
}


function cargarCalendario(eventos, day) {
    minTime = eventos[0].reserva.hora_inicio;
    maxTime = 0;
    eventos.forEach(element => {
        if (parseInt(minTime) > parseInt(element.reserva.hora)) {
            minTime = element.reserva.hora
        }
        if (parseInt(maxTime) < parseInt(element.reserva.horaFin)) {
            maxTime = element.reserva.horaFin
        }
    });
    console.log(eventos[0].reserva);
    $("#loader").hide();

    if (eventos != '') {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next',
            },
            defaultDate: day,
            defaultView: 'month',
            firstDay: 1,
            buttonIcons: true,
            weekNumbers: false,
            editable: false,
            eventLimit: 1,
            events: eventos,
            minTime: minTime,
            maxTime: maxTime,
            allDaySlot: false,
            dayMaxEventRows: true,
            eventLimitText: function (n) {
                if (n === 1) {
                    return '+1';
                } else {
                    return '+' + n;
                }
            },
            dayClick: function (date, jsEvent, view, calEvent) {
            },
            eventDataTransform: function (eventData) {
                //console.log(eventData);
                return {
                    ...eventData, // incluye lo que ya trae
                    reserva: eventData.reserva // asegura que se preserve
                };
            },
            eventClick: function (calEvent, jsEvent, view) {
                $('#calendar').hide();
                // const $horariosGrid = $('#fichaProfesionalHorarios');
                // $horariosGrid.empty().show();
                const fechaSeleccionada = calEvent.start.format('DD-MM-YYYY');
                console.log(calEvent);
                //  console.log(calEvent.reserva)
                seleccion = calEvent.reserva;
                state.id_box = seleccion.id_box;
                state.horaReservada = seleccion.hora_inicio;
                state.fecha = fechaSeleccionada;
                state.profesional = seleccion.id_profesional;
                const profesional = profesionalList.find((p) => p.id === state.profesional);



                $("#nombreProfesional").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
                $("#servicioReservado").text(resolverServicio(state.servicio));
                $("#sucursalReservada").text(resolverSucursal(state.sucursal));
                $('#costoServicio').text(formatearMiles(state.precio));
                $('#fechaReserva').text(state.fecha);
                $("#horaReservada").text(state.fecha + " " + state.horaReservada);
                $("#nombrePaciente").text(state.nombre + " " + state.apellidoPaterno);
                // state.profesional = profesional;
                showStep("confirmacion");
                //  handleReserva(profesional.id, state.servicio, state.sucursal);

                /* $horariosGrid.append(`
                             <button
                         class="horario-btn disponible"
                         style = "margin: 4px; padding: 8px;" data-box="${seleccion.id_box}"
                             >
                             ${seleccion.hora_inicio}
                     </button>
                             `);
                 $horariosGrid.on("click", ".horario-btn.disponible", function () {
                     const hora = $(this).text().trim();
                     state.id_box = $(this).attr("data-box");
                     state.horaReservada = hora;
                     state.fecha = fechaSeleccionada;
                     const profesional = profesionalList.find((p) => p.id === state.profesional);


                     $("#nombreProfesional").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
                     $("#servicioReservado").text(resolverServicio(state.servicio));
                     $("#sucursalReservada").text(resolverSucursal(state.sucursal));
                     $("#horaReservada").text(state.fecha + " " + state.horaReservada);
                     $("#nombrePaciente").text(state.nombre + " " + state.apellidoPaterno);
                     // state.profesional = profesional;
                     showStep("confirmacion");
                 });

                 $horariosGrid.append(`
                             <br> <br>
                                 <button
                                     id="volverCalendario"
                                     class="btn btn-secondary"
                                     style="margin-top: 10px; padding: 8px 12px;"
                                 >
                                     Volver al calendario
                                 </button>
                                 `);

                 $('#volverCalendario').on('click', function () {
                     $horariosGrid.hide();
                     $('#loader').show();
                     $('#fichaProfesionalHorariosTitle').text(
                         'Horario Disponible'
                     );
                     $('#calendar').fullCalendar('destroy');
                     servicioCalendario();

                     $('#calendar').show();
                 }); */
            },

            eventLimitClick: function (cellInfo, jsEvent) {

                // 1) Ocultar calendario y mostrar el contenedor de horarios
                $('#calendar').hide();
                const $horariosGrid = $('#fichaProfesionalHorarios');
                $horariosGrid.empty().show();
                const fechaSeleccionada = cellInfo.date.format('DD-MM-YYYY');

                // 2) Extraer los “segmentos” de ese día.
                //    Intentamos usar allSegs, pero si viene undefined, fallback a segs, o a [].
                const segmentos = cellInfo.allSegs || cellInfo.segs || [];


                // 3) De cada segmento, obtenemos el “evento original” de estas formas:
                //    - seg.event  (funciona en algunos builds de v3)
                //    - seg.footprint.eventInstance.def  (fallback cuando seg.event es null)
                const eventosDelDia = segmentos.map(seg => {
                    if (seg.event) {
                        // si FullCalendar aún conserva .event como tu objeto original
                        return seg.event;
                    }
                    // en cambio, muchas compilaciones de v3 guardan el evento en footprint.eventInstance.def
                    if (
                        seg.footprint &&
                        seg.footprint.eventInstance &&
                        seg.footprint.eventInstance.def
                    ) {
                        return seg.footprint.eventInstance.def;
                    }
                    return null;
                }).filter(e => e !== null); // eliminamos posibles nulls

                // //console.log('eventosDelDia (desde eventLimitClick):', eventosDelDia[0].miscProps.reserva);
                $('#fichaProfesionalHorariosTitle').text(
                    traducir('disponibilidad profesionales', configuracion.idioma) + ': ' + fechaSeleccionada
                );
                // 4) Iterar y leer “reserva” de cada evento
                eventosDelDia.forEach(evento => {
                    // Aquí “evento” ya debe incluir .reserva si usaste eventDataTransform ó si lo pasaste desde tu AJAX
                    const seleccion = evento.miscProps.reserva;
                    console.log(seleccion);
                    if (!seleccion) return; // seguridad

                    $horariosGrid.append(`
                            <button
                        class="horario-btn disponible rectangulo" data-servicio-id="${seleccion.id_servicio}" data-hora-inicio="${seleccion.hora_inicio}"
                            ><i class="fa fa-clock-o" aria-hidden="true"></i>  ${seleccion.hora_inicio}
                    </button>
                            `);
                });


                $horariosGrid.on("click", ".horario-btn.disponible", function () {
                    const hora = $(this).data("hora-inicio");

                    state.horaReservada = hora;
                    state.fecha = fechaSeleccionada;
                    const servicioId = $(this).data("servicio-id");
                    state.servicio = servicioId;
                    const profesional = profesionalList.find((p) => p.id === state.profesional);
                    const servicio = profesional.servicios.find((s) => s.id === state.servicio);

                    console.log('Servicio: ' + JSON.stringify(servicio)); //console.log(servicio);
                    state.profesional = profesional.id;
                    state.tiempo_duracion = servicio.tiempo;
                    state.id_box = servicio.id_box;
                    state.precio = servicio.precio;
                    state.comision = servicio.comision;


                    //  handleReserva(profesional.id, state.servicio, state.sucursal);
                    $("#nombreProfesional").text(profesional.nombre + " " + profesional.apellido_paterno + " " + profesional.apellido_materno);
                    $("#servicioReservado").text(resolverServicio(state.servicio));
                    $("#sucursalReservada").text(resolverSucursal(state.sucursal));
                    $('#costoServicio').text(formatearMiles(state.precio));
                    $('#fechaReserva').text(state.fecha);
                    $("#horaReservada").text(state.fecha + " " + state.horaReservada);
                    $("#nombrePaciente").text(state.nombre + " " + state.apellidoPaterno);
                    // state.profesional = profesional;
                    showStep("confirmacion");
                });

                $horariosGrid.append(`
	<div class="row">
		<div class="col-md-12 text-center">
                     <button id="volverCalendario" class="btn btn-secondary">
                                    ${traducir('volver al calendario', configuracion.idioma)}
                     </button>
		</div>
	</div>
                                `);

                $('#volverCalendario').on('click', function () {
                    $('#loader').show();
                    $horariosGrid.hide();
                    $('#fichaProfesionalHorariosTitle').text(
                        traducir('disponibilidad profesionales', configuracion.idioma)
                    );
                    $('#calendar').fullCalendar('destroy');
                    servicioCalendario();

                    $('#calendar').show();
                });

                return false; // evita que FullCalendar muestre el popover de eventos
            }
        });
    } else {
        Swal.fire(txt_no_hay_horas_dispobibles, '', 'info').then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                ///location.reload();
                //$('#agenda').modal('hide');


            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info')
            }
        });
    }
    cambiarMes()

}


function cambiarMes() {
    let mesActual = $('#calendar').fullCalendar('getView').intervalStart.format('YYYY-MM');

    $(document).on('click', '.fc-prev-button, .fc-next-button', function () {
        // Esperamos a que la vista se actualice luego del clic
        setTimeout(function () {
            $('#loader').show();
            let nuevaVista = $('#calendar').fullCalendar('getView');
            let nuevoMes = nuevaVista.intervalStart.format('YYYY-MM');

            if (nuevoMes !== mesActual) {
                mesActual = nuevoMes; // Actualizamos
                console.log('Mes cambiado a:', nuevoMes);

                servicioCalendario(nuevaVista.intervalStart.format());
                // cargarCosas(nuevaVista.intervalStart, nuevaVista.intervalEnd);
            } else {
                console.log('No se cambió el mes, no se ejecuta nada.');
            }
        }, 10); // Un pequeño delay para asegurar que la vista se actualizó
    });
}


function agendar() {

    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    $("#loader").show();
    $("#guardarDatos").prop("disabled", true);
    var datos = {
        _token: csrfToken,
        cliente_id: state.cliente_id,
        servicio_id: state.servicio,
        profesional_id: state.profesional,
        sucursal_id: state.sucursal,
        box_id: state.id_box,
        fecha: state.fecha + ' ' + state.horaReservada,
        valor_servicio: Math.round(state.precio), //state.precio,
        valor_comision: state.comision,
        tiempo_atencion: state.tiempo_duracion

    }
    $.ajax({
        url: '/crearReservaSite',
        type: 'POST',
        data: JSON.stringify(datos),
        contentType: 'application/json',
        success: function (response) {
            if (response.code == 0) {
                $("#loader").hide();
                $('#calendar').fullCalendar('destroy');

                // $('#btnVolver').hide()
                $('#btnReservar').hide()

                $('#btnOtraReserva').show()
                $('#confirmacionTitle').hide()
                $('#otraReserva').show()
                $('#btnVolver').hide()
                //  handleFinish();
            }
            else {
                $("#loader").hide();
            }


            //alert('Datos guardados con éxito:', response);
        },
        error: function (error) {
            console.error('Error al guardar datos:', error);
        }
    });
}




document.addEventListener('DOMContentLoaded', function () {
    Toast = Swal.mixin({
        toast: true,
        position: "center",
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        customClass: {
            popup: "colored-toast",
        },
    });

    $("#searchProfesional").on("keyup", function () {
        clearTimeout(buscarTimeout); // Limpiar temporizador anterior

        buscarTimeout = setTimeout(function () {
            buscarProfesional(); // Llamar la función después de 1 segundo
        }, 1000);
    });

    diccionario();
    obtenerSucursal();

});