<?php
if (!defined('ABSPATH')) {exit;}
$lang_pages = array(
    'engagement-ring-listing' => 'Engagement Ring Listing',
    'wedding-ring-listing' => 'Wedding Ring Listing',
);
$user_defined_localization = krfsapp_file_get_contents(KRFSAPP_PLUGIN_DIR . '/languages/user-defined-localization.json');
if ($user_defined_localization) {
    $user_defined_localization = json_decode($user_defined_localization, true);
}
$user_defined_localization_map = krfsapp_file_get_contents(KRFSAPP_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 = krfsapp_getMeta('_regional_data');
if (!$regional_data) {
    $regional_data = array(
        'en_US' => array(
            'enabled' => true,
            'ring_size' => 'us',
            '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'
        )
    );
    krfsapp_addMeta('_regional_data', wp_json_encode($regional_data));
} else {
    $regional_data = json_decode($regional_data, true);
}

$active_tab = "";

global $krfs_language_current_page;
if ($krfs_language_current_page) {
    $initial_page = $krfs_language_current_page;   
} else {
    $initial_page = array_keys($lang_pages)[0];
}
$default_lang = krfsapp_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(
    'krfs-custom-script-language',
    'KRFS_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('krfs_ajax_nonce'),
    ]
);
?>

<div class="initial-section tab-pane fade <?php echo esc_attr($krfsapp_active_tab_config['lang_region'] ? '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="">
                <h2>Languages & 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 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" id="lang-translation-tab" data-bs-toggle="tab"
                            data-bs-target="#lang-translation-tab-pane" type="button" role="tab" aria-controls="lang-translation-tab-pane"
                            aria-selected="false">
                            TRANSLATIONS
                        </button>
                    </li>
                </ul>
            </div>

            <!-- Translation Tab Start Here-->
            <div class="faq-section tab-pane fade show active" id="lang-basic-tab-pane" role="tabpanel"
                aria-labelledby="month-tab">
                <div class="d-md-flex">
                    <div class="language-basic-section">
                        <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 krfs-lang-btn-grp">
                                    <?php
                                    foreach ($regional_data as $key => $r_data) {
                                    ?>
                                        <div class="krfs-country-lang-container">
                                            <div class="krfs-lang-btn <?php echo ($key == 'en_US' || $r_data['enabled']) ? 'active' : ''; ?>" data-lang="<?php echo esc_attr($key); ?>">
                                                <input type="checkbox" <?php echo ($key == 'en_US' || $r_data['enabled']) ? 'checked' : ''; ?> <?php echo ($key == 'en_US') ? 'disabled' : ''; ?>>
                                            </div>
                                            <div class="krfs-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){
                            ?>
                            <div>
                                <select class="form-select krfs-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="" class="black-text" disabled>Open this select menu</option>';
                                        
                                        foreach($lang_ring_sizes as $key => $value){

                                            // handling selected logic
                                            $selected = "";
                                            if(empty($r_data['ring_size']) && $key == "r1") {
                                                $selected = "selected";
                                            } elseif($r_data['ring_size'] == $key) {
                                                $selected = "selected";
                                            }

                                            $lang_ring_sizes_html .= '<option value="'.esc_attr($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>
                    <div class="image-slider-wrapper">
                        <div class="image-slider-header">
                            <div class="slider-para">
                                <p>Preview</p>
                            </div>
                            <div class="krfs-arrow-container">
                                <div class="prev-arrow krfs-nav-arrow" data-target="lang-basic-section"
                                    data-action="prev">
                                    <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/previous.svg" alt="">
                                </div>
                                <div class="next-arrow krfs-nav-arrow" data-target="lang-basic-section"
                                    data-action="next">
                                    <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/next.svg" alt="">
                                </div>
                            </div>
                        </div>

                        <span href="javascript:void(0);" class="lang-preview-more-info" onclick="event.preventDefault();"
                            data-toggle="tooltip" data-placement="top" data-title="<?php echo ("Zoom-In"); ?>">
                            <!-- Slider Image -->
                            <div class="krfs_img_slides" data-id="lang-basic-section" data-active-index="0">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R1.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R2.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R3.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R4.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R5.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R6.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R7.png"
                                    alt="">
                                <img data-target="lang-setting-tab-image" onclick="krfsOpenImageSidebar('lang-setting')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/basic_tab_slider/R8.png"
                                    alt="">
                            </div>


                            <!-- Image lang-Preview Sidebar -->
                            <div id="krfs-lang-setting-images" class="sidenav setting-slider">
                                <div class="krfs-close-slider">
                                    <div class="cross-container">
                                        <img onclick="krfscloseImageSidebar('lang-setting')"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/cross-btn.svg"
                                            alt="">
                                    </div>
                                </div>
                                <div id="krfs-lang-setting-images-preview"></div>
                            </div>
                            <div id="krfs-lang-setting-preview-image" class="krfs-preview-image" data-sidebar="lang-setting">
                            </div>
                    </div>
                </div>
            </div>
            <!-- Translation Tab End Here -->

            <!-- Translation Tab Start Here-->
            <div class="faq-section tab-pane fade " id="lang-translation-tab-pane" role="tabpanel"
                aria-labelledby="month-tab">
                <div class="language-region-div">
                    <p class="krfs-translation-para">Select the page to manage:</p>
                    <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_attr($key) . '" ' . esc_attr($selected) . '>' . esc_html($value) . '</option>', array('option' => array('value' => array(), 'selected' => array(), 'class' => array())));
                        }
                        ?>
                    </select>
                    <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" 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 krfs-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 ($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])); ?>
                                            <div class="krfs-language-sprite-img <?php echo esc_attr($lang); ?>"></div>
                                        </button>
                                    <?php
                                    }
                                    ?>
                                    <div>
                                        <img class="plus-icon" src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/plus-icon.png" alt="">
                                    </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 ($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>
            <!-- Translation Tab End Here -->

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

        </div>
        <div class="" style="padding-bottom: 65px;"></div>
    </div>
    <form method="post" style="display:none;" id="krfs_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); ?>">
        <?php wp_nonce_field('language_tab_action', 'csrf_language_nonce'); ?>
    </form>
</div>
