<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>المظهر والتخصيص<?php $__template->endSection(); ?>
<?php $__template->section('styles'); ?>
<style>
.appearance-page{max-width:1100px;margin:0 auto}
.appearance-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.appearance-header h1{font-size:22px;font-weight:800;color:#1A1A2E;display:flex;align-items:center;gap:10px}
.appearance-header h1 i{color:var(--brand-primary)}
.appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.appearance-grid{grid-template-columns:1fr}}
.appear-card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:22px;transition:border-color .2s,box-shadow .2s}
.appear-card:hover{border-color:var(--brand-primary);box-shadow:0 4px 20px rgba(30,58,95,0.06)}
.appear-card-title{font-size:14px;font-weight:700;color:#1A1A2E;margin:0 0 16px;display:flex;align-items:center;gap:8px}
.appear-card-title i{width:18px;height:18px;color:var(--brand-primary)}

/* Color Picker */
.color-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.color-row label{font-size:13px;font-weight:600;color:#374151;min-width:100px}
.color-input-wrap{display:flex;align-items:center;gap:8px;flex:1}
.color-swatch{width:36px;height:36px;border-radius:10px;border:2px solid #E5E7EB;cursor:pointer;transition:transform .15s,box-shadow .15s;overflow:hidden;position:relative}
.color-swatch:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.color-swatch input[type="color"]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border:none;cursor:pointer;opacity:0}
.color-hex{width:90px;font-size:12px;font-family:monospace;padding:6px 10px;border:1px solid #E5E7EB;border-radius:8px;text-align:center;direction:ltr}
.color-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.color-preset{width:28px;height:28px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s}
.color-preset:hover{transform:scale(1.15)}
.color-preset.active{border-color:#1A1A2E;box-shadow:0 0 0 2px rgba(26,26,46,0.15)}

/* Option Groups */
.opt-group{margin-bottom:14px}
.opt-group-label{font-size:12px;font-weight:600;color:#6B7280;margin-bottom:8px}
.opt-pills{display:flex;gap:6px;flex-wrap:wrap}
.opt-pill{padding:7px 14px;border:1px solid #E5E7EB;border-radius:9px;font-size:12.5px;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;background:#FAFAFA}
.opt-pill:hover{border-color:var(--brand-primary);color:var(--brand-primary);background:rgba(30,58,95,0.04)}
.opt-pill.active{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.opt-pill input{display:none}

/* Preview Panel */
.preview-panel{grid-column:1/-1;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:20px;margin-top:4px}
.preview-title{font-size:13px;font-weight:700;color:#6B7280;margin:0 0 14px;display:flex;align-items:center;gap:6px}
.preview-mock{display:flex;gap:16px;min-height:180px;border-radius:10px;overflow:hidden;border:1px solid #E5E7EB}
.preview-sidebar{width:60px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .3s}
.preview-sidebar .dot{width:28px;height:28px;border-radius:8px;opacity:0.3;transition:all .3s}
.preview-sidebar .dot.active{opacity:1}
.preview-main{flex:1;padding:16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.preview-card{border-radius:10px;padding:12px 16px;border:1px solid #E5E7EB;transition:all .3s}
.preview-card .bar{height:8px;border-radius:4px;margin-bottom:6px;transition:all .3s}
.preview-card .bar-short{width:40%}
.preview-card .bar-long{width:75%}
.preview-btn{display:inline-block;padding:6px 16px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;transition:all .3s}

/* Save bar */
.save-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid #E5E7EB;padding:14px 0;margin-top:24px;display:flex;justify-content:flex-end;gap:10px;z-index:10;border-radius:0 0 14px 14px}
.save-bar .btn{padding:10px 28px;border-radius:10px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .15s}
.save-bar .btn-primary{background:var(--brand-primary);color:#fff}
.save-bar .btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.save-bar .btn-ghost{background:#F3F4F6;color:#374151}
.save-bar .btn-ghost:hover{background:#E5E7EB}
</style>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php use App\Core\CSRF; ?>

<div class="appearance-page">
    <div class="appearance-header">
        <h1><i data-lucide="palette"></i> المظهر والتخصيص</h1>
    </div>

    <form method="POST" action="/settings/appearance" id="appearance-form">
        <input type="hidden" name="_csrf_token" value="<?= e(CSRF::token()) ?>">

        <div class="appearance-grid">
            <!-- Colors -->
            <div class="appear-card">
                <h3 class="appear-card-title"><i data-lucide="droplet"></i> الألوان</h3>

                <div class="color-row">
                    <label>اللون الأساسي</label>
                    <div class="color-input-wrap">
                        <div class="color-swatch" style="background:<?= e($settings['brand_color']) ?>">
                            <input type="color" name="brand_color" value="<?= e($settings['brand_color']) ?>" onchange="updateColor(this,'brand')">
                        </div>
                        <input type="text" class="color-hex" id="brand-hex" value="<?= e($settings['brand_color']) ?>" onchange="syncHex(this,'brand_color')">
                    </div>
                </div>
                <div class="color-presets" id="brand-presets">
                    <?php foreach ($colorPresets as $p): ?>
                    <div class="color-preset <?= $p['value'] === $settings['brand_color'] ? 'active' : '' ?>"
                         style="background:<?= e($p['value']) ?>"
                         title="<?= e($p['label']) ?>"
                         onclick="selectPreset(this,'<?= e($p['value']) ?>','brand')"></div>
                    <?php endforeach; ?>
                </div>

                <div class="color-row" style="margin-top:18px">
                    <label>لون التمييز</label>
                    <div class="color-input-wrap">
                        <div class="color-swatch" style="background:<?= e($settings['accent_color']) ?>">
                            <input type="color" name="accent_color" value="<?= e($settings['accent_color']) ?>" onchange="updateColor(this,'accent')">
                        </div>
                        <input type="text" class="color-hex" id="accent-hex" value="<?= e($settings['accent_color']) ?>" onchange="syncHex(this,'accent_color')">
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="appear-card">
                <h3 class="appear-card-title"><i data-lucide="panel-left"></i> القائمة الجانبية</h3>

                <div class="opt-group">
                    <div class="opt-group-label">نمط القائمة</div>
                    <div class="opt-pills">
                        <?php foreach (['dark' => 'داكن', 'light' => 'فاتح', 'gradient' => 'متدرج'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['sidebar_style'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="sidebar_style" value="<?= $v ?>" <?= $settings['sidebar_style'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="opt-group">
                    <div class="opt-group-label">عرض القائمة</div>
                    <div class="opt-pills">
                        <?php foreach (['narrow' => 'ضيق', 'normal' => 'عادي', 'wide' => 'عريض'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['sidebar_width'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="sidebar_width" value="<?= $v ?>" <?= $settings['sidebar_width'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Typography & Radius -->
            <div class="appear-card">
                <h3 class="appear-card-title"><i data-lucide="type"></i> الخطوط والحواف</h3>

                <div class="opt-group">
                    <div class="opt-group-label">حجم الخط</div>
                    <div class="opt-pills">
                        <?php foreach (['compact' => 'مضغوط', 'normal' => 'عادي', 'large' => 'كبير'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['font_size'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="font_size" value="<?= $v ?>" <?= $settings['font_size'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="opt-group">
                    <div class="opt-group-label">استدارة البطاقات</div>
                    <div class="opt-pills">
                        <?php foreach (['sharp' => 'حاد', 'rounded' => 'مستدير', 'pill' => 'كبسولة'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['card_radius'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="card_radius" value="<?= $v ?>" <?= $settings['card_radius'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Animation & Density -->
            <div class="appear-card">
                <h3 class="appear-card-title"><i data-lucide="zap"></i> الحركة والكثافة</h3>

                <div class="opt-group">
                    <div class="opt-group-label">الحركات والانتقالات</div>
                    <div class="opt-pills">
                        <?php foreach (['full' => 'كاملة', 'subtle' => 'خفيفة', 'none' => 'بدون'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['animation'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="animation" value="<?= $v ?>" <?= $settings['animation'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="opt-group">
                    <div class="opt-group-label">كثافة العرض</div>
                    <div class="opt-pills">
                        <?php foreach (['compact' => 'مضغوط', 'comfortable' => 'مريح', 'spacious' => 'واسع'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['density'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="density" value="<?= $v ?>" <?= $settings['density'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Tables & Header -->
            <div class="appear-card">
                <h3 class="appear-card-title"><i data-lucide="table"></i> الجداول والرأس</h3>

                <div class="opt-group">
                    <div class="opt-group-label">نمط الجداول</div>
                    <div class="opt-pills">
                        <?php foreach (['striped' => 'مخطط', 'bordered' => 'بإطار', 'minimal' => 'بسيط'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['table_style'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="table_style" value="<?= $v ?>" <?= $settings['table_style'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="opt-group">
                    <div class="opt-group-label">نمط الرأس</div>
                    <div class="opt-pills">
                        <?php foreach (['clean' => 'نظيف', 'bordered' => 'بخط سفلي'] as $v => $l): ?>
                        <label class="opt-pill <?= $settings['header_style'] === $v ? 'active' : '' ?>">
                            <input type="radio" name="header_style" value="<?= $v ?>" <?= $settings['header_style'] === $v ? 'checked' : '' ?> onchange="activatePill(this)"> <?= $l ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Live Preview -->
            <div class="preview-panel">
                <div class="preview-title"><i data-lucide="eye" style="width:14px;height:14px"></i> معاينة حية</div>
                <div class="preview-mock" id="preview-mock">
                    <div class="preview-sidebar" id="preview-sidebar">
                        <div class="dot active" id="preview-dot-1"></div>
                        <div class="dot" id="preview-dot-2"></div>
                        <div class="dot" id="preview-dot-3"></div>
                    </div>
                    <div class="preview-main">
                        <div class="preview-card" id="preview-card">
                            <div class="bar bar-short" id="preview-bar-1"></div>
                            <div class="bar bar-long" id="preview-bar-2"></div>
                        </div>
                        <div style="display:flex;gap:8px">
                            <div class="preview-btn" id="preview-btn">زر تجريبي</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="save-bar">
            <button type="button" class="btn btn-ghost" onclick="resetDefaults()">استعادة الافتراضي</button>
            <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
    updatePreview();
});

function updateColor(input, type) {
    var swatch = input.parentElement;
    swatch.style.background = input.value;
    document.getElementById(type + '-hex').value = input.value;
    if (type === 'brand') {
        document.querySelectorAll('#brand-presets .color-preset').forEach(function(p) {
            p.classList.toggle('active', p.style.backgroundColor === input.value);
        });
    }
    updatePreview();
}

function syncHex(input, name) {
    var val = input.value.trim();
    if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
        var colorInput = document.querySelector('input[name="' + name + '"]');
        colorInput.value = val;
        colorInput.parentElement.style.background = val;
        updatePreview();
    }
}

function selectPreset(el, value, type) {
    document.querySelector('input[name="' + type + '_color"]').value = value;
    el.closest('.color-presets').querySelectorAll('.color-preset').forEach(function(p) { p.classList.remove('active'); });
    el.classList.add('active');
    var swatch = document.querySelector('input[name="' + type + '_color"]').parentElement;
    swatch.style.background = value;
    document.getElementById(type + '-hex').value = value;
    updatePreview();
}

function activatePill(input) {
    var pills = input.closest('.opt-pills').querySelectorAll('.opt-pill');
    pills.forEach(function(p) { p.classList.remove('active'); });
    input.closest('.opt-pill').classList.add('active');
    updatePreview();
}

function updatePreview() {
    var brand = document.querySelector('input[name="brand_color"]').value;
    var sidebar = document.querySelector('input[name="sidebar_style"]:checked').value;
    var radius = document.querySelector('input[name="card_radius"]:checked').value;

    var sidebarEl = document.getElementById('preview-sidebar');
    var cardEl = document.getElementById('preview-card');
    var btnEl = document.getElementById('preview-btn');
    var dot1 = document.getElementById('preview-dot-1');

    // Sidebar style
    if (sidebar === 'dark') sidebarEl.style.background = '#1A1A2E';
    else if (sidebar === 'light') sidebarEl.style.background = '#ffffff';
    else sidebarEl.style.background = '#ffffff';

    // Dots
    dot1.style.background = brand;
    document.getElementById('preview-dot-2').style.background = sidebar === 'light' ? '#E5E7EB' : 'rgba(255,255,255,0.2)';
    document.getElementById('preview-dot-3').style.background = sidebar === 'light' ? '#E5E7EB' : 'rgba(255,255,255,0.2)';

    // Card radius
    var rMap = {sharp:'4px', rounded:'10px', pill:'18px'};
    cardEl.style.borderRadius = rMap[radius] || '10px';

    // Button
    btnEl.style.background = brand;
    btnEl.style.borderRadius = rMap[radius] || '10px';

    // Bars
    document.getElementById('preview-bar-1').style.background = brand + '40';
    document.getElementById('preview-bar-2').style.background = '#E5E7EB';
}

function resetDefaults() {
    if (!confirm('استعادة جميع الإعدادات للقيم الافتراضية؟')) return;
    document.querySelector('input[name="brand_color"]').value = '#1e3a5f';
    document.querySelector('input[name="accent_color"]').value = '#6366f1';
    document.querySelectorAll('input[value="dark"][name="sidebar_style"]')[0].checked = true;
    document.querySelectorAll('input[value="normal"][name="sidebar_width"]')[0].checked = true;
    document.querySelectorAll('input[value="rounded"][name="card_radius"]')[0].checked = true;
    document.querySelectorAll('input[value="normal"][name="font_size"]')[0].checked = true;
    document.querySelectorAll('input[value="full"][name="animation"]')[0].checked = true;
    document.querySelectorAll('input[value="clean"][name="header_style"]')[0].checked = true;
    document.querySelectorAll('input[value="striped"][name="table_style"]')[0].checked = true;
    document.querySelectorAll('input[value="comfortable"][name="density"]')[0].checked = true;
    document.querySelectorAll('.opt-pill').forEach(function(p) {
        var input = p.querySelector('input');
        p.classList.toggle('active', input && input.checked);
    });
    document.querySelector('input[name="brand_color"]').parentElement.style.background = '#1e3a5f';
    document.querySelector('input[name="accent_color"]').parentElement.style.background = '#6366f1';
    document.getElementById('brand-hex').value = '#1e3a5f';
    document.getElementById('accent-hex').value = '#6366f1';
    updatePreview();
}
</script>
<?php $__template->endSection(); ?>
