@php
    // ── Check if we're on a tenant context ──
    $tenant = request()->get('current_tenant') ?? (isset($currentTenant) ? $currentTenant : null);
    $isTenantContext = $tenant !== null;
    $tenantSlug = $tenantSlug ?? request()->route('tenant');
    
    // ── Get settings based on context ──
    if ($isTenantContext) {
        // Tenant context - get tenant settings
        $tenantSettings = \App\Models\TenantSetting::getAllForTenant($tenant->id);
        $settings = $tenantSettings;
        
        // Add logo URLs for tenant
        $settings['app_logo_light_url'] = !empty($settings['logo_light']) 
            ? asset('storage/tenants/' . $tenant->id . '/' . $settings['logo_light']) 
            : null;
        $settings['app_logo_dark_url'] = !empty($settings['logo_dark']) 
            ? asset('storage/tenants/' . $tenant->id . '/' . $settings['logo_dark']) 
            : null;
        
        // Set default values if not set
        $settings['app_name'] = $settings['company_name'] ?? $tenant->name ?? 'My Company';
        $settings['primary_color'] = $settings['primary_color'] ?? '#c9a96e';
        $settings['primary_color_hover'] = $settings['primary_color_hover'] ?? '#a07a52';
        $settings['secondary_color'] = $settings['secondary_color'] ?? '#1a1a2e';
        $settings['page_bg_color'] = $settings['page_bg_color'] ?? '#faf9f7';
        $settings['card_bg_color'] = $settings['card_bg_color'] ?? '#ffffff';
        $settings['card_border_color'] = $settings['card_border_color'] ?? '#e8e0d4';
        $settings['text_color_dark'] = $settings['text_color_dark'] ?? '#1c1c1c';
        $settings['text_color_muted'] = $settings['text_color_muted'] ?? '#888888';
        $settings['heading_font'] = $settings['heading_font'] ?? 'Playfair Display, Georgia, serif';
        $settings['body_font'] = $settings['body_font'] ?? 'Jost, sans-serif';
        $settings['google_fonts_url'] = $settings['google_fonts_url'] ?? '';
        
        // Use correct route name with tenant parameter
        $updateRoute = route('admin.settings.appearance.update', ['tenant' => $tenantSlug]);
        $backUrl = route('admin.settings', ['tenant' => $tenantSlug]);
        $pageTitle = 'Appearance & Branding Settings';
        $pageDescription = 'Customize your tenant branding and appearance.';
    } else {
        // Platform context - get platform settings
        $platformSettings = \App\Models\Setting::getAllAsArray();
        $settings = $platformSettings;
        
        // Add logo URLs for platform
        $settings['app_logo_light_url'] = !empty($settings['app_logo_light']) 
            ? asset('storage/settings/' . $settings['app_logo_light']) 
            : null;
        $settings['app_logo_dark_url'] = !empty($settings['app_logo_dark']) 
            ? asset('storage/settings/' . $settings['app_logo_dark']) 
            : null;
        
        $updateRoute = route('admin.settings.appearance.update');
        $backUrl = route('admin.settings');
        $pageTitle = 'Appearance & Branding Settings';
        $pageDescription = 'Customize colors, fonts, and text across your entire website.';
    }
    
    // ── Determine storage path for logos ──
    $logoStoragePath = $isTenantContext 
        ? 'tenants/' . $tenant->id 
        : 'settings';
@endphp

@include('Partials.sidebar')

<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">{{ $pageTitle }}</h4>
                        <p class="text-muted small mb-0">{{ $pageDescription }}</p>
                        @if($isTenantContext)
                            <span class="badge badge-info mt-1">
                                <i class="fas fa-building me-1"></i> {{ $tenant->name }}
                            </span>
                        @endif
                    </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

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

                <form id="appearanceForm" action="{{ $updateRoute }}" 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">Company / Site Name</label>
                                            <input type="text" name="company_name" class="form-control"
                                                value="{{ old('company_name', $settings['company_name'] ?? '') }}"
                                                placeholder="e.g. Prestige Realty">
                                            <div class="form-text">This will appear on the login page and throughout the site.</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Tagline</label>
                                            <input type="text" name="tagline" class="form-control"
                                                value="{{ old('tagline', $settings['tagline'] ?? 'Exceptional Properties') }}"
                                                placeholder="e.g. Exceptional Properties">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-medium">Subtitle</label>
                                            <input type="text" name="subtitle" class="form-control"
                                                value="{{ old('subtitle', $settings['subtitle'] ?? '') }}"
                                                placeholder="e.g. Discover handcrafted developments">
                                            <div class="form-text">Rendered in italic with the accent color.</div>
                                        </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">Secondary Color</label>
                                            <div class="color-input-group">
                                                <input type="color" id="picker_secondary"
                                                    value="{{ old('secondary_color', $settings['secondary_color'] ?? '#1a1a2e') }}"
                                                    oninput="syncColor(this, 'secondary_color', 'hex_secondary')">
                                                <input type="text" name="secondary_color" id="hex_secondary"
                                                    class="form-control"
                                                    value="{{ old('secondary_color', $settings['secondary_color'] ?? '#1a1a2e') }}"
                                                    oninput="syncHex(this, 'picker_secondary')" placeholder="#1a1a2e"
                                                    maxlength="7">
                                            </div>
                                            <div class="form-text">Secondary brand color.</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="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 class="form-text">For dark backgrounds. Recommended: PNG with transparency.</div>
                                        </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="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 class="form-text">For light backgrounds. Recommended: PNG with transparency.</div>
                                        </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>

<style>
    .settings-section {
        background: #fff;
        border: 1px solid #e8e0d4;
        border-radius: 12px;
        margin-bottom: 24px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .settings-section__header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        background: #faf9f7;
        border-bottom: 1px solid #e8e0d4;
    }
    .settings-section__header .section-icon {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(201,169,110,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c9a96e;
        font-size: 16px;
    }
    .settings-section__header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 15px;
        color: #1c1c1c;
    }
    .settings-section__body {
        padding: 20px;
    }
    .color-input-group {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .color-input-group input[type="color"] {
        width: 48px;
        height: 48px;
        border: 2px solid #e8e0d4;
        border-radius: 8px;
        padding: 2px;
        cursor: pointer;
    }
    .color-input-group input[type="text"] {
        flex: 1;
    }
    .form-text {
        font-size: 12px;
        color: #888;
        margin-top: 4px;
    }
    .font-preview {
        margin-top: 8px;
        padding: 10px 14px;
        background: #faf9f7;
        border-radius: 8px;
        font-size: 14px;
        color: #1c1c1c;
        border: 1px solid #e8e0d4;
    }
    .google-fonts-hint {
        font-size: 12px;
        color: #888;
        margin-top: 6px;
    }
    .google-fonts-hint code {
        background: #f0f0f0;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
    }
    .live-preview-bar {
        height: 4px;
        border-radius: 4px;
        margin-bottom: 16px;
        background: linear-gradient(90deg, #c9a96e, #a07a52);
        transition: background 0.3s;
    }
    .preview-card {
        border: 1px solid #e8e0d4;
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.3s;
    }
    .preview-card__img {
        height: 100px;
        background: linear-gradient(135deg, #e8e0d4, #d5cdc0);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        font-size: 13px;
    }
    .preview-card__body {
        padding: 16px;
        background: #fff;
        transition: background 0.3s;
    }
    .tab-indicator {
        font-size: 13px;
        font-weight: 600;
        padding-bottom: 4px;
        border-bottom: 2px solid transparent;
        margin-right: 16px;
        transition: all 0.3s;
        cursor: default;
    }
    .preview-card__label {
        font-size: 13px;
        font-weight: 500;
        margin-top: 8px;
        transition: color 0.3s;
    }
    .preview-card__name {
        font-size: 22px;
        font-weight: 700;
        margin: 4px 0 12px;
        transition: all 0.3s;
    }
    .preview-card__name em {
        font-style: italic;
        transition: color 0.3s;
    }
    .preview-card__btn {
        padding: 8px 20px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        transition: background 0.3s, opacity 0.2s;
        cursor: pointer;
    }
    .preview-card__btn:hover {
        opacity: 0.85;
    }
    .position-sticky {
        position: sticky;
    }
    .badge-info {
        background: rgba(23, 162, 184, 0.12);
        color: #17a2b8;
        font-weight: 500;
    }
</style>

<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')