@extends('admin.layouts.app')

@section('title', 'CMS')
@section('subtitle', 'Manage app content')

@push('styles')
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
    /* ── Tabs ────────────────────────────────────────────────── */
    .tabs {
        display: flex; gap: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 5px;
        margin-bottom: 24px;
        width: fit-content;
    }

    .tab-btn {
        display: flex; align-items: center; gap: 7px;
        padding: 8px 18px;
        border-radius: 8px;
        border: none;
        background: none;
        color: var(--text-muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }

    .tab-btn svg { width: 14px; height: 14px; }

    .tab-btn:hover { color: var(--text); background: var(--surface-2); }

    .tab-btn.active {
        background: rgba(139,0,0,0.25);
        color: var(--text);
        border: 1px solid rgba(139,0,0,0.3);
    }

    .tab-btn.active svg { color: var(--gold); }

    /* ── Tab panels ──────────────────────────────────────────── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── CMS card ────────────────────────────────────────────── */
    .cms-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
    }

    .cms-card-header {
        display: flex; align-items: center; gap: 12px;
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
    }

    .cms-card-icon {
        width: 34px; height: 34px;
        border-radius: 9px;
        background: rgba(139,0,0,0.2);
        border: 1px solid rgba(139,0,0,0.3);
        display: flex; align-items: center; justify-content: center;
        color: var(--gold);
        flex-shrink: 0;
    }

    .cms-card-icon svg { width: 16px; height: 16px; }
    .cms-card-title { font-size: 14px; font-weight: 600; }
    .cms-card-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    /* ── Quill editor ────────────────────────────────────────── */
    .editor-wrap { padding: 0; }

    .ql-toolbar.ql-snow {
        border: none;
        border-bottom: 1px solid var(--border) !important;
        background: var(--surface-2);
        padding: 10px 16px;
    }

    .ql-container.ql-snow {
        border: none !important;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
    }

    .ql-editor {
        min-height: 320px;
        color: var(--text);
        background: var(--surface);
        padding: 20px 24px;
        line-height: 1.7;
    }

    .ql-editor.ql-blank::before { color: var(--text-dim); font-style: normal; }

    /* Dark theme Quill toolbar */
    .ql-snow .ql-stroke { stroke: var(--text-muted) !important; }
    .ql-snow .ql-fill  { fill: var(--text-muted) !important; }
    .ql-snow .ql-picker-label { color: var(--text-muted) !important; }
    .ql-snow .ql-picker-options { background: var(--surface-2) !important; border-color: var(--border) !important; }
    .ql-snow .ql-picker-item { color: var(--text-muted) !important; }
    .ql-snow button:hover .ql-stroke,
    .ql-snow .ql-active .ql-stroke { stroke: var(--gold) !important; }
    .ql-snow button:hover .ql-fill,
    .ql-snow .ql-active .ql-fill  { fill: var(--gold) !important; }
    .ql-snow .ql-picker-label:hover,
    .ql-snow .ql-picker-label.ql-active { color: var(--gold) !important; }

    .cms-footer {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 24px;
        border-top: 1px solid var(--border);
        background: var(--surface-2);
    }

    .cms-hint { font-size: 11px; color: var(--text-dim); }

    .btn-save {
        padding: 9px 22px;
        background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-mid) 100%);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 9px;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; font-weight: 500;
        cursor: pointer; transition: opacity 0.15s;
    }

    .btn-save:hover { opacity: 0.85; }

    /* ── FAQ section ─────────────────────────────────────────── */
    .faq-item {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 12px;
        background: var(--surface-2);
        overflow: hidden;
    }

    .faq-item-header {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-3);
    }

    .faq-num {
        width: 22px; height: 22px;
        border-radius: 6px;
        background: rgba(139,0,0,0.3);
        border: 1px solid rgba(139,0,0,0.4);
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 600; color: var(--gold);
        flex-shrink: 0;
    }

    .faq-item-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

    .faq-label {
        font-size: 10px; letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-muted); margin-bottom: 4px;
    }

    .faq-input {
        width: 100%;
        padding: 9px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; outline: none;
        transition: border-color 0.2s;
        resize: vertical;
    }

    .faq-input::placeholder { color: var(--text-dim); }
    .faq-input:focus { border-color: rgba(139,0,0,0.5); }

    .btn-remove-faq {
        padding: 5px 12px;
        background: rgba(239,68,68,0.1);
        border: 1px solid rgba(239,68,68,0.2);
        border-radius: 7px;
        color: #fca5a5;
        font-family: 'DM Sans', sans-serif;
        font-size: 11px; cursor: pointer;
        transition: all 0.15s; margin-left: auto;
    }

    .btn-remove-faq:hover { background: rgba(239,68,68,0.2); }

    .btn-add-faq {
        display: flex; align-items: center; gap: 7px;
        padding: 9px 16px;
        background: var(--surface-2);
        border: 1px dashed var(--border-hover);
        border-radius: 9px;
        color: var(--text-muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; cursor: pointer;
        transition: all 0.15s; width: 100%;
        justify-content: center; margin-top: 4px;
    }

    .btn-add-faq:hover { border-color: var(--crimson); color: var(--text); }
    .btn-add-faq svg { width: 14px; height: 14px; }

    @media (max-width: 768px) {
        .tabs { width: 100%; overflow-x: auto; }
        .cms-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
        .cms-footer .btn-save { width: 100%; }
    }
</style>
@endpush

@section('content')

@php $activeTab = session('active_tab', 'privacy'); @endphp

{{-- Tabs --}}
<div class="tabs">
    <button class="tab-btn {{ $activeTab === 'privacy' ? 'active' : '' }}" onclick="switchTab('privacy')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Privacy Policy
    </button>
    <button class="tab-btn {{ $activeTab === 'terms' ? 'active' : '' }}" onclick="switchTab('terms')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        Terms & Conditions
    </button>
    <button class="tab-btn {{ $activeTab === 'about' ? 'active' : '' }}" onclick="switchTab('about')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        About Us
    </button>
    <button class="tab-btn {{ $activeTab === 'faqs' ? 'active' : '' }}" onclick="switchTab('faqs')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        FAQs
    </button>
</div>

{{-- ── Privacy Policy ──────────────────────────────────────── --}}
<div class="tab-panel {{ $activeTab === 'privacy' ? 'active' : '' }}" id="panel-privacy">
    <div class="cms-card">
        <div class="cms-card-header">
            <div class="cms-card-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div>
                <div class="cms-card-title">Privacy Policy</div>
                <div class="cms-card-desc">Displayed in the app under Settings → Privacy Policy</div>
            </div>
        </div>
        <form action="/admin/cms/privacy" method="POST" id="privacyForm">
            @csrf
            <input type="hidden" name="content" id="privacyContent">
            <div class="editor-wrap">
                <div id="privacyEditor">{!! $privacy !!}</div>
            </div>
            <div class="cms-footer">
                <span class="cms-hint">Supports rich text — bold, lists, headings, links.</span>
                <button type="submit" class="btn-save">Save Privacy Policy</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Terms & Conditions ──────────────────────────────────── --}}
<div class="tab-panel {{ $activeTab === 'terms' ? 'active' : '' }}" id="panel-terms">
    <div class="cms-card">
        <div class="cms-card-header">
            <div class="cms-card-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            </div>
            <div>
                <div class="cms-card-title">Terms & Conditions</div>
                <div class="cms-card-desc">Displayed in the app under Settings → Terms & Conditions</div>
            </div>
        </div>
        <form action="/admin/cms/terms" method="POST" id="termsForm">
            @csrf
            <input type="hidden" name="content" id="termsContent">
            <div class="editor-wrap">
                <div id="termsEditor">{!! $terms !!}</div>
            </div>
            <div class="cms-footer">
                <span class="cms-hint">Supports rich text — bold, lists, headings, links.</span>
                <button type="submit" class="btn-save">Save Terms & Conditions</button>
            </div>
        </form>
    </div>
</div>

{{-- ── About Us ─────────────────────────────────────────────── --}}
<div class="tab-panel {{ $activeTab === 'about' ? 'active' : '' }}" id="panel-about">
    <div class="cms-card">
        <div class="cms-card-header">
            <div class="cms-card-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            </div>
            <div>
                <div class="cms-card-title">About Us</div>
                <div class="cms-card-desc">Displayed in the app under Settings → About Us</div>
            </div>
        </div>
        <form action="/admin/cms/about" method="POST" id="aboutForm">
            @csrf
            <input type="hidden" name="content" id="aboutContent">
            <div class="editor-wrap">
                <div id="aboutEditor">{!! $about !!}</div>
            </div>
            <div class="cms-footer">
                <span class="cms-hint">Supports rich text — bold, lists, headings, links.</span>
                <button type="submit" class="btn-save">Save About Us</button>
            </div>
        </form>
    </div>
</div>

{{-- ── FAQs ────────────────────────────────────────────────── --}}
<div class="tab-panel {{ $activeTab === 'faqs' ? 'active' : '' }}" id="panel-faqs">
    <div class="cms-card">
        <div class="cms-card-header">
            <div class="cms-card-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            </div>
            <div>
                <div class="cms-card-title">FAQs</div>
                <div class="cms-card-desc">Frequently asked questions shown in the app</div>
            </div>
        </div>
        <form action="/admin/cms/faqs" method="POST" id="faqsForm">
            @csrf
            <div style="padding:20px 24px;">
                <div id="faqList">
                    @forelse($faqs as $i => $faq)
                    <div class="faq-item" id="faq-{{ $i }}">
                        <div class="faq-item-header">
                            <div class="faq-num">{{ $i + 1 }}</div>
                            <span style="font-size:12px;color:var(--text-muted);">Question {{ $i + 1 }}</span>
                            @if(!empty($faq['tag']))
                                <span style="padding:2px 9px;border-radius:100px;background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.25);color:var(--gold-light);font-size:10px;letter-spacing:0.5px;">{{ $faq['tag'] }}</span>
                            @endif
                            <button type="button" class="btn-remove-faq" onclick="removeFaq(this)">Remove</button>
                        </div>
                        <div class="faq-item-body">
                            <div>
                                <div class="faq-label">Tag <span style="color:var(--text-dim)">(category)</span></div>
                                <input type="text" name="faqs[{{ $i }}][tag]" class="faq-input"
                                    value="{{ $faq['tag'] ?? '' }}" placeholder="e.g. Payments, Account, General…">
                            </div>
                            <div>
                                <div class="faq-label">Question</div>
                                <input type="text" name="faqs[{{ $i }}][question]" class="faq-input"
                                    value="{{ $faq['question'] }}" placeholder="Enter the question…" required>
                            </div>
                            <div>
                                <div class="faq-label">Answer</div>
                                <textarea name="faqs[{{ $i }}][answer]" class="faq-input" rows="3"
                                    placeholder="Enter the answer…" required>{{ $faq['answer'] }}</textarea>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div id="faq-empty" style="text-align:center;padding:40px 20px;color:var(--text-muted);font-size:13px;">
                        No FAQs yet. Click "Add FAQ" to get started.
                    </div>
                    @endforelse
                </div>

                <button type="button" class="btn-add-faq" onclick="addFaq()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add FAQ
                </button>
            </div>
            <div class="cms-footer">
                <span class="cms-hint">{{ count($faqs) }} {{ Str::plural('FAQ', count($faqs)) }} saved.</span>
                <button type="submit" class="btn-save">Save FAQs</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
    // ── Tab switching ─────────────────────────────────────────
    function switchTab(tab) {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        document.querySelector(`[onclick="switchTab('${tab}')"]`).classList.add('active');
        document.getElementById(`panel-${tab}`).classList.add('active');
    }

    // ── Quill editors ─────────────────────────────────────────
    const toolbarOptions = [
        [{ 'header': [1, 2, 3, false] }],
        ['bold', 'italic', 'underline'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        ['link'],
        ['clean']
    ];

    const privacyQuill = new Quill('#privacyEditor', {
        theme: 'snow',
        placeholder: 'Write your Privacy Policy here…',
        modules: { toolbar: toolbarOptions }
    });

    const termsQuill = new Quill('#termsEditor', {
        theme: 'snow',
        placeholder: 'Write your Terms & Conditions here…',
        modules: { toolbar: toolbarOptions }
    });

    // Sync Quill content to hidden inputs on submit
    document.getElementById('privacyForm').addEventListener('submit', () => {
        document.getElementById('privacyContent').value = privacyQuill.root.innerHTML;
    });

    document.getElementById('termsForm').addEventListener('submit', () => {
        document.getElementById('termsContent').value = termsQuill.root.innerHTML;
    });

    const aboutQuill = new Quill('#aboutEditor', {
        theme: 'snow',
        placeholder: 'Write your About Us content here…',
        modules: { toolbar: toolbarOptions }
    });

    document.getElementById('aboutForm').addEventListener('submit', () => {
        document.getElementById('aboutContent').value = aboutQuill.root.innerHTML;
    });

    // ── FAQs ──────────────────────────────────────────────────
    let faqCount = {{ count($faqs) }};

    function addFaq() {
        const empty = document.getElementById('faq-empty');
        if (empty) empty.remove();

        const div = document.createElement('div');
        div.className = 'faq-item';
        div.id = `faq-${faqCount}`;
        div.innerHTML = `
            <div class="faq-item-header">
                <div class="faq-num">${faqCount + 1}</div>
                <span style="font-size:12px;color:var(--text-muted);">Question ${faqCount + 1}</span>
                <button type="button" class="btn-remove-faq" onclick="removeFaq(this)">Remove</button>
            </div>
            <div class="faq-item-body">
                <div>
                    <div class="faq-label">Tag <span style="color:var(--text-dim)">(category)</span></div>
                    <input type="text" name="faqs[${faqCount}][tag]" class="faq-input" placeholder="e.g. Payments, Account, General…">
                </div>
                <div>
                    <div class="faq-label">Question</div>
                    <input type="text" name="faqs[${faqCount}][question]" class="faq-input" placeholder="Enter the question…" required>
                </div>
                <div>
                    <div class="faq-label">Answer</div>
                    <textarea name="faqs[${faqCount}][answer]" class="faq-input" rows="3" placeholder="Enter the answer…" required></textarea>
                </div>
            </div>`;
        document.getElementById('faqList').appendChild(div);
        faqCount++;
        renumberFaqs();
    }

    function removeFaq(btn) {
        btn.closest('.faq-item').remove();
        renumberFaqs();
    }

    function renumberFaqs() {
        document.querySelectorAll('.faq-item').forEach((item, i) => {
            item.querySelector('.faq-num').textContent = i + 1;
            item.querySelectorAll('[name]').forEach(el => {
                el.name = el.name.replace(/faqs\[\d+\]/, `faqs[${i}]`);
            });
        });
    }
</script>
@endpush