@include('Partials.sidebar')

@section('title', 'Appearance & Branding Settings')


<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')
    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">



            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div>
                        <h4 class="mb-1 fw-semibold">Appearance & Branding Settings</h4>
                        <p class="text-muted small mb-0">Customize colors, fonts, and text across your entire website.
                        </p>
                    </div>
                    <button type="submit" form="appearanceForm" class="btn btn-primary px-4">
                        <i class="fas fa-save me-2"></i> Save Changes
                    </button>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif

                <form id="appearanceForm" action="{{ route('admin.settings.appearance.update') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row g-4">

                        {{-- ── LEFT COLUMN ───────────────────────────────── --}}
                        <div class="col-xl-8">

                            {{-- Branding / Text ──────────────────────────── --}}
                            <div class="settings-section">
                                <div class="settings-section__header">
                                    <div class="section-icon"><i class="fas fa-font"></i></div>
                                    <h5>Branding & Text</h5>
                                </div>
                                <div class="settings-section__body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">App / Site Name</label>
                                            <input type="text" name="app_name" class="form-control"
                                                value="{{ old('app_name', $settings['app_name'] ?? '') }}"
                                                placeholder="e.g. Prestige Realty">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Eyebrow Label</label>
                                            <input type="text" name="app_eyebrow" class="form-control"
                                                value="{{ old('app_eyebrow', $settings['app_eyebrow'] ?? 'Our Portfolio') }}"
                                                placeholder="e.g. Our Portfolio">
                                            <div class="form-text">Small text above the page title.</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Page Title</label>
                                            <input type="text" name="app_tagline" class="form-control"
                                                value="{{ old('app_tagline', $settings['app_tagline'] ?? 'Exceptional') }}"
                                                placeholder="e.g. Exceptional">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Page Title (Italic / Accent)</label>
                                            <input type="text" name="app_tagline_italic" class="form-control"
                                                value="{{ old('app_tagline_italic', $settings['app_tagline_italic'] ?? '') }}"
                                                placeholder="e.g. Properties">
                                            <div class="form-text">Rendered in italic with the accent color.</div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-medium">Page Subtitle</label>
                                            <textarea name="app_subtitle" class="form-control" rows="2"
                                                placeholder="Discover handcrafted developments built for modern living">{{ old('app_subtitle', $settings['app_subtitle'] ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Colors ──────────────────────────────────── --}}
                            <div class="settings-section">
                                <div class="settings-section__header">
                                    <div class="section-icon"><i class="fas fa-palette"></i></div>
                                    <h5>Colors</h5>
                                </div>
                                <div class="settings-section__body">
                                    <div class="row g-4">

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Primary Color</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_primary"
                                                    value="{{ old('primary_color', $settings['primary_color'] ?? '#c9a96e') }}"
                                                    oninput="syncColor(this, 'primary_color', 'hex_primary')">
                                                <input type="text" name="primary_color" id="hex_primary"
                                                    class="form-control"
                                                    value="{{ old('primary_color', $settings['primary_color'] ?? '#c9a96e') }}"
                                                    oninput="syncHex(this, 'picker_primary')" placeholder="#c9a96e"
                                                    maxlength="7">
                                            </div>
                                            <div class="form-text">Buttons, active tab underlines, accents.</div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Primary Color (Hover)</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_primary_hover"
                                                    value="{{ old('primary_color_hover', $settings['primary_color_hover'] ?? '#a07a52') }}"
                                                    oninput="syncColor(this, 'primary_color_hover', 'hex_primary_hover')">
                                                <input type="text" name="primary_color_hover" id="hex_primary_hover"
                                                    class="form-control"
                                                    value="{{ old('primary_color_hover', $settings['primary_color_hover'] ?? '#a07a52') }}"
                                                    oninput="syncHex(this, 'picker_primary_hover')"
                                                    placeholder="#a07a52" maxlength="7">
                                            </div>
                                            <div class="form-text">Button hover state.</div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Page Background</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_page_bg"
                                                    value="{{ old('page_bg_color', $settings['page_bg_color'] ?? '#faf9f7') }}"
                                                    oninput="syncColor(this, 'page_bg_color', 'hex_page_bg')">
                                                <input type="text" name="page_bg_color" id="hex_page_bg"
                                                    class="form-control"
                                                    value="{{ old('page_bg_color', $settings['page_bg_color'] ?? '#faf9f7') }}"
                                                    oninput="syncHex(this, 'picker_page_bg')" placeholder="#faf9f7"
                                                    maxlength="7">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Card Background</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_card_bg"
                                                    value="{{ old('card_bg_color', $settings['card_bg_color'] ?? '#ffffff') }}"
                                                    oninput="syncColor(this, 'card_bg_color', 'hex_card_bg')">
                                                <input type="text" name="card_bg_color" id="hex_card_bg"
                                                    class="form-control"
                                                    value="{{ old('card_bg_color', $settings['card_bg_color'] ?? '#ffffff') }}"
                                                    oninput="syncHex(this, 'picker_card_bg')" placeholder="#ffffff"
                                                    maxlength="7">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Card Border Color</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_card_border"
                                                    value="{{ old('card_border_color', $settings['card_border_color'] ?? '#e8e0d4') }}"
                                                    oninput="syncColor(this, 'card_border_color', 'hex_card_border')">
                                                <input type="text" name="card_border_color" id="hex_card_border"
                                                    class="form-control"
                                                    value="{{ old('card_border_color', $settings['card_border_color'] ?? '#e8e0d4') }}"
                                                    oninput="syncHex(this, 'picker_card_border')" placeholder="#e8e0d4"
                                                    maxlength="7">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Dark Text Color</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_text_dark"
                                                    value="{{ old('text_color_dark', $settings['text_color_dark'] ?? '#1c1c1c') }}"
                                                    oninput="syncColor(this, 'text_color_dark', 'hex_text_dark')">
                                                <input type="text" name="text_color_dark" id="hex_text_dark"
                                                    class="form-control"
                                                    value="{{ old('text_color_dark', $settings['text_color_dark'] ?? '#1c1c1c') }}"
                                                    oninput="syncHex(this, 'picker_text_dark')" placeholder="#1c1c1c"
                                                    maxlength="7">
                                            </div>
                                            <div class="form-text">Headings, card names.</div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Muted Text Color</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_text_muted"
                                                    value="{{ old('text_color_muted', $settings['text_color_muted'] ?? '#888888') }}"
                                                    oninput="syncColor(this, 'text_color_muted', 'hex_text_muted')">
                                                <input type="text" name="text_color_muted" id="hex_text_muted"
                                                    class="form-control"
                                                    value="{{ old('text_color_muted', $settings['text_color_muted'] ?? '#888888') }}"
                                                    oninput="syncHex(this, 'picker_text_muted')" placeholder="#888888"
                                                    maxlength="7">
                                            </div>
                                            <div class="form-text">Subtitles, descriptions.</div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            {{-- Typography ───────────────────────────────── --}}
                            <div class="settings-section">
                                <div class="settings-section__header">
                                    <div class="section-icon"><i class="fas fa-text-height"></i></div>
                                    <h5>Typography</h5>
                                </div>
                                <div class="settings-section__body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Heading Font</label>
                                            <input type="text" name="heading_font" id="heading_font_input"
                                                class="form-control"
                                                value="{{ old('heading_font', $settings['heading_font'] ?? 'Playfair Display, Georgia, serif') }}"
                                                oninput="updateFontPreview('heading_font_preview', this.value)">
                                            <div class="font-preview" id="heading_font_preview"
                                                style="font-family: {{ $settings['heading_font'] ?? 'Playfair Display, Georgia, serif' }}">
                                                The quick brown fox jumps over the lazy dog
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Body Font</label>
                                            <input type="text" name="body_font" id="body_font_input"
                                                class="form-control"
                                                value="{{ old('body_font', $settings['body_font'] ?? 'Jost, sans-serif') }}"
                                                oninput="updateFontPreview('body_font_preview', this.value)">
                                            <div class="font-preview" id="body_font_preview"
                                                style="font-family: {{ $settings['body_font'] ?? 'Jost, sans-serif' }}">
                                                The quick brown fox jumps over the lazy dog
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label fw-medium">Google Fonts Embed URL</label>
                                            <input type="url" name="google_fonts_url" class="form-control"
                                                value="{{ old('google_fonts_url', $settings['google_fonts_url'] ?? '') }}"
                                                placeholder="https://fonts.googleapis.com/css2?family=...&display=swap">
                                            <p class="google-fonts-hint">
                                                Generate at <a href="https://fonts.google.com"
                                                    target="_blank">fonts.google.com</a>.
                                                Paste the full <code>&lt;link&gt;</code> href here. This loads the font
                                                in the
                                                frontend.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Logos ───────────────────────────────────── --}}
                            <div class="settings-section">
                                <div class="settings-section__header">
                                    <div class="section-icon"><i class="fas fa-image"></i></div>
                                    <h5>Logo</h5>
                                </div>
                                <div class="settings-section__body">
                                    <div class="row g-3 align-items-start">
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Light Logo <span class="text-muted">(on
                                                    dark
                                                    backgrounds)</span></label>
                                            <input type="file" name="app_logo_light" class="form-control"
                                                accept="image/*">
                                            @if(!empty($settings['app_logo_light_url']))
                                                <div class="mt-2 p-2 bg-dark rounded text-center">
                                                    <img src="{{ $settings['app_logo_light_url'] }}" alt="Light Logo"
                                                        style="max-height:40px;">
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Dark Logo <span class="text-muted">(on
                                                    light
                                                    backgrounds)</span></label>
                                            <input type="file" name="app_logo_dark" class="form-control"
                                                accept="image/*">
                                            @if(!empty($settings['app_logo_dark_url']))
                                                <div class="mt-2 p-2 border rounded text-center">
                                                    <img src="{{ $settings['app_logo_dark_url'] }}" alt="Dark Logo"
                                                        style="max-height:40px;">
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        {{-- ── RIGHT COLUMN: Live Preview ────────────────── --}}
                        <div class="col-xl-4">
                            <div class="settings-section position-sticky" style="top: 80px;">
                                <div class="settings-section__header">
                                    <div class="section-icon"><i class="fas fa-eye"></i></div>
                                    <h5>Live Preview</h5>
                                </div>
                                <div class="settings-section__body">

                                    <div class="live-preview-bar" id="previewBar"></div>

                                    <p class="text-muted small mb-3">A sample card using your current color selections.
                                    </p>

                                    <div class="preview-card">
                                        <div class="preview-card__img">
                                            <span>Project Image</span>
                                        </div>
                                        <div class="preview-card__body">

                                            {{-- Tab indicator --}}
                                            <div class="mb-3">
                                                <span class="tab-indicator" id="previewTabActive"
                                                    style="border-color: #b8946a; color: #b8946a;">Overview</span>
                                                <span class="tab-indicator"
                                                    style="border-color: transparent; color: #888;">Amenities</span>
                                            </div>

                                            <div class="preview-card__label" id="previewLabel" style="color: #b8946a;">
                                                📍 Mumbai,
                                                India</div>
                                            <div class="preview-card__name" id="previewName"
                                                style="font-family: 'Playfair Display', serif; color: #1c1c1c;">
                                                Prestige <em>Gardens</em>
                                            </div>
                                            <button type="button" class="preview-card__btn" id="previewBtn"
                                                style="background: #b8946a; color: #fff;">
                                                Choose Your Units →
                                            </button>
                                        </div>
                                    </div>

                                    <hr class="my-3">

                                    <div class="d-grid">
                                        <button type="submit" form="appearanceForm" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i> Save All Changes
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>

        </div>
    </div>
</section>


<script>
    // Sync color picker → hex input
    function syncColor(picker, fieldName, hexId) {
        document.getElementById(hexId).value = picker.value;
        updatePreview();
    }

    // Sync hex input → color picker
    function syncHex(hexInput, pickerId) {
        const val = hexInput.value;
        if (/^#[0-9a-fA-F]{6}$/.test(val)) {
            document.getElementById(pickerId).value = val;
            updatePreview();
        }
    }

    // Font preview
    function updateFontPreview(previewId, fontValue) {
        document.getElementById(previewId).style.fontFamily = fontValue;
    }

    // Live preview update
    function updatePreview() {
        const get = (id) => document.getElementById(id)?.value || '';

        const primary = get('hex_primary') || '#b8946a';
        const textDark = get('hex_text_dark') || '#1c1c1c';
        const cardBg = get('hex_card_bg') || '#ffffff';
        const cardBorder = get('hex_card_border') || '#e8e0d4';
        const headingFont = document.getElementById('heading_font_input')?.value || 'Playfair Display, serif';

        // Preview bar gradient
        document.getElementById('previewBar').style.background =
            `linear-gradient(90deg, ${primary}, ${darkenColor(primary, 15)})`;

        // Preview card bg
        document.querySelector('.preview-card').style.borderColor = cardBorder;
        document.querySelector('.preview-card__body').style.background = cardBg;

        // Label + tab
        document.getElementById('previewLabel').style.color = primary;
        document.getElementById('previewTabActive').style.borderColor = primary;
        document.getElementById('previewTabActive').style.color = primary;

        // Name
        const nameEl = document.getElementById('previewName');
        nameEl.style.color = textDark;
        nameEl.style.fontFamily = headingFont;
        nameEl.querySelector('em').style.color = primary;

        // Button
        document.getElementById('previewBtn').style.background = primary;
    }

    // Simple hex darkener for gradient
    function darkenColor(hex, amount) {
        try {
            let r = parseInt(hex.slice(1, 3), 16);
            let g = parseInt(hex.slice(3, 5), 16);
            let b = parseInt(hex.slice(5, 7), 16);
            r = Math.max(0, r - amount);
            g = Math.max(0, g - amount);
            b = Math.max(0, b - amount);
            return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
        } catch { return hex; }
    }

    // Run preview on load
    document.addEventListener('DOMContentLoaded', updatePreview);

    // Run preview on every color/text input change
    document.querySelectorAll('input[type="color"], input[type="text"], input#heading_font_input').forEach(el => {
        el.addEventListener('input', updatePreview);
    });
</script>


@include('Partials.footer')