<?php 
    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    $lang_pages = array(
        'natural-diamond-listing' => 'Natural Diamond Listing',
        'lab-diamond-listing' => 'Lab Diamond Listing',
        'gemstone-listing' => 'Gemstone Listing',
        'colored-diamond-listing' => 'Colored Diamond Listing',
        'diamond-detail' => 'Detail',
        'byor-review' => 'BYOR Review',
    );
    $user_defined_localization = kirb_file_get_contents(wp_get_upload_dir()['baseurl'] . '/kirb-user-defined-localization.json');
    if($user_defined_localization) {
        $user_defined_localization = json_decode($user_defined_localization, true);
    }
    $user_defined_localization_map = kirb_file_get_contents(KIRB_PLUGIN_DIR . '/languages/user-defined-localization-map.json');
    if($user_defined_localization_map) {
        $user_defined_localization_map = json_decode($user_defined_localization_map, true);
    }

    if(!$user_defined_localization || !$user_defined_localization_map || $user_defined_localization == null || $user_defined_localization_map == null){
        $user_defined_localization = array();
        $user_defined_localization_map = array();
        foreach($lang_pages as $page => $page_name){
            $user_defined_localization[$page] = array();
            $user_defined_localization_map[$page] = array();
        }
    }

    $regional_data = kirbGetMeta('_regional_data');
    if(!$regional_data) {
        $regional_data = array(
            'en_US' => array(
                'enabled' => true,
                'ring_size' => 'r1',
                'label' => 'English'
            ), 
            'en_GB' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'English'
            ), 
            'fr_FR' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'French'
            ), 
            'it_IT' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'Italian'
            ), 
            'de_DE' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'German'
            ),
            'es_ES' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'Spanish'
            ),
            'other' => array(
                'enabled' => false,
                'ring_size' => '',
                'label' => 'Other'
            )
        );
        kirbAddMeta('_regional_data', wp_json_encode($regional_data));
    }else{
        $regional_data = json_decode($regional_data, true);
    }

    // Set other lang if not present
    if(!isset($regional_data['other'])) {
        $regional_data['other'] = array(
            'enabled' => false,
            'ring_size' => '',
            'label' => 'Other'
        );
    }

    $active_tab = "";
    global $kirb_active_lang_tab_config;

    foreach($kirb_active_lang_tab_config as $key => $value) {
        if($value) {
            $active_tab = $key;
            break;
        }
    }

    global $kirb_language_current_page;
    if($kirb_language_current_page){ 
        $initial_page = $kirb_language_current_page;
    }else{
        $initial_page = array_keys($lang_pages)[0];
    }
    $default_lang = kirb_determine_locale();
    if(!isset($regional_data[$default_lang]) || !$regional_data[$default_lang]['enabled']){
        $default_lang = "en_US"; 
    }
    $curr_page_strings = $user_defined_localization[$initial_page];

    wp_localize_script( 'kirb-custom-script-language', 'KIRB_GLOBALS', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'initial_page' => $initial_page,
            'user_defined_localization' => $user_defined_localization,
            'user_defined_localization_map' => $user_defined_localization_map,
            'nonce' => wp_create_nonce('kirb_ajax_nonce'),
        ]
    );
?>
<div class="initial-section tab-pane fade <?php echo esc_attr($kirb_active_tab_config['lang-tab']['active']?'show active':'')?>" id="lang_region-tab-pane" role="tabpanel" aria-labelledby="lang_region-tab">    
    <div class="sticky-outer-section">
        <div class="main-heading-btn d-flex justify-between sticky-save">
            <div class="kirb-tabs-header">
                <h2>Language & Region</h2>
            </div>
            <button class="save-btn" id="save_localization_settings">
                Save
            </button>
        </div>
        <div class="right-section">
            <div class="year-tab-section help-support-section mb-4">
                <ul class=" nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="plan-btn <?php echo esc_attr($kirb_active_lang_tab_config['basic-tab'] ? 'active' :'');?>" id="lang-basic-tab" data-bs-toggle="tab"
                            data-bs-target="#lang-basic-tab-pane" type="button" role="tab" aria-controls="lang-basic-tab-pane"
                            aria-selected="true">
                            basic
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="plan-btn <?php echo esc_attr($kirb_active_lang_tab_config['translations-tab'] ? 'active' :'');?>" id="lang-trans-tab" data-bs-toggle="tab" data-bs-target="#lang-trans-tab-pane"
                            type="button" role="tab" aria-controls="lang-trans-tab-pane" aria-selected="false">
                            TRANSLATIONS
                        </button>
                    </li>
                </ul>
            </div>

            <div class="faq-section tab-pane fade <?php echo esc_attr($kirb_active_lang_tab_config['basic-tab'] ? 'show active' :'');?>" id="lang-basic-tab-pane" role="tabpanel"
            aria-labelledby="month-tab">
                <div class="language-basic-section">
                    <div class="w--50">
                        <div class="slider-language">
                            <div class="lang-trans">
                                <h5>Select language(s)</h5>
                                <?php 
                                    $lang_ring_sizes = array(
                                        'r1' => 'R1',
                                        'r2' => 'R2',
                                        'r3' => 'R3',
                                        'r4' => 'R4',
                                        'r5' => 'R5',
                                        'r6' => 'R6',
                                        'r7' => 'R7',
                                        'r8' => 'R8',
                                    );
                                ?>
                                <div class="slider-language-div kirb-lang-btn-grp">
                                    <?php 
                                        foreach($regional_data as $key => $r_data){
                                    ?>
                                    <div class="kirb-country-lang-container">
                                    <div class="kirb-lang-btn <?php echo esc_attr($key=='en_US' || $r_data['enabled'] ? 'active' : ''); ?>" data-lang="<?php echo esc_attr($key)?>">
                                        <input type="checkbox" <?php echo esc_attr($key=='en_US' || $r_data['enabled'] ? 'checked' : ''); ?> <?php echo esc_attr($key=='en_US' ? 'disabled' : ''); ?>>
                                    </div>
                                    <div style="margin-left:10px" class="language-sprite-img <?php echo esc_attr($key)?>"></div>
                                        <span>
                                            <?php echo esc_html($r_data['label'])?>
                                        </span>
                                        </div>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="ring-size">
                                <h5>Select the ring size option</h5>
                                <?php 
                                    foreach($regional_data as $lang => $r_data){
                                        if($lang == "other") {continue;}
                                ?>
                                <div>
                                    <select class="form-select kirb-lang-select-slider" data-lang="<?php echo esc_attr($lang)?>" style="<?php echo esc_attr(!$r_data['enabled'] ? 'visibility:hidden;':''); ?>">
                                        <?php 
                                            $lang_ring_sizes_html = '<option value="" '.(empty($r_data['ring_size'])?'selected':'').' class="black-text" disabled>Open this select menu</option>';
                                            foreach($lang_ring_sizes as $key => $value){
                                                $lang_ring_sizes_html .= '<option value="'.esc_attr($key).'" '.($r_data['ring_size'] == $key?'selected':'').' class="black-text" >'.esc_html($value).'</option>';
                                            }
                                            echo wp_kses($lang_ring_sizes_html, array('option' => array('value' => array(), 'selected' => array(), 'class' => array(), 'disabled' => array())));
                                        ?>
                                    </select>
                                </div>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="kirb-other-lang-section" style="display: <?php echo !$regional_data['other']['enabled'] ? 'none' : '';  ?>;">
                            <h2>
                                Other Language Translations: 
                                <span href="javascript:void(0);" class="info-box detail-return" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html__("Some options won’t be editable.", 'diamond-ring-builder-jewelry'); ?>">
                                    <img class="info-icon pointer-image" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/info.png" alt="info-icon">
                                </span>
                            </h2>
                            <div class="other_lang_group">
                                <?php 
                                    $json_file_path = KIRB_PLUGIN_DIR . "/languages/other.json";
                                    $other_translations = json_decode(kirb_file_get_contents($json_file_path), true);
                                    foreach($other_translations as $key => $value) {
                                        ?>
                                            <div class="d-flex">
                                                <span><?php echo esc_html($key);?></span>
                                                <input type="text" value="<?php echo esc_html($value); ?>" class="other_lang_translations" data-key="<?php echo esc_html($key);?>">
                                            </div>
                                        <?php
                                    }
                                ?>
                            </div>
                        </div>
                    </div>
                    <div class="w--50 lang-basic-slider">
                    <div class="section-header">
                            <div class="para">
                                <p>Preview</p>
                            </div>
                            <div class="arrow-btn">
                                <div class="kirb-nav-arrow" data-target="lang-section" data-action="prev">
                                    <img src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/chevron-left.svg')?>" alt="">
                                </div>
                                <div class="kirb-nav-arrow" data-target="lang-section" data-action="next">
                                    <img src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/chevron-right.svg')?>" alt="">
                                </div>
                            </div>
                        </div>
                        <span href="javascript:void(0);" class="lang-region-tooltip" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html("Zoom-In"); ?>">
                            <div class="kirb_img_slides" data-id="lang-section" data-active-index="0">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R1.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R2.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R3.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R4.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R5.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R6.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R7.png')?>" alt="preview_image">
                                <img data-target="language-tab-image" onclick="kirbOpenImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/lang_region_preview_image/R8.png')?>" alt="preview_image">
                            </div>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Image Preview Sidebar -->
            <div id="kirb-language-images" class="sidenav setting-slider">
                <div class="kirb-close-slider">
                    <div class="cross-container">
                        <img onclick="kirbcloseImageSidebar('language')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/cross-btn.svg')?>" alt="">
                    </div>
                </div>   
            <div id="kirb-language-images-preview"></div>                          
            </div>
            <div id="kirb-language-preview-image" class="kirb-preview-image" data-sidebar="language"></div>



            <div class="tab-pane fade <?php echo esc_attr($kirb_active_lang_tab_config['translations-tab'] ? 'show active' :'');?>" id="lang-trans-tab-pane" role="tabpanel" aria-labelledby="lang-trans-tab">
                <div class="language-region-div">
                    <p class="kirb-translation-para">Select the page to manage:</p>
                    <div class="select-section-manage-ring">
                    <select class="form-select form-select-lg select-section" aria-label="" id="lang_page">
                        <?php 
                            foreach($lang_pages as $key => $value){
                                $selected = $initial_page == $key ? 'selected' : '';
                                echo wp_kses('<option value="'.esc_html($key).'" '.esc_attr($selected).'>'.esc_html($value).'</option>', array('option' => array('value' => array(), 'selected' => array(), 'class' => array())));
                            }
                        ?>
                    </select>
                    <!-- <div class="ring-size-container">
                        <p onclick="openSliderLang()">Manage Ring Size</p>
                    </div> -->

                    </div>
                    <div class="language-main-div">
                        <div class="inner-language default-lang-div">
                            <div class="tab-section-lang nav nav-tabs" id="nav-tab" role="tablist">
                                <button class="default nav-link active corner" id="lang-default-tab" data-bs-toggle="tab"
                                    data-bs-target="#lang-default" type="button" role="tab" aria-controls="lang-default"
                                    aria-selected="true">Default</button>
                            </div>
                            <div class="tab-content tab-page-lang" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="lang-default" role="tabpanel"
                                    aria-labelledby="lang-default-tab">
                                    <div class="lang-content kirb-default-lang-content">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="inner-language diff-lang-div">
                            <div class="tab-btn-lang">
                                <div class="tab-section-lang nav nav-tabs" id="nav-tab" role="tablist">

                                    <?php 
                                        foreach($regional_data as $lang => $r_data) {                                 
                                    ?>
                                        <button class="nav-link <?php echo esc_attr($default_lang==$lang?'active':'');?>" id="lang-<?php echo esc_attr($lang);?>-btn" data-bs-toggle="tab"
                                            data-bs-target="#lang-tab-<?php echo esc_attr($lang);?>" type="button" role="tab" aria-controls="lang-<?php echo esc_attr($lang);?>-btn" style="<?php echo esc_attr(!$r_data['enabled'] ? 'display:none':'');?>"
                                            aria-selected="true">
                                            <?php echo esc_html(strtoupper(explode("_",$lang)[0]));?>
                                            <?php if($lang != "other") { ?>
                                                <div class="language-sprite-img <?php echo esc_attr($lang);?>"></div>
                                            <?php } ?>
                                        </button>
                                    <?php 
                                        }
                                    ?>
                                    <div>
                                    <img class="plus-icon kirb-lang-plus" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/plus-icon.png')?>" alt="">
                                </div>
                                </div>
                            
                                <div id="mySidenav" class="sidenav setting-slider">
                                    <div class="cross-back">
                                        <div class="back-container">
                                        <img onclick="closeSliderLang()" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/back-btn.svg')?>" alt="">
                                        </div>
                                        <div class="cross-container">
                                        <img onclick="closeSliderLang()" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/cross-btn.svg')?>" alt="">
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-content tab-page-lang" id="nav-tabContent">
                                <?php 
                                    foreach($regional_data as $lang => $r_data) {
                                ?>
                                <div class="tab-pane fade <?php echo esc_attr($default_lang==$lang?'show active':'');?>" id="lang-tab-<?php echo esc_attr($lang);?>" role="tabpanel" aria-labelledby="lang-<?php echo esc_attr($lang);?>-btn">
                                    <div class="lang-content" data-lang="<?php echo esc_attr($lang); ?>"></div>
                                </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="" style="padding-bottom: 65px;"></div>
    </div>
    <form method="post" style="display:none;" id="kirb_language_form">
        <input type="hidden" name="language_action">
        <input type="hidden" name="user_defined_localization">
        <input type="hidden" name="current_page" value="<?php echo esc_attr($initial_page); ?>">
        <input type="hidden" name="current_tab" value="<?php echo esc_attr($active_tab); ?>">
        <input type="hidden" name="other_lang_data" value="">
        <input type="hidden" name="regional_lang_data">
        <?php wp_nonce_field('language_tab_action', 'csrf_language_nonce'); ?>
    </form>
</div>