@extends('admin.layouts.app')
@section('title', 'Design Settings')
@section('heading', 'Design & Appearance')

@section('content')
<div class="page-tabs">
    <a href="{{ route('admin.pages.home') }}" class="page-tab">Home</a>
    <a href="{{ route('admin.pages.about') }}" class="page-tab">About</a>
    <a href="{{ route('admin.pages.contact') }}" class="page-tab">Contact</a>
    <a href="{{ route('admin.pages.offers') }}" class="page-tab">Offers</a>
    <a href="{{ route('admin.pages.footer') }}" class="page-tab">Footer</a>
    <a href="{{ route('admin.pages.seo') }}" class="page-tab">SEO</a>
    <a href="{{ route('admin.pages.design') }}" class="page-tab active">Design</a>
</div>

<form method="POST" action="{{ route('admin.pages.design.update') }}">
    @csrf

    <div class="form-grid" style="grid-template-columns: 2fr 1fr;">
        <div class="form-col">

            <!-- Colors -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-palette"></i>
                    <div><h3>Brand Colors</h3><p>Set your brand color scheme.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Primary Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_primary_color" value="{{ old('design_primary_color', $s['design_primary_color'] ?? '#000000') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_primary_color', $s['design_primary_color'] ?? '#000000') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                    <div class="form-field">
                        <label>Secondary Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_secondary_color" value="{{ old('design_secondary_color', $s['design_secondary_color'] ?? '#333333') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_secondary_color', $s['design_secondary_color'] ?? '#333333') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Accent Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_accent_color" value="{{ old('design_accent_color', $s['design_accent_color'] ?? '#f59e0b') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_accent_color', $s['design_accent_color'] ?? '#f59e0b') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                    <div class="form-field">
                        <label>Success Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_success_color" value="{{ old('design_success_color', $s['design_success_color'] ?? '#10b981') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_success_color', $s['design_success_color'] ?? '#10b981') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Warning Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_warning_color" value="{{ old('design_warning_color', $s['design_warning_color'] ?? '#f59e0b') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_warning_color', $s['design_warning_color'] ?? '#f59e0b') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                    <div class="form-field">
                        <label>Danger Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_danger_color" value="{{ old('design_danger_color', $s['design_danger_color'] ?? '#ef4444') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_danger_color', $s['design_danger_color'] ?? '#ef4444') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Backgrounds -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-fill"></i>
                    <div><h3>Background Colors</h3><p>Set default background colors.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Body Background</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_body_bg" value="{{ old('design_body_bg', $s['design_body_bg'] ?? '#ffffff') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_body_bg', $s['design_body_bg'] ?? '#ffffff') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                    <div class="form-field">
                        <label>Card Background</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_card_bg" value="{{ old('design_card_bg', $s['design_card_bg'] ?? '#ffffff') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_card_bg', $s['design_card_bg'] ?? '#ffffff') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Typography -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-font"></i>
                    <div><h3>Typography</h3><p>Fonts and text colors.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Heading Font Family</label>
                        <input type="text" name="design_heading_font" value="{{ old('design_heading_font', $s['design_heading_font'] ?? 'Playfair Display') }}" placeholder="Playfair Display">
                    </div>
                    <div class="form-field">
                        <label>Body Font Family</label>
                        <input type="text" name="design_body_font" value="{{ old('design_body_font', $s['design_body_font'] ?? 'Poppins') }}" placeholder="Poppins">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Heading Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_heading_color" value="{{ old('design_heading_color', $s['design_heading_color'] ?? '#000000') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_heading_color', $s['design_heading_color'] ?? '#000000') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                    <div class="form-field">
                        <label>Text Color</label>
                        <div style="display:flex; gap:0.5rem; align-items:center;">
                            <input type="color" name="design_text_color" value="{{ old('design_text_color', $s['design_text_color'] ?? '#333333') }}" style="width:50px; height:40px; padding:0; border:none; cursor:pointer;">
                            <input type="text" value="{{ old('design_text_color', $s['design_text_color'] ?? '#333333') }}" style="width:100px;" readonly>
                        </div>
                    </div>
                </div>
                <div class="form-field full">
                    <label>Base Font Size (px)</label>
                    <input type="number" name="design_font_size_base" value="{{ old('design_font_size_base', $s['design_font_size_base'] ?? 16) }}" min="12" max="20">
                </div>
            </section>

            <!-- Layout -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-layout"></i>
                    <div><h3>Layout Settings</h3><p>Page layout configurations.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Container Max Width (px)</label>
                        <input type="number" name="design_container_width" value="{{ old('design_container_width', $s['design_container_width'] ?? 1400) }}" min="1000" max="2000">
                    </div>
                    <div class="form-field">
                        <label>Products Per Page</label>
                        <input type="number" name="design_products_per_page" value="{{ old('design_products_per_page', $s['design_products_per_page'] ?? 12) }}" min="4" max="50">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Border Radius (px)</label>
                        <input type="number" name="design_border_radius" value="{{ old('design_border_radius', $s['design_border_radius'] ?? 8) }}" min="0" max="30">
                    </div>
                </div>
            </section>

        </div>

        <div class="form-col form-col-side">
            <section class="card form-section sticky-actions">
                <button type="submit" class="adm-btn adm-btn-primary adm-btn-lg"><i class="fa-solid fa-save"></i> Save Design</button>
                <a href="{{ route('home') }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-eye"></i> Preview Site</a>
            </section>

            <!-- Effects -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-wand-magic-sparkles"></i>
                    <div><h3>Effects</h3></div>
                </header>
                <div style="display:flex; flex-direction:column; gap:0.75rem;">
                    <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
                        <input type="checkbox" name="design_box_shadow" value="1" {{ old('design_box_shadow', $s['design_box_shadow'] ?? true) ? 'checked' : '' }}>
                        <span>Enable Box Shadows</span>
                    </label>
                    <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
                        <input type="checkbox" name="design_animations" value="1" {{ old('design_animations', $s['design_animations'] ?? true) ? 'checked' : '' }}>
                        <span>Enable Animations</span>
                    </label>
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-circle-info"></i>
                    <div><h3>Quick Color Presets</h3></div>
                </header>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.5rem;">
                    <button type="button" class="adm-btn adm-btn-ghost" onclick="applyPreset('classic')">Classic</button>
                    <button type="button" class="adm-btn adm-btn-ghost" onclick="applyPreset('modern')">Modern</button>
                    <button type="button" class="adm-btn adm-btn-ghost" onclick="applyPreset('warm')">Warm</button>
                    <button type="button" class="adm-btn adm-btn-ghost" onclick="applyPreset('cool')">Cool</button>
                </div>
            </section>
        </div>
    </div>
</form>

<script>
function applyPreset(preset) {
    const presets = {
        classic: {
            primary: '#000000', secondary: '#333333', accent: '#f59e0b',
            body: '#ffffff', heading: '#000000', text: '#333333'
        },
        modern: {
            primary: '#1a1a2e', secondary: '#16213e', accent: '#0f3460',
            body: '#f8f9fa', heading: '#1a1a2e', text: '#495057'
        },
        warm: {
            primary: '#8b4513', secondary: '#a0522d', accent: '#cd853f',
            body: '#fffaf0', heading: '#5d3a1a', text: '#4a3728'
        },
        cool: {
            primary: '#2c3e50', secondary: '#34495e', accent: '#3498db',
            body: '#ecf0f1', heading: '#2c3e50', text: '#2c3e50'
        }
    };
    const p = presets[preset];
    document.querySelector('input[name="design_primary_color"]').value = p.primary;
    document.querySelector('input[name="design_secondary_color"]').value = p.secondary;
    document.querySelector('input[name="design_accent_color"]').value = p.accent;
    document.querySelector('input[name="design_body_bg"]').value = p.body;
    document.querySelector('input[name="design_heading_color"]').value = p.heading;
    document.querySelector('input[name="design_text_color"]').value = p.text;
}
</script>
@endsection