@extends('admin.layout')

@section('title', 'CMS & Dynamic Policy Content')

@push('styles')
<style>
    .ck-editor__editable {
        min-height: 240px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        border-bottom-left-radius: 0.75rem !important;
        border-bottom-right-radius: 0.75rem !important;
    }
    .ck-toolbar {
        border-top-left-radius: 0.75rem !important;
        border-top-right-radius: 0.75rem !important;
        background-color: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
        border-color: #e2e8f0 !important;
    }
    .ck.ck-editor__main>.ck-editor__editable.ck-focused {
        border-color: #059669 !important;
        box-shadow: 0 0 0 1px #059669 !important;
    }
</style>
@endpush

@section('content')
<div class="space-y-8 max-w-5xl pb-12">

    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight">CMS &amp; Policy Pages Manager</h2>
            <p class="text-xs text-slate-500 mt-1">All content below is dynamically stored in the database and reflects immediately across the Website, APIs, and Mobile App.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('pages.medical-disclaimer') }}" target="_blank" class="px-3.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-all flex items-center gap-1.5">
                <i class="fa-solid fa-arrow-up-right-from-square text-[11px]"></i> View Public Pages
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-2xl flex items-center gap-3 text-xs font-semibold shadow-xs">
            <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 rounded-2xl flex items-center gap-3 text-xs font-semibold shadow-xs">
            <i class="fa-solid fa-circle-exclamation text-rose-600 text-sm"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <!-- 0. Dynamic Contact Info, WhatsApp & Business Address Card -->
    <div class="bg-white rounded-3xl border border-emerald-200 p-6 sm:p-8 shadow-sm space-y-6">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-address-book text-emerald-600 text-lg"></i> Company Contact, WhatsApp &amp; Address Settings
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Control phone numbers, floating WhatsApp widget, email, address, and Play Store app link across all pages.</p>
            </div>
            <span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full uppercase tracking-wider">Live Channels</span>
        </div>

        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="contact">

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Primary Phone Number</label>
                    <input type="text" name="phone" value="{{ $siteSetting->phone ?? '+91-9440059951' }}" placeholder="+91-9440059951 (leave empty to hide)" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Displayed on top bar, footer &amp; contact page</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">Secondary Numbers / Landline</label>
                    <input type="text" name="phone_secondary" value="{{ $siteSetting->phone_secondary ?? '9491652593, 040-24442555' }}" placeholder="Optional alternate phones" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Additional phone numbers (optional)</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">Official Email Address</label>
                    <input type="email" name="email" value="{{ $siteSetting->email ?? 'info@sabaremedies.com' }}" placeholder="info@sabaremedies.com (leave empty to hide)" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Displayed on header, footer &amp; contact page</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">WhatsApp Number (with country code)</label>
                    <input type="text" name="whatsapp" value="{{ $siteSetting->whatsapp ?? '919440059951' }}" placeholder="919440059951 (leave empty to hide)" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Controls WhatsApp floating button &amp; direct chat</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">Operating / Working Hours</label>
                    <input type="text" name="working_hours" value="{{ $siteSetting->working_hours ?? 'Mon - Sat: 9:00 AM - 7:00 PM' }}" placeholder="Mon - Sat: 9:00 AM - 7:00 PM" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Shown on contact &amp; consultation pages</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">Google Play Store App URL</label>
                    <input type="url" name="google_play_url" value="{{ $siteSetting->google_play_url ?? 'https://play.google.com/store/apps/details?id=com.sabaremedies.userapp' }}" placeholder="https://play.google.com/store/apps/details?id=..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">
                    <span class="text-[10px] text-slate-400 mt-1 block">Controls app download badge in footer</span>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Clinic / Business Physical Address</label>
                <textarea name="address" rows="2" placeholder="Enter physical clinic / pharmacy address (leave empty to hide)" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs text-slate-900">{{ $siteSetting->address ?? 'H.No. 18-8-223/12/3, Opp. Govt. Unani Hospital, Charminar, Hyderabad - 500002, Telangana, India' }}</textarea>
                <span class="text-[10px] text-slate-400 mt-1 block">Displayed in footer and contact page if present</span>
            </div>

            <div class="flex items-center justify-between pt-2">
                <label class="flex items-center gap-2 cursor-pointer text-slate-700 font-bold select-none">
                    <input type="checkbox" name="show_whatsapp_widget" value="1" {{ ($siteSetting->show_whatsapp_widget ?? true) ? 'checked' : '' }} class="w-4 h-4 rounded text-emerald-600 focus:ring-emerald-500 border-slate-300">
                    <span>Show floating green WhatsApp chat widget on website</span>
                </label>

                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Contact &amp; Address Settings
                </button>
            </div>
        </form>
    </div>

    <!-- 1. Medical & Health Disclaimer Card (HIGHLIGHTED) -->
    <div class="bg-white rounded-3xl border-2 border-red-200 p-6 sm:p-8 shadow-sm space-y-4 relative overflow-hidden">
        <div class="absolute top-0 right-0 bg-red-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-bl-xl shadow-xs">
            Essential Medical Compliance
        </div>
        <div class="flex items-center justify-between border-b border-slate-100 pb-4 pt-1">
            <div>
                <h3 class="font-extrabold text-slate-900 text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-heart-pulse text-red-600 text-lg"></i> Medical &amp; Health Disclaimer
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Crucial legal disclosure for Unani medicines, doctor consultation guidance &amp; patient safety.</p>
            </div>
            <span class="text-[10px] font-bold text-red-700 bg-red-50 px-3 py-1 rounded-full uppercase tracking-wider hidden sm:inline-block">AYUSH / Unani Law</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="disclaimer">
            <div>
                <textarea id="editor-disclaimer" name="data" class="ckeditor-editor">{!! html_entity_decode($disclaimer->data ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Medical Disclaimer
                </button>
                <a href="{{ route('pages.medical-disclaimer') }}" target="_blank" class="text-xs text-slate-500 hover:text-red-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 2. Cancellation Policy Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-ban text-orange-600 text-base"></i> Cancellation Policy
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Order cancellation window, dispatch cutoff, and refund reversal timelines.</p>
            </div>
            <span class="text-[10px] font-bold text-orange-700 bg-orange-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Order Rules</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="cancellation">
            <div>
                <textarea id="editor-cancellation" name="data" class="ckeditor-editor">{!! html_entity_decode($cancellation->data ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Cancellation Policy
                </button>
                <a href="{{ route('pages.cancellation') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 3. Privacy Policy Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-shield-halved text-emerald-600 text-base"></i> Privacy Policy Content
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Patient personal data protection, encryption, and storage guidelines.</p>
            </div>
            <span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Data Privacy</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="policy">
            <div>
                <textarea id="editor-policy" name="data" class="ckeditor-editor">{!! html_entity_decode($policy->data ?? $policy->content ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Privacy Policy
                </button>
                <a href="{{ route('pages.privacy') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 4. Terms & Conditions Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-file-contract text-blue-600 text-base"></i> Terms &amp; Conditions
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Electronic agreement, user rights, product pricing, and legal jurisdiction.</p>
            </div>
            <span class="text-[10px] font-bold text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Terms of Service</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="terms">
            <div>
                <textarea id="editor-terms" name="data" class="ckeditor-editor">{!! html_entity_decode($terms->data ?? $terms->content ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Terms &amp; Conditions
                </button>
                <a href="{{ route('pages.terms') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 5. Shipping Policy Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-truck-fast text-purple-600 text-base"></i> Shipping &amp; Delivery Policy
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Courier dispatch schedules, transit times, shipping rates, and AWB tracking.</p>
            </div>
            <span class="text-[10px] font-bold text-purple-700 bg-purple-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Logistics</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="shipping">
            <div>
                <textarea id="editor-shipping" name="data" class="ckeditor-editor">{!! html_entity_decode($shipping->data ?? $shipping->content ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Shipping Policy
                </button>
                <a href="{{ route('pages.shipping') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 6. Return & Refund Policy Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-rotate-left text-teal-600 text-base"></i> Return &amp; Refund Policy
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">7-day return guarantee, damaged medicine verification, and refund turnaround.</p>
            </div>
            <span class="text-[10px] font-bold text-teal-700 bg-teal-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Returns</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="refund">
            <div>
                <textarea id="editor-refund" name="data" class="ckeditor-editor">{!! html_entity_decode($refund->data ?? $refund->content ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Refund Policy
                </button>
                <a href="{{ route('pages.refund') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 7. Cookie Policy Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-cookie-bite text-amber-600 text-base"></i> Cookie Policy
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Session cookies, cart storage tokens, and browsing preferences.</p>
            </div>
            <span class="text-[10px] font-bold text-amber-700 bg-amber-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Cookies</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="cookie">
            <div>
                <textarea id="editor-cookie" name="data" class="ckeditor-editor">{!! html_entity_decode($cookie->data ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div class="flex items-center justify-between pt-2">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Save Cookie Policy
                </button>
                <a href="{{ route('pages.cookie-policy') }}" target="_blank" class="text-xs text-slate-500 hover:text-emerald-700 font-semibold">Preview Live Page &rarr;</a>
            </div>
        </form>
    </div>

    <!-- 8. Home About Us Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-circle-info text-emerald-600 text-base"></i> Home About Us Section
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Headline, description, and featured showcase image on the homepage.</p>
            </div>
            <span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Homepage</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="about">
            <div>
                <label class="block font-bold text-slate-700 mb-1">Section Title</label>
                <input type="text" name="title" value="{{ $about->title ?? 'About Saba Remedies' }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500 font-semibold text-xs">
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">About Us Content</label>
                <textarea id="editor-about" name="data" class="ckeditor-editor">{!! html_entity_decode($about->data ?? $about->desp ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">About Us Image (Optional)</label>
                <input type="file" name="image" accept="image/*" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2 text-slate-600 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                @if(!empty($about->image))
                    <div class="mt-2 flex items-center gap-2">
                        <img src="{{ asset('admin/img/about/' . $about->image) }}" alt="About Image" class="w-16 h-16 object-cover rounded-lg border border-slate-200" onerror="this.style.display='none'">
                        <span class="text-[10px] text-slate-400 font-mono">{{ $about->image }}</span>
                    </div>
                @endif
            </div>
            <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i> Save About Us
            </button>
        </form>
    </div>

    <!-- 9. Footer Content Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2.5">
                    <i class="fa-solid fa-shoe-prints text-emerald-600 text-base"></i> Footer Description / Extra Info
                </h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Bottom brand paragraph and company mission notes.</p>
            </div>
            <span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full uppercase tracking-wider">Footer</span>
        </div>
        <form action="{{ route('admin.cms.update') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <input type="hidden" name="type" value="footer">
            <div>
                <textarea id="editor-footer" name="data" class="ckeditor-editor">{!! html_entity_decode($footer->data ?? '', ENT_QUOTES, 'UTF-8') !!}</textarea>
            </div>
            <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-xs flex items-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i> Save Footer Content
            </button>
        </form>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.ckeditor-editor').forEach(textarea => {
            ClassicEditor
                .create(textarea, {
                    toolbar: [
                        'heading', '|',
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        'bulletedList', 'numberedList', '|',
                        'link', 'blockQuote', '|',
                        'undo', 'redo'
                    ],
                    heading: {
                        options: [
                            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
                        ]
                    }
                })
                .catch(error => {
                    console.error('CKEditor Init Error:', error);
                });
        });
    });
</script>
@endpush