<?php
/**
 * File: nikisaz-mobile-tabs.php
 * Description: تنظیمات تب‌های پایین اپلیکیشن برای نیکی‌ساز
 */

global $wpdb;

// نام جدید جدول در دیتابیس
$tablename = $wpdb->prefix . 'nikisaz_tab_bar';

// بررسی وجود جدول (اختیاری اما توصیه می‌شود)
$wpdb->query("CREATE TABLE IF NOT EXISTS $tablename (
    id bigint(20) unsigned NOT NULL AUTO_INCREMENT,
    tabs longtext,
    active_text_color varchar(255) DEFAULT NULL,
    deactive_text_color varchar(255) DEFAULT NULL,
    background_color varchar(255) DEFAULT NULL,
    PRIMARY KEY (id)
) $wpdb->charset COLLATE $wpdb->collate;");

$gettabs = $wpdb->get_row("SELECT * FROM $tablename");

if ($gettabs && !empty($gettabs->tabs)) {
    $decoded_tabs = json_decode($gettabs->tabs);
    $count = is_array($decoded_tabs) ? count($decoded_tabs) : 0;
} else {
    $decoded_tabs = array();
    $count = 0;
}
?>

<div id="file_optimization" class="hdwebapp-Page">
    <div class="hdwebapp-sectionHeader">
        <h2 class="hdwebapp-title1"><?php _e( 'Create App Tabs', 'nikisaz-webapp-generator' );?></h2>
        <div class="btn-part" >
            <?php
            if($count > 0) {
                ?>
                <input type="button" class="hdwebapp-button" id="openPopup" value="<?php _e( 'Demo', 'nikisaz-webapp-generator' );?>" style="display: block;">
                <?php
            }
            ?>
            <input type="button" class="hdwebapp-button" id="hdwebapp-add-tab" value="<?php _e( 'ADD NEW TAB', 'nikisaz-webapp-generator' );?>" style="display: block;">
            <input type="submit" name="submit_app" id="submit_apps" class="hdwebapp-button"  value="<?php _e( 'Save Setting', 'nikisaz-webapp-generator' )?>">
        </div>
    </div>

    <div class="hdwebapp-fieldsContainer ">
        <!-- قالب خام برای افزودن تب جدید -->
        <fieldset class="hdwebapp-fieldsContainer-fieldset add-new-element ui-state-default" style="display:none">
            <div class="add-on-container ">
                <div class="hdwebapp-field drag-part">
                    <div class="hdwebapp-flex">
                        <h4 class="hdwebapp-title3">
                            <?php _e( "Tabs Setting", 'nikisaz-webapp-generator' ); ?> : 
                            <?php _e( "Fill up all form to show tab bar on bottom of screen", 'nikisaz-webapp-generator' ); ?>
                        </h4>
                    </div>
                    <div class="btn-part">
                        <img class="dlt-btn" src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/icons/delete.png'; ?>" width="50" alt="Delete">
                        <img class="drg-btn" src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/drag.png'; ?>" width="50" alt="Drag">
                    </div>
                </div>
                
                <div class="hdwebapp-warningContainer">
                    <div class="hdwebapp-field hdwebapp-field--checkbox hdwebapp-field--parent">
                        <div class="hdwebapp-parent-flex">
                            <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                <label class="form-label" for="app_name">
                                    <?php _e( 'Tab Text', 'nikisaz-webapp-generator' ); ?>:
                                </label>
                                <div class="hdwebapp-text">
                                    <input type="text" required dir="rtl" id="app_name" name="tabs[0][text]" autocomplete="off">
                                    <span class="tooltip-span" data-tooltip="<?php _e( 'Insert tab text', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                    </span>
                                </div>
                            </div>
                            
                            <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                <label class="form-label" for="app_name">
                                    <?php _e( 'Tab Icon', 'nikisaz-webapp-generator' ); ?>:
                                </label>
                                <div class="hdwebapp-text">
                                    <input class="upload_image col-10" type="text" size="36" id="loading_image" name="tabs[0][icon]" dir="ltr" placeholder="http://">
                                    <button type="button" class="btn btn-primary input-group-btn upload_image_svg"><?php _e( 'Upload', 'nikisaz-webapp-generator' ); ?></button>
                                    <span class="tooltip-span" data-tooltip="<?php _e( 'Insert tab icon', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="hdwebapp-multiple hdwebapp-multiple-default hdwebapp-one-row">
                            <label class="form-label" for="app_name">
                                <?php _e( 'Icon URL', 'nikisaz-webapp-generator' ); ?>:
                            </label>
                            <div class="hdwebapp-text">
                                <div class="input-group">
                                    <input autocomplete="off" dir="ltr" type="text" name="tabs[0][icon_url]" id="app_url" value="<?php echo esc_url( get_site_url() ); ?>/">
                                    <span class="tooltip-span" data-tooltip="<?php _e( "Icon URL description", 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <form action="" method="post" id="form">
            <input type="hidden" value="<?php if(isset($gettabs->id)) echo esc_attr($gettabs->id); ?>" name="id">
            
            <div class="hdwebapp-fieldsContainer tabs-container" id="sortable">
                <?php
                if($count > 0){
                    foreach($decoded_tabs as $key => $tabsData){
                        ?>
                        <fieldset class="hdwebapp-fieldsContainer-fieldset ui-state-default">
                            <div class="add-on-container">
                                <div class="hdwebapp-field drag-part">
                                    <div class="hdwebapp-flex">
                                        <h4 class="hdwebapp-title3">
                                            <?php _e( "Tabs Setting", 'nikisaz-webapp-generator' ); ?>
                                        </h4>
                                    </div>
                                    <div class="btn-part">
                                        <img class="dlt-btn" src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/icons/delete.png'; ?>" width="50" alt="Delete">
                                        <img class="drg-btn" src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/drag.png'; ?>" width="50" alt="Drag">
                                    </div>
                                </div>
                                <div class="hdwebapp-warningContainer">
                                    <div class="hdwebapp-field hdwebapp-field--checkbox hdwebapp-field--parent">
                                        <div class="hdwebapp-parent-flex">
                                            <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                                <label class="form-label" for="app_name">
                                                    <?php _e( 'Tab Text', 'nikisaz-webapp-generator' ); ?>:
                                                </label>
                                                <div class="hdwebapp-text">
                                                    <input type="text" required dir="rtl" name="tabs[<?php echo $key; ?>][text]" value="<?php echo esc_attr($tabsData->text); ?>" autocomplete="off">
                                                    <span class="tooltip-span" data-tooltip="<?php _e( 'Insert tab text', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                                    </span>
                                                </div>
                                            </div>
                                            
                                            <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                                <label class="form-label" for="app_name">
                                                    <?php _e( 'Tab Icon', 'nikisaz-webapp-generator' ); ?>:
                                                </label>
                                                <div class="hdwebapp-text">
                                                    <input class="upload_image col-10" type="text" size="36" name="tabs[<?php echo $key; ?>][icon]" value="<?php echo esc_attr($tabsData->icon); ?>" dir="ltr" placeholder="http://">
                                                    <button type="button" class="btn btn-primary input-group-btn upload_image_svg"><?php _e( 'Upload', 'nikisaz-webapp-generator' ); ?></button>
                                                    <span class="tooltip-span" data-tooltip="<?php _e( 'Insert tab icon', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="hdwebapp-multiple hdwebapp-multiple-default hdwebapp-one-row">
                                            <label class="form-label" for="app_name">
                                                <?php _e( 'Icon URL', 'nikisaz-webapp-generator' ); ?>:
                                            </label>
                                            <div class="hdwebapp-text">
                                                <div class="input-group">
                                                    <input autocomplete="off" dir="ltr" type="text" name="tabs[<?php echo $key; ?>][icon_url]" value="<?php echo esc_attr($tabsData->icon_url); ?>">
                                                    <span class="tooltip-span" data-tooltip="<?php _e( "Icon URL description", 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                        <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <?php
                    }
                }
                ?>
            </div>

            <div class="submit_form" style="<?php if(!$gettabs || $count == 0) echo 'display:none;'; ?>">
                <fieldset class="hdwebapp-fieldsContainer-fieldset">
                    <div class="add-on-container">
                        <div class="hdwebapp-field">
                            <div class="hdwebapp-flex">
                                <h4 class="hdwebapp-title3">
                                    <?php _e( "Tab UI Setting", 'nikisaz-webapp-generator' ); ?>
                                </h4>
                            </div>
                        </div>
                        <div class="hdwebapp-warningContainer">
                            <div class="hdwebapp-field hdwebapp-field--checkbox hdwebapp-field--parent">
                                <div class="hdwebapp-parent-flex">
                                    <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                        <label class="form-label" for="app_name">
                                            <?php _e( 'Active Text Color', 'nikisaz-webapp-generator' ); ?>:
                                        </label>
                                        <div class="hdwebapp-text">
                                            <input type="color" dir="ltr" id="icon_active_color_value" class="col-12" name="icon_active_color" autocomplete="off" value="<?php if(isset($gettabs->active_text_color)) echo esc_attr($gettabs->active_text_color); else echo '#6C8FF9'; ?>">
                                            <span class="tooltip-span" data-tooltip="<?php _e( 'Active text color description', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                        <label class="form-label" for="app_name">
                                            <?php _e( 'Deactive Text Color', 'nikisaz-webapp-generator' ); ?>:
                                        </label>
                                        <div class="hdwebapp-text">
                                            <input type="color" dir="ltr" id="icon_deactive_color_value" class="col-12" name="icon_deactive_color" autocomplete="off" value="<?php if(isset($gettabs->deactive_text_color)) echo esc_attr($gettabs->deactive_text_color); else echo '#2445AA'; ?>">
                                            <span class="tooltip-span" data-tooltip="<?php _e( 'Deactive text color description', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="hdwebapp-multiple hdwebapp-multiple-default">
                                        <label class="form-label" for="app_name">
                                            <?php _e( 'Tab Bar Background Color', 'nikisaz-webapp-generator' ); ?>:
                                        </label>
                                        <div class="hdwebapp-text">
                                            <input type="color" dir="ltr" id="tab_back_color_value" class="col-12" name="tab_back_color" autocomplete="off" value="<?php if(isset($gettabs->background_color)) echo esc_attr($gettabs->background_color); else echo '#FFFFFF'; ?>">
                                            <span class="tooltip-span" data-tooltip="<?php _e( 'Tab bar background color description', 'nikisaz-webapp-generator' ); ?>" data-tooltip-location="left">
                                                <img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . '../styles/Information-icon.png'; ?>" width="15" height="15">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="btn-part">
                    <?php wp_nonce_field('nikisaz_create_tab'); ?>
                    <input type="submit" style="display:none" name="submit_app" id="submit_app" class="hdwebapp-button" value="<?php _e( 'Create Tab', 'nikisaz-webapp-generator' )?>">
                </div>
            </div>
        </form>
    </div>
</div>

<?php
wp_enqueue_media();
?>

<script>
jQuery(document).ready(function($) {
    // فعال‌سازی قابلیت مرتب‌سازی (Sortable)
    $( "#sortable" ).sortable({
        stop: function(ev, ui) {
            var children = $('#sortable').sortable('refreshPositions').children();
            $.each(children, function(key, val) {
                $(val).find('input').each(function() {
                    // به‌روزرسانی ایندکس آرایه‌ها هنگام جابجایی
                    this.name = this.name.replace(/\d+/, key);
                });
            });
        }
    });

    // دکمه ارسال نهایی
    $("#submit_apps").on("click", function(){
        $( "#submit_app" ).click();
    });

    // دکمه افزودن تب جدید
    $("#hdwebapp-add-tab").on("click", function(){
        // کپی کردن قالب خام و تغییر ایندکس آن
        var newTab = $(".add-new-element").clone();
        newTab.find('input[name^="tabs[0]"]').each(function(){
            var currentName = $(this).attr('name');
            var newIndex = $('#sortable').children().length; // تعداد تب‌های موجود
            $(this).attr('name', currentName.replace('[0]', '[' + newIndex + ']'));
        });
        // ریست کردن مقادیر ورودی‌ها
        newTab.find('input').not('input[type="hidden"]').val('');
        newTab.removeClass('add-new-element').attr('id', 'new-tab-template-' + new Date().getTime());
        
        $('#sortable').append(newTab);
    });

    // دکمه حذف تب
    $(document).on("click", ".dlt-btn", function(){
        $(this).closest('fieldset').remove();
        // به‌روزرسانی ایندکس‌ها پس از حذف
        var children = $('#sortable').children();
        $.each(children, function(key, val) {
            $(val).find('input').each(function() {
                this.name = this.name.replace(/\d+/, key);
            });
        });
    });

    // دکمه درگ
    $(document).on("click", ".drg-btn", function(){
        // این بخش ممکن است نیاز به تعامل دستی کاربر باشد یا صرفاً آیکون باشد
        // معمولاً در سورتابل، خود کشیدن آیتم کافی است.
    });
});

// اسکریپت باز کردن پنجره دمو
document.getElementById('openPopup').addEventListener('click', () => {
    const popup = window.open(
        '<?= plugins_url( '../../nikisaz-tabs.php?hdw_mobile_nikisaz_tabs=1', __DIR__ );?>', 
        'popupWindow',        
        'width=470,height=920,left=200,menubar=no,resizable=no,scrollbars=yes,location=no,toolbar=no'
    );
    if (!popup || popup.closed || typeof popup.closed === 'undefined') {
        alert('<?php echo esc_js(__('Popup was blocked by the browser. Please enable popups for this site.', 'nikisaz-webapp-generator')); ?>');
    }
});
</script>