@extends('admin.layouts.app')

@section('title', 'Website Settings')

@section('content')

<style>
    /* ============================================
       WEBSITE SETTINGS - CUSTOM STYLES
    ============================================ */

    .settings-wrapper {
        padding: 0 4px;
    }

    .settings-section {
        background: #FAFBFC;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #F0F0F0;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .settings-section:hover {
        border-color: rgba(193, 18, 31, 0.08);
    }

    .settings-section .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .settings-section .section-header i {
        font-size: 18px;
        color: #C1121F;
    }

    .settings-section .section-header h5 {
        font-size: 15px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .settings-section .section-header .badge-optional {
        margin-left: auto;
        padding: 2px 12px;
        border-radius: 12px;
        background: #E8E8E8;
        color: #6B7280;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .form-group-custom {
        margin-bottom: 18px;
    }

    .form-group-custom label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .form-group-custom label .required {
        color: #DC2626;
        margin-left: 2px;
    }

    .form-control-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        color: #1A1A2E;
        background: #FFFFFF;
        transition: all 0.3s ease;
        outline: none;
    }

    .form-control-custom:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .form-control-custom.is-invalid {
        border-color: #DC2626;
    }

    .form-control-custom.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .form-control-custom::placeholder {
        color: #9CA3AF;
        font-size: 13px;
    }

    textarea.form-control-custom {
        resize: vertical;
        min-height: 80px;
    }

    .form-hint {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-top: 4px;
    }

    .error-text {
        display: block;
        color: #DC2626;
        font-size: 12px;
        margin-top: 4px;
    }

    .image-preview-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #E8E8E8;
        margin-top: 8px;
    }

    .image-preview-wrapper img {
        border-radius: 8px;
        border: 1px solid #E8E8E8;
        object-fit: contain;
    }

    .image-preview-wrapper .file-name {
        font-size: 13px;
        color: #1A1A2E;
        font-weight: 500;
    }

    .image-preview-wrapper .file-size {
        font-size: 12px;
        color: #6B7280;
    }

    .image-preview-wrapper .remove-file {
        background: none;
        border: none;
        color: #DC2626;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .image-preview-wrapper .remove-file:hover {
        transform: scale(1.2);
    }

    .file-upload-area {
        border: 2px dashed #E8E8E8;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #FFFFFF;
    }

    .file-upload-area:hover {
        border-color: #C1121F;
        background: rgba(193, 18, 31, 0.02);
    }

    .file-upload-area i {
        font-size: 28px;
        color: #C1121F;
        opacity: 0.4;
        display: block;
        margin-bottom: 6px;
    }

    .file-upload-area p {
        font-size: 14px;
        color: #6B7280;
        margin: 0;
    }

    .file-upload-area small {
        font-size: 12px;
        color: #9CA3AF;
    }

    .social-icon-label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .social-icon-label i {
        font-size: 18px;
    }

    .form-actions-settings {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid #E8E8E8;
        flex-wrap: wrap;
    }

    .btn-submit-settings {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 28px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
    }

    .btn-submit-settings:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
    }

    .btn-submit-settings:active {
        transform: scale(0.96);
    }

    .btn-reset-settings {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
    }

    .btn-reset-settings:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .form-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #E8E8E8;
    }

    .form-card-header h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .form-card-header h4 i {
        color: #C1121F;
    }

    /* Alert */
    .alert-custom {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        animation: slideDown 0.4s ease;
    }

    .alert-custom .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        color: inherit;
        opacity: 0.5;
        cursor: pointer;
        font-size: 18px;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .alert-custom .alert-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .alert-success-custom {
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        color: #16A34A;
    }

    .alert-error-custom {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #DC2626;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .settings-section {
            padding: 16px 18px;
        }

        .form-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-actions-settings {
            flex-direction: column;
        }

        .form-actions-settings .btn-submit-settings,
        .form-actions-settings .btn-reset-settings {
            width: 100%;
            justify-content: center;
        }

        .image-preview-wrapper {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

    @media (max-width: 576px) {
        .settings-section {
            padding: 12px 14px;
            border-radius: 10px;
        }

        .settings-section .section-header h5 {
            font-size: 13px;
        }

        .form-control-custom {
            font-size: 13px;
            padding: 8px 12px;
        }

        .file-upload-area {
            padding: 16px;
        }

        .file-upload-area i {
            font-size: 24px;
        }
    }
</style>

<!-- ============================================
   WEBSITE SETTINGS - REDSPIDER THEME
============================================ -->

<div class="settings-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li class="active">Website Settings</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Website Settings</h1>
            <p>
                <i class="bi bi-gear"></i> Configure your website settings
            </p>
        </div>
    </div>

    <!-- ===== ALERTS ===== -->
    @if (session('success'))
    <div class="alert-custom alert-success-custom">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    @if (session('error'))
    <div class="alert-custom alert-error-custom">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    <!-- ===== FORM CARD ===== -->
    <div class="form-card">

        <div class="form-card-header">
            <h4>
                <i class="bi bi-gear"></i>
                General Settings
            </h4>
        </div>

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

            <!-- ===== SITE INFORMATION ===== -->
            <div class="settings-section">
                <div class="section-header">
                    <i class="bi bi-globe"></i>
                    <h5>Site Information</h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Site Name</label>
                            <input type="text"
                                name="site_name"
                                class="form-control-custom"
                                value="{{ old('site_name', $setting->site_name ?? 'RedSpider') }}"
                                placeholder="Enter site name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Tagline</label>
                            <input type="text"
                                name="site_tagline"
                                class="form-control-custom"
                                value="{{ old('site_tagline', $setting->site_tagline ?? '') }}"
                                placeholder="Enter site tagline">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Logo -->
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Logo</label>
                            <input type="file"
                                name="site_logo"
                                id="logoInput"
                                class="form-control-custom @error('site_logo') is-invalid @enderror"
                                accept="image/*"
                                style="display: none;"
                                onchange="previewImage(this, 'logoPreview')">
                            <div id="logoPreviewContainer">
                                @if(isset($setting) && $setting->site_logo)
                                <div class="image-preview-wrapper">
                                    <img src="{{ asset('storage/' . $setting->site_logo) }}" alt="Logo" style="max-height: 80px;">
                                    <div>
                                        <div class="file-name">Current Logo</div>
                                        <div class="file-size">Click below to change</div>
                                    </div>
                                    <button type="button" class="remove-file" onclick="removeImage('logoInput', 'logoPreviewContainer')">
                                        <i class="bi bi-x-circle"></i>
                                    </button>
                                </div>
                                @else
                                <div class="file-upload-area" onclick="document.getElementById('logoInput').click()">
                                    <i class="bi bi-cloud-upload"></i>
                                    <p>Click to upload logo</p>
                                    <small>PNG, JPG, SVG (Max 2MB)</small>
                                </div>
                                @endif
                            </div>
                            @error('site_logo')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Favicon -->
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Favicon</label>
                            <input type="file"
                                name="site_favicon"
                                id="faviconInput"
                                class="form-control-custom @error('site_favicon') is-invalid @enderror"
                                accept="image/*"
                                style="display: none;"
                                onchange="previewImage(this, 'faviconPreview')">
                            <div id="faviconPreviewContainer">
                                @if(isset($setting) && $setting->site_favicon)
                                <div class="image-preview-wrapper">
                                    <img src="{{ asset('storage/' . $setting->site_favicon) }}" alt="Favicon" style="max-height: 40px;">
                                    <div>
                                        <div class="file-name">Current Favicon</div>
                                        <div class="file-size">Click below to change</div>
                                    </div>
                                    <button type="button" class="remove-file" onclick="removeImage('faviconInput', 'faviconPreviewContainer')">
                                        <i class="bi bi-x-circle"></i>
                                    </button>
                                </div>
                                @else
                                <div class="file-upload-area" onclick="document.getElementById('faviconInput').click()">
                                    <i class="bi bi-cloud-upload"></i>
                                    <p>Click to upload favicon</p>
                                    <small>PNG, JPG, ICO (Max 2MB)</small>
                                </div>
                                @endif
                            </div>
                            @error('site_favicon')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group-custom">
                    <label>Site Description (Meta)</label>
                    <textarea name="site_description"
                        rows="2"
                        class="form-control-custom"
                        placeholder="Enter site description">{{ old('site_description', $setting->site_description ?? '') }}</textarea>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Site Keywords (Meta)</label>
                    <input type="text"
                        name="site_keywords"
                        class="form-control-custom"
                        value="{{ old('site_keywords', $setting->site_keywords ?? '') }}"
                        placeholder="comma, separated, keywords">
                    <span class="form-hint">Comma separated keywords</span>
                </div>
            </div>

            <!-- ===== CONTACT INFORMATION ===== -->
            <div class="settings-section">
                <div class="section-header">
                    <!-- Person Lines -->
<i class="bi bi-person-lines-fill"></i>
                    <h5>Contact Information</h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Phone 1</label>
                            <input type="text"
                                name="phone_1"
                                class="form-control-custom"
                                value="{{ old('phone_1', $setting->phone_1 ?? '') }}"
                                placeholder="+1 234 567 8900">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Phone 2</label>
                            <input type="text"
                                name="phone_2"
                                class="form-control-custom"
                                value="{{ old('phone_2', $setting->phone_2 ?? '') }}"
                                placeholder="+1 234 567 8901">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Email 1</label>
                            <input type="email"
                                name="email_1"
                                class="form-control-custom"
                                value="{{ old('email_1', $setting->email_1 ?? '') }}"
                                placeholder="info@example.com">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Email 2</label>
                            <input type="email"
                                name="email_2"
                                class="form-control-custom"
                                value="{{ old('email_2', $setting->email_2 ?? '') }}"
                                placeholder="support@example.com">
                        </div>
                    </div>
                </div>

                <div class="form-group-custom">
                    <label>Address</label>
                    <textarea name="address"
                        rows="2"
                        class="form-control-custom"
                        placeholder="Enter full address">{{ old('address', $setting->address ?? '') }}</textarea>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Google Maps Embed Code</label>
                    <textarea name="map_embed"
                        rows="3"
                        class="form-control-custom"
                        placeholder="Paste Google Maps iframe embed code here...">{{ old('map_embed', $setting->map_embed ?? '') }}</textarea>
                    <span class="form-hint">Paste the full iframe code from Google Maps</span>
                </div>
            </div>

            <!-- ===== SOCIAL MEDIA ===== -->
            <div class="settings-section">
                <div class="section-header">
                    <i class="bi bi-share"></i>
                    <h5>Social Media</h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="social-icon-label">
                                <i class="bi bi-facebook" style="color: #1877F2;"></i> Facebook
                            </label>
                            <input type="url"
                                name="facebook_url"
                                class="form-control-custom"
                                value="{{ old('facebook_url', $setting->facebook_url ?? '') }}"
                                placeholder="https://facebook.com/yourpage">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="social-icon-label">
                                <i class="bi bi-instagram" style="color: #E4405F;"></i> Instagram
                            </label>
                            <input type="url"
                                name="instagram_url"
                                class="form-control-custom"
                                value="{{ old('instagram_url', $setting->instagram_url ?? '') }}"
                                placeholder="https://instagram.com/yourprofile">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="social-icon-label">
                                <i class="bi bi-linkedin" style="color: #0A66C2;"></i> LinkedIn
                            </label>
                            <input type="url"
                                name="linkedin_url"
                                class="form-control-custom"
                                value="{{ old('linkedin_url', $setting->linkedin_url ?? '') }}"
                                placeholder="https://linkedin.com/company/yourcompany">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="social-icon-label">
                                <i class="bi bi-youtube" style="color: #FF0000;"></i> YouTube
                            </label>
                            <input type="url"
                                name="youtube_url"
                                class="form-control-custom"
                                value="{{ old('youtube_url', $setting->youtube_url ?? '') }}"
                                placeholder="https://youtube.com/channel/yourchannel">
                        </div>
                    </div>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label class="social-icon-label">
                        <i class="bi bi-whatsapp" style="color: #25D366;"></i> WhatsApp Number
                    </label>
                    <input type="text"
                        name="whatsapp_number"
                        class="form-control-custom"
                        value="{{ old('whatsapp_number', $setting->whatsapp_number ?? '') }}"
                        placeholder="+971 55 5515475">
                    <span class="form-hint">Include country code</span>
                </div>
            </div>

            <!-- ===== SEO DEFAULTS ===== -->
            <div class="settings-section">
                <div class="section-header">
                    <i class="bi bi-search"></i>
                    <h5>SEO Defaults</h5>
                    <span class="badge-optional">Optional</span>
                </div>

                <div class="form-group-custom">
                    <label>Default Meta Title</label>
                    <input type="text"
                        name="default_meta_title"
                        class="form-control-custom"
                        value="{{ old('default_meta_title', $setting->default_meta_title ?? '') }}"
                        placeholder="Default SEO title for pages">
                    <span class="form-hint">Used when no meta title is set for a page</span>
                </div>

                <div class="form-group-custom">
                    <label>Default Meta Description</label>
                    <textarea name="default_meta_description"
                        rows="2"
                        class="form-control-custom"
                        placeholder="Default SEO description">{{ old('default_meta_description', $setting->default_meta_description ?? '') }}</textarea>
                    <span class="form-hint">Used when no meta description is set for a page</span>
                </div>

                <div class="form-group-custom">
                    <label>Default Meta Keywords</label>
                    <input type="text"
                        name="default_meta_keywords"
                        class="form-control-custom"
                        value="{{ old('default_meta_keywords', $setting->default_meta_keywords ?? '') }}"
                        placeholder="comma, separated, keywords">
                    <span class="form-hint">Comma separated keywords</span>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Default OG Image</label>
                    <input type="file"
                        name="default_og_image"
                        id="ogImageInput"
                        class="form-control-custom @error('default_og_image') is-invalid @enderror"
                        accept="image/*"
                        style="display: none;"
                        onchange="previewImage(this, 'ogPreview')">
                    <div id="ogPreviewContainer">
                        @if(isset($setting) && $setting->default_og_image)
                        <div class="image-preview-wrapper">
                            <img src="{{ asset('storage/' . $setting->default_og_image) }}" alt="OG Image" style="max-height: 100px;">
                            <div>
                                <div class="file-name">Current OG Image</div>
                                <div class="file-size">Click below to change</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeImage('ogImageInput', 'ogPreviewContainer')">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                        @else
                        <div class="file-upload-area" onclick="document.getElementById('ogImageInput').click()">
                            <i class="bi bi-cloud-upload"></i>
                            <p>Click to upload OG image</p>
                            <small>PNG, JPG, WEBP (Max 2MB)</small>
                        </div>
                        @endif
                    </div>
                    @error('default_og_image')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Used for social media sharing when no image is set</span>
                </div>
            </div>

            <!-- ===== FOOTER SETTINGS ===== -->
            <div class="settings-section" style="margin-bottom: 0;">
                <div class="section-header">
                   <!-- Shield -->
<i class="bi bi-shield-check"></i>
                    <h5>Footer Settings</h5>
                </div>

                <div class="form-group-custom">
                    <label>Copyright Text</label>
                    <input type="text"
                        name="footer_copyright"
                        class="form-control-custom"
                        value="{{ old('footer_copyright', $setting->footer_copyright ?? '© Copyright 2026, RedSpider. All Rights Reserved.') }}">
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Footer About Text</label>
                    <textarea name="footer_about"
                        rows="3"
                        class="form-control-custom"
                        placeholder="About text for footer">{{ old('footer_about', $setting->footer_about ?? '') }}</textarea>
                </div>
            </div>

            <!-- ===== FORM ACTIONS ===== -->
            <div class="form-actions-settings">
                <button type="submit" class="btn-submit-settings">
                    <i class="bi bi-save"></i> Save Settings
                </button>
                <button type="reset" class="btn-reset-settings">
                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                </button>
            </div>

        </form>
    </div>

</div>

<!-- ============================================
   SCRIPT
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // IMAGE PREVIEW
        // ============================================
        window.previewImage = function(input, previewId) {
            const previewContainer = document.getElementById(previewId + 'Container');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewContainer.innerHTML = `
                        <div class="image-preview-wrapper">
                            <img src="${e.target.result}" alt="Preview" style="max-height: ${previewId === 'faviconPreview' ? '40px' : '100px'};">
                            <div>
                                <div class="file-name">${file.name}</div>
                                <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeImage('${input.id}', '${previewId}Container')">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        };

        // ============================================
        // REMOVE IMAGE
        // ============================================
        window.removeImage = function(inputId, containerId) {
            const previewContainer = document.getElementById(containerId);
            const imageInput = document.getElementById(inputId);

            const isLogo = inputId === 'logoInput';
            const isFavicon = inputId === 'faviconInput';
            const isOg = inputId === 'ogImageInput';

            if (previewContainer) {
                let label = 'image';
                let sizeHint = 'PNG, JPG, WEBP (Max 2MB)';
                if (isLogo) {
                    label = 'logo';
                    sizeHint = 'PNG, JPG, SVG (Max 2MB)';
                }
                if (isFavicon) {
                    label = 'favicon';
                    sizeHint = 'PNG, JPG, ICO (Max 2MB)';
                }
                if (isOg) {
                    label = 'OG image';
                    sizeHint = 'PNG, JPG, WEBP (Max 2MB)';
                }

                previewContainer.innerHTML = `
                    <div class="file-upload-area" onclick="document.getElementById('${inputId}').click()">
                        <i class="bi bi-cloud-upload"></i>
                        <p>Click to upload ${label}</p>
                        <small>${sizeHint}</small>
                    </div>
                `;
            }

            if (imageInput) {
                imageInput.value = '';
            }
        };

        // ============================================
        // FORM VALIDATION
        // ============================================
        document.querySelectorAll('.form-control-custom').forEach(function(input) {
            input.addEventListener('input', function() {
                this.classList.remove('is-invalid');
            });
        });

        console.log('✅ Website Settings loaded successfully!');
    });
</script>

@endsection