const KCC = function() {
    const LOGIN_BOX_CONTAINER = 'kcc_login_box_container';
    const LOGIN_BOX = 'login_box';
    const LOGIN_SCREEN_1 = 'login_screen_1';
    const LOGIN_SCREEN_2 = 'login_screen_2';
    const REGISTER_FIELDS = 'register_fields';
    const LOGIN_FIELDS = 'login_fields';
    const LOGIN_SYSTEM_TEMPLATE = 'login_system_template';
    const LOGIN_BUTTON_TEMPLATE = 'login_button_template';
    const LOGIN_BOX_WRAPPER = 'login_box_wrapper';
    const STATUS_LINE_TEMPLATE = 'status_line_template';
    const PROFILE_TEMPLATE = 'profile_template';
    const PERSONAL_DATA_SCREEN = 'personal_data_screen';
    const CLUB_LEVEL_SCREEN = 'club_level_screen';
    const MY_RESERVATIONS_SCREEN = 'my_reservations_screen';
    const LOGIN_COMMON_FIELDS = 'login_common_fields';
    const ACTIVE_RESERVATIONS_LIST = 'active_reservations_list';
    const PAST_RESERVATIONS_LIST = 'past_reservations_list';
    const FOUND_RESERVATIONS_LIST = 'found_reservations_list';
    const RESERVATION_TEMPLATE = 'reservation_template';
    const MODIFY_RESERVATION_BTN = 'modify_reservation_btn';
    const CANCEL_RESERVATION_BTN = 'cancel_reservation_btn';
    const CANCELLED_STATUS = 'Cancelado';


    return {
        config: {
            // All configs here
            STATUS_WIDGET: 'club_status_widget',
            PROFILE_WIDGET: 'club_profile_widget',
            LOGIN_WIDGET: 'club_login_widget',
            LOGIN_SCREEN_NUMBER: 1,
            LOGIN_SCREEN_REGISTER_MODE: true,
            COOKIE_DOMAIN: '',
            PROFILE_SCREEN: PERSONAL_DATA_SCREEN,
            SCRIPT_DOMAIN: '',
            USER_SESSION_ID: null,
        },

        user_data: null,

        escapeHtml: (str) => {
            if (str === null || str === undefined) return '';
            const text = String(str);
            const map = {
                '&': '&',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            let escaped = text.replace(/[&<>"']/g, (m) => map[m]);
            escaped = escaped
                .replace(/&lt;small&gt;/gi, '<small>')
                .replace(/&lt;\/small&gt;/gi, '</small>');
            return escaped;
        },

        init: async () => {
            KCC.setScriptDomain();
            await KCC.loadTranslations();
            KCC.loadStyles();
            KCC.loadFB();
            KCC.loadGoogle();
            KCC.createLoginElement();
            KCC.attachEvents();
            KCC.config.USER_SESSION_ID = KCC.loadUserSessionId();

            if (KCC.config.USER_SESSION_ID) {
                await KCC.loadUserData(KCC.config.USER_SESSION_ID);
            }

            KCC.renderLoginSystem();
            KCC.renderLoginBox();
            KCC.renderProfileWidget();

        },

        attachEvents: () => {
            const status_container = document.getElementById(KCC.config.STATUS_WIDGET);
            const login_container = document.getElementById(KCC.config.LOGIN_WIDGET);
            const profile_container = document.getElementById(KCC.config.PROFILE_WIDGET);

            status_container.addEventListener('click', (e) => {

                if(e.target.matches(".login_trigger_btn") || e.target.closest('.login_trigger_btn')){
                    const signSection = document.getElementById(LOGIN_BOX_CONTAINER);
                    if (signSection) {
                        signSection.style.display = signSection.style.display === 'none' ? '' : 'none';
                    }
                }

                if(e.target.matches(".logout_btn")){
                    KCC.logout();
                }

                if(e.target.matches(".profile_btn")){
                    KCC.profileRedirect();
                }

                if(e.target.closest('.status_line') || e.target.matches(".close_status")){
                    const triggerElm = document.querySelector('.status_line');
                    const targetElm = document.querySelector('.status_menu');
                    triggerElm.classList.toggle('on');
                    targetElm.classList.toggle('on');
                }
            });

            login_container.addEventListener('click', (e) => {

                if(e.target.matches(".sign_with_mail") || e.target.closest('.sign_with_mail')){
                    KCC.config.LOGIN_SCREEN_NUMBER = 2;
                    KCC.renderLoginBox();
                }

                if(e.target.matches(".main_login_back")){
                    KCC.config.LOGIN_SCREEN_NUMBER = 1;
                    KCC.renderLoginBox();
                }

                if(e.target.matches(".login_form_btn")){
                    KCC.processEmailLogin(e.target.getAttribute("in_register") === 'true');
                }

                if(e.target.matches(".change_login_mode_btn")){
                    KCC.config.LOGIN_SCREEN_REGISTER_MODE = !KCC.config.LOGIN_SCREEN_REGISTER_MODE;
                    KCC.renderLoginBox();
                }

                if(e.target.matches(".sign_with_google") || e.target.closest('.sign_with_google')){
                    e.preventDefault();
                    const googleButton = KCC.hiddenButtonContainer.querySelector('div[role="button"]');
                    if (googleButton) {
                        googleButton.click();
                    } else {
                        console.log('Fallback: using prompt method');
                        google.accounts.id.prompt();
                    }
                }

                if(e.target.matches(".sign_with_fb") || e.target.closest('.sign_with_fb')){
                    FB.login(function(response) {
                        if (response.authResponse) {
                            KCC.socialLoginSend('facebook', response.authResponse.accessToken);
                        } else {
                            console.log('User cancelled login or did not fully authorize.');
                        }
                    }, {scope: 'public_profile,email'});
                }

                if(e.target.matches(".close_login_btn") || e.target.closest('.close_login_btn')){
                    const signSection = document.getElementById(LOGIN_BOX_CONTAINER);
                    if (signSection) {
                        signSection.style.display = 'none';
                    }
                }
            });

            profile_container?.addEventListener('click', (e) => {
                if(e.target.matches(".personal_data_btn")){
                    KCC.config.PROFILE_SCREEN = PERSONAL_DATA_SCREEN;
                    KCC.renderProfileWidget();
                }

                if(e.target.matches(".level_data_btn")){
                    KCC.config.PROFILE_SCREEN = CLUB_LEVEL_SCREEN;
                    KCC.renderProfileWidget();
                }

                if(e.target.matches(".reservation_data_btn")){
                    KCC.foundReservations = [];

                    KCC.config.PROFILE_SCREEN = MY_RESERVATIONS_SCREEN;
                    if (!('reservations' in KCC.user_data)){
                        KCC.loadReservations().then(() => {
                            KCC.renderProfileWidget();
                        });
                        return;
                    }
                    KCC.renderProfileWidget();
                }

                if(e.target.matches(".modify_user_btn")){
                    KCC.modifyUser();
                }

                if(e.target.matches(".delete_account")){
                    if (confirm(KCC.t('T_question_delete_account'))) {
                        KCC.deleteAccount();
                    }
                }

                if(e.target.matches(".change_password")){
                    KCC.changePassword();
                }

                if(e.target.matches(".rate_trigger")){
                    const targetConditionsId = e.target.dataset.reservation_id;
                    const targetElm = document.querySelector('.rate_conditions[data-reservation_id="' + targetConditionsId + '"]');
                    targetElm.classList.toggle('on');
                }

                if(e.target.matches(".search_btn") || e.target.closest('.search_btn')){
                    document.querySelector('.seach_box').classList.add('active');
                    document.querySelector('#reservation_search').focus();
                }

                if(e.target.matches(".modify_reservation") || e.target.matches(".cancel_reservation")){
                    document.location.href = 'https://kora-corpo-dot-kora-living.appspot.com/mis-reservas.html';
                }

            });

            profile_container?.addEventListener("input", (e) => {
                if(e.target.matches("#reservation_search")){
                    const searchStr = e.target.value;
                    if (searchStr.length >= 3){
                        KCC.foundReservations = KCC.searchReservations(searchStr);
                    } else {
                        KCC.foundReservations = [];
                    }
                    document.querySelector(".profile_screen .content_wrapper").innerHTML = KCC.renderTemplate(MY_RESERVATIONS_SCREEN);
                }
            });
        },

        renderLoginSystem: () => {
            let container = document.getElementById(KCC.config.STATUS_WIDGET);
            container.innerHTML = KCC.renderTemplate(LOGIN_SYSTEM_TEMPLATE);

            container = document.getElementById(KCC.config.LOGIN_WIDGET);
            if (container){
                container.innerHTML = KCC.renderTemplate(LOGIN_BOX_WRAPPER);
            }

        },

        renderLoginBox: () => {
            const container = document.getElementById(LOGIN_BOX_CONTAINER);
            const inRegister = KCC.config.LOGIN_SCREEN_REGISTER_MODE;

            if (!container){
                return;
            }

            if (KCC.config.USER_SESSION_ID) {
                container.innerHTML = '';
                return;
            }

            const texts = {
                title: inRegister
                    ? KCC.t('T_register_widget_title').replace('@@club_name@@', 'Kora Rewards')
                    : KCC.t('T_login_widget_title').replace('@@club_name@@', 'Kora Rewards'),

                back: inRegister
                    ? KCC.t('T_use_other_register_method')
                    : KCC.t('T_use_other_access_method'),

                form_btn: inRegister
                    ? KCC.t('T_create_account')
                    : KCC.t('T_acceder'),

                privacy: inRegister
                    ? `${KCC.t('T_on_register_accept')} <a href="${KCC.t('T_privacy_policy_url')}" target="_blank" id="privacy_text_btn">${KCC.t('T_he_leido_2')}</a>`
                    : '',

                promo_accept: inRegister
                    ? `<p class="promo_check"><input type="checkbox" name="promotions" id="promotions"/> ${KCC.t('T_accept_commercial_communications')}</p>`
                    : '',

                changeMode: inRegister
                    ? `${KCC.t('T_tienes_cuenta')} <button type="button" class="change_login_mode_btn lnk_btn">${KCC.t('T_login')}</button>`
                    : `${KCC.t('T_dont_have_account')} <button type="button" class="change_login_mode_btn lnk_btn">${KCC.t('T_register')}</button>`,
            }

            container.innerHTML = KCC.renderTemplate(LOGIN_BOX, texts);

        },

        renderProfileWidget: () => {
            const container = document.getElementById(KCC.config.PROFILE_WIDGET);
            if (!container) return;

            if (!KCC.config.USER_SESSION_ID) {
                container.innerHTML = '';
                return;
            }

            container.innerHTML = KCC.renderTemplate(PROFILE_TEMPLATE);
        },

        renderTemplate: (templateName, context = {}) => {
            const templates = {
                [LOGIN_SYSTEM_TEMPLATE]: () => `
                    <div id="kcc_status_widget">
                        ${KCC.config.USER_SESSION_ID ? KCC.renderTemplate(STATUS_LINE_TEMPLATE) : KCC.renderTemplate(LOGIN_BUTTON_TEMPLATE)}
                    </div>
                    `,

                [STATUS_LINE_TEMPLATE]: () => `
                    <div class="status_line"><span>${KCC.getUserData('name').charAt(0)}</span><div class="user_name">${KCC.getUserData('name')}</div><i class="fa-light fa-angle-down"></i></div>
                    <div class="status_menu_wrapper">
                        <menu class="status_menu">
                            <li class="status_menu_level"><span>${KCC.t('T_level2')}: ${KCC.getUserLevelName()}</span><i class="fa-regular fa-xmark close_status"></i></li>
                            <li><button type="button" class="lnk_btn profile_btn"><i class="fa-light fa-user"></i> ${KCC.t('T_see_profile')}</button></li>
                            <li><button type="button" class="lnk_btn logout_btn"><i class="fa-light fa-arrow-right-from-bracket"></i> ${KCC.t('T_close_session')}</button></li>
                        </menu>
                    </div>
                `,

                [LOGIN_BUTTON_TEMPLATE]: () => `
                        <button type="button" class="login_trigger_btn lnk_btn_2 init_session_btn" menu_login_btn"><i class="fa-light fa-circle-user"></i> ${KCC.t('T_login')}</button>
                    `,

                [LOGIN_BOX_WRAPPER]: () => `
                        <div id=${LOGIN_BOX_CONTAINER} style="display: none;">
                        </div>
                    `,


                [LOGIN_BOX]: () => `
                    <div id="kcc_sign_section">
                        <form id="login_form">
                            <div id="close_login_wrap"><button type="button" class="close_login_btn lnk_btn"><i class="fa-light fa-xmark"></i></button></div>
                            ${KCC.renderTemplate(KCC.config.LOGIN_SCREEN_NUMBER == 1 ? LOGIN_SCREEN_1 : LOGIN_SCREEN_2, context)}
                            ${KCC.renderTemplate(LOGIN_COMMON_FIELDS, context)}
                        </form>
                    </div>
                    `,

                [LOGIN_SCREEN_1]: () => `
                    <h3>${context.title}</h3>
                    <menu class="sign_in_selector register_sign">
                        <li><button type="button" class="sign_with_mail login_type_btn"><i class="fa-light fa-envelope"></i> <span>${KCC.t('T_continuar_con')} email</span></button></li>
                        <li><button type="button" class="sign_with_google login_type_btn"><img src="${KCC.config.SCRIPT_DOMAIN}/static_1/images/google-icon-logo.svg" alt="Logo Google" width="20" height="20"/> <span>${KCC.t('T_continuar_con')} Google</span></button></li>
                        <li><button type="button" class="sign_with_fb login_type_btn"><i class="fab fa-facebook"></i> <span>${KCC.t('T_continuar_con')} Facebook</span></button></li>
                    </menu>
                `,

                [LOGIN_SCREEN_2]: () => `
                    <button type="button" class="main_login_back lnk_btn">${context.back}</button>
                    <h3>${context.title}</h3>
                    ${KCC.renderTemplate(KCC.config.LOGIN_SCREEN_REGISTER_MODE ? REGISTER_FIELDS : LOGIN_FIELDS, context)}
                    <button type="button" id="login_form_btn" class="login_form_btn std_btn" in_register="${KCC.config.LOGIN_SCREEN_REGISTER_MODE}">${context.form_btn}</button>
                `,

                 [REGISTER_FIELDS]: () => `
                    <input type="text" name="name" id="name" placeholder="${KCC.t('T_nombre')}"/>
                    <input type="text" name="surname" id="surname" placeholder="${KCC.t('T_apellidos')}"/>
                    <input type="text" name="email" id="email" placeholder="${KCC.t('T_email')}"/>
                    <input type="password" name="password" id="password" placeholder="${KCC.t('T_contrasena')}"/>
                `,

                [LOGIN_FIELDS]: () => `
                    <input type="text" name="user" id="user" placeholder="${KCC.t('T_email')}"/>
                    <input type="password" name="password" id="password" placeholder="${KCC.t('T_contrasena')}"/>
                `,

                [LOGIN_COMMON_FIELDS]: () => `                   
                    ${context.promo_accept}
                    <p>${context.privacy}</p>
                    <p>${context.changeMode}</p>
                    <input type="hidden" name="namespace" value="kora-corpo"/>
                    <input type="hidden" name="language" value="${KCC.getLanguage()}"/>
                `,

                [PROFILE_TEMPLATE]: () => `
                    <div id="kcc_profile_widget">
                        <div class="profile_header">
                            <div class="content_wrapper">
                                <div class="user_name">${KCC.getUserData('name').toUpperCase()}</div>
                                <div class="profile_hdr_rgt">
                                    <menu class="profile_menu">
                                        <li><button type="button" class="lnk_btn personal_data_btn ${(KCC.config.PROFILE_SCREEN === PERSONAL_DATA_SCREEN) ? 'active':''}">${KCC.t('T_datos_personales').toUpperCase()}</button></li>
                                        <li><button type="button" class="lnk_btn level_data_btn ${(KCC.config.PROFILE_SCREEN === CLUB_LEVEL_SCREEN) ? 'active':''}">${KCC.t('T_club_level').replace('@@club_name@@', 'Kora Rewards').toUpperCase()}</button></li>
                                        <li><button type="button" class="lnk_btn reservation_data_btn ${(KCC.config.PROFILE_SCREEN === MY_RESERVATIONS_SCREEN) ? 'active':''}">${KCC.t('T_mis_reservas').toUpperCase()}</button></li>
                                    </menu>
                                    <div class="search_wrapper ${(KCC.config.PROFILE_SCREEN === MY_RESERVATIONS_SCREEN) ? 'on':''}">
                                        <div class="seach_box">
                                            <input type="text" name="reservation_search" id="reservation_search" />
                                            <button type="button" class="lnk_btn search_btn"><i class="fa-light fa-magnifying-glass"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="profile_screen">
                            <div class="content_wrapper">
                                ${KCC.renderTemplate(KCC.config.PROFILE_SCREEN, context)}
                            </div>
                        </div>
                    </div>
                `,

                [PERSONAL_DATA_SCREEN]: () => `
                    <div class="personal_data_wrapper">
                        <h3>${KCC.t('T_datos_personales')}</h3>
                        <p>${KCC.t('T_fill_information_save_time')}</p>
                        <form id="modify_user">
                            <div class="form_row">
                                <div class="form_col">
                                    <label>${KCC.t('T_nombre')}</label>
                                    <input type="text" name="name" value="${KCC.getUserData('name')}" placeholder="${KCC.t('T_nombre')}"/>
                                </div>
                                <div class="form_col">
                                    <input type="text" name="surname" value="${KCC.getUserData('surname')}" placeholder="${KCC.t('T_apellidos')}"/>
                                </div>
                            </div>

                            <div class="form_row">
                                <div class="form_col">
                                    <label>${KCC.t('T_fecha_nacimiento')}</label>
                                    <input type="date" name="birthday" value="${KCC.getUserData('birthday')}"placeholder="${KCC.t('T_fecha_nacimiento')}"/>
                                </div>
                            </div>

                            <div class="form_row">
                                <div class="form_col">
                                    <label>${KCC.t('T_ciudad')}</label>
                                    <input type="text" name="city" value="${KCC.getUserData('city')}" placeholder="${KCC.t('T_ciudad')}"/>
                                </div>
                                <div class="form_col">
                                    <label>${KCC.t('T_pais_residencia')}</label>
                                    <select name="pais">
                                        ${KCC.renderCountryList()}
                                    </select>
                                </div>
                            </div>

                            <div class="form_row">
                                <div class="form_col">
                                    <label>${KCC.t('T_email')}</label>
                                    <input type="text" name="email" id="profile_email" value="${KCC.getUserData('email')}" readonly/>
                                </div>
                                <div class="form_col">
                                    <label>${KCC.t('T_telefono')}</label>
                                    <input type="text" name="telephone" value="${KCC.getUserData('telephone')}" placeholder="${KCC.t('T_telefono')}"/>
                                </div>
                            </div>
                            
                            <div class="form_row">
                                <div class="form_col">
                                    <label>${KCC.t('T_subscribe_news')}</label>
                                    <div class="toggle_cnt  ${(KCC.getUserData('promotions') ? 'on':'')}" data-name="promotions">
                                        <i class="toggle_tip">
                                            <svg class="ok_svg" width="20" height="20" viewBox="0 0 25 25"> <polyline points="3.7 14.3 9.6 19 20.3 5" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                                            <svg class="ko_svg" width="14" height="14" viewBox="0 0 500 500"><polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337" fill="#ffffff"/></svg>
                                        </i>
                                        <input type="checkbox" name="promotions" ${(KCC.getUserData('promotions') ? 'checked="checked"':'')} style="display: none"/> 
                                    </div>
                                </div>
                            </div>

                            <div class="form_row_final">
                                <div class="form_col">
                                    <button type="button" class="lnk_btn delete_account">${KCC.t('T_delete_account')}</button>
                                    <button type="button" class="lnk_btn change_password">${KCC.t('T_change_password')}</button>
                                </div>
                                <div class="form_col col_right">
                                    <button type="button" class="std_btn modify_user_btn">${KCC.t('T_modify_user_data')}</button>
                                </div>
                            </div>
                            <input type="hidden" name="namespace" value="kora-corpo"/>
                            <input type="hidden" name="sid" value="${KCC.user_data.session_id}"/>
                        </form>
                    </div>
                `,

                [CLUB_LEVEL_SCREEN]:  () => `
                    <div class="club_level_wrapper">
                        <div class="club_level_header">
                            <h3>${KCC.t('T_your_level')}: <strong>${KCC.getUserLevelName()}</strong></h3>
                            <p>${KCC.t('T_you_have_n_points').replace('@@points@@', KCC.getUserData('points'))}
                            <h5>${KCC.t('T_n_points_to_next_level').replace('@@points@@', KCC.calculatePointsToNextLevel())}</h5>
                            <div class="level_progress_bar_wrapper">
                                <div class="level_progress_main">
                                    <div class="level_progress_bar_bg"></div>
                                    <div class="level_progress_bar" style="width:${KCC.calculateProgressBar()}px"></div>
                                </div>
                                <div class="level_progress_bar_legend">
                                    <div class="level_progress_level">
                                        <small>${KCC.getLevelData(0).points} ${KCC.t('T_pnts')}</small>
                                        <i>·</i>
                                        <p>${KCC.getLevelData(0).name}</p>
                                    </div>
                                    <div class="level_progress_level">
                                        <small>${KCC.getLevelData(1).points} ${KCC.t('T_pnts')}</small>
                                        <i>·</i>
                                        <p>${KCC.getLevelData(1).name}</p>
                                    </div>
                                    <div class="level_progress_level">
                                        <small>${KCC.getLevelData(2).points} ${KCC.t('T_pnts')}</small>
                                        <i>·</i>
                                        <p>${KCC.getLevelData(2).name}</p>
                                    </div>
                                </div>     
                            </div>                            
                        </div>
                        <div class="club_level_main">
                            <div class="club_level_carousel">
                                <div class="club_level_descriptions">
                                    <div class="club_level_description">
                                        ${KCC.getLevelData(0).description}
                                        <div class="club_level_features">${KCC.renderFeatures(KCC.getLevelData(0).features)}</div>
                                    </div>
                                    <div class="club_level_description">
                                        ${KCC.getLevelData(1).description}
                                        <div class="club_level_features">${KCC.renderFeatures(KCC.getLevelData(1).features)}</div>
                                    </div>
                                    <div class="club_level_description">
                                        ${KCC.getLevelData(2).description}
                                        <div class="club_level_features">${KCC.renderFeatures(KCC.getLevelData(2).features)}</div>
                                    </div>
                                </div>
                                <div class="club_level_carousel_nav">
                                    <button class="carousel_prev" onclick="KCC.carouselPrev()">&#8249;</button>
                                    <span class="carousel_counter">1/3</span>
                                    <button class="carousel_next" onclick="KCC.carouselNext()">&#8250;</button>
                                </div>
                            </div>    
                            <div class="club_level_extra_info">
                                <p>${KCC.t('T_club_conditions_disclaimer')}</p>
                                <p>${KCC.t('T_club_excluded_rates')}</p>
                                 <p>${KCC.t('T_point_exchange_info')}</p>
                                <p>${KCC.t('T_club_gym_disclaimer')}</p>
                                <p>${KCC.t('T_club_breakfast_disclaimer')}</p>
                                <p>${KCC.t('T_stay_limit_disclaimer')}</p>
                            </div>                      
                        </div>     
                    </div>
                `,

                [MY_RESERVATIONS_SCREEN]:  () => `
                    <div class="my_reservations_wrapper">
                        ${KCC.filterReservations().length && !KCC.foundReservations.length ? KCC.renderTemplate(ACTIVE_RESERVATIONS_LIST, context) : ''}
                        ${KCC.filterReservations(true).length && !KCC.foundReservations.length ? KCC.renderTemplate(PAST_RESERVATIONS_LIST, context) : ''}
                        ${KCC.foundReservations.length? KCC.renderTemplate(FOUND_RESERVATIONS_LIST, context) : ''}
                    </div>
                `,

                [ACTIVE_RESERVATIONS_LIST]:  () => `
                    <h3>${KCC.t('T_next_reservations')}</h3>
                    <div class="active_reservations_list">
                        ${KCC.filterReservations().map(item => KCC.renderTemplate(RESERVATION_TEMPLATE, item)).join('')}
                    </div>
                `,

                [PAST_RESERVATIONS_LIST]:  () => `
                    <h3>${KCC.t('T_past_reservations')}</h3>
                    <div class="past_reservations_list">
                        ${KCC.filterReservations(true).map(item => KCC.renderTemplate(RESERVATION_TEMPLATE, item)).join('')}
                    </div>
                `,

                [FOUND_RESERVATIONS_LIST]:  () => `
                    <h3>${KCC.t('T_found_reservations')}</h3>
                    <div class="found_reservations_list">
                        ${KCC.foundReservations.map(item => KCC.renderTemplate(RESERVATION_TEMPLATE, item)).join('')}
                    </div>
                `,

                [RESERVATION_TEMPLATE]:  () => `
                    <div class="reservation${KCC.reservationIsActive(context) ? '' : ' past_reservation'}${context.status === CANCELLED_STATUS ? ' cancelled' : ''}">
                        <div class="hotel_photo"><img src="${KCC.escapeHtml(context.hotel_photo ?? '')}" alt="${KCC.escapeHtml(context.hotel_name ?? '---')}"></div>
                        <div class="reservation_header">
                            <div class="row">
                                <div class="col">
                                    <h4>${KCC.escapeHtml(context.hotel_name ?? '---')} <a href="#"><i class="fal fa-external-link"></i></a></h4>
                                    <div class="city"><i class="fa-regular fa-location-dot"></i> ${KCC.escapeHtml(context.hotel_city ?? '---')}</div>
                                </div>
                                <div class="col col_right">
                                    <div class="identifier"><small>${KCC.t('T_localizador')}</small>${KCC.escapeHtml(context.identifier)}</div>
                                    <div class="reservation_status">${KCC.escapeHtml(context.status ?? '---')}</div>
                                </div>
                            </div>
                        </div>
                        <div class="reservation_body">
                            <div class="row">
                                <div class="col">
                                    <div class="reservation_value room">${KCC.escapeHtml(context.room_name ?? '---')}</div>
                                </div>
                            </div>
                                
                            <div class="row">
                                <div class="col">
                                    <div class="reservation_value date"><small>${KCC.t('T_entrada')}</small>${KCC.escapeHtml(KCC.formatDate(context.check_in)) ?? '---'}</div>
                                </div>
                                <div class="col">
                                    <div class="reservation_value date"><small>${KCC.t('T_salida')}</small>${KCC.escapeHtml(KCC.formatDate(context.check_out)) ?? '---'}</div>
                                </div>
                            </div>
                                
                            <div class="row">
                                <div class="col">
                                    <div class="reservation_value occupancy"><small>${KCC.t('T_ocupacion')}</small>${KCC.escapeHtml(KCC.getOccupancy(context)) ?? '---'}</div>
                                </div>
                                <div class="col">
                                    <div class="reservation_value board"><small>${KCC.t('T_regimen')}</small>${KCC.escapeHtml(context.board_name ?? '---')}</div>
                                </div>
                            </div>
                                
                            
                        </div>                        
                        
                        <div class="reservation_footer">
                            <div class="row">
                                <div class="col">
                                    ${KCC.reservationIsActive(context) ? KCC.renderTemplate(MODIFY_RESERVATION_BTN, context) : ''}
                                    ${KCC.reservationIsActive(context) ? KCC.renderTemplate(CANCEL_RESERVATION_BTN, context) : ''}
                                </div>
                                <div class="col col_right">
                                    <div class="total"><small>${KCC.t('T_total_imp_incl')}</small>${KCC.escapeHtml(context.reservation_total ?? '---')}</div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                `,

                [MODIFY_RESERVATION_BTN]:  () => `<button type="button" class="std_btn modify_reservation">${KCC.t('T_modificar')}</button>`,

                [CANCEL_RESERVATION_BTN]:  () => `<button type="button" class="lnk_btn cancel_reservation">${KCC.t('T_cancelar')}</button>`

            }

            let rendered = templates[templateName]();

            const subtemplateRegex = /\[\[subtemplate:([^\]]+)\]\]/g;
            rendered = rendered.replace(subtemplateRegex, (match, subtemplateName) => {
                return KCC.renderTemplate(subtemplateName, context);
            });

            return rendered;
        },

        profileRedirect: () => {
            location.href = '/kora_profile.html';
        },

        renderCountryList: () => {
            let tmpl = `<option>${KCC.escapeHtml(KCC.t('T_selecciona_pais'))}</option>`;

            KCC.countriesList.forEach((country) => {
                const [cod, country_name] = country;
                const selected = (cod.toLowerCase() === KCC.getUserData('pais', true).toLowerCase()) ? 'selected="selected"' : '';
                tmpl += `<option value="${KCC.escapeHtml(cod)}" ${selected}>${KCC.escapeHtml(country_name)}</option>`;
            });

            return tmpl;
        },

         processEmailLogin: async (inRegister) => {
            const form = document.getElementById('login_form');
            const formData = new FormData(form);
            const payload = Object.fromEntries(formData.entries());
            payload.action = inRegister ? 'put' : 'user_login';

            if (form.querySelector('input[type="checkbox"][name="promotions"]')) {
                payload.promotions = form.querySelector('input[type="checkbox"][name="promotions"]').checked;
            }

            const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/users/';
            const response = await KCC.doFetch(endpoint, payload);

            if (response) {
                KCC.user_data = response;
                KCC.saveUserSessionId(response.session_id);
                KCC.renderLoginSystem();
                KCC.renderLoginBox();
                KCC.renderProfileWidget();
            } else {
                alert(KCC.t('T_user_not_registered'));
            }
        },

        modifyUser: async () => {
            const form = document.getElementById('modify_user');
            const formData = new FormData(form);
            const payload = Object.fromEntries(formData.entries());
            payload.action = 'modify';

            if (form.querySelector('input[type="checkbox"][name="promotions"]')) {
                payload.promotions = form.querySelector('input[type="checkbox"][name="promotions"]').checked;
            }

            const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/users/';
            const response = await KCC.doFetch(endpoint, payload);

            if (response) {
                KCC.user_data = response;
                KCC.renderProfileWidget();
            }
        },

        deleteAccount: async() => {
            const form = document.getElementById('modify_user');
            const formData = new FormData(form);
            const payload = Object.fromEntries(formData.entries());
            payload.action = 'remove_user';
            payload.user_id = KCC.user_data.idmember;

            const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/users/';
            const response = await KCC.doFetch(endpoint, payload);
            KCC.config.PROFILE_SCREEN = PERSONAL_DATA_SCREEN;
            KCC.logout();
        },

        doFetch: async (endpoint, payload) => {
            try {
                const res = await fetch(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                let data;

                try{
                    data = await res.json();
                } catch (err){
                    console.log('data error');
                }

                if (!res.ok) {
                    throw new Error(typeof data === 'string' ? data : JSON.stringify(data));
                }

                return data;
            } catch (err) {
                console.error('Fetch request failed:', err);
                return null;
            }
        },

        saveUserSessionId: (sessionId) => {
            const domain = KCC.config.COOKIE_DOMAIN;
            let cookieString = `loged_user=${sessionId}; path=/; max-age=31536000`;

            if (domain){
                cookieString += `; SameSite=None; Secure; domain=${domain}`;
            }

            document.cookie = cookieString;
            KCC.config.USER_SESSION_ID = sessionId;
        },

        loadUserSessionId: () => {
            try {
                const sessionId = document.cookie.split('; ').find(row => row.startsWith('loged_user=')).split('=')[1];

                if (sessionId) {
                    return sessionId;
                }

            } catch (error) {
                return null;
            }
        },

        logout: () => {
            const domain = KCC.config.COOKIE_DOMAIN;
            let cookieString = "loged_user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

            if(domain){
                cookieString += `; SameSite=None; Secure; domain=${domain}`;
            }

            document.cookie = cookieString;
            KCC.config.USER_SESSION_ID = null;
            KCC.config.LOGIN_SCREEN_NUMBER = 1;
            KCC.renderLoginSystem();
            KCC.renderLoginBox();
            KCC.renderProfileWidget();
        },

        loadStyles: () =>{
            [
                `${KCC.config.SCRIPT_DOMAIN}/static_1/css/styles_club_widget.css`,
                'https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap',
                'https://www3.paratytech.com/wysiwyg/fonts/eloquia/stylesheet.css?v=1.01',
                'https://www3.paratytech.com/wysiwyg/fonts/Moneta/stylesheet.css?v=1.01',
                'https://webseeker.paraty.es/fontawesome-kit/css/fa-default-kit.css'
            ].forEach(href => {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = href;
                document.head.appendChild(link);
            });

        },

        loadFB: () => {
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : '4230337130524460',
                    cookie     : true,
                    xfbml      : true,
                    version    : 'v20.0'
                });

                FB.AppEvents.logPageView();
            };

            (function(d, s, id){
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
                js.src = `https://connect.facebook.net/${KCC.get_locale()}/sdk.js`;
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        },

        loadGoogle: () => {
            const script = document.createElement('script');
            script.src = 'https://accounts.google.com/gsi/client';
            script.async = true;
            script.onload = KCC.initGoogle;
            document.head.appendChild(script);
        },

        initGoogle: () => {
            if (typeof google === "undefined" || !google.accounts || !google.accounts.id) {
                console.error("Google API not defined. Probably the script failed due to connection failures.");
                return;
            }

            google.accounts.id.initialize({
                client_id: '233230451238-lqirulcmq4dsh9v78c6ebqp2g4bb4i77.apps.googleusercontent.com',
                callback: KCC.handleGoogleLoginResponse
            });

            KCC.hiddenButtonContainer = document.createElement('div');
            KCC.hiddenButtonContainer.style.display = 'none';
            KCC.hiddenButtonContainer.id = 'hidden-google-signin';
            document.body.appendChild(KCC.hiddenButtonContainer);

            google.accounts.id.renderButton(KCC.hiddenButtonContainer, {
                theme: "outline",
                size: "large",
                text: "signin_with"
            });

            
                google.accounts.id.prompt();
            
        },

        handleGoogleLoginResponse: (response) => {
            KCC.socialLoginSend('google', response.credential);
        },

        socialLoginSend: async (loginType, token) => {
            const loginForm = document.getElementById('login_form');
            let language = loginForm ? loginForm.querySelector('input[name="language"]')?.value : '';

            if(!language) language = 'SPANISH';
            const socialLoginData = {
                type: loginType,
                token: token,
                namespace: 'kora-corpo',
                language: language
            }

            const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/social_login/login';

            let response;
            try {
                const res = await fetch(endpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(socialLoginData)
                });
                response = await res.json();
            } catch (err) {
                console.error('Error: No response from social login', err);
                return;
            }

            if(response.status === 'success'){
                await KCC.loadUserData(response.sid);

                if (KCC.user_data.session_id) {
                    KCC.saveUserSessionId(KCC.user_data.session_id);
                    KCC.renderLoginBox();
                    KCC.renderLoginSystem();
                    KCC.renderProfileWidget();
                }

            } else if(response.message === 'Login failed'){
                KCC.alert_missing_user();

            } else if(response.message === 'User already created with email'){
                KCC.alert_user_already_created_email();

            } else {
                console.log(`Error: ${response.message}`);
            }
        },

        loadUserData: async (userSessionId) => {
            const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/users/get_user_info';
            const payload = {
                namespace: 'kora-corpo',
                sid: userSessionId
            }

            const userData = await KCC.doFetch(endpoint, payload);
            KCC.user_data = userData;
        },

        getUserData: (key, raw = false) => {
            const val = KCC.user_data[key];
            if (!val){
                if(key == 'points') return 0;
                return '';
            }
            return raw ? val : KCC.escapeHtml(val);
        },

        alert_missing_user: () => {
            alert(KCC.t('T_user_not_found'));
        },

        alert_user_already_created_email: () => {
            alert(KCC.t('T_user_already_created_with_email'));
        },

        getLevelPoints: () => {
            const levelsPoints = [];
            KCC.clubLevels.forEach(level => {
                levelsPoints.push(parseInt(level.points.replace(/\./g, "")));
            });

            levelsPoints.sort((a, b) => a - b);
            return levelsPoints;
        },

        calculatePointsToNextLevel: () => {
            const levelPoints = KCC.getLevelPoints();
            const currentPoints = parseInt(KCC.getUserData('points'));
            const nextLevelPoints = levelPoints.find(x => x > currentPoints);
            return nextLevelPoints - currentPoints;
        },

        calculateProgressBar: () => {
            const maxGraphicValue = 600;
            const levelPoints = KCC.getLevelPoints();
            const maxPoints = Math.max(...levelPoints);
            const currentPoints = parseInt(KCC.getUserData('points'));
            return parseInt(maxGraphicValue * (currentPoints/maxPoints));
        },

        getLevelData: (level) => {
            return KCC.clubLevels[level];
        },

        getUserLevelName: () => {
            return KCC.getUserData('level') || KCC.getLevelData(0).name;
        },

        renderFeatures: (features) => {
            let template = '';

            features.forEach(feature => {
                template += `<div class="feature"><img src="${KCC.escapeHtml(feature.img)}"/><span>${KCC.escapeHtml(feature.description)}</span></div>`;
            });

            return template;
        },

        _carouselIndex: 0,

        carouselGoTo: (index) => {
            const container = document.querySelector('.club_level_descriptions');
            const items = container ? container.querySelectorAll('.club_level_description') : [];
            if (!items.length) return;

            const total = items.length;
            KCC._carouselIndex = Math.max(0, Math.min(index, total - 1));
            items[KCC._carouselIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });

            const counter = document.querySelector('.carousel_counter');
            if (counter) counter.textContent = (KCC._carouselIndex + 1) + '/' + total;
        },

        carouselNext: () => {
            KCC.carouselGoTo(KCC._carouselIndex + 1);
        },

        carouselPrev: () => {
            KCC.carouselGoTo(KCC._carouselIndex - 1);
        },

        loadReservations: async () => {
            try{
                const userSessionId = KCC.user_data.session_id;
                const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/transactions/';
                const payload = {
                    action: 'retreive_user_transactions',
                    sid: userSessionId,
                    namespace: 'kora-corpo'
                }

                const reservations  = await KCC.doFetch(endpoint, payload);
                KCC.user_data.reservations = reservations;

            }catch(error){
                console.error("Error loading reservations:", error);
            }
        },

        filterReservations: (past=false) => {
            const reservations = [];
            KCC.user_data.reservations.forEach(reservation => {
                if (past && !KCC.reservationIsActive(reservation) || !past && KCC.reservationIsActive(reservation)){
                    reservations.push(reservation);
                }
            });
            return reservations;
        },

        reservationIsActive: (reservation) => {
            const currentDate = new Date().toISOString().slice(0, 10);
            return reservation.check_in >= currentDate
        },

        t: (label) => {
            if (KCC.translations && KCC.translations[label]) {
                return KCC.translations[label];
            }

            return label;
        },

        searchReservations: (identifier) => {
            const reservations = [];
            KCC.user_data.reservations.forEach(reservation => {
                if (reservation.identifier.toLowerCase().includes(identifier.toLowerCase())){
                    reservations.push(reservation);
                }
            });
            return reservations;
        },

        get_locale: () => {
            const locales = {
                SPANISH: 'es_ES',
                ENGLISH: 'en_US',
                FRENCH: 'fr_FR',
                ITALIANO: 'it_IT',
                GERMAN: 'de_DE',
                POLISH: 'pl_PL'
            }
            return locales[KCC.getLanguage()];
        },

        getLanguage: () => {
            const shortLang = document.documentElement.lang.toLowerCase();
            const languages = {
                es: 'SPANISH',
                en: 'ENGLISH',
                fr: 'FRENCH',
                it: 'ITALIANO',
                de: 'GERMAN',
                pl: 'POLISH'
            }

            return languages[shortLang] || 'SPANISH';
        },

        loadTranslations: async () => {
            const language = KCC.getLanguage();
            try{
                const endpoint = `${KCC.config.SCRIPT_DOMAIN}/koraclub?action=get_translated_context&language=${language}`;
                const translated_context = await KCC.doFetch(endpoint, {});
                KCC.translations = translated_context.translations;
                KCC.clubLevels = translated_context.club_levels;
                KCC.countriesList = translated_context.countries_list;

            }catch(error){
                console.error("Error loading reservations:", error);
            }
        },

        changePassword: async () => {
            const pass1 = prompt(KCC.t('T_input_new_password'));
            if (pass1 === null || pass1 === '') return;
            const pass2 = prompt(KCC.t('T_repita_cotrasena'));
            if (pass2 === null) return;

            if (pass1 !== pass2){
                alert(KCC.t('T_passwords_dont_match'));
            } else {
                const payload = {
                    action: 'change_password',
                    namespace: 'kora-corpo',
                    sid: KCC.user_data.session_id,
                    password: pass1
                };
                const endpoint = 'https://loyalty-seeker-381529296218.us-central1.run.app/users/';
                const response = await KCC.doFetch(endpoint, payload);
                if(response){
                    alert(KCC.t('T_password_saved'));
                } else {
                    alert(KCC.t('T_password_not_saved'));
                }
            }
        },

        setScriptDomain(){
            const scriptSrc = document.currentScript?.src;

            if (scriptSrc) {
                KCC.config.SCRIPT_DOMAIN = new URL(scriptSrc).origin;
            }
        },

        createLoginElement(){
            if (document.getElementById(KCC.config.LOGIN_WIDGET)) {
                return;
            }

            const div = document.createElement('div');
            div.id = KCC.config.LOGIN_WIDGET;
            document.body.appendChild(div);
        },

        getOccupancy(context){
            return `${context.adults}-${context.children}-${context.babies}`;
        },

        formatDate(dateString){
            const [year, month, day] = dateString.split('-');
            return `${day}/${month}/${year}`;
        }

    };
}();

KCC.init();