@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Website Content</h1>
        <p class="page-subtitle">Manage public-facing website pages and content</p>
    </div>
</div>

<div class="card">
    <div class="tabs-nav" style="padding: 0 1.5rem;">
        <button class="tab-btn active" onclick="switchContentTab('general', this)">General</button>
        <button class="tab-btn" onclick="switchContentTab('homepage', this)">Homepage</button>
        <button class="tab-btn" onclick="switchContentTab('terms', this)">Terms & Conditions</button>
        <button class="tab-btn" onclick="switchContentTab('privacy', this)">Privacy Policy</button>
        <button class="tab-btn" onclick="switchContentTab('about', this)">About Us</button>
        <button class="tab-btn" onclick="switchContentTab('faq', this)">FAQ</button>
    </div>

    <div class="card-body">

        {{-- GENERAL TAB --}}
        <form method="POST" action="{{ route('admin.settings.content.update') }}" id="contentGeneralForm" class="content-form">
            @csrf
            <div id="content-general" class="content-tab active">
                <div class="form-group">
                    <label for="site_title" class="form-label">Site Title</label>
                    <input type="text" id="site_title" name="site_title" class="form-input" value="{{ old('site_title', $settings['site_title'] ?? 'BANKING') }}">
                </div>
                <div class="form-group">
                    <label for="site_description" class="form-label">Site Description</label>
                    <textarea id="site_description" name="site_description" class="form-input" rows="3">{{ old('site_description', $settings['site_description'] ?? '') }}</textarea>
                </div>
                <div class="form-group">
                    <label for="contact_page_content" class="form-label">Contact Page Content</label>
                    <textarea id="contact_page_content" name="contact_page_content" class="form-input content-editor" rows="8">{{ old('contact_page_content', $settings['contact_page_content'] ?? '') }}</textarea>
                </div>
                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        Save General Content
                    </button>
                </div>
            </div>
        </form>

        {{-- HOMEPAGE TAB --}}
        <form method="POST" action="{{ route('admin.settings.content.homepage') }}" id="contentHomepageForm" class="content-form" style="display:none;">
            @csrf
            <div id="content-homepage" class="content-tab">

                <div class="form-section">
                    <h3 class="form-section-title">Hero Section (when no slider image)</h3>
                    <div class="form-group">
                        <label for="hero_badge" class="form-label">Badge Text</label>
                        <input type="text" id="hero_badge" name="hero_badge" class="form-input" value="{{ old('hero_badge', $homepage['hero_badge'] ?? '') }}" placeholder="e.g. Trusted by 2M+ Customers">
                    </div>
                    <div class="form-group">
                        <label for="hero_title" class="form-label">Hero Title</label>
                        <input type="text" id="hero_title" name="hero_title" class="form-input" value="{{ old('hero_title', $homepage['hero_title'] ?? '') }}" placeholder="e.g. Banking Made Simple, Secure & Modern">
                    </div>
                    <div class="form-group">
                        <label for="hero_subtitle" class="form-label">Hero Subtitle</label>
                        <textarea id="hero_subtitle" name="hero_subtitle" class="form-input" rows="2" placeholder="e.g. Experience the future of digital banking...">{{ old('hero_subtitle', $homepage['hero_subtitle'] ?? '') }}</textarea>
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Stats (below hero)</h3>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="stat_transactions" class="form-label">Transactions Value</label>
                            <input type="text" id="stat_transactions" name="stat_transactions" class="form-input" value="{{ old('stat_transactions', $homepage['stat_transactions'] ?? '') }}" placeholder="e.g. $2.5B+">
                        </div>
                        <div class="form-group">
                            <label for="stat_transactions_label" class="form-label">Transactions Label</label>
                            <input type="text" id="stat_transactions_label" name="stat_transactions_label" class="form-input" value="{{ old('stat_transactions_label', $homepage['stat_transactions_label'] ?? '') }}" placeholder="e.g. Transactions Processed">
                        </div>
                    </div>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="stat_uptime" class="form-label">Uptime Value</label>
                            <input type="text" id="stat_uptime" name="stat_uptime" class="form-input" value="{{ old('stat_uptime', $homepage['stat_uptime'] ?? '') }}" placeholder="e.g. 99.9%">
                        </div>
                        <div class="form-group">
                            <label for="stat_uptime_label" class="form-label">Uptime Label</label>
                            <input type="text" id="stat_uptime_label" name="stat_uptime_label" class="form-input" value="{{ old('stat_uptime_label', $homepage['stat_uptime_label'] ?? '') }}" placeholder="e.g. Uptime Guarantee">
                        </div>
                    </div>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="stat_users" class="form-label">Users Value</label>
                            <input type="text" id="stat_users" name="stat_users" class="form-input" value="{{ old('stat_users', $homepage['stat_users'] ?? '') }}" placeholder="e.g. 2M+">
                        </div>
                        <div class="form-group">
                            <label for="stat_users_label" class="form-label">Users Label</label>
                            <input type="text" id="stat_users_label" name="stat_users_label" class="form-input" value="{{ old('stat_users_label', $homepage['stat_users_label'] ?? '') }}" placeholder="e.g. Active Users">
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Services Section</h3>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="services_tag" class="form-label">Section Tag</label>
                            <input type="text" id="services_tag" name="services_tag" class="form-input" value="{{ old('services_tag', $homepage['services_tag'] ?? '') }}" placeholder="e.g. Our Services">
                        </div>
                        <div class="form-group">
                            <label for="services_title" class="form-label">Section Title</label>
                            <input type="text" id="services_title" name="services_title" class="form-input" value="{{ old('services_title', $homepage['services_title'] ?? '') }}" placeholder="e.g. Everything You Need to Bank Smarter">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="services_subtitle" class="form-label">Section Subtitle</label>
                        <textarea id="services_subtitle" name="services_subtitle" class="form-input" rows="2">{{ old('services_subtitle', $homepage['services_subtitle'] ?? '') }}</textarea>
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Why Choose Us Section</h3>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="why_tag" class="form-label">Section Tag</label>
                            <input type="text" id="why_tag" name="why_tag" class="form-input" value="{{ old('why_tag', $homepage['why_tag'] ?? '') }}" placeholder="e.g. Why BANKING">
                        </div>
                        <div class="form-group">
                            <label for="why_title" class="form-label">Section Title</label>
                            <input type="text" id="why_title" name="why_title" class="form-input" value="{{ old('why_title', $homepage['why_title'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="why_subtitle" class="form-label">Section Subtitle</label>
                        <textarea id="why_subtitle" name="why_subtitle" class="form-input" rows="2">{{ old('why_subtitle', $homepage['why_subtitle'] ?? '') }}</textarea>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="why_feature1_title" class="form-label">Feature 1 Title</label>
                            <input type="text" id="why_feature1_title" name="why_feature1_title" class="form-input" value="{{ old('why_feature1_title', $homepage['why_feature1_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="why_feature1_desc" class="form-label">Feature 1 Description</label>
                            <input type="text" id="why_feature1_desc" name="why_feature1_desc" class="form-input" value="{{ old('why_feature1_desc', $homepage['why_feature1_desc'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="why_feature2_title" class="form-label">Feature 2 Title</label>
                            <input type="text" id="why_feature2_title" name="why_feature2_title" class="form-input" value="{{ old('why_feature2_title', $homepage['why_feature2_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="why_feature2_desc" class="form-label">Feature 2 Description</label>
                            <input type="text" id="why_feature2_desc" name="why_feature2_desc" class="form-input" value="{{ old('why_feature2_desc', $homepage['why_feature2_desc'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="why_feature3_title" class="form-label">Feature 3 Title</label>
                            <input type="text" id="why_feature3_title" name="why_feature3_title" class="form-input" value="{{ old('why_feature3_title', $homepage['why_feature3_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="why_feature3_desc" class="form-label">Feature 3 Description</label>
                            <input type="text" id="why_feature3_desc" name="why_feature3_desc" class="form-input" value="{{ old('why_feature3_desc', $homepage['why_feature3_desc'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="why_feature4_title" class="form-label">Feature 4 Title</label>
                            <input type="text" id="why_feature4_title" name="why_feature4_title" class="form-input" value="{{ old('why_feature4_title', $homepage['why_feature4_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="why_feature4_desc" class="form-label">Feature 4 Description</label>
                            <input type="text" id="why_feature4_desc" name="why_feature4_desc" class="form-input" value="{{ old('why_feature4_desc', $homepage['why_feature4_desc'] ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Security Section</h3>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="security_tag" class="form-label">Section Tag</label>
                            <input type="text" id="security_tag" name="security_tag" class="form-input" value="{{ old('security_tag', $homepage['security_tag'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="security_title" class="form-label">Section Title</label>
                            <input type="text" id="security_title" name="security_title" class="form-input" value="{{ old('security_title', $homepage['security_title'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="security_subtitle" class="form-label">Section Subtitle</label>
                        <textarea id="security_subtitle" name="security_subtitle" class="form-input" rows="2">{{ old('security_subtitle', $homepage['security_subtitle'] ?? '') }}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="security_item1" class="form-label">Security Item 1</label>
                        <input type="text" id="security_item1" name="security_item1" class="form-input" value="{{ old('security_item1', $homepage['security_item1'] ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label for="security_item2" class="form-label">Security Item 2</label>
                        <input type="text" id="security_item2" name="security_item2" class="form-input" value="{{ old('security_item2', $homepage['security_item2'] ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label for="security_item3" class="form-label">Security Item 3</label>
                        <input type="text" id="security_item3" name="security_item3" class="form-input" value="{{ old('security_item3', $homepage['security_item3'] ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label for="security_item4" class="form-label">Security Item 4</label>
                        <input type="text" id="security_item4" name="security_item4" class="form-input" value="{{ old('security_item4', $homepage['security_item4'] ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label for="security_item5" class="form-label">Security Item 5</label>
                        <input type="text" id="security_item5" name="security_item5" class="form-input" value="{{ old('security_item5', $homepage['security_item5'] ?? '') }}">
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Digital Banking Section</h3>
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="digital_tag" class="form-label">Section Tag</label>
                            <input type="text" id="digital_tag" name="digital_tag" class="form-input" value="{{ old('digital_tag', $homepage['digital_tag'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="digital_title" class="form-label">Section Title</label>
                            <input type="text" id="digital_title" name="digital_title" class="form-input" value="{{ old('digital_title', $homepage['digital_title'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="digital_subtitle" class="form-label">Section Subtitle</label>
                        <textarea id="digital_subtitle" name="digital_subtitle" class="form-input" rows="2">{{ old('digital_subtitle', $homepage['digital_subtitle'] ?? '') }}</textarea>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="digital_feature1_title" class="form-label">Feature 1 Title</label>
                            <input type="text" id="digital_feature1_title" name="digital_feature1_title" class="form-input" value="{{ old('digital_feature1_title', $homepage['digital_feature1_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="digital_feature1_desc" class="form-label">Feature 1 Description</label>
                            <input type="text" id="digital_feature1_desc" name="digital_feature1_desc" class="form-input" value="{{ old('digital_feature1_desc', $homepage['digital_feature1_desc'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="digital_feature2_title" class="form-label">Feature 2 Title</label>
                            <input type="text" id="digital_feature2_title" name="digital_feature2_title" class="form-input" value="{{ old('digital_feature2_title', $homepage['digital_feature2_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="digital_feature2_desc" class="form-label">Feature 2 Description</label>
                            <input type="text" id="digital_feature2_desc" name="digital_feature2_desc" class="form-input" value="{{ old('digital_feature2_desc', $homepage['digital_feature2_desc'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="digital_feature3_title" class="form-label">Feature 3 Title</label>
                            <input type="text" id="digital_feature3_title" name="digital_feature3_title" class="form-input" value="{{ old('digital_feature3_title', $homepage['digital_feature3_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="digital_feature3_desc" class="form-label">Feature 3 Description</label>
                            <input type="text" id="digital_feature3_desc" name="digital_feature3_desc" class="form-input" value="{{ old('digital_feature3_desc', $homepage['digital_feature3_desc'] ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3 class="form-section-title">Call-to-Action Section</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="cta_title" class="form-label">CTA Title</label>
                            <input type="text" id="cta_title" name="cta_title" class="form-input" value="{{ old('cta_title', $homepage['cta_title'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="cta_note" class="form-label">CTA Note</label>
                            <input type="text" id="cta_note" name="cta_note" class="form-input" value="{{ old('cta_note', $homepage['cta_note'] ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cta_subtitle" class="form-label">CTA Subtitle</label>
                        <textarea id="cta_subtitle" name="cta_subtitle" class="form-input" rows="2">{{ old('cta_subtitle', $homepage['cta_subtitle'] ?? '') }}</textarea>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="cta_button1" class="form-label">Primary Button Text</label>
                            <input type="text" id="cta_button1" name="cta_button1" class="form-input" value="{{ old('cta_button1', $homepage['cta_button1'] ?? '') }}">
                        </div>
                        <div class="form-group">
                            <label for="cta_button2" class="form-label">Secondary Button Text</label>
                            <input type="text" id="cta_button2" name="cta_button2" class="form-input" value="{{ old('cta_button2', $homepage['cta_button2'] ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        Save Homepage Content
                    </button>
                </div>
            </div>
        </form>

        {{-- TERMS TAB --}}
        <form method="POST" action="{{ route('admin.settings.content.update') }}" id="contentTermsForm" class="content-form" style="display:none;">
            @csrf
            <div id="content-terms" class="content-tab">
                <div class="form-group">
                    <label for="terms_content" class="form-label">Terms & Conditions</label>
                    <textarea id="terms_content" name="terms_content" class="form-input content-editor" rows="15">{{ old('terms_content', $settings['terms_content'] ?? '') }}</textarea>
                    <span class="form-help">Supports HTML formatting</span>
                </div>
                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Save Terms</button>
                </div>
            </div>
        </form>

        {{-- PRIVACY TAB --}}
        <form method="POST" action="{{ route('admin.settings.content.update') }}" id="contentPrivacyForm" class="content-form" style="display:none;">
            @csrf
            <div id="content-privacy" class="content-tab">
                <div class="form-group">
                    <label for="privacy_content" class="form-label">Privacy Policy</label>
                    <textarea id="privacy_content" name="privacy_content" class="form-input content-editor" rows="15">{{ old('privacy_content', $settings['privacy_content'] ?? '') }}</textarea>
                </div>
                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Save Privacy Policy</button>
                </div>
            </div>
        </form>

        {{-- ABOUT TAB --}}
        <form method="POST" action="{{ route('admin.settings.content.update') }}" id="contentAboutForm" class="content-form" style="display:none;">
            @csrf
            <div id="content-about" class="content-tab">
                <div class="form-group">
                    <label for="about_content" class="form-label">About Us</label>
                    <textarea id="about_content" name="about_content" class="form-input content-editor" rows="15">{{ old('about_content', $settings['about_content'] ?? '') }}</textarea>
                </div>
                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Save About Us</button>
                </div>
            </div>
        </form>

        {{-- FAQ TAB --}}
        <div id="content-faq" class="content-tab" style="display:none;">
            <div class="form-section">
                <h3 class="form-section-title">Existing FAQs ({{ $faqs->count() }})</h3>
                @if($faqs->count())
                <div style="display:flex;flex-direction:column;gap:1.25rem;">
                    @foreach($faqs as $faq)
                    <form method="POST" action="{{ route('admin.faqs.update', $faq) }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="_destination" value="{{ route('admin.settings.content') }}">
                        <div class="card" style="border:1px solid #e8ecf0;">
                            <div class="card-body">
                                <div class="form-grid form-grid-3">
                                    <div class="form-group">
                                        <label class="form-label">Order</label>
                                        <input type="number" name="sort_order" class="form-input" min="0" value="{{ $faq->sort_order }}">
                                    </div>
                                    <div class="form-group" style="grid-column: span 2;">
                                        <label class="form-label">Question <span class="required">*</span></label>
                                        <input type="text" name="question" class="form-input" value="{{ old('question', $faq->question) }}" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Answer <span class="required">*</span></label>
                                    <textarea name="answer" class="form-input" rows="3" required>{{ old('answer', $faq->answer) }}</textarea>
                                </div>
                                <div class="form-actions" style="margin-top:1rem;justify-content:space-between;">
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="is_active" value="1" {{ $faq->is_active ? 'checked' : '' }}>
                                        Show on website
                                    </label>
                                    <div style="display:flex;gap:8px;">
                                        <a href="{{ route('admin.faqs.edit', $faq) }}" class="btn btn-sm btn-outline">Open in FAQ manager</a>
                                        <button type="submit" class="btn btn-sm btn-primary">Save FAQ</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    @endforeach
                </div>
                @else
                <p style="color:#6b7280;">No FAQs yet. Add your first question and answer below.</p>
                @endif
            </div>

            <div class="form-section" style="margin-top:1.5rem;">
                <h3 class="form-section-title">Add New FAQ</h3>
                <form method="POST" action="{{ route('admin.faqs.store') }}">
                    @csrf
                    <input type="hidden" name="_destination" value="{{ route('admin.settings.content') }}">
                    <div class="form-grid form-grid-3">
                        <div class="form-group">
                            <label for="new_faq_order" class="form-label">Order</label>
                            <input type="number" id="new_faq_order" name="sort_order" class="form-input" min="0" value="{{ old('sort_order', $faqs->max('sort_order') + 1) }}">
                        </div>
                        <div class="form-group" style="grid-column: span 2;">
                            <label for="new_faq_question" class="form-label">Question <span class="required">*</span></label>
                            <input type="text" id="new_faq_question" name="question" class="form-input" value="{{ old('question') }}" required placeholder="e.g. How do I reset my PIN?">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="new_faq_answer" class="form-label">Answer <span class="required">*</span></label>
                        <textarea id="new_faq_answer" name="answer" class="form-input" rows="3" required placeholder="Write the answer here...">{{ old('answer') }}</textarea>
                    </div>
                    @error('question')<span class="form-error">{{ $message }}</span>@enderror
                    @error('answer')<span class="form-error">{{ $message }}</span>@enderror
                    <div class="form-actions" style="margin-top:1rem;">
                        <label class="checkbox-label">
                            <input type="checkbox" name="is_active" value="1" checked>
                            Show on website
                        </label>
                        <button type="submit" class="btn btn-primary">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                            Add FAQ
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
function switchContentTab(tab, btn) {
    document.querySelectorAll('.content-tab').forEach(function(el) {
        el.style.display = 'none';
        el.classList.remove('active');
    });
    document.querySelectorAll('.content-form').forEach(function(el) {
        el.style.display = 'none';
    });
    document.querySelectorAll('.tab-btn').forEach(function(el) {
        el.classList.remove('active');
    });

    var targetId = 'content-' + tab;
    var targetEl = document.getElementById(targetId);
    var wrapper = targetEl ? targetEl.closest('form.content-form') : null;
    if (wrapper) wrapper.style.display = 'block';
    if (targetEl) {
        targetEl.style.display = 'block';
        targetEl.classList.add('active');
    }

    if (btn) btn.classList.add('active');
}
</script>
@endpush