@extends('backend.app')

@section('title', 'Home Page CMS')

@push('style')
    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
@endpush

@section('content')
<div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="toolbar" id="kt_toolbar">
        <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
            <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                <h1 class="text-dark fw-bold my-1 fs-2">Home Page CMS</h1>
                <ul class="breadcrumb fw-semibold fs-base my-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item text-dark">Home Page CMS</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Navigation Tabs -->
            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#tab_main_about" role="tab">1. Main & about</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#tab_stories" role="tab">2. Stories from our events</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#tab_home_contact" role="tab">3. Contact section</a>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content">
                
                <!-- 1. Main & about -->
                <div class="tab-pane fade show active" id="tab_main_about" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="section" value="main_about">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Main & About</h3>

                                {{-- ===== HERO / BANNER ===== --}}
                                <div class="card bg-light mb-6">
                                    <div class="card-body p-4">
                                        <h4 class="mb-4 border-bottom pb-2">Hero Banner</h4>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Main Image</label>
                                                    <input type="file" name="main_about[hero_image]" class="form-control" accept="image/*">
                                                    @if(!empty($page->content['main_about']['hero_image']))
                                                        <div class="mt-2">
                                                            <img src="{{ asset('storage/' . $page->content['main_about']['hero_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                                            <input type="hidden" name="main_about[hero_image_existing]" value="{{ $page->content['main_about']['hero_image'] }}">
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Background Image / Video</label>
                                                    <input type="file" name="main_about[bg_image]" class="form-control" accept="image/*,video/*">
                                                    <div class="form-text text-muted fs-7 mt-1">Upload an image (JPEG, PNG, JPG, GIF, SVG) or video (MP4, MOV, OGG, QT, WEBM) up to 50MB. For best performance, we recommend keeping it under 10MB.</div>
                                                    @if(!empty($page->content['main_about']['bg_image']))
                                                        @php
                                                            $bgImage = $page->content['main_about']['bg_image'];
                                                            $isBgVideo = in_array(pathinfo($bgImage, PATHINFO_EXTENSION), ['mp4', 'webm', 'ogg', 'mov', 'qt']);
                                                        @endphp
                                                        <div class="mt-2">
                                                            @if($isBgVideo)
                                                                <video src="{{ asset('storage/' . $bgImage) }}" controls class="img-thumbnail" style="max-height:120px;"></video>
                                                            @else
                                                                <img src="{{ asset('storage/' . $bgImage) }}" class="img-thumbnail" style="max-height:120px;">
                                                            @endif
                                                            <input type="hidden" name="main_about[bg_image_existing]" value="{{ $bgImage }}">
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-3">
                                            <label class="form-label">Hero Text</label>
                                            <input type="text" name="main_about[hero_text]" class="form-control" value="{{ old('main_about.hero_text', $page->content['main_about']['hero_text'] ?? '') }}">
                                        </div>
                                    </div>
                                </div>

                                {{-- ===== SLIDE IMAGES ===== --}}
                                <div class="card mb-6">
                                    <div class="card-body p-4">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <h4 class="m-0">Slide Images</h4>
                                            <button type="button" class="btn btn-sm btn-light-primary" id="add-slide-card">+ Add Slide</button>
                                        </div>
                                        <div id="slide-cards-container">
                                            @php $slides = old('main_about.slides', $page->content['main_about']['slides'] ?? []); @endphp
                                            @foreach($slides as $index => $slide)
                                                <div class="card border mb-3 slide-card-item">
                                                    <div class="card-body p-3 position-relative">
                                                        <button type="button" class="btn btn-sm btn-danger remove-card position-absolute top-0 end-0 m-2">X</button>
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <label class="form-label">Order ID</label>
                                                                <input type="number" name="main_about[slides][{{ $index }}][sort_order]" class="form-control" value="{{ $slide['sort_order'] ?? $loop->index }}"> 
                                                            </div>
                                                            <div class="col-md-8">
                                                                <label class="form-label">Slide Image</label>
                                                                <input type="file" name="main_about_slide_images[{{ $index }}]" class="form-control" accept="image/*">
                                                                @if(!empty($slide['image']))
                                                                    <div class="mt-1">
                                                                        <img src="{{ asset('storage/' . $slide['image']) }}" class="img-thumbnail" style="max-height:80px;">
                                                                        <input type="hidden" name="main_about[slides][{{ $index }}][image]" value="{{ $slide['image'] }}">
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                {{-- ===== ABOUT SECTION ===== --}}
                                <div class="card mb-6">
                                    <div class="card-body p-4">
                                        <h4 class="mb-4 border-bottom pb-2">About Section</h4>
                                        <div class="mb-3">
                                            <label class="form-label required">Title</label>
                                            <input type="text" name="main_about[about_title]" class="form-control" value="{{ old('main_about.about_title', $page->content['main_about']['about_title'] ?? '') }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label required">Description</label>
                                            <div id="editor" style="height: 100px;"></div>
                                            <input type="hidden" name="main_about[about_description]" id="about_description_hidden" value="{{ old('main_about.about_description', $page->content['main_about']['about_description'] ?? '') }}">
                                        </div>
                                        <div class="mb-0">
                                            <label class="form-label">Sub Description</label>
                                            <textarea name="main_about[about_sub_description]" class="form-control" rows="3">{{ old('main_about.about_sub_description', $page->content['main_about']['about_sub_description'] ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Save Main & About</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 2. Secure & Transparent -->
                <div class="tab-pane fade" id="tab_secure_transparent" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="section" value="secure_transparent">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Secure & Transparent</h3>

                                @php $secTrans = old('secure_transparent', $page->content['secure_transparent'] ?? []); @endphp
                                @for($i = 0; $i < 3; $i++)
                                    <div class="card bg-light mb-4">
                                        <div class="card-body p-4">
                                            <h5 class="card-title text-muted mb-3">Option {{ $i + 1 }}</h5>
                                            <div class="mb-3">
                                                <label class="form-label required">Title</label>
                                                <input type="text" name="secure_transparent[{{ $i }}][title]" class="form-control" value="{{ $secTrans[$i]['title'] ?? '' }}" required>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label required">Description</label>
                                                <textarea name="secure_transparent[{{ $i }}][description]" class="form-control" rows="2" required>{{ $secTrans[$i]['description'] ?? '' }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                @endfor

                                <button type="submit" class="btn btn-primary">Save Secure & Transparent</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 3. Promote Anything -->
                <div class="tab-pane fade" id="tab_promote_anything" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="section" value="promote_anything">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Promote Anything</h3>

                                <div class="card bg-light mb-3">
                                    <div class="card-body p-4">
                                        <div class="mb-3">
                                            <label class="form-label required">Title</label>
                                            <input type="text" name="promote_anything[title]" class="form-control" value="{{ old('promote_anything.title', $page->content['promote_anything']['title'] ?? '') }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label required">Subtitle</label>
                                            <input type="text" name="promote_anything[subtitle]" class="form-control" value="{{ old('promote_anything.subtitle', $page->content['promote_anything']['subtitle'] ?? '') }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label required">Description</label>
                                            <textarea name="promote_anything[description]" class="form-control" rows="3" required>{{ old('promote_anything.description', $page->content['promote_anything']['description'] ?? '') }}</textarea>
                                        </div>
                                        <div class="mb-0">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <label class="form-label m-0">Feature List (Dynamic)</label>
                                                <button type="button" class="btn btn-sm btn-light-primary" id="add-promote-feature">Add Feature</button>
                                            </div>
                                            <div id="promote-features-container">
                                                @php $promFeatures = old('promote_anything_features', $page->content['promote_anything']['features'] ?? []); @endphp
                                                @foreach($promFeatures as $feat)
                                                    <div class="d-flex mb-2 promote-feat-item">
                                                        <input type="text" name="promote_anything_features[]" class="form-control me-2" value="{{ $feat }}" required>
                                                        <button type="button" class="btn btn-danger remove-feat">Delete</button>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary mt-3">Save Promote Anything</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 4. Why Choose Omni -->
                <div class="tab-pane fade" id="tab_why_choose_us" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="section" value="why_choose_us">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Why Advertisers and Hosts Choose Omni</h3>

                                <div class="row">
                                    <!-- Section 1: Advertisers -->
                                    <div class="col-md-6 border-end">
                                        <div class="card bg-light mb-3">
                                            <div class="card-body p-4">
                                                <h4 class="mb-3 text-dark border-bottom pb-2">Advertisers Section</h4>
                                                <div class="mb-3">
                                                    <label class="form-label required">Title</label>
                                                    <input type="text" name="why_choose_us[advertisers][title]" class="form-control" value="{{ old('why_choose_us.advertisers.title', $page->content['why_choose_us']['advertisers']['title'] ?? '') }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <label class="form-label m-0">Features</label>
                                                        <button type="button" class="btn btn-sm btn-light-primary" id="add-why-adv-feature">Add Feature</button>
                                                    </div>
                                                    <div id="why-adv-features-container">
                                                        @php $whyAdvFeats = old('why_choose_us_advertisers_features', $page->content['why_choose_us']['advertisers']['features'] ?? []); @endphp
                                                        @foreach($whyAdvFeats as $feat)
                                                            <div class="d-flex mb-2 why-adv-feat-item">
                                                                <input type="text" name="why_choose_us_advertisers_features[]" class="form-control me-2" value="{{ $feat }}" required>
                                                                <button type="button" class="btn btn-danger remove-feat">Delete</button>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Section 2: Hosts -->
                                    <div class="col-md-6">
                                        <div class="card bg-light mb-3">
                                            <div class="card-body p-4">
                                                <h4 class="mb-3 text-dark border-bottom pb-2">Hosts Section</h4>
                                                <div class="mb-3">
                                                    <label class="form-label required">Title</label>
                                                    <input type="text" name="why_choose_us[hosts][title]" class="form-control" value="{{ old('why_choose_us.hosts.title', $page->content['why_choose_us']['hosts']['title'] ?? '') }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <label class="form-label m-0">Features</label>
                                                        <button type="button" class="btn btn-sm btn-light-primary" id="add-why-host-feature">Add Feature</button>
                                                    </div>
                                                    <div id="why-host-features-container">
                                                        @php $whyHostFeats = old('why_choose_us_hosts_features', $page->content['why_choose_us']['hosts']['features'] ?? []); @endphp
                                                        @foreach($whyHostFeats as $feat)
                                                            <div class="d-flex mb-2 why-host-feat-item">
                                                                <input type="text" name="why_choose_us_hosts_features[]" class="form-control me-2" value="{{ $feat }}" required>
                                                                <button type="button" class="btn btn-danger remove-feat">Delete</button>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Consolidated Bottom Text -->
                                <div class="card bg-light mb-4">
                                    <div class="card-body p-4">
                                        <label class="form-label required fw-bold">Overall Section Bottom Text</label>
                                        <input type="text" name="why_choose_us.bottom_text" class="form-control" value="{{ old('why_choose_us.bottom_text', $page->content['why_choose_us']['bottom_text'] ?? '') }}" required>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Save Why Choose Us</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 2. Stories from our events -->
                <div class="tab-pane fade" id="tab_stories" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="section" value="stories">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Stories from our Events</h3>

                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <p class="text-muted m-0">Add stories with an image, description and sort order.</p>
                                    <button type="button" class="btn btn-sm btn-light-primary" id="add-story-card">+ Add Story</button>
                                </div>

                                <div id="story-cards-container">
                                    @php $stories = old('stories', $page->content['stories'] ?? []); @endphp
                                    @foreach($stories as $index => $story)
                                        <div class="card bg-light mb-3 story-card-item">
                                            <div class="card-body p-4 position-relative">
                                                <button type="button" class="btn btn-sm btn-danger remove-card position-absolute top-0 end-0 m-2">X</button>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Image</label>
                                                            <input type="file" name="story_images[{{ $index }}]" class="form-control" accept="image/*">
                                                            @if(!empty($story['image']))
                                                                <div class="mt-1">
                                                                    <img src="{{ asset('storage/' . $story['image']) }}" class="img-thumbnail" style="max-height:100px;">
                                                                    <input type="hidden" name="stories[{{ $index }}][image]" value="{{ $story['image'] }}">
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label required">Description</label>
                                                            <textarea name="stories[{{ $index }}][description]" class="form-control" rows="4" required>{{ $story['description'] ?? '' }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <div class="mb-0">
                                                            <label class="form-label required">Sort Order</label>
                                                            <input type="number" name="stories[{{ $index }}][sort_order]" class="form-control" value="{{ $story['sort_order'] ?? $loop->index }}" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <button type="submit" class="btn btn-primary mt-4">Save Stories</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 3. Contact Section -->
                <div class="tab-pane fade" id="tab_home_contact" role="tabpanel">
                    <div class="card card-flush">
                        <div class="card-body">
                            <form action="{{ route('cms.home-page.update') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="section" value="home_contact">

                                <h3 class="mb-6 text-primary border-bottom pb-3">Contact Section</h3>

                                <div class="card bg-light mb-6">
                                    <div class="card-body p-4">
                                        <div class="mb-5">
                                            <label class="form-label required">Title</label>
                                            <input type="text" name="home_contact[title]" class="form-control" value="{{ old('home_contact.title', $page->content['home_contact']['title'] ?? '') }}" required>
                                        </div>
                                        <div class="mb-5">
                                            <label class="form-label required">Description</label>
                                            <input type="text" name="home_contact[description]" class="form-control" value="{{ old('home_contact.description', $page->content['home_contact']['description'] ?? '') }}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Background Image</label>
                                            <input type="file" name="home_contact[bg_image]" class="form-control" accept="image/*">
                                            <div class="form-text text-muted fs-7 mt-1">Upload an image (JPEG, PNG, JPG, GIF, SVG) up to 5MB.</div>
                                            @if(!empty($page->content['home_contact']['bg_image']))
                                                <div class="mt-2">
                                                    <img src="{{ asset('storage/' . $page->content['home_contact']['bg_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                                    <input type="hidden" name="home_contact[bg_image_existing]" value="{{ $page->content['home_contact']['bg_image'] }}">
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Save Contact Section</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@push('script')
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
$(document).ready(function() {
    // Register inline styles instead of class names
    const Size = Quill.import('attributors/style/size');
    Size.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '32px'];
    Quill.register(Size, true);

    const Align = Quill.import('attributors/style/align');
    Quill.register(Align, true);

    // Inject custom CSS to display numeric font sizes in the toolbar dropdown
    const sizeCss = `
    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
        content: '12px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
        content: '14px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
        content: '16px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
        content: '18px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
        content: '20px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
        content: '24px' !important;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
        content: '32px' !important;
    }
    `;
    const styleEl = document.createElement('style');
    styleEl.innerHTML = sizeCss;
    document.head.appendChild(styleEl);

    // Custom header styling to bypass frontend resets
    const Header = Quill.import('formats/header');
    class CustomHeader extends Header {
        static create(value) {
            const node = super.create(value);
            if (value === 1) {
                node.setAttribute('style', 'font-size: 2em !important; font-weight: bold !important; margin-top: 0.67em !important; margin-bottom: 0.67em !important; display: block !important;');
            } else if (value === 2) {
                node.setAttribute('style', 'font-size: 1.5em !important; font-weight: bold !important; margin-top: 0.83em !important; margin-bottom: 0.83em !important; display: block !important;');
            } else if (value === 3) {
                node.setAttribute('style', 'font-size: 1.17em !important; font-weight: bold !important; margin-top: 1em !important; margin-bottom: 1em !important; display: block !important;');
            } else if (value === 4) {
                node.setAttribute('style', 'font-size: 1em !important; font-weight: bold !important; margin-top: 1.33em !important; margin-bottom: 1.33em !important; display: block !important;');
            } else if (value === 5) {
                node.setAttribute('style', 'font-size: 0.83em !important; font-weight: bold !important; margin-top: 1.67em !important; margin-bottom: 1.67em !important; display: block !important;');
            } else if (value === 6) {
                node.setAttribute('style', 'font-size: 0.67em !important; font-weight: bold !important; margin-top: 2.33em !important; margin-bottom: 2.33em !important; display: block !important;');
            }
            return node;
        }
    }
    Quill.register(CustomHeader, true);

    let quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'size': ['12px', false, '16px', '18px', '20px', '24px', '32px'] }],
                [{ 'align': [] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image']
            ]
        },
        placeholder: 'Type your content here...'
    });

    // Safely load HTML content dynamically to prevent double newline parser bugs
    quill.root.innerHTML = {!! json_encode(old('main_about.about_description', $page->content['main_about']['about_description'] ?? '')) !!};

    quill.on('text-change', function() {
        document.getElementById('about_description_hidden').value = quill.root.innerHTML;
    });

    $('form').on('submit', function() {
        if(document.getElementById('about_description_hidden')) {
            document.getElementById('about_description_hidden').value = quill.root.innerHTML;
        }
    });

    let slideIndex = $('.slide-card-item').length;
    let storyIndex = $('.story-card-item').length;

    // Persist active tab across page reloads using localStorage
    let activeTab = localStorage.getItem('home_cms_active_tab');
    if (activeTab) {
        let triggerEl = document.querySelector('a[href="' + activeTab + '"]');
        if (triggerEl) {
            let tab = new bootstrap.Tab(triggerEl);
            tab.show();
        }
    }

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        let target = $(e.target).attr("href");
        localStorage.setItem('home_cms_active_tab', target);
    });

    // Add Slide Card
    $('#add-slide-card').click(function() {
        let html = `
            <div class="card border mb-3 slide-card-item">
                <div class="card-body p-3 position-relative">
                    <button type="button" class="btn btn-sm btn-danger remove-card position-absolute top-0 end-0 m-2">X</button>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">Order ID</label>
                            <input type="number" name="main_about[slides][${slideIndex}][sort_order]" class="form-control" value="${slideIndex}">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Slide Image</label>
                            <input type="file" name="main_about_slide_images[${slideIndex}]" class="form-control" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>`;
        $('#slide-cards-container').append(html);
        slideIndex++;
    });

    // Add Story Card
    $('#add-story-card').click(function() {
        let html = `
            <div class="card mb-3 story-card-item">
                <div class="card-body p-4 position-relative">
                    <button type="button" class="btn btn-sm btn-danger remove-card position-absolute top-0 end-0 m-2">X</button>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Image</label>
                                <input type="file" name="story_images[${storyIndex}]" class="form-control" accept="image/*">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label required">Description</label>
                                <textarea name="stories[${storyIndex}][description]" class="form-control" rows="4" required></textarea>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-0">
                                <label class="form-label required">Sort Order</label>
                                <input type="number" name="stories[${storyIndex}][sort_order]" class="form-control" value="${storyIndex}" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
        $('#story-cards-container').append(html);
        storyIndex++;
    });

    // Add Promote Feature
    $('#add-promote-feature').click(function() {
        let html = `
            <div class="d-flex mb-2 promote-feat-item">
                <input type="text" name="promote_anything_features[]" class="form-control me-2" required>
                <button type="button" class="btn btn-danger remove-feat">Delete</button>
            </div>`;
        $('#promote-features-container').append(html);
    });

    // Add Why Choose Us Advertisers Feature
    $('#add-why-adv-feature').click(function() {
        let html = `
            <div class="d-flex mb-2 why-adv-feat-item">
                <input type="text" name="why_choose_us_advertisers_features[]" class="form-control me-2" required>
                <button type="button" class="btn btn-danger remove-feat">Delete</button>
            </div>`;
        $('#why-adv-features-container').append(html);
    });

    // Add Why Choose Us Hosts Feature
    $('#add-why-host-feature').click(function() {
        let html = `
            <div class="d-flex mb-2 why-host-feat-item">
                <input type="text" name="why_choose_us_hosts_features[]" class="form-control me-2" required>
                <button type="button" class="btn btn-danger remove-feat">Delete</button>
            </div>`;
        $('#why-host-features-container').append(html);
    });

    // Remove Card
    $(document).on('click', '.remove-card', function() {
        $(this).closest('.card').remove();
    });

    // Remove Feature Item
    $(document).on('click', '.remove-feat', function() {
        $(this).closest('div').remove();
    });
});
</script>
@endpush
@endsection