<?php
defined('ABSPATH') || exit('No Access!');

$demo = $options->get_option('demo');
$font = $options->get_option('font-family');
$dashboard_font = $options->get_option('dashboard-font-family');
$sidebar = $options->get_option('sidebar');
$sidebar = $sidebar ? $sidebar : [];
$sticky_sidebar = $options->get_option('sticky-sidebar');
$sticky_sidebar = $sticky_sidebar ? $sticky_sidebar : [];
$sidebar_alignment = $options->get_option('sidebar-alignment');
?>
<div class="irk-settings-area irk-settings-styles">
    <h2 class="irk-settings-title">
        <span class="irk-title-icon"><span uk-icon="paint-bucket"></span></span>
        <strong><?php _e('Styles', 'irk'); ?></strong>
    </h2>
    <ul uk-tab>
        <li class="uk-active"><a href="#"><?php _e('Global', 'irk'); ?></a></li>
        <li><a href="#"><?php _e('Colors', 'irk'); ?></a></li>
        <li><a href="#"><?php _e('Typography', 'irk'); ?></a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
        <li>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Main demo', 'irk'); ?></label>
                <div uk-form-custom="target: > * > span:first-child">
                    <select name="demo">
                        <option value="demo1" <?php selected($demo, 'demo1'); ?>><?php _e('Demo 1 (Digikala)', 'irk'); ?></option>
                        <option value="demo2" <?php selected($demo, 'demo2'); ?>><?php _e('Demo 2 (Digistyle)', 'irk'); ?></option>
                        <option value="demo3" <?php selected($demo, 'demo3'); ?>><?php _e('Demo 3 (Amazon)', 'irk'); ?></option>
                        <option value="demo4" <?php selected($demo, 'demo4'); ?>><?php _e('Demo 4 (Cosmetics)', 'irk'); ?></option>
                    </select>
                    <button class="uk-button uk-button-default" type="button" tabindex="-1">
                        <span></span>
                        <span uk-icon="icon: chevron-down"></span>
                    </button>
                </div>
            </div>
            <?php if (is_plugin_active('elementor/elementor.php')): ?>
                <div class="uk-margin">
                    <label class="uk-form-label"><?php _e('Header page', 'irk'); ?></label>
                    <div uk-form-custom="target: > * > span:first-child">
                        <?php echo irk_post_type_dropdown('header', 'header-page', $options->get_option('header-page')); ?>
                        <button class="irk-confirm uk-button uk-button-default" type="button" tabindex="-1">
                            <span></span>
                            <span uk-icon="icon: chevron-down"></span>
                        </button>
                    </div>
                    <div class="uk-margin-small">
                        <label>
                            <input class="uk-checkbox" type="checkbox" name="cat-menu" value="1" <?php echo checked($options->get_option('cat-menu'), 1); ?>>
                            <?php _e('Show category menu', 'irk'); ?>
                        </label>
                    </div>
                    <div class="uk-margin-small">
                        <div class="uk-alert-primary" uk-alert>
                            <strong style="font-size: 120%;"><?php echo __( 'Import Templates', 'elementor' ); ?></strong>
                            <p>
                                <?php echo sprintf(__('Download header templates and insert in %s:', 'irk'), '<a href="' . esc_url(admin_url('edit.php?post_type=elementor_library')) . '" target="_blank"><strong>' . __('this page', 'irk') . '</strong></a>'); ?>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-header-01.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        01</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-header-02.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        02</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-header-03.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        03</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-header-04.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        04</strong></a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="uk-margin">
                    <label class="uk-form-label"><?php _e('Footer page', 'irk'); ?></label>
                    <div uk-form-custom="target: > * > span:first-child">
                        <?php echo irk_post_type_dropdown('footer', 'footer-page', $options->get_option('footer-page')); ?>
                        <button class="irk-confirm uk-button uk-button-default" type="button" tabindex="-1">
                            <span></span>
                            <span uk-icon="icon: chevron-down"></span>
                        </button>
                    </div>
                    <div class="uk-margin-small">
                        <div class="uk-alert-primary" uk-alert>
                            <strong style="font-size: 120%;"><?php echo __( 'Import Templates', 'elementor' ); ?></strong>
                            <p>
                                <?php echo sprintf(__('Download footer templates and insert in %s:', 'irk'), '<a href="' . esc_url(admin_url('edit.php?post_type=elementor_library')) . '" target="_blank"><strong>' . __('this page', 'irk') . '</strong></a>'); ?>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-footer-01.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        01</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-footer-02.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        02</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-footer-03.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        03</strong> | </a>
                                <a href="<?php echo esc_url(IRK_ELM_URI . 'json/elementor-footer-04.zip'); ?>" target="_blank"><strong><?php _e('Template'); ?>
                                        04</strong></a>
                            </p>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Full width', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="full-width" value="1" <?php echo checked($options->get_option('full-width'), 1); ?>>
                        <?php _e('Use maximum page width', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Header', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-header" value="1" <?php checked($options->get_option('sticky-header'), 1); ?>>
                        <?php _e('Sticky (Desktop)', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-header-mobile" value="1" <?php checked($options->get_option('sticky-header-mobile'), 1); ?>>
                        <?php _e('Sticky (Mobile)', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="header-contact-bar" value="1" <?php checked($options->get_option('header-contact-bar'), 1); ?>>
                        <?php _e('Contact bar', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Active sidebar', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sidebar[home]" value="1" <?php echo array_key_exists('home', $sidebar) ? 'checked' : null; ?>>
                        <?php _e('Home', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sidebar[shop]" value="1" <?php echo array_key_exists('shop', $sidebar) ? 'checked' : null; ?>>
                        <?php _e('Shop', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sidebar[product]" value="1" <?php echo array_key_exists('product', $sidebar) ? 'checked' : null; ?>>
                        <?php _e('Product', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sidebar[post]" value="1" <?php echo array_key_exists('post', $sidebar) ? 'checked' : null; ?>>
                        <?php _e('Post', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Sticky sidebar', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-sidebar[home]" value="1" <?php echo array_key_exists('home', $sticky_sidebar) ? 'checked' : null; ?>>
                        <?php _e('Home', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-sidebar[shop]" value="1" <?php echo array_key_exists('shop', $sticky_sidebar) ? 'checked' : null; ?>>
                        <?php _e('Shop', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-sidebar[product]" value="1" <?php echo array_key_exists('product', $sticky_sidebar) ? 'checked' : null; ?>>
                        <?php _e('Product', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="sticky-sidebar[post]" value="1" <?php echo array_key_exists('post', $sticky_sidebar) ? 'checked' : null; ?>>
                        <?php _e('Post', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Sidebar alignment', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-radio" type="radio" name="sidebar-alignment" value="right" <?php checked($sidebar_alignment, 'right'); ?>>
                        <?php _e('Right', 'irk'); ?>
                    </label>
                </div>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-radio" type="radio" name="sidebar-alignment" value="left" <?php checked($sidebar_alignment, 'left'); ?>>
                        <?php _e('Left', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Top bar', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="topbar-full-width" value="1" <?php echo checked($options->get_option('topbar-full-width'), 1); ?>>
                        <?php _e('Full width', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Mega menu height', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <input type="number" class="uk-input" name="mega-menu-height" value="<?php echo esc_attr($options->get_option('mega-menu-height')); ?>" placeholder="100">
                </div>
                <div class="irk-description">
                    <span uk-icon="info"></span>
                    <?php _e('Enter the height in percentage.', 'irk'); ?>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-header-scripts"><?php _e('Scripts in Header', 'irk'); ?></label>
                <textarea class="uk-textarea irk-scripts" id="irk-header-scripts" name="header-scripts" rows="15"><?php echo wp_unslash($options->get_option('header-scripts')); ?></textarea>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-footer-scripts"><?php _e('Scripts in footer', 'irk'); ?></label>
                <textarea class="uk-textarea irk-scripts" id="irk-footer-scripts" name="footer-scripts" rows="15"><?php echo wp_unslash($options->get_option('footer-scripts')); ?></textarea>
            </div>
        </li>
        <li>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Background', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="background-color" value="<?php echo esc_attr($options->get_option('background-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Index', 'irk'); ?> 1</label>
                <br>
                <input type="text" class="color-field" name="index-color1" value="<?php echo esc_attr($options->get_option('index-color1')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Index', 'irk'); ?> 2</label>
                <br>
                <input type="text" class="color-field" name="index-color2" value="<?php echo esc_attr($options->get_option('index-color2')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Button', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="button-color" value="<?php echo esc_attr($options->get_option('button-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Primary price', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="price-color" value="<?php echo esc_attr($options->get_option('price-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Onsale price', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="onsale-price-color" value="<?php echo esc_attr($options->get_option('onsale-price-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Discount percent', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="discount-percent-color" value="<?php echo esc_attr($options->get_option('discount-percent-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Header background', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="header-bg-color" value="<?php echo esc_attr($options->get_option('header-bg-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Header menu text', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="header-text-color" value="<?php echo esc_attr($options->get_option('header-text-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Category menu background', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="cat-menu-bg-color" value="<?php echo esc_attr($options->get_option('cat-menu-bg-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Category menu text', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="cat-menu-text-color" value="<?php echo esc_attr($options->get_option('cat-menu-text-color')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Footer background', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="footer-bg-color1" value="<?php echo esc_attr($options->get_option('footer-bg-color1')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Footer text', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="footer-text-color1" value="<?php echo esc_attr($options->get_option('footer-text-color1')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Amazing catalog header background', 'irk'); ?></label>
                <br>
                <input type="text" class="color-field" name="amazing-catalog-bg-color" value="<?php echo esc_attr($options->get_option('amazing-catalog-bg-color')); ?>">
            </div>
        </li>
        <li>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Font', 'irk'); ?></label>
                <div uk-form-custom="target: > * > span:first-child">
                    <select name="font-family">
                        <option value=""><?php _e('Please select an item.', 'irk'); ?></option>
                        <option value="IRANSans" <?php selected($font, 'IRANSans'); ?>>IRANSans</option>
                        <option value="iranyekan" <?php selected($font, 'iranyekan'); ?>>IRANYekan</option>
                        <option value="iransansdn" <?php selected($font, 'iransansdn'); ?>>IRANSansDN</option>
                        <option value="Tajawal" <?php selected($font, 'Tajawal'); ?>>Tajawal</option>
                        <option value="Markazi+Text" <?php selected($font, 'Markazi+Text'); ?>>Markazi+Text</option>
                        <option value="Spartan" <?php selected($font, 'Spartan'); ?>>Spartan</option>
                        <option value="Lato" <?php selected($font, 'Lato'); ?>>Lato</option>
                        <option value="Montserrat" <?php selected($font, 'Montserrat'); ?>>Montserrat</option>
                        <option value="Raleway" <?php selected($font, 'Raleway'); ?>>Raleway</option>
                        <option value="Ubuntu" <?php selected($font, 'Ubuntu'); ?>>Ubuntu</option>
                        <option value="Nunito" <?php selected($font, 'Nunito'); ?>>Nunito</option>
                        <option value="Quicksand" <?php selected($font, 'Quicksand'); ?>>Quicksand</option>
                        <option value="Kanit" <?php selected($font, 'Kanit'); ?>>Kanit</option>
                    </select>
                    <button class="uk-button uk-button-default" type="button" tabindex="-1">
                        <span></span>
                        <span uk-icon="icon: chevron-down"></span>
                    </button>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Admin Dashboard Font', 'irk'); ?></label>
                <div uk-form-custom="target: > * > span:first-child">
                    <select name="dashboard-font-family">
                        <option value=""><?php _e('Please select an item.', 'irk'); ?></option>
                        <option value="IRANSans" <?php selected($dashboard_font, 'IRANSans'); ?>>IRANSans</option>
                        <option value="iranyekan" <?php selected($dashboard_font, 'iranyekan'); ?>>IRANYekan</option>
                    </select>
                    <button class="uk-button uk-button-default" type="button" tabindex="-1">
                        <span></span>
                        <span uk-icon="icon: chevron-down"></span>
                    </button>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label"><?php _e('Persian number', 'irk'); ?></label>
                <div class="uk-margin-small">
                    <label>
                        <input class="uk-checkbox" type="checkbox" name="persian-num" value="1" <?php echo checked($options->get_option('persian-num'), 1); ?>>
                        <?php _e('Active', 'irk'); ?>
                    </label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h1"><?php _e('Font size', 'irk'); ?> H1</label>
                <input type="number" class="uk-input" id="irk-font-size-h1" name="font-size-h1" value="<?php echo esc_attr($options->get_option('font-size-h1')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h2"><?php _e('Font size', 'irk'); ?> H2</label>
                <input type="number" class="uk-input" id="irk-font-size-h2" name="font-size-h2" value="<?php echo esc_attr($options->get_option('font-size-h2')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h3"><?php _e('Font size', 'irk'); ?> H3</label>
                <input type="number" class="uk-input" id="irk-font-size-h3" name="font-size-h3" value="<?php echo esc_attr($options->get_option('font-size-h3')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h4"><?php _e('Font size', 'irk'); ?> H4</label>
                <input type="number" class="uk-input" id="irk-font-size-h4" name="font-size-h4" value="<?php echo esc_attr($options->get_option('font-size-h4')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h5"><?php _e('Font size', 'irk'); ?> H5</label>
                <input type="number" class="uk-input" id="irk-font-size-h5" name="font-size-h5" value="<?php echo esc_attr($options->get_option('font-size-h5')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-font-size-h6"><?php _e('Font size', 'irk'); ?> H6</label>
                <input type="number" class="uk-input" id="irk-font-size-h6" name="font-size-h6" value="<?php echo esc_attr($options->get_option('font-size-h6')); ?>">
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="irk-line-height"><?php _e('Description text line height', 'irk'); ?></label>
                <input type="number" class="uk-input" id="irk-line-height" name="line-height" value="<?php echo esc_attr($options->get_option('line-height')); ?>">
            </div>
        </li>
    </ul>
</div>