@extends('admin.layouts.master')

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

@section('css')
<style>
    /* ==================== ADMIN LTE 3 COMPATIBLE STYLING ==================== */

    .content-header {
        background: linear-gradient(90deg, #1f3a6e 0%, #2d5a9e 100%);
        padding: 1rem 1.5rem !important;
        margin-bottom: 2rem;
        border-radius: 8px;
    }

    .content-header h1 {
        color: white;
        font-size: 1.8rem;
        font-weight: 700;
        margin: 0;
    }

    .content-header .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0.5rem 0 0 0;
    }

    .content-header .breadcrumb a {
        color: rgba(255,255,255,0.8);
    }

    .content-header .breadcrumb-item.active {
        color: rgba(255,255,255,0.9);
    }

    /* ==================== MAIN CARD STYLING ==================== */
    .card {
        border: 1px solid #dee2e6 !important;
        border-radius: 0.35rem !important;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.125) !important;
    }

    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    /* ==================== TAB STYLING ==================== */
    .nav-tabs {
        border-bottom: 2px solid #dee2e6 !important;
        gap: 0;
    }

    .nav-tabs .nav-link {
        color: #6c757d;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 600;
        font-size: 0.9rem;
        background: transparent !important;
        transition: all 0.3s ease;
    }

    .nav-tabs .nav-link:hover {
        color: #007bff;
        border-bottom-color: #007bff !important;
        background: rgba(0, 123, 255, 0.05) !important;
    }

    .nav-tabs .nav-link.active {
        color: #007bff !important;
        background: transparent !important;
        border-bottom-color: #007bff !important;
        box-shadow: none;
    }

    /* ==================== CARD HEADER ==================== */
    .card-header {
        background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border-bottom: 1px solid #dee2e6 !important;
        padding: 1rem !important;
    }

    .card-header h3 {
        color: #212529;
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
    }

    /* ==================== CARD BODY ==================== */
    .card-body {
        padding: 1.5rem !important;
    }

    .tab-content {
        padding: 1.5rem 0 !important;
    }

    /* ==================== FORM LABELS ==================== */
    label {
        color: #212529;
        font-weight: 700;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-control {
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    textarea.form-control {
        resize: vertical;
    }

    /* ==================== SECTION BADGES ==================== */
    .section-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
        color: white;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .section-badge i {
        margin-right: 0.5rem;
    }

    /* ==================== SECTION DIVIDER ==================== */
    .section-divider {
        border-top: 1px solid #dee2e6;
        margin: 2rem 0 1.5rem 0;
    }

    /* ==================== INFO BOX ==================== */
    .info-box {
        background: #f8f9fa;
        border-left: 4px solid #007bff;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
    }

    .info-box i {
        color: #007bff;
        margin-right: 0.5rem;
    }

    .info-box small {
        color: #6c757d;
        display: block;
        margin-top: 0.3rem;
    }

    /* ==================== BUTTONS ==================== */
    .btn {
        border-radius: 0.25rem;
        font-weight: 600;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        transition: all 0.15s ease-in-out;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        transform: translateY(-1px);
        box-shadow: 0 0.5rem 1rem rgba(0, 123, 255, 0.3);
    }

    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #5a6268;
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #218838;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1.1rem;
    }

    /* ==================== IMAGE UPLOAD ==================== */
    .custom-file {
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }

    .custom-file-input {
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0;
        opacity: 0;
    }

    .custom-file-label {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        display: block;
        padding: 0.375rem 0.75rem;
        font-weight: 400;
        line-height: 1.5;
        color: #6c757d;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

    .custom-file-input:lang(en)~.custom-file-label::after {
        content: "Browse";
    }

    .custom-file-label::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        padding: 0.375rem 0.75rem;
        content: "Browse";
        background-color: #e9ecef;
        border-left: inherit;
        border-radius: 0 0.25rem 0.25rem 0;
    }

    .image-preview-wrapper {
        margin-top: 0.8rem;
        padding: 1rem;
        background: #f8f9fa;
        border: 1px dashed #dee2e6;
        border-radius: 0.25rem;
        text-align: center;
    }

    .image-preview-wrapper img {
        max-height: 100px;
        max-width: 100%;
    }

    /* ==================== CARD FOOTER ==================== */
    .card-footer {
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        padding: 1.5rem;
    }

    .btn-block {
        display: block;
        width: 100%;
    }

    /* ==================== ROW SPACING ==================== */
    .mb-4 {
        margin-bottom: 1.5rem;
    }

    /* ==================== TEXT UTILITIES ==================== */
    .text-muted {
        color: #6c757d !important;
    }

    .text-info {
        color: #17a2b8 !important;
    }

    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 768px) {
        .content-header h1 {
            font-size: 1.3rem;
        }

        .nav-tabs .nav-link {
            padding: 0.5rem 1rem !important;
            font-size: 0.85rem;
        }

        .card-body {
            padding: 1rem !important;
        }

        .btn {
            width: 100%;
            margin-top: 0.5rem;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1 class="m-0">⚙️ Website Settings</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        <!-- Navigation Tabs -->
                        <div class="card-header p-0 pt-1">
                            <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="company-tab" data-toggle="pill" href="#company" role="tab" aria-controls="company" aria-selected="true">
                                        <i class="fas fa-building"></i> Company Info
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="social-tab" data-toggle="pill" href="#social" role="tab" aria-controls="social" aria-selected="false">
                                        <i class="fas fa-share-alt"></i> Social Links
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="apps-tab" data-toggle="pill" href="#apps" role="tab" aria-controls="apps" aria-selected="false">
                                        <i class="fas fa-mobile-alt"></i> Apps
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="logos-tab" data-toggle="pill" href="#logos" role="tab" aria-controls="logos" aria-selected="false">
                                        <i class="fas fa-image"></i> Logos
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="marquee-tab" data-toggle="pill" href="#marquee" role="tab" aria-controls="marquee" aria-selected="false">
                                        <i class="fas fa-scroll"></i> Marquee
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="seo-tab" data-toggle="pill" href="#seo" role="tab" aria-controls="seo" aria-selected="false">
                                        <i class="fas fa-search"></i> SEO
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="og-tab" data-toggle="pill" href="#og" role="tab" aria-controls="og" aria-selected="false">
                                        <i class="fas fa-share-square"></i> Open Graph
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="twitter-tab" data-toggle="pill" href="#twitter" role="tab" aria-controls="twitter" aria-selected="false">
                                        <i class="fab fa-twitter"></i> Twitter
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="google-tab" data-toggle="pill" href="#google" role="tab" aria-controls="google" aria-selected="false">
                                        <i class="fab fa-google"></i> Google
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-four-tabContent">

                                <!-- COMPANY INFO TAB -->
                                <div class="tab-pane fade show active" id="company" role="tabpanel" aria-labelledby="company-tab">
                                    <div class="section-badge"><i class="fas fa-info-circle"></i> Basic Information</div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Site Title</label>
                                                <input type="text" name="title" class="form-control" value="{{ old('title', $asian->title ?? '') }}" placeholder="Enter site title">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Tagline</label>
                                                <input type="text" name="tagline" class="form-control" value="{{ old('tagline', $asian->tagline ?? '') }}" placeholder="Your tagline">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>CEO Name</label>
                                                <input type="text" name="ceo" class="form-control" value="{{ old('ceo', $asian->ceo ?? '') }}" placeholder="CEO name">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Director</label>
                                                <input type="text" name="director" class="form-control" value="{{ old('director', $asian->director ?? '') }}" placeholder="Director name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Sompadok</label>
                                                <input type="text" name="sompadok" class="form-control" value="{{ old('sompadok', $asian->sompadok ?? '') }}" placeholder="Sompadok name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Phone Number</label>
                                                <input type="text" name="phone" class="form-control" value="{{ old('phone', $asian->phone ?? '') }}" placeholder="+880 XXX-XXXXXXX">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="section-divider"></div>
                                    <div class="section-badge"><i class="fas fa-envelope"></i> Contact Details</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Email Address</label>
                                                <input type="email" name="email" class="form-control" value="{{ old('email', $asian->email ?? '') }}" placeholder="contact@example.com">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Complete Address</label>
                                                <textarea name="address" class="form-control" rows="3" placeholder="Enter full address">{{ old('address', $asian->address ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- SOCIAL LINKS TAB -->
                                <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
                                    <div class="section-badge"><i class="fas fa-share-alt"></i> Social Media Profiles</div>

                                    <div class="row">
                                        @foreach ([
                                            'facebook' => ['icon' => '📘', 'placeholder' => 'https://facebook.com/yourpage'],
                                            'twitter' => ['icon' => '🐦', 'placeholder' => 'https://twitter.com/youraccount'],
                                            'linkedin' => ['icon' => '💼', 'placeholder' => 'https://linkedin.com/company/yourcompany'],
                                            'instagram' => ['icon' => '📷', 'placeholder' => 'https://instagram.com/youraccount'],
                                            'youtube' => ['icon' => '🎥', 'placeholder' => 'https://youtube.com/c/yourchannel'],
                                            'telegram' => ['icon' => '✈️', 'placeholder' => 'https://t.me/yourchannel']
                                        ] as $social => $data)
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>{{ $data['icon'] }} {{ ucfirst($social) }} Profile</label>
                                                    <input type="text" name="{{ $social }}" class="form-control" value="{{ old($social, $asian->$social ?? '') }}" placeholder="{{ $data['placeholder'] }}">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- APPS TAB -->
                                <div class="tab-pane fade" id="apps" role="tabpanel" aria-labelledby="apps-tab">
                                    <div class="section-badge"><i class="fas fa-mobile-alt"></i> Mobile Applications</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>📱 Android App Link</label>
                                                <input type="text" name="android_download" class="form-control" value="{{ old('android_download', $asian->android_download ?? '') }}" placeholder="https://play.google.com/store/apps/details?id=...">
                                                <small class="form-text text-muted">Google Play Store URL</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>🍎 Apple App Link</label>
                                                <input type="text" name="apple_download" class="form-control" value="{{ old('apple_download', $asian->apple_download ?? '') }}" placeholder="https://apps.apple.com/app/...">
                                                <small class="form-text text-muted">Apple App Store URL</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- LOGOS TAB -->
                                <div class="tab-pane fade" id="logos" role="tabpanel" aria-labelledby="logos-tab">
                                    <div class="section-badge"><i class="fas fa-image"></i> Brand Assets</div>

                                    <div class="row">
                                        @php
                                            $logoFields = [
                                                'header_logo' => '🎨 Header Logo',
                                                'footer_logo' => '🎨 Footer Logo',
                                                'mobile_logo' => '📱 Mobile Logo',
                                                'favicon' => '⭐ Favicon',
                                                'placeholder' => '🖼️ Placeholder'
                                            ];
                                        @endphp
                                        @foreach($logoFields as $key => $label)
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>{{ $label }}</label>
                                                @include('admin.partial.image', [
                                                    'inputId' => $key.'Input',
                                                    'previewId' => $key.'Preview',
                                                    'cancelId' => $key.'Cancel',
                                                    'name' => $key,
                                                    'placeholder' => asset($asian->$key ?? ''),
                                                ])
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- MARQUEE TAB -->
                                <div class="tab-pane fade" id="marquee" role="tabpanel" aria-labelledby="marquee-tab">
                                    <div class="section-badge"><i class="fas fa-scroll"></i> Scrolling Announcement</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Marquee Title</label>
                                                <input type="text" name="marquee_title" class="form-control" value="{{ old('marquee_title', $asian->marquee_title ?? '') }}" placeholder="Breaking News, Latest Updates">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Marquee Banner Image</label>
                                                <input type="file" name="marquee_banner" class="form-control-file">
                                                @if (!empty($asian->marquee_banner))
                                                    <div class="image-preview-wrapper">
                                                        <img src="{{ asset('storage/' . $asian->marquee_banner) }}" alt="Marquee Banner">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Marquee News Text</label>
                                                <textarea name="marquee_news" class="form-control" rows="4" placeholder="Enter scrolling news text...">{{ old('marquee_news', $asian->marquee_news ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- SEO TAB -->
                                <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
                                    <div class="section-badge"><i class="fas fa-search"></i> Search Engine Optimization</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Meta Title</label>
                                                <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $asian->meta_title ?? '') }}" placeholder="60-70 characters">
                                                <small class="form-text text-muted">Recommended: 50-60 characters</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Meta Author</label>
                                                <input type="text" name="meta_author" class="form-control" value="{{ old('meta_author', $asian->meta_author ?? '') }}" placeholder="Your name or organization">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Meta Description</label>
                                                <textarea name="meta_description" class="form-control" rows="3" placeholder="150-160 characters recommended">{{ old('meta_description', $asian->meta_description ?? '') }}</textarea>
                                                <small class="form-text text-muted">Recommended: 150-160 characters</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Meta Keywords</label>
                                                <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', $asian->meta_keywords ?? '') }}" placeholder="keyword1, keyword2, keyword3">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- OPEN GRAPH TAB -->
                                <div class="tab-pane fade" id="og" role="tabpanel" aria-labelledby="og-tab">
                                    <div class="section-badge"><i class="fas fa-share-square"></i> Facebook & Social Sharing</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>OG Title</label>
                                                <input type="text" name="og_title" class="form-control" value="{{ old('og_title', $asian->og_title ?? '') }}" placeholder="Title for social sharing">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>OG URL</label>
                                                <input type="text" name="og_url" class="form-control" value="{{ old('og_url', $asian->og_url ?? '') }}" placeholder="https://yourwebsite.com">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>OG Description</label>
                                                <textarea name="og_description" class="form-control" rows="3" placeholder="Description for social sharing">{{ old('og_description', $asian->og_description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>OG Image</label>
                                                <input type="file" name="og_image" class="form-control-file">
                                                @if (!empty($asian->og_image))
                                                    <div class="image-preview-wrapper">
                                                        <img src="{{ asset('storage/' . $asian->og_image) }}">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- TWITTER TAB -->
                                <div class="tab-pane fade" id="twitter" role="tabpanel" aria-labelledby="twitter-tab">
                                    <div class="section-badge"><i class="fab fa-twitter"></i> Twitter Card Configuration</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Twitter Title</label>
                                                <input type="text" name="twitter_title" class="form-control" value="{{ old('twitter_title', $asian->twitter_title ?? '') }}" placeholder="Title for Twitter cards">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Twitter Card Type</label>
                                                <input type="text" name="twitter_card_type" class="form-control" value="{{ old('twitter_card_type', $asian->twitter_card_type ?? '') }}" placeholder="summary_large_image">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Twitter Description</label>
                                                <textarea name="twitter_description" class="form-control" rows="3" placeholder="Description for Twitter cards">{{ old('twitter_description', $asian->twitter_description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Twitter Image</label>
                                                <input type="file" name="twitter_image" class="form-control-file">
                                                @if (!empty($asian->twitter_image))
                                                    <div class="image-preview-wrapper">
                                                        <img src="{{ asset('storage/' . $asian->twitter_image) }}">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Twitter Site (@handle)</label>
                                                <input type="text" name="twitter_site" class="form-control" value="{{ old('twitter_site', $asian->twitter_site ?? '') }}" placeholder="@yoursite">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Twitter Creator (@handle)</label>
                                                <input type="text" name="twitter_creator" class="form-control" value="{{ old('twitter_creator', $asian->twitter_creator ?? '') }}" placeholder="@creator">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- GOOGLE TAB -->
                                <div class="tab-pane fade" id="google" role="tabpanel" aria-labelledby="google-tab">
                                    <div class="section-badge"><i class="fab fa-google"></i> Google Integration & Analytics</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Google Analytics ID</label>
                                                <input type="text" name="analytics_id" class="form-control" placeholder="UA-XXXXXXXXX-X or G-XXXXXXXXXX" value="{{ old('analytics_id', $asian->analytics_id ?? '') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Google Site Verification</label>
                                                <input type="text" name="site_verification" class="form-control" placeholder="google-site-verification=code" value="{{ old('site_verification', $asian->site_verification ?? '') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Google AdSense Script</label>
                                                <textarea name="adsense_script" class="form-control" rows="4" placeholder="<script>...</script>">{{ old('adsense_script', $asian->adsense_script ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Google Tag Manager Script</label>
                                                <textarea name="tag_manager_script" class="form-control" rows="4" placeholder="<script>...</script>">{{ old('tag_manager_script', $asian->tag_manager_script ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="section-divider"></div>
                                    <div class="section-badge"><i class="fas fa-robot"></i> reCAPTCHA Settings</div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>reCAPTCHA Site Key</label>
                                                <input type="text" name="reCAPTCHA_site_key" class="form-control" value="{{ old('reCAPTCHA_site_key', $asian->reCAPTCHA_site_key ?? '') }}" placeholder="Public site key">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>reCAPTCHA Secret Key</label>
                                                <input type="text" name="reCAPTCHA_secret_key" class="form-control" value="{{ old('reCAPTCHA_secret_key', $asian->reCAPTCHA_secret_key ?? '') }}" placeholder="Secret key">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FOOTER -->
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="info-box">
                                        <i class="fas fa-check-circle"></i>
                                        <span>Changes will be applied globally to the frontend immediately</span>
                                    </div>
                                </div>
                                <div class="col-md-4 text-right">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-save"></i> Save Configuration
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection