<?php
defined('BASEPATH') or exit('No direct script access allowed');
/**
 * Show options for Office Theme settings
 */
$option_customers = get_option('perfex_office_theme_customers');
$option_default_theme = get_option('perfex_office_theme_default_theme', 'light');
$option_primary_color = get_option('perfex_office_theme_primary_color', '#60a5fa');
?>

<div class="row">
    <div class="col-md-12">
        <!-- Customer Theme Section -->
        <div class="form-group">
            <label for="perfex_office_theme_customers" class="control-label clearfix">
                <i class="fa fa-users"></i> <?= _l('perfex_office_theme_settings'); ?>
            </label>
            <hr>
            <div class="radio radio-primary radio-inline">
                <input type="radio" id="y_opt_1_perfex_office_theme_customers_enabled" name="settings[perfex_office_theme_customers]" value="1" <?= ($option_customers == '1') ? ' checked' : '' ?>>
                <label for="y_opt_1_perfex_office_theme_customers_enabled">
                    <?= _l('settings_yes'); ?>
                </label>
            </div>
            <div class="radio radio-primary radio-inline">
                <input type="radio" id="y_opt_2_perfex_office_theme_customers_disabled" name="settings[perfex_office_theme_customers]" value="0" <?= ($option_customers == '0') ? ' checked' : '' ?>>
                <label for="y_opt_2_perfex_office_theme_customers_disabled">
                    <?= _l('settings_no'); ?>
                </label>
            </div>
            <p class="text-muted mtop10"><?= _l('perfex_office_theme_customers_description', 'Enable Office Theme for customer area'); ?></p>
        </div>

        <!-- Default Theme Section -->
        <div class="form-group">
            <label for="perfex_office_theme_default_theme" class="control-label clearfix">
                <i class="fa fa-moon-o"></i> <?= _l('perfex_office_theme_default_theme', 'Default Theme'); ?>
            </label>
            <hr>
            <div class="radio radio-primary radio-inline">
                <input type="radio" id="theme_light" name="settings[perfex_office_theme_default_theme]" value="light" <?= ($option_default_theme == 'light') ? ' checked' : '' ?>>
                <label for="theme_light">
                    <i class="fa fa-sun-o"></i> <?= _l('perfex_office_theme_light', 'Light'); ?>
                </label>
            </div>
            <div class="radio radio-primary radio-inline">
                <input type="radio" id="theme_dark" name="settings[perfex_office_theme_default_theme]" value="dark" <?= ($option_default_theme == 'dark') ? ' checked' : '' ?>>
                <label for="theme_dark">
                    <i class="fa fa-moon-o"></i> <?= _l('perfex_office_theme_dark', 'Dark'); ?>
                </label>
            </div>
            <div class="radio radio-primary radio-inline">
                <input type="radio" id="theme_auto" name="settings[perfex_office_theme_default_theme]" value="auto" <?= ($option_default_theme == 'auto') ? ' checked' : '' ?>>
                <label for="theme_auto">
                    <i class="fa fa-adjust"></i> <?= _l('perfex_office_theme_auto', 'Auto (System)'); ?>
                </label>
            </div>
            <p class="text-muted mtop10"><?= _l('perfex_office_theme_default_theme_description', 'Set the default theme for new users. Users can change this from the header.'); ?></p>
        </div>

        <!-- Primary Color Section -->
        <div class="form-group">
            <label for="perfex_office_theme_primary_color" class="control-label clearfix">
                <i class="fa fa-paint-brush"></i> <?= _l('perfex_office_theme_primary_color', 'Primary Color'); ?>
            </label>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <input type="color" 
                           id="perfex_office_theme_primary_color" 
                           name="settings[perfex_office_theme_primary_color]" 
                           value="<?= $option_primary_color ?>" 
                           class="form-control"
                           style="height: 50px; cursor: pointer;">
                </div>
                <div class="col-md-6">
                    <input type="text" 
                           id="perfex_office_theme_primary_color_text" 
                           value="<?= $option_primary_color ?>" 
                           class="form-control"
                           placeholder="#60a5fa"
                           readonly>
                    <small class="text-muted"><?= _l('perfex_office_theme_primary_color_description', 'Choose the primary color for the theme. This will be used for buttons, links, and accents.'); ?></small>
                </div>
            </div>
            <div class="mtop15">
                <button type="button" class="btn btn-default btn-sm" onclick="resetPrimaryColor()">
                    <i class="fa fa-refresh"></i> <?= _l('perfex_office_theme_reset_color', 'Reset to Default'); ?>
                </button>
            </div>
        </div>

        <!-- Color Presets -->
        <div class="form-group">
            <label class="control-label clearfix">
                <i class="fa fa-palette"></i> <?= _l('perfex_office_theme_color_presets', 'Color Presets'); ?>
            </label>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="color-presets">
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#60a5fa" style="background: #60a5fa; color: white; margin: 5px;" title="Ice Blue">
                            Ice Blue
                        </button>
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#3b82f6" style="background: #3b82f6; color: white; margin: 5px;" title="Blue">
                            Blue
                        </button>
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#6366f1" style="background: #6366f1; color: white; margin: 5px;" title="Indigo">
                            Indigo
                        </button>
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#8b5cf6" style="background: #8b5cf6; color: white; margin: 5px;" title="Purple">
                            Purple
                        </button>
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#ec4899" style="background: #ec4899; color: white; margin: 5px;" title="Pink">
                            Pink
                        </button>
                        <button type="button" class="btn btn-sm color-preset-btn" data-color="#10b981" style="background: #10b981; color: white; margin: 5px;" title="Emerald">
                            Emerald
                        </button>
                    </div>
                    <p class="text-muted mtop10"><?= _l('perfex_office_theme_color_presets_description', 'Click on a preset to quickly apply a color scheme.'); ?></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    // Sync color picker with text input
    var colorPicker = document.getElementById('perfex_office_theme_primary_color');
    var colorText = document.getElementById('perfex_office_theme_primary_color_text');
    
    if (colorPicker && colorText) {
        colorPicker.addEventListener('input', function() {
            colorText.value = this.value;
        });
        
        colorText.addEventListener('input', function() {
            if (/^#[0-9A-F]{6}$/i.test(this.value)) {
                colorPicker.value = this.value;
            }
        });
    }
    
    // Color preset buttons
    var presetButtons = document.querySelectorAll('.color-preset-btn');
    presetButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var color = this.getAttribute('data-color');
            if (colorPicker) colorPicker.value = color;
            if (colorText) colorText.value = color;
        });
    });
    
    // Reset color function
    window.resetPrimaryColor = function() {
        var defaultColor = '#60a5fa';
        if (colorPicker) colorPicker.value = defaultColor;
        if (colorText) colorText.value = defaultColor;
    };
})();
</script>

<style>
.color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-preset-btn {
    min-width: 100px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-preset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-color: #333;
}

#perfex_office_theme_primary_color {
    cursor: pointer;
}
</style>