var servicioList;
var especialidad_escogida
var servicio_escogido
var sucursal_escogida
$(function () {
    $('#verTodos').on('click', function () {
        $(".item-profesional").removeClass('no-mostrar');
        $("#verTodos").addClass('no-mostrar');
    });
    $('#selector-especialidades').on('change', function () {
        especialidad_escogida = $(this).val();

        $("#mas-profesionales").removeClass().addClass('animated fadeIn');
        $("#verTodos").addClass('no-mostrar');
        $(".item-profesional").hide();

        if (especialidad_escogida === 'item-profesional') {
            $(".item-profesional").show();
            $('#selector-sucursal').val('item-profesional');
            sucursal_escogida = 'item-profesional';
            loadServicios(-1, -1);
        } else {
            $(".especialidad-" + especialidad_escogida).show();
            if (sucursal_escogida != 'item-profesional' && sucursal_escogida != undefined && sucursal_escogida != undefined) {
                loadServicios(especialidad_escogida, sucursal_escogida);
            } else {

                loadServicios(especialidad_escogida, -1);
            }

        }
    });
    $('#selector-servicios').on('change', function () {
        servicio_escogido = $(this).find(":selected").val();
        $("#mas-profesionales").removeClass().addClass('animated fadeIn');
        $("#verTodos").addClass('no-mostrar');
        $(".item-profesional").hide();
        $('#selector-sucursal').val('-1');
        if (servicio_escogido === 'item-profesional') {
            $(".item-profesional").show();
        } else {
            $(".servicio-" + servicio_escogido).show();
        }
    });


    $('#selector-sucursal').on('change', function () {
        sucursal_escogida = $(this).val();

        $("#mas-profesionales").removeClass().addClass('animated fadeIn');
        $("#verTodos").addClass('no-mostrar');
        $(".item-profesional").hide();
      //  $('#selector-servicios').val('item-profesional');
        if (sucursal_escogida === 'item-profesional') {
            $(".item-profesional").show();
        } else {


            loadServicios(-1, sucursal_escogida);

            $(".sucursal-" + sucursal_escogida).show();
        }
    });

});

function abrirModal(tipo) {
    switch (tipo) {
        case 'agenda':
            $('#agenda').modal('show');
            break;
        case 'login':
            $('#loginModal2').modal('show');
            break;
        default:
            break;
    }

}


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

            if (response.servicios) {

                servicioList = response.servicios;
                const servicioListSelect = $("#selector-servicios");

                // No limpiamos si quieres conservar las opciones cargadas desde Blade
                servicioListSelect.empty();

                // Alternativamente, puedes eliminar solo las que agregaste por AJAX si las marcas con una clase:
                //  servicioListSelect.find('.ajax-option').remove();
                //{{ traducir('ver todos', $configuracion->idioma) }}
                servicioListSelect.append(` <option selected>por servicio</option>`);

                servicioList.forEach((servicio, index) => {
                    const $option = $(`
                            <option value="${servicio.id}" class="clase${index + 1}" >
                                ${servicio.nombre}
                            </option>
                        `);
                    servicioListSelect.append($option);
                });

                servicioListSelect.append(`<option value="item-profesional">ver todos</option>`);
                // Registrar eventos


                // 🟢 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")
                }
            }
        },
    });
}


document.addEventListener('DOMContentLoaded', function () {
    loadServicios(-1, -1);
});