@extends('layouts.admin')

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

@section('admin-content')
<style>
    /* Standard Admin Settings Styles */
    .settings-nav .nav-link {
        color: #4b5563;
        padding: 0.8rem 1.25rem;
        border-radius: 10px;
        margin-bottom: 0.5rem;
        transition: all 0.2s;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .settings-nav .nav-link:hover {
        background-color: #f3f4f6;
        color: #1f2937;
    }
    .settings-nav .nav-link.active {
        background: var(--primary-gradient);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    .settings-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        background: #fff;
    }
    
    /* Navigation Refinements */
    .settings-nav {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
    .settings-nav::-webkit-scrollbar {
        width: 4px;
    }
    .settings-nav::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 4px;
    }
    
    .settings-nav .nav-link {
        color: #64748b;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        margin-bottom: 0.25rem;
        transition: all 0.2s ease;
        font-weight: 600;
        font-size: 0.9rem;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .settings-nav .nav-link:hover {
        background-color: #f8fafc;
        color: #0f172a;
    }
    .settings-nav .nav-link.active {
        background: #f0f9ff;
        color: #0284c7; /* Sky 600 */
        border-color: #e0f2fe;
        box-shadow: none;
    }
    .settings-nav .nav-link.active i {
        color: #0284c7;
    }
</style>

<div class="settings-page">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">CMS Settings</h4>
            <p class="text-muted mb-0 small">Configure global application settings</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center">
            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
            {{ session('success') }}
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center">
            <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
            {{ session('error') }}
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row g-4">
            <!-- Left Sidebar Navigation -->
            <div class="col-lg-3">
                <div class="card settings-card mb-4 sticky-top" style="top: 100px; z-index: 10;">
                    <div class="card-body p-3">
                        <div class="nav flex-column flex-nowrap settings-nav pe-1" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="max-height: 70vh; overflow-y: auto; overflow-x: hidden;">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab">
                                <i class="bi bi-sliders"></i> General
                            </button>
                            <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab">
                                <i class="bi bi-geo-alt"></i> Contact Info
                            </button>
                            <button class="nav-link" id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab">
                                <i class="bi bi-house-door"></i> Home Page
                            </button>
                            <button class="nav-link" id="social-tab" data-bs-toggle="pill" data-bs-target="#social" type="button" role="tab">
                                <i class="bi bi-share"></i> Social Media
                            </button>
                            <button class="nav-link" id="seo-tab" data-bs-toggle="pill" data-bs-target="#seo" type="button" role="tab">
                                <i class="bi bi-search"></i> SEO
                            </button>
                            <button class="nav-link" id="scripts-tab" data-bs-toggle="pill" data-bs-target="#scripts" type="button" role="tab">
                                <i class="bi bi-code-slash"></i> Scripts
                            </button>
                            <button class="nav-link" id="email-tab" data-bs-toggle="pill" data-bs-target="#email" type="button" role="tab">
                                <i class="bi bi-envelope"></i> Email Settings
                            </button>
                            <button class="nav-link" id="payment-tab" data-bs-toggle="pill" data-bs-target="#payment" type="button" role="tab">
                                <i class="bi bi-credit-card"></i> Payment
                            </button>
                            <button class="nav-link" id="features-tab" data-bs-toggle="pill" data-bs-target="#features" type="button" role="tab">
                                <i class="bi bi-toggles"></i> Features
                            </button>
                            <button class="nav-link" id="sidebar-banners-tab" data-bs-toggle="pill" data-bs-target="#sidebar-banners" type="button" role="tab">
                                <i class="bi bi-layout-sidebar-inset"></i> Sidebar Banners
                            </button>
                            <button class="nav-link" id="help-page-tab" data-bs-toggle="pill" data-bs-target="#help-page" type="button" role="tab">
                                <i class="bi bi-question-circle"></i> Help Page
                            </button>
                            <button class="nav-link" id="retention-tab" data-bs-toggle="pill" data-bs-target="#retention" type="button" role="tab">
                                <i class="bi bi-hourglass-split"></i> Data Retention
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="d-grid mt-3">
                    <button type="submit" class="btn btn-primary-gradient btn-lg shadow-sm w-100">
                        <i class="bi bi-save me-2"></i> Save Changes
                    </button>
                </div>
            </div>

            <!-- Right Content Area -->
            <div class="col-lg-9">
                <div class="card settings-card overflow-hidden">
                    <div class="card-body p-4 p-md-5">
                        <div class="tab-content" id="v-pills-tabContent">
                            
                            <!-- General Settings -->
                            <div class="tab-pane fade show active" id="general" role="tabpanel">
                                <h5 class="fw-bold mb-4 pb-2 border-bottom">General Settings</h5>
                                <div class="row g-4">
                                    @foreach($settings['general'] ?? [] as $setting)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            @if($setting->type === 'text')
                                                <input type="text" name="{{ $setting->key }}" class="form-control form-control-lg rounded-3 fs-6" value="{{ $setting->value }}">
                                            @elseif($setting->type === 'textarea')
                                                <textarea name="{{ $setting->key }}" class="form-control rounded-3" rows="3">{{ $setting->value }}</textarea>
                                            @elseif($setting->type === 'image')
                                                <input type="file" name="{{ $setting->key }}" class="form-control rounded-3">
                                                @if($setting->value)
                                                    <div class="mt-3 p-3 bg-light rounded-3 border d-inline-block">
                                                        <img src="{{ asset('storage/' . $setting->value) }}" alt="Logo" height="40">
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Contact Settings (New) -->
                            <div class="tab-pane fade" id="contact" role="tabpanel">
                                <h5 class="settings-section-title">Contact Information</h5>
                                <div class="row g-4">
                                    <div class="col-md-12">
                                        <label class="form-label">Contact Address</label>
                                        <textarea name="contact_address" class="form-control rounded-3" rows="2">{{ \App\Models\Setting::getValue('contact_address', 'Mumbai, Maharashtra, India') }}</textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number</label>
                                        <input type="text" name="contact_phone" class="form-control rounded-3" value="{{ \App\Models\Setting::getValue('contact_phone', '+919082019936') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" name="contact_email" class="form-control rounded-3" value="{{ \App\Models\Setting::getValue('contact_email', 'support@theminiport.com') }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Google Maps Embed URL</label>
                                        <textarea name="contact_map_iframe" class="form-control rounded-3" rows="3" placeholder='<iframe src="...'>{{ \App\Models\Setting::getValue('contact_map_iframe') }}</textarea>
                                        <div class="form-text">Paste the full &lt;iframe&gt; code from Google Maps here. Leave empty to use default.</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Home Page Settings -->
                            <div class="tab-pane fade" id="home" role="tabpanel">
                                <h5 class="settings-section-title">Home Page Configuration</h5>
                                <div class="row g-4">
                                    @foreach($settings['home'] ?? [] as $setting)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            @if($setting->type === 'text')
                                                <input type="text" name="{{ $setting->key }}" class="form-control rounded-3" value="{{ $setting->value }}">
                                            @elseif($setting->type === 'boolean')
                                                <select name="{{ $setting->key }}" class="form-select rounded-3">
                                                    <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Show</option>
                                                    <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Hide</option>
                                                </select>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Social Media Settings -->
                            <div class="tab-pane fade" id="social" role="tabpanel">
                                <h5 class="settings-section-title">Social Media Links</h5>
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <label class="form-label">Facebook</label>
                                        <div class="input-group">
                                            <span class="input-group-text rounded-start-3"><i class="bi bi-facebook"></i></span>
                                            <input type="text" name="social_facebook" class="form-control rounded-end-3" value="{{ \App\Models\Setting::getValue('social_facebook') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Twitter / X</label>
                                        <div class="input-group">
                                            <span class="input-group-text rounded-start-3"><i class="bi bi-twitter-x"></i></span>
                                            <input type="text" name="social_twitter" class="form-control rounded-end-3" value="{{ \App\Models\Setting::getValue('social_twitter') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">LinkedIn</label>
                                        <div class="input-group">
                                            <span class="input-group-text rounded-start-3"><i class="bi bi-linkedin"></i></span>
                                            <input type="text" name="social_linkedin" class="form-control rounded-end-3" value="{{ \App\Models\Setting::getValue('social_linkedin') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Instagram</label>
                                        <div class="input-group">
                                            <span class="input-group-text rounded-start-3"><i class="bi bi-instagram"></i></span>
                                            <input type="text" name="social_instagram" class="form-control rounded-end-3" value="{{ \App\Models\Setting::getValue('social_instagram') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- SEO Settings -->
                            <div class="tab-pane fade" id="seo" role="tabpanel">
                                <h5 class="settings-section-title">Global SEO Configuration</h5>
                                <div class="row g-4">
                                    @foreach($settings['seo'] ?? [] as $setting)
                                        <div class="col-12">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            @if($setting->type === 'text')
                                                <input type="text" name="{{ $setting->key }}" class="form-control rounded-3" value="{{ $setting->value }}">
                                            @elseif($setting->type === 'textarea')
                                                <textarea name="{{ $setting->key }}" class="form-control rounded-3" rows="3">{{ $setting->value }}</textarea>
                                            @endif
                                        </div>
                                    @endforeach
                                    
                                    <!-- Facebook Pixel Configuration -->
                                    <div class="col-12 mt-4 pt-3 border-top">
                                        <h6 class="fw-bold mb-3"><i class="bi bi-facebook text-primary me-2"></i>Facebook Tracking</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">Facebook Pixel ID</label>
                                                <div class="input-group">
                                                    <span class="input-group-text rounded-start-3">ID</span>
                                                    <input type="text" name="facebook_pixel_id" class="form-control rounded-end-3" 
                                                           value="{{ \App\Models\Setting::getValue('facebook_pixel_id') }}" 
                                                           placeholder="e.g. 1234567890123456">
                                                </div>
                                                <div class="form-text">Enter your numeric Pixel ID. The script will be automatically injected.</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Scripts Settings -->
                            <div class="tab-pane fade" id="scripts" role="tabpanel">
                                <h5 class="settings-section-title">Custom Scripts</h5>
                                <div class="alert alert-warning border-0 bg-warning bg-opacity-10 rounded-3 mb-4">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i> Caution: Invalid scripts can break your website.
                                </div>
                                <div class="row g-4">
                                    @foreach($settings['scripts'] ?? [] as $setting)
                                        <div class="col-12">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            <textarea name="{{ $setting->key }}" class="form-control code-editor rounded-3" rows="6">{{ $setting->value }}</textarea>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Email Settings -->
                            <div class="tab-pane fade" id="email" role="tabpanel">
                                <h5 class="settings-section-title">SMTP Configuration</h5>
                                <div class="row g-4">
                                    @foreach($settings['email'] ?? [] as $setting)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            <input type="text" name="{{ $setting->key }}" class="form-control rounded-3" value="{{ $setting->value }}">
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-4 pt-3 border-top">
                                    <button type="submit" form="testEmailForm" class="btn btn-outline-success btn-sm rounded-3">
                                        <i class="bi bi-send-fill me-1"></i> Send Test Email
                                    </button>
                                    <span class="text-muted small ms-2 fst-italic">Save settings before testing</span>
                                </div>
                            </div>

                            <!-- Payment Settings -->
                            <div class="tab-pane fade" id="payment" role="tabpanel">
                                <h5 class="settings-section-title">Payment Gateway Configuration</h5>
                                <div class="row g-4">
                                    @foreach($settings['payment'] ?? [] as $setting)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ $setting->label }}</label>
                                            @if($setting->type === 'text')
                                                <input type="text" name="{{ $setting->key }}" class="form-control rounded-3" value="{{ $setting->value }}">
                                            @elseif($setting->type === 'select')
                                                <select name="{{ $setting->key }}" class="form-select rounded-3">
                                                    <option value="sandbox" {{ $setting->value == 'sandbox' ? 'selected' : '' }}>Sandbox (Test)</option>
                                                    <option value="live" {{ $setting->value == 'live' ? 'selected' : '' }}>Live (Production)</option>
                                                </select>
                                            @elseif($setting->type === 'boolean')
                                                <select name="{{ $setting->key }}" class="form-select rounded-3">
                                                    <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Enabled</option>
                                                    <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Disabled</option>
                                                </select>
                                            @elseif($setting->type === 'textarea')
                                                <textarea name="{{ $setting->key }}" class="form-control rounded-3" rows="3">{{ $setting->value }}</textarea>
                                            @endif
                                        </div>
                                    @endforeach
                                    
                                    <!-- Explicit Manual Payment Instructions (if not in loop) -->
                                    <div class="col-12">
                                        <label class="form-label">Manual Payment Instructions</label>
                                        <textarea name="manual_payment_instructions" class="form-control rounded-3" rows="4" placeholder="Enter bank details or instructions for manual transfer...">{{ \App\Models\Setting::getValue('manual_payment_instructions') }}</textarea>
                                        <div class="form-text">Instructions shown to users when they select 'Manual Payment / Bank Transfer'.</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Features Settings -->
                            <div class="tab-pane fade" id="features" role="tabpanel">
                                <h5 class="settings-section-title">Platform Features & Integrations</h5>
                                
                                <!-- Social Login -->
                                <div class="feature-toggle-card mb-4">
                                    <div class="feature-icon"><i class="bi bi-people"></i></div>
                                    <h6 class="fw-bold mb-3">Social Login</h6>
                                    <div class="row g-3">
                                        @foreach($settings['features'] ?? [] as $setting)
                                            @if(in_array($setting->key, ['social_login_google_enabled', 'social_login_facebook_enabled', 'google_client_id', 'google_client_secret', 'facebook_app_id', 'facebook_app_secret']))
                                                <div class="col-md-6">
                                                    <label class="form-label small">{{ $setting->label }}</label>
                                                    @if($setting->type === 'boolean')
                                                        <select name="{{ $setting->key }}" class="form-select form-select-sm rounded-3">
                                                            <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Enabled</option>
                                                            <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Disabled</option>
                                                        </select>
                                                    @elseif($setting->type === 'password')
                                                        <input type="password" name="{{ $setting->key }}" class="form-control form-control-sm rounded-3" value="{{ $setting->value }}">
                                                    @else
                                                        <input type="text" name="{{ $setting->key }}" class="form-control form-control-sm rounded-3" value="{{ $setting->value }}">
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <!-- WhatsApp -->
                                <div class="feature-toggle-card mb-4">
                                    <div class="feature-icon bg-success bg-opacity-10 text-success"><i class="bi bi-whatsapp"></i></div>
                                    <h6 class="fw-bold mb-3">WhatsApp Support</h6>
                                    <div class="row g-3">
                                        @foreach($settings['features'] ?? [] as $setting)
                                            @if(str_contains($setting->key, 'whatsapp'))
                                                <div class="{{ $setting->type === 'textarea' ? 'col-12' : 'col-md-6' }}">
                                                    <label class="form-label small">{{ $setting->label }}</label>
                                                    @if($setting->type === 'boolean')
                                                        <select name="{{ $setting->key }}" class="form-select form-select-sm rounded-3">
                                                            <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Enabled</option>
                                                            <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Disabled</option>
                                                        </select>
                                                    @elseif($setting->type === 'textarea')
                                                        <textarea name="{{ $setting->key }}" class="form-control form-control-sm rounded-3" rows="2">{{ $setting->value }}</textarea>
                                                    @else
                                                        <input type="text" name="{{ $setting->key }}" class="form-control form-control-sm rounded-3" value="{{ $setting->value }}">
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <!-- Core Features -->
                                <div class="feature-toggle-card mb-4">
                                    <div class="feature-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-toggles"></i></div>
                                    <h6 class="fw-bold mb-3">Core Platform Features</h6>
                                    <div class="row g-3">
                                        @foreach($settings['features'] ?? [] as $setting)
                                            @if(in_array($setting->key, ['product_approval_required', 'bulk_upload_enabled', 'help_page_enabled', 'newsletter_enabled', 'min_moq', 'max_moq']))
                                                <div class="col-md-4">
                                                    <label class="form-label small">{{ $setting->label }}</label>
                                                    @if($setting->type === 'boolean')
                                                        <select name="{{ $setting->key }}" class="form-select form-select-sm rounded-3">
                                                            <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Enabled</option>
                                                            <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Disabled</option>
                                                        </select>
                                                    @else
                                                        <input type="text" name="{{ $setting->key }}" class="form-control form-control-sm rounded-3" value="{{ $setting->value }}">
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Sidebar Banners Settings -->
                            <div class="tab-pane fade" id="sidebar-banners" role="tabpanel">
                                <h5 class="settings-section-title">Homepage Sidebar Banners</h5>
                                <p class="text-muted small mb-4">These banners appear on the right side of the homepage hero section.</p>
                                
                                <div class="row g-4">
                                    <!-- Post Buy Requirement Banner -->
                                    <div class="col-md-6">
                                        <div class="card border shadow-sm rounded-3">
                                            <div class="card-header bg-light border-bottom-0 py-3">
                                                <h6 class="mb-0 fw-bold"><i class="bi bi-box-seam me-2 text-primary"></i>Post Buy Requirement Banner</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Current Image</label>
                                                    <div class="rounded-3 overflow-hidden border mb-2" style="max-height: 150px;">
                                                        <img src="{{ asset('images/buy-requirement.png') }}" class="w-100 object-fit-cover" alt="Post Buy Banner" id="preview-buy-banner">
                                                    </div>
                                                </div>
                                                <div class="mb-0">
                                                    <label class="form-label small fw-bold">Upload New Image</label>
                                                    <input type="file" name="sidebar_banner_buy" class="form-control" accept="image/*" onchange="previewImage(this, 'preview-buy-banner')">
                                                    <div class="form-text">Recommended: 600x300px</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Sell on MiniPort Banner -->
                                    <div class="col-md-6">
                                        <div class="card border shadow-sm rounded-3">
                                            <div class="card-header bg-light border-bottom-0 py-3">
                                                <h6 class="mb-0 fw-bold"><i class="bi bi-shop me-2 text-warning"></i>Sell on MiniPort Banner</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Current Image</label>
                                                    <div class="rounded-3 overflow-hidden border mb-2" style="max-height: 150px;">
                                                        <img src="{{ asset('images/port-background.png') }}" class="w-100 object-fit-cover" alt="Sell Banner" id="preview-sell-banner">
                                                    </div>
                                                </div>
                                                <div class="mb-0">
                                                    <label class="form-label small fw-bold">Upload New Image</label>
                                                    <input type="file" name="sidebar_banner_sell" class="form-control" accept="image/*" onchange="previewImage(this, 'preview-sell-banner')">
                                                    <div class="form-text">Recommended: 600x300px</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="alert alert-info border-0 bg-info bg-opacity-10 rounded-3 mt-4">
                                    <i class="bi bi-info-circle-fill me-2"></i>
                                    <strong>Note:</strong> The text overlays ("Post Buy Requirement", "Sell on MiniPort") are fixed. Only the background images will change.
                                </div>
                            </div>

                            <!-- Help Page Settings -->
                            <div class="tab-pane fade" id="help-page" role="tabpanel">
                                <h5 class="settings-section-title">Help Page Content</h5>
                                
                                @php
                                    $guides = $helpSettings->filter(fn($s) => in_array($s->key, ['help_buyers_guide', 'help_sellers_guide', 'help_plans_guide']));
                                    $notes = $helpSettings->filter(fn($s) => in_array($s->key, ['help_notes_free', 'help_notes_moq', 'help_notes_kyc', 'help_notes_payment']));
                                @endphp

                                <div class="mb-5">
                                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-journal-richtext me-2"></i>Guides</h6>
                                    @foreach($guides as $setting)
                                        <div class="mb-4">
                                            <label class="form-label bg-light px-2 py-1 rounded small text-uppercase fw-bold text-muted d-inline-block">{{ $setting->label }}</label>
                                            <textarea name="{{ $setting->key }}" class="form-control summernote">{{ $setting->value }}</textarea>
                                        </div>
                                    @endforeach
                                </div>
                                
                                <div>
                                    <h6 class="fw-bold text-warning mb-3"><i class="bi bi-sticky me-2"></i>Platform Notes</h6>
                                    @foreach($notes as $setting)
                                        <div class="mb-4">
                                            <label class="form-label bg-light px-2 py-1 rounded small text-uppercase fw-bold text-muted d-inline-block">{{ $setting->label }}</label>
                                            <textarea name="{{ $setting->key }}" class="form-control summernote">{{ $setting->value }}</textarea>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Data Retention Settings -->
                            <div class="tab-pane fade" id="retention" role="tabpanel">
                                <h5 class="settings-section-title">Data Retention & Auto-Deletion</h5>
                                <div class="alert alert-info border-0 bg-info bg-opacity-10 rounded-3 mb-4">
                                    <i class="bi bi-info-circle-fill me-2"></i>
                                    Configure how long data is kept before permanent deletion.
                                </div>
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Seller Account Grace Period (Months)</label>
                                        <div class="input-group">
                                            <input type="number" name="seller_retention_period" class="form-control rounded-start-3" 
                                                   value="{{ \App\Models\Setting::getValue('seller_retention_period', 3) }}" min="1">
                                            <span class="input-group-text rounded-end-3">Months</span>
                                        </div>
                                        <div class="form-text">Time to wait before permanently deleting a seller account after a delete request.</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">RFQ Auto-Delete Period (Months)</label>
                                        <div class="input-group">
                                            <input type="number" name="rfq_retention_period" class="form-control rounded-start-3" 
                                                   value="{{ \App\Models\Setting::getValue('rfq_retention_period', 3) }}" min="1">
                                            <span class="input-group-text rounded-end-3">Months</span>
                                        </div>
                                        <div class="form-text">Automatically delete RFQs older than this.</div>
                                    </div>
                                </div>
                            </div>
                            
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <form id="testEmailForm" action="{{ route('admin.settings.test-email') }}" method="POST" class="d-none">
        @csrf
    </form>
</div>

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.css" rel="stylesheet">
    <style>
        .note-editor .note-toolbar { background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
        .note-editable { background: #fff; min-height: 200px; }
        .note-editor { border-color: #dee2e6; border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
        .note-resizebar { background-color: #f8f9fa; border-top: 1px solid #dee2e6; }
        .note-btn-group { margin-right: 4px !important; }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.summernote').summernote({
                height: 200,
                minHeight: 150,
                maxHeight: 400,
                focus: false,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['codeview']]
                ],
                placeholder: 'Enter content here...',
                disableDragAndDrop: true,
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized for Help Page');
                    }
                }
            });
        });

        // Image Preview for Sidebar Banners
        function previewImage(input, previewId) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endpush
@endsection
