@extends('admin.layouts.master')

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

@section('css')
<style>
/* ═══════════════════════════════════════════════
   SETTINGS PAGE — Full theme-aware design
   light / dim / dark সব mode এ কাজ করে
═══════════════════════════════════════════════ */

.st-wrap { padding: 10px; margin: 0 auto; }

/* ── Header ── */
.st-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--line);
}
.st-header h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.4px;
}
.st-header h1 i { color: var(--acc); font-size: 17px; }
.st-header p { font-size: 13px; color: var(--muted); margin: 4px 0 0; font-weight: 500; }

/* ── Main Card ── */
.st-card {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    transition: background .3s, border-color .3s;
}

/* ── Tabs ── */
.st-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--line);
    background: var(--surface);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.st-tabs::-webkit-scrollbar { display: none; }

.st-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .18s, border-color .18s, background .18s;
    text-decoration: none;
}
.st-tab:hover { color: var(--acc); background: var(--sb-hover-bg); }
.st-tab.active { color: var(--acc); border-bottom-color: var(--acc); background: var(--panel); }
.st-tab i { font-size: 12px; }

/* ── Tab Body ── */
.st-tab-content { display: none; padding: 24px; }
.st-tab-content.active { display: block; }

/* ── Section Label ── */
.st-sec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-mid);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 18px;
}
.st-sec i { font-size: 11px; }

/* ── Divider ── */
.st-divider { height: 1px; background: var(--line); margin: 24px 0; }

/* ── Grid ── */
.st-grid { display: grid; gap: 16px; margin-bottom: 0; }
.st-grid.g2 { grid-template-columns: 1fr 1fr; }
.st-grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.st-grid.g1 { grid-template-columns: 1fr; }
@media(max-width:768px) {
    .st-grid.g2, .st-grid.g3 { grid-template-columns: 1fr; }
}

/* ── Form Group ── */
.st-fg { margin-bottom: 0; }
.st-fg label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 6px;
}
.st-fg label i { margin-right: 4px; font-size: 10px; }

/* ── Inputs ── */
.st-input,
.st-textarea {
    width: 100%;
    background: var(--surface) !important;
    border: 1.5px solid var(--line) !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 500;
    padding: 9px 12px !important;
    border-radius: 0 !important;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
}
.st-input:focus,
.st-textarea:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent) !important;
}
.st-input::placeholder, .st-textarea::placeholder { color: var(--muted); opacity: .6; }
.st-textarea { resize: vertical; min-height: 80px; }
.st-hint { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }

/* ── Upload Zone ── */
.st-upload {
    border: 2px dashed var(--line);
    background: var(--surface);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.st-upload:hover { border-color: var(--acc); background: var(--acc-soft); }
.st-upload i { font-size: 26px; color: var(--muted); opacity: .5; display: block; margin-bottom: 6px; }
.st-upload span { font-size: 12px; font-weight: 600; color: var(--muted); }
.st-upload input[type="file"] { display: none; }

.st-preview {
    margin-top: 10px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-align: center;
}
.st-preview img { max-height: 100px; max-width: 100%; }

/* ── Info Box ── */
.st-info {
    background: var(--acc-soft);
    border-left: 4px solid var(--acc);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.st-info i { color: var(--acc); font-size: 14px; flex-shrink: 0; }
.st-info small { color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* ── Footer ── */
.st-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: var(--surface);
    border-top: 1.5px solid var(--line);
    flex-wrap: wrap;
}

/* ── Save Button ── */
.st-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--acc);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--acc) 40%, transparent);
    white-space: nowrap;
}
.st-save:hover {
    background: var(--acc-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--acc) 50%, transparent);
}
.st-save:active { transform: translateY(0); }
</style>
@endsection


@section('content')
<div class="st-wrap">

    {{-- Header --}}
    <div class="st-header">
        <div>
            <h1><i class="fas fa-cog"></i>Website Settings</h1>
            <p>Configure your website globally</p>
        </div>
    </div>

    @include('admin.partial.validation-error')

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

        <div class="st-card">

            {{-- ── Tabs ── --}}
            <div class="st-tabs" id="stTabs">
                <a class="st-tab active" data-tab="company"><i class="fas fa-building"></i>Company</a>
                <a class="st-tab" data-tab="social"><i class="fas fa-share-alt"></i>Social</a>
                <a class="st-tab" data-tab="apps"><i class="fas fa-mobile-alt"></i>Apps</a>
                <a class="st-tab" data-tab="logos"><i class="fas fa-image"></i>Logos</a>
                <a class="st-tab" data-tab="marquee"><i class="fas fa-scroll"></i>Marquee</a>
                <a class="st-tab" data-tab="seo"><i class="fas fa-search"></i>SEO</a>
                <a class="st-tab" data-tab="og"><i class="fas fa-share-square"></i>Open Graph</a>
                <a class="st-tab" data-tab="twitter"><i class="fab fa-twitter"></i>Twitter</a>
                <a class="st-tab" data-tab="google"><i class="fab fa-google"></i>Google</a>
            </div>

            {{-- ════════════════ COMPANY ════════════════ --}}
            <div class="st-tab-content active" id="tab-company">
                <div class="st-sec"><i class="fas fa-info-circle"></i>Basic Information</div>
                <div class="st-grid g3">
                    <div class="st-fg">
                        <label>Site Title</label>
                        <input type="text" name="title" class="st-input" value="{{ old('title', $asian->title ?? '') }}" placeholder="Enter site title">
                    </div>
                    <div class="st-fg">
                        <label>Tagline</label>
                        <input type="text" name="tagline" class="st-input" value="{{ old('tagline', $asian->tagline ?? '') }}" placeholder="Your tagline">
                    </div>
                    <div class="st-fg">
                        <label>CEO Name</label>
                        <input type="text" name="ceo" class="st-input" value="{{ old('ceo', $asian->ceo ?? '') }}" placeholder="CEO name">
                    </div>
                    <div class="st-fg">
                        <label>Director</label>
                        <input type="text" name="director" class="st-input" value="{{ old('director', $asian->director ?? '') }}" placeholder="Director name">
                    </div>
                    <div class="st-fg">
                        <label>Sompadok</label>
                        <input type="text" name="sompadok" class="st-input" value="{{ old('sompadok', $asian->sompadok ?? '') }}" placeholder="Sompadok name">
                    </div>
                    <div class="st-fg">
                        <label>Phone Number</label>
                        <input type="text" name="phone" class="st-input" value="{{ old('phone', $asian->phone ?? '') }}" placeholder="+880 XXX-XXXXXXX">
                    </div>
                </div>
                <div class="st-divider"></div>
                <div class="st-sec"><i class="fas fa-envelope"></i>Contact Details</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>Email Address</label>
                        <input type="email" name="email" class="st-input" value="{{ old('email', $asian->email ?? '') }}" placeholder="contact@example.com">
                    </div>
                    <div class="st-fg">
                        <label>Complete Address</label>
                        <textarea name="address" class="st-textarea" rows="3" placeholder="Enter full address">{{ old('address', $asian->address ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- ════════════════ SOCIAL ════════════════ --}}
            <div class="st-tab-content" id="tab-social">
                <div class="st-sec"><i class="fas fa-share-alt"></i>Social Media Profiles</div>
                <div class="st-grid g2">
                    @foreach ([
                        'facebook'  => ['icon' => 'fab fa-facebook',  'ph' => 'https://facebook.com/yourpage'],
                        'twitter'   => ['icon' => 'fab fa-twitter',   'ph' => 'https://twitter.com/youraccount'],
                        'linkedin'  => ['icon' => 'fab fa-linkedin',  'ph' => 'https://linkedin.com/company/yourcompany'],
                        'instagram' => ['icon' => 'fab fa-instagram', 'ph' => 'https://instagram.com/youraccount'],
                        'youtube'   => ['icon' => 'fab fa-youtube',   'ph' => 'https://youtube.com/c/yourchannel'],
                        'telegram'  => ['icon' => 'fab fa-telegram',  'ph' => 'https://t.me/yourchannel'],
                    ] as $key => $d)
                    <div class="st-fg">
                        <label><i class="{{ $d['icon'] }}"></i>{{ ucfirst($key) }}</label>
                        <input type="text" name="{{ $key }}" class="st-input" value="{{ old($key, $asian->$key ?? '') }}" placeholder="{{ $d['ph'] }}">
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- ════════════════ APPS ════════════════ --}}
            <div class="st-tab-content" id="tab-apps">
                <div class="st-sec"><i class="fas fa-mobile-alt"></i>Mobile Applications</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label><i class="fab fa-android"></i>Android App Link</label>
                        <input type="text" name="android_download" class="st-input" value="{{ old('android_download', $asian->android_download ?? '') }}" placeholder="https://play.google.com/store/apps/details?id=...">
                        <div class="st-hint">Google Play Store URL</div>
                    </div>
                    <div class="st-fg">
                        <label><i class="fab fa-apple"></i>Apple App Link</label>
                        <input type="text" name="apple_download" class="st-input" value="{{ old('apple_download', $asian->apple_download ?? '') }}" placeholder="https://apps.apple.com/app/...">
                        <div class="st-hint">Apple App Store URL</div>
                    </div>
                </div>
            </div>

            {{-- ════════════════ LOGOS ════════════════ --}}
            <div class="st-tab-content" id="tab-logos">
                <div class="st-sec"><i class="fas fa-image"></i>Brand Assets</div>
                <div class="st-grid g3">
                    @php
                        $logos = [
                            'header_logo' => 'Header Logo',
                            'footer_logo' => 'Footer Logo',
                            'mobile_logo' => 'Mobile Logo',
                            'favicon'     => 'Favicon',
                            'placeholder' => 'Placeholder',
                        ];
                    @endphp
                    @foreach($logos as $key => $lbl)
                    <div class="st-fg">
                        <label>{{ $lbl }}</label>
                        <label class="st-upload" for="upload_{{ $key }}">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload</span>
                            <input type="file" id="upload_{{ $key }}" name="{{ $key }}" accept="image/*" class="st-file-input">
                        </label>
                        <div class="st-preview" id="preview_{{ $key }}" style="{{ empty($asian->$key) ? 'display:none' : '' }}">
                            @if(!empty($asian->$key))
                                <img src="{{ asset($asian->$key) }}" alt="{{ $lbl }}">
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- ════════════════ MARQUEE ════════════════ --}}
            <div class="st-tab-content" id="tab-marquee">
                <div class="st-sec"><i class="fas fa-scroll"></i>Scrolling Announcement</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>Marquee Title</label>
                        <input type="text" name="marquee_title" class="st-input" value="{{ old('marquee_title', $asian->marquee_title ?? '') }}" placeholder="Breaking News, Latest Updates">
                    </div>
                    <div class="st-fg">
                        <label>Marquee Banner Image</label>
                        <label class="st-upload" for="upload_marquee_banner">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload</span>
                            <input type="file" id="upload_marquee_banner" name="marquee_banner" accept="image/*" class="st-file-input">
                        </label>
                        <div class="st-preview" id="preview_marquee_banner" style="{{ empty($asian->marquee_banner) ? 'display:none' : '' }}">
                            @if(!empty($asian->marquee_banner))
                                <img src="{{ asset('storage/' . $asian->marquee_banner) }}" alt="Marquee">
                            @endif
                        </div>
                    </div>
                </div>
                <div class="st-grid g1" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>Marquee News Text</label>
                        <textarea name="marquee_news" class="st-textarea" rows="4" placeholder="Enter scrolling news text...">{{ old('marquee_news', $asian->marquee_news ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- ════════════════ SEO ════════════════ --}}
            <div class="st-tab-content" id="tab-seo">
                <div class="st-sec"><i class="fas fa-search"></i>Search Engine Optimization</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>Meta Title</label>
                        <input type="text" name="meta_title" class="st-input" value="{{ old('meta_title', $asian->meta_title ?? '') }}" placeholder="60-70 characters">
                        <div class="st-hint">Recommended: 50-60 characters</div>
                    </div>
                    <div class="st-fg">
                        <label>Meta Author</label>
                        <input type="text" name="meta_author" class="st-input" value="{{ old('meta_author', $asian->meta_author ?? '') }}" placeholder="Your name or organization">
                    </div>
                </div>
                <div class="st-grid g1" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>Meta Description</label>
                        <textarea name="meta_description" class="st-textarea" rows="3" placeholder="150-160 characters recommended">{{ old('meta_description', $asian->meta_description ?? '') }}</textarea>
                        <div class="st-hint">Recommended: 150-160 characters</div>
                    </div>
                    <div class="st-fg">
                        <label>Meta Keywords</label>
                        <input type="text" name="meta_keywords" class="st-input" value="{{ old('meta_keywords', $asian->meta_keywords ?? '') }}" placeholder="keyword1, keyword2, keyword3">
                    </div>
                </div>
            </div>

            {{-- ════════════════ OPEN GRAPH ════════════════ --}}
            <div class="st-tab-content" id="tab-og">
                <div class="st-sec"><i class="fas fa-share-square"></i>Facebook & Social Sharing</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>OG Title</label>
                        <input type="text" name="og_title" class="st-input" value="{{ old('og_title', $asian->og_title ?? '') }}" placeholder="Title for social sharing">
                    </div>
                    <div class="st-fg">
                        <label>OG URL</label>
                        <input type="text" name="og_url" class="st-input" value="{{ old('og_url', $asian->og_url ?? '') }}" placeholder="https://yourwebsite.com">
                    </div>
                </div>
                <div class="st-grid g1" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>OG Description</label>
                        <textarea name="og_description" class="st-textarea" rows="3" placeholder="Description for social sharing">{{ old('og_description', $asian->og_description ?? '') }}</textarea>
                    </div>
                </div>
                <div class="st-grid g2" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>OG Image</label>
                        <label class="st-upload" for="upload_og_image">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload</span>
                            <input type="file" id="upload_og_image" name="og_image" accept="image/*" class="st-file-input">
                        </label>
                        <div class="st-preview" id="preview_og_image" style="{{ empty($asian->og_image) ? 'display:none' : '' }}">
                            @if(!empty($asian->og_image))
                                <img src="{{ asset('storage/' . $asian->og_image) }}" alt="OG Image">
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════════════ TWITTER ════════════════ --}}
            <div class="st-tab-content" id="tab-twitter">
                <div class="st-sec"><i class="fab fa-twitter"></i>Twitter Card Configuration</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>Twitter Title</label>
                        <input type="text" name="twitter_title" class="st-input" value="{{ old('twitter_title', $asian->twitter_title ?? '') }}" placeholder="Title for Twitter cards">
                    </div>
                    <div class="st-fg">
                        <label>Twitter Card Type</label>
                        <input type="text" name="twitter_card_type" class="st-input" value="{{ old('twitter_card_type', $asian->twitter_card_type ?? '') }}" placeholder="summary_large_image">
                    </div>
                </div>
                <div class="st-grid g1" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>Twitter Description</label>
                        <textarea name="twitter_description" class="st-textarea" rows="3" placeholder="Description for Twitter cards">{{ old('twitter_description', $asian->twitter_description ?? '') }}</textarea>
                    </div>
                </div>
                <div class="st-grid g2" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>Twitter Image</label>
                        <label class="st-upload" for="upload_twitter_image">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload</span>
                            <input type="file" id="upload_twitter_image" name="twitter_image" accept="image/*" class="st-file-input">
                        </label>
                        <div class="st-preview" id="preview_twitter_image" style="{{ empty($asian->twitter_image) ? 'display:none' : '' }}">
                            @if(!empty($asian->twitter_image))
                                <img src="{{ asset('storage/' . $asian->twitter_image) }}" alt="Twitter Image">
                            @endif
                        </div>
                    </div>
                    <div>
                        <div class="st-fg" style="margin-bottom:16px;">
                            <label>Twitter Site (@handle)</label>
                            <input type="text" name="twitter_site" class="st-input" value="{{ old('twitter_site', $asian->twitter_site ?? '') }}" placeholder="@yoursite">
                        </div>
                        <div class="st-fg">
                            <label>Twitter Creator (@handle)</label>
                            <input type="text" name="twitter_creator" class="st-input" value="{{ old('twitter_creator', $asian->twitter_creator ?? '') }}" placeholder="@creator">
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════════════ GOOGLE ════════════════ --}}
            <div class="st-tab-content" id="tab-google">
                <div class="st-sec"><i class="fab fa-google"></i>Google Integration & Analytics</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>Google Analytics ID</label>
                        <input type="text" name="analytics_id" class="st-input" value="{{ old('analytics_id', $asian->analytics_id ?? '') }}" placeholder="UA-XXXXXXXXX-X or G-XXXXXXXXXX">
                    </div>
                    <div class="st-fg">
                        <label>Google Site Verification</label>
                        <input type="text" name="site_verification" class="st-input" value="{{ old('site_verification', $asian->site_verification ?? '') }}" placeholder="google-site-verification=code">
                    </div>
                </div>
                <div class="st-grid g1" style="margin-top:16px;">
                    <div class="st-fg">
                        <label>Google AdSense Script</label>
                        <textarea name="adsense_script" class="st-textarea" rows="4" placeholder="<script>...</script>">{{ old('adsense_script', $asian->adsense_script ?? '') }}</textarea>
                    </div>
                    <div class="st-fg">
                        <label>Google Tag Manager Script</label>
                        <textarea name="tag_manager_script" class="st-textarea" rows="4" placeholder="<script>...</script>">{{ old('tag_manager_script', $asian->tag_manager_script ?? '') }}</textarea>
                    </div>
                </div>
                <div class="st-divider"></div>
                <div class="st-sec"><i class="fas fa-robot"></i>reCAPTCHA Settings</div>
                <div class="st-grid g2">
                    <div class="st-fg">
                        <label>reCAPTCHA Site Key</label>
                        <input type="text" name="reCAPTCHA_site_key" class="st-input" value="{{ old('reCAPTCHA_site_key', $asian->reCAPTCHA_site_key ?? '') }}" placeholder="Public site key">
                    </div>
                    <div class="st-fg">
                        <label>reCAPTCHA Secret Key</label>
                        <input type="text" name="reCAPTCHA_secret_key" class="st-input" value="{{ old('reCAPTCHA_secret_key', $asian->reCAPTCHA_secret_key ?? '') }}" placeholder="Secret key">
                    </div>
                </div>
            </div>

            {{-- ── Footer ── --}}
            <div class="st-footer">
                <div class="st-info">
                    <i class="fas fa-check-circle"></i>
                    <small>Changes will be applied globally to the frontend immediately after saving.</small>
                </div>
                <button type="submit" class="st-save">
                    <i class="fas fa-save"></i> Save All Settings
                </button>
            </div>

        </div>
    </form>
</div>
@endsection


@section('script')
<script>
$(function () {

    /* ── Custom Tabs ── */
    $('.st-tab').on('click', function (e) {
        e.preventDefault();
        var tab = $(this).data('tab');
        $('.st-tab').removeClass('active');
        $(this).addClass('active');
        $('.st-tab-content').removeClass('active');
        $('#tab-' + tab).addClass('active');
    });

    /* ── Image Preview ── */
    $(document).on('change', '.st-file-input', function () {
        var file = this.files[0];
        if (!file) return;
        var inputId  = $(this).attr('id');                          // e.g. upload_header_logo
        var previewId = 'preview_' + inputId.replace('upload_', ''); // e.g. preview_header_logo
        var $preview = $('#' + previewId);

        var reader = new FileReader();
        reader.onload = function (e) {
            $preview.show().html('<img src="' + e.target.result + '" alt="Preview">');
        };
        reader.readAsDataURL(file);
    });

});
</script>
@endsection