@extends('admin.layouts.master')
@section('title', 'Page Management')
@section('content')

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    .page-tabs-wrapper { background: #fff; border-bottom: 1px solid #dee2e6; margin: -15px -15px 20px -15px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
    .page-tabs-nav { display: flex; overflow-x: auto; white-space: nowrap; }
    .page-tabs-nav::-webkit-scrollbar { height: 3px; }
    .page-tabs-nav::-webkit-scrollbar-thumb { background: #007bff; border-radius: 3px; }
    .page-tab { padding: 15px 20px; border: none; border-bottom: 3px solid transparent; background: transparent; color: #6c757d; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 14px; }
    .page-tab:hover { color: #007bff; background: rgba(0,123,255,0.03); text-decoration: none; }
    .page-tab.active { color: #007bff; border-bottom-color: #007bff; background: rgba(0,123,255,0.05); }
    .tab-create-new { margin-left: auto; padding: 12px 20px; background: #007bff; color: white; border: none; cursor: pointer; font-weight: 600; transition: all 0.2s; display: flex; align-items: center; gap: 8px; border-radius: 4px; }
    .tab-create-new:hover { background: #0056b3; }
    .builder-wrapper { display: flex; gap: 0; margin: 0 -15px; position: relative; }

    .widget-library {
        width: 10%;
        min-width: 280px;
        background: #fff;
        border-right: 1px solid #dee2e6;
        padding: 0;
        overflow: hidden;
        max-height: calc(100vh - 150px);
        transition: all 0.3s ease;
        position: relative;
        flex-shrink: 0;
    }

    .widget-library-header {
        padding: 12px 15px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .widget-library-title {
        font-weight: 600;
        font-size: 13px;
        color: #495057;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .widget-library-content {
        padding: 20px;
        overflow-y: auto;
        max-height: calc(100vh - 210px);
    }
    .widget-library-content::-webkit-scrollbar { width: 6px; }
    .widget-library-content::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }

    .widget-section { margin-bottom: 20px; }
    .widget-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; letter-spacing: 0.5px; }
    .widget-item { padding: 10px; margin-bottom: 8px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; cursor: grab; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #495057; user-select: none; }
    .widget-item:hover { background: #e9ecef; border-color: #007bff; color: #007bff; transform: translateX(3px); }
    .widget-item:active { cursor: grabbing; }
    .widget-item.dragging { opacity: 0.5; transform: scale(0.95); }
    .widget-item i { font-size: 14px; }
    .widget-item.ad-item { border-left: 3px solid #dc3545; }

    .builder-content {
        flex: 1;
        width: 60%;
        padding: 0;
        overflow: hidden;
        max-height: calc(100vh - 150px);
        background: #f4f6f9;
        position: relative;
        transition: all 0.3s ease;
    }
    .builder-content-header {
        padding: 12px 20px;
        background: #fff;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .builder-content-title {
        font-weight: 600;
        font-size: 13px;
        color: #495057;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .builder-content-body {
        padding: 20px;
        overflow-y: auto;
        max-height: calc(100vh - 210px);
    }

    .content-columns { display: flex; gap: 20px; height: 100%; }
    .main-column {
        flex: 1;
        min-width: 300px;
        position: relative;
        transition: all 0.3s ease;
    }

    .sidebar-column {
        width: 30%;
        min-width: 280px;
        max-width: 600px;
        position: relative;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .card {
        margin-bottom: 20px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: 0;
        transition: all 0.3s ease;
    }
    .card-header {
        background: #fff;
        border-bottom: 1px solid #dee2e6;
        padding: 12px 15px;
        font-weight: 600;
        font-size: 14px;
        color: #495057;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: all 0.2s ease;
    }
    .card-header:hover {
        background: #f8f9fa;
    }
    .card-header .card-title-text {
        display: flex;
        align-items: center;
    }
    .card-header .card-title-text i {
        margin-right: 8px;
        color: #007bff;
    }
    .card-header .card-toggle-icon {
        transition: transform 0.3s ease;
        color: #6c757d;
        font-size: 14px;
        margin-left: auto;
    }
    .card-header .card-toggle-icon.collapsed {
        transform: rotate(-180deg);
    }
    .card-body {
        padding: 15px;
        transition: max-height 0.3s ease;
        overflow: hidden;
        max-height: 2000px;
    }
    .card-body.collapsed {
        max-height: 0;
        padding: 0 15px;
        border: none;
    }

    .drop-zone, .widgets-drop-zone { min-height: 200px; padding: 15px; border: 2px dashed #dee2e6; border-radius: 6px; background: #fff; transition: all 0.3s ease; position: relative; }
    .drop-zone.drag-over, .widgets-drop-zone.drag-over { border-color: #007bff; background: linear-gradient(135deg, #e7f3ff 0%, #f0f7ff 100%); box-shadow: inset 0 0 20px rgba(0, 123, 255, 0.1); }
    .drop-zone.drag-over::after, .widgets-drop-zone.drag-over::after { content: "Drop widget here"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #007bff; font-weight: 600; font-size: 16px; pointer-events: none; animation: fadeInScale 0.3s ease; }
    @keyframes fadeInScale { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
    .drop-zone-empty { text-align: center; padding: 40px 20px; color: #6c757d; animation: fadeIn 0.5s ease; }
    .drop-zone-empty i { font-size: 48px; opacity: 0.3; margin-bottom: 15px; display: block; animation: float 3s ease-in-out infinite; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .drop-zone-empty h4 { font-size: 16px; margin: 0 0 8px 0; font-weight: 600; }
    .drop-zone-empty p { font-size: 13px; margin: 0; }
    .dropped-widget { background: #fff; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin-bottom: 12px; transition: all 0.2s ease; cursor: move; }
    .dropped-widget:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .dropped-widget.ad-widget { border-left: 3px solid #dc3545; }
    .dropped-widget.ui-sortable-helper { box-shadow: 0 10px 25px rgba(0,0,0,.25) !important; opacity: 0.95 !important; cursor: grabbing !important; z-index: 1000; border: 2px solid #007bff; transform: none !important; }
    .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: grab; }
    .widget-header:active { cursor: grabbing; }
    .widget-title { font-weight: 600; font-size: 13px; color: #495057; display: flex; align-items: center; gap: 6px; }
    .widget-title i { color: #007bff; font-size: 14px; }
    .widget-controls { display: flex; gap: 4px; }
    .widget-btn { width: 28px; height: 28px; border: 1px solid #dee2e6; background: #fff; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #6c757d; transition: all 0.2s; padding: 0; }
    .widget-btn:hover { border-color: #007bff; color: #007bff; background: #f0f7ff; transform: scale(1.1); }
    .widget-btn.btn-danger:hover { border-color: #dc3545; color: #dc3545; background: #ffe8e8; }
    .widget-content { padding-top: 10px; border-top: 1px solid #e9ecef; overflow: visible; transition: max-height 0.3s ease; max-height: 1000px; }
    .widget-content.collapsed { max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden; }
    .widget-editor, .widget-input, .widget-select { width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; box-sizing: border-box; }
    .widget-input { margin-bottom: 8px; }
    .widget-editor:focus, .widget-input:focus, .widget-select:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
    .widget-placeholder { background: linear-gradient(135deg, #e7f3ff 0%, #f0f7ff 100%); border: 2px dashed #007bff !important; border-radius: 6px; margin-bottom: 12px; height: 60px !important; position: relative; }
    .widget-placeholder::before { content: "Drop here"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #007bff; font-weight: 600; font-size: 13px; opacity: 0.7; }
    .page-actions { position: fixed; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 999; }
    .btn-action { padding: 12px 24px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: flex; align-items: center; gap: 8px; font-size: 14px; transition: all 0.2s; }
    .btn-save { background: #28a745; color: white; }
    .btn-save:hover { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40,167,69,.3); }
    .btn-preview { background: white; color: #495057; border: 1px solid #dee2e6; }
    .btn-preview:hover { background: #f8f9fa; border-color: #007bff; color: #007bff; }
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 1050; align-items: center; justify-content: center; }
    .modal-overlay.active { display: flex; }
    .modal-content { background: white; border-radius: 4px; width: 90%; max-width: 500px; box-shadow: 0 5px 20px rgba(0,0,0,.3); }
    .modal-header { padding: 15px 20px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; }
    .modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
    .modal-close { background: none; border: none; font-size: 24px; color: #6c757d; cursor: pointer; padding: 0; line-height: 1; }
    .modal-close:hover { color: #dc3545; }
    .modal-body { padding: 20px; }
    .modal-footer { padding: 15px 20px; border-top: 1px solid #dee2e6; display: flex; justify-content: flex-end; gap: 10px; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 5px; color: #495057; font-size: 14px; }
    .form-control { display: block; width: 100%; padding: 8px 12px; font-size: 14px; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; }
    .form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
    textarea.form-control { resize: vertical; }
    .btn { padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 14px; transition: all 0.2s; }
    .btn-primary { background: #007bff; color: white; }
    .btn-primary:hover { background: #0056b3; }
    .btn-secondary { background: #6c757d; color: white; }
    .btn-secondary:hover { background: #545b62; }

    /* Summernote fixes */
    .note-editor { position: relative !important; z-index: 1; width: 100%; }
    .note-editor.note-frame { border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; }
    .note-editor .note-editing-area .note-editable {
        background: #fff !important;
        min-height: 200px !important;
        padding: 15px !important;
        font-size: 14px;
        line-height: 1.6;
    }
    .note-toolbar {
        position: relative !important;
        z-index: 2;
        background: #f8f9fa;
        border-bottom: 1px solid #ced4da;
        border-radius: 4px 4px 0 0;
        padding: 10px;
    }
    .note-toolbar .btn-group { margin-right: 5px; }
    .note-toolbar button { padding: 4px 8px !important; }
    .note-toolbar select { padding: 4px 8px !important; height: auto; }
    .note-popover { z-index: 1060 !important; }
    .note-modal { z-index: 1070 !important; }
    .note-editable { cursor: text !important; }
    .note-statusbar {
        background: #f8f9fa !important;
        border-top: 1px solid #ced4da;
        padding: 8px 10px !important;
        font-size: 11px;
    }
    .note-editor .dropdown-menu { z-index: 1071 !important; }
    .note-editor .note-btn-group { margin-bottom: 5px; }
    .note-editor .btn-light { background: #fff; border: 1px solid #ced4da; }
    .note-editor .btn-light:hover { background: #f0f7ff; }

    .note-editor, .note-toolbar, .note-editable, .note-statusbar,
    input, select, textarea, button {
        -webkit-user-drag: none !important;
        user-drag: none !important;
    }

    .text-muted { color: #6c757d !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .d-block { display: block !important; }

    @media (max-width: 1200px) {
        .content-columns { flex-direction: column; }
        .sidebar-column { width: 100%; }
        .widget-library { width: 15%; }
    }
    @media (max-width: 768px) {
        .builder-wrapper { flex-direction: column; }
        .widget-library { width: 100%; max-height: 300px; border-right: none; border-bottom: 1px solid #dee2e6; }
        .builder-content { width: 100%; }
        .sidebar-column { width: 100%; }
        .page-actions { position: static; margin-top: 20px; flex-direction: column; }
        .btn-action { width: 100%; justify-content: center; }
    }
</style>

<div class="page-management-wrapper">
    <div class="page-tabs-wrapper">
        <div class="page-tabs-nav">
            @forelse($pages as $page)
                <a href="{{ route('page.edit', $page->id) }}" class="page-tab {{ isset($currentPage) && $currentPage->id == $page->id ? 'active' : '' }}">
                    <i class="fas fa-file-alt"></i>
                    <span>{{ Str::limit($page->title, 15) }}</span>
                </a>
            @empty
                <div style="padding: 15px; color: #6c757d;"><span>No pages available</span></div>
            @endforelse
            <a href="{{ route('layouts.index') }}" class="page-tab {{ !isset($currentPage) ? 'active' : '' }}">
                <i class="fas fa-home"></i>
                <span>Home Page</span>
            </a>
            <button class="tab-create-new" onclick="openCreatePageModal()">
                <i class="fas fa-plus"></i>
                <span>New Page</span>
            </button>
        </div>
    </div>

    @if (isset($currentPage))
        <form id="pageForm" method="POST" action="{{ route('page.update', $currentPage->id) }}">
            @csrf
            @method('PUT')
            <input type="hidden" name="top_content_widgets" id="topContentWidgetsData">
            <input type="hidden" name="content_widgets" id="contentWidgetsData">
            <input type="hidden" name="bottom_content_widgets" id="bottomContentWidgetsData">
            <input type="hidden" name="sidebar_widgets" id="sidebarWidgetsData">

            <div class="builder-wrapper">
                <!-- Widget Library Section -->
                <div class="widget-library" id="widgetLibrary">
                    <div class="widget-library-header">
                        <span class="widget-library-title">📦 Widget Library</span>
                    </div>
                    <div class="widget-library-content">
                        <div class="widget-section">
                            <div class="widget-section-title">📝 Content</div>
                            <div class="widget-item" draggable="true" data-type="paragraph"><i class="fas fa-paragraph"></i><span>Paragraph</span></div>
                            <div class="widget-item" draggable="true" data-type="heading"><i class="fas fa-heading"></i><span>Heading</span></div>
                            <div class="widget-item" draggable="true" data-type="image"><i class="fas fa-image"></i><span>Image</span></div>
                            <div class="widget-item" draggable="true" data-type="video"><i class="fas fa-video"></i><span>Video</span></div>
                        </div>
                        <div class="widget-section">
                            <div class="widget-section-title">🎨 Layout</div>
                            <div class="widget-item" draggable="true" data-type="divider"><i class="fas fa-minus"></i><span>Divider</span></div>
                            <div class="widget-item" draggable="true" data-type="spacer"><i class="fas fa-arrows-alt-v"></i><span>Spacer</span></div>
                        </div>
                        <div class="widget-section">
                            <div class="widget-section-title">📢 Ads</div>
                            <div class="widget-item ad-item" draggable="true" data-type="ad"><i class="fas fa-ad"></i><span>Advertisement</span></div>
                        </div>
                        <div class="widget-section">
                            <div class="widget-section-title">🧩 Widgets</div>
                            <div class="widget-item" draggable="true" data-type="widget"><i class="fas fa-th-large"></i><span>Custom Widget</span></div>
                        </div>
                    </div>
                </div>

                <!-- Builder Content Section -->
                <div class="builder-content" id="builderContent">
                    <div class="builder-content-header">
                        <span class="builder-content-title">📄 Main Content</span>
                    </div>
                    <div class="builder-content-body">
                        <div class="content-columns">
                            <div class="main-column" id="mainColumn">
                                <!-- Page Information Card -->
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-file-alt"></i> Page Information
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label>Page Title</label>
                                            <input type="text" class="form-control" name="title" value="{{ $currentPage->title }}" placeholder="Enter page title">
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select class="form-control" name="status">
                                                        <option value="draft" {{ $currentPage->status == 'draft' ? 'selected' : '' }}>Draft</option>
                                                        <option value="published" {{ $currentPage->status == 'published' ? 'selected' : '' }}>Published</option>
                                                        <option value="archived" {{ $currentPage->status == 'archived' ? 'selected' : '' }}>Archived</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Subtitle</label>
                                                    <input type="text" class="form-control" name="subtitle" value="{{ $currentPage->subtitle }}" placeholder="Optional subtitle">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Top Content Card -->
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-layer-group"></i> Top Content
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <small class="text-muted d-block mb-3"><i class="fas fa-info-circle"></i> Add widgets to top section</small>
                                        <div class="drop-zone" id="topContentDropZone"></div>
                                    </div>
                                </div>

                                <!-- Middle Content Card -->
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-layer-group"></i> Middle Content
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <small class="text-muted d-block mb-3"><i class="fas fa-info-circle"></i> Add widgets to middle section</small>
                                        <div class="drop-zone" id="contentDropZone"></div>
                                    </div>
                                </div>

                                <!-- Bottom Content Card -->
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-layer-group"></i> Bottom Content
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <small class="text-muted d-block mb-3"><i class="fas fa-info-circle"></i> Add widgets to bottom section</small>
                                        <div class="drop-zone" id="bottomContentDropZone"></div>
                                    </div>
                                </div>

                                <!-- SEO Settings Card -->
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-search"></i> SEO Settings
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label>Meta Title</label>
                                            <input type="text" class="form-control" name="meta_title" value="{{ $currentPage->meta_title }}" placeholder="SEO title">
                                        </div>
                                        <div class="form-group">
                                            <label>Meta Description</label>
                                            <textarea class="form-control" name="meta_description" rows="3" placeholder="Brief description">{{ $currentPage->meta_description }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Sidebar Column Section -->
                            <div class="sidebar-column" id="sidebarColumn">
                                <div class="card">
                                    <div class="card-header" onclick="toggleCard(this)">
                                        <span class="card-title-text">
                                            <i class="fas fa-th-large"></i> Sidebar Widgets
                                        </span>
                                        <i class="fas fa-chevron-down card-toggle-icon"></i>
                                    </div>
                                    <div class="card-body">
                                        <small class="text-muted d-block mb-3"><i class="fas fa-info-circle"></i> Drag widgets here to add to sidebar</small>
                                        <div class="widgets-drop-zone" id="sidebarDropZone"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="page-actions">
                <a href="{{ route('page', $currentPage->slug) }}" target="_blank" class="btn-action btn-preview">
                    <i class="fas fa-eye"></i><span>Preview</span>
                </a>
                <button type="submit" class="btn-action btn-save">
                    <i class="fas fa-save"></i><span>Save Changes</span>
                </button>
            </div>
        </form>
    @else
        <div class="builder-content">
            <div style="text-align: center; padding: 60px 20px; color: #6c757d;">
                <i class="fas fa-folder-open" style="font-size: 64px; opacity: 0.2; margin-bottom: 20px;"></i>
                <h3>No Page Selected</h3>
                <p>Click on a page tab or create a new page to get started</p>
            </div>
        </div>
    @endif
</div>

<!-- Create Page Modal -->
<div class="modal-overlay" id="createPageModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Create New Page</h3>
            <button class="modal-close" onclick="closeCreatePageModal()"><i class="fas fa-times"></i></button>
        </div>
        <form action="{{ route('page.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label>Page Title</label>
                    <input type="text" class="form-control" name="title" required placeholder="Enter page title">
                </div>
                <div class="form-group">
                    <label>Page Template</label>
                    <select class="form-control" name="template">
                        <option value="default">Default</option>
                        <option value="news">News Page</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeCreatePageModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Page</button>
            </div>
        </form>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<script>
 let widgetCounter = 0;
    const availableAdSpaces = @json($adSpaces ?? []);
    const availableWidgets = @json($widgets ?? []);

    let existingTopContentWidgets = @json($currentPage->top_content_widgets ?? []);
    let existingContentWidgets = @json($currentPage->content_widgets ?? []);
    let existingBottomContentWidgets = @json($currentPage->bottom_content_widgets ?? []);
    let existingSidebarWidgets = @json($currentPage->sidebar_widgets ?? []);

    // Parse JSON strings if needed
    if (typeof existingTopContentWidgets === 'string') {
        try {
            existingTopContentWidgets = JSON.parse(existingTopContentWidgets);
        } catch(e) {
            existingTopContentWidgets = [];
        }
    }

    if (typeof existingContentWidgets === 'string') {
        try {
            existingContentWidgets = JSON.parse(existingContentWidgets);
        } catch(e) {
            existingContentWidgets = [];
        }
    }

    if (typeof existingBottomContentWidgets === 'string') {
        try {
            existingBottomContentWidgets = JSON.parse(existingBottomContentWidgets);
        } catch(e) {
            existingBottomContentWidgets = [];
        }
    }

    if (typeof existingSidebarWidgets === 'string') {
        try {
            existingSidebarWidgets = JSON.parse(existingSidebarWidgets);
        } catch(e) {
            existingSidebarWidgets = [];
        }
    }

    // Ensure arrays
    if (!Array.isArray(existingTopContentWidgets)) existingTopContentWidgets = [];
    if (!Array.isArray(existingContentWidgets)) existingContentWidgets = [];
    if (!Array.isArray(existingBottomContentWidgets)) existingBottomContentWidgets = [];
    if (!Array.isArray(existingSidebarWidgets)) existingSidebarWidgets = [];

    $(document).ready(function() {
        // Initialize sortable zones
        makeSortable($('#topContentDropZone'));
        makeSortable($('#contentDropZone'));
        makeSortable($('#bottomContentDropZone'));
        makeSortable($('#sidebarDropZone'));

        // Load existing widgets
        if (existingTopContentWidgets && existingTopContentWidgets.length > 0) {
            loadExistingWidgets('top-content', existingTopContentWidgets);
        } else {
            showEmptyState('topContentDropZone', 'top');
        }

        if (existingContentWidgets && existingContentWidgets.length > 0) {
            loadExistingWidgets('content', existingContentWidgets);
        } else {
            showEmptyState('contentDropZone', 'middle');
        }

        if (existingBottomContentWidgets && existingBottomContentWidgets.length > 0) {
            loadExistingWidgets('bottom-content', existingBottomContentWidgets);
        } else {
            showEmptyState('bottomContentDropZone', 'bottom');
        }

        if (existingSidebarWidgets && existingSidebarWidgets.length > 0) {
            loadExistingWidgets('sidebar', existingSidebarWidgets);
        } else {
            showEmptyState('sidebarDropZone', 'sidebar');
        }

        // Initialize drag & drop
        initDragDrop();

        // Form submission
        $('#pageForm').on('submit', function(e) {
            e.preventDefault();
            collectAndSaveWidgets();
            this.submit();
        });
    });

    // Toggle card collapse/expand
    function toggleCard(header) {
        const $card = $(header).closest('.card');
        const $body = $card.find('.card-body');
        const $icon = $(header).find('.card-toggle-icon');

        $body.toggleClass('collapsed');
        $icon.toggleClass('collapsed');

        if ($body.hasClass('collapsed')) {
            $body.slideUp(300);
        } else {
            $body.slideDown(300);
        }
    }

    // Show empty state for drop zones
    function showEmptyState(zoneId, zoneType) {
        const $zone = $(`#${zoneId}`);
        let icon = 'plus-circle';
        let title = 'Add Widgets';
        let description = 'Drag widgets from the left sidebar';

        switch(zoneType) {
            case 'top':
                icon = 'arrow-up';
                title = 'Add Top Content Widgets';
                description = 'Widgets added here will appear at the top';
                break;
            case 'middle':
                icon = 'align-center';
                title = 'Add Middle Content Widgets';
                description = 'Main content widgets go here';
                break;
            case 'bottom':
                icon = 'arrow-down';
                title = 'Add Bottom Content Widgets';
                description = 'Widgets added here will appear at the bottom';
                break;
            case 'sidebar':
                icon = 'puzzle-piece';
                title = 'Add Sidebar Widgets';
                description = 'Drag widgets here to add to sidebar';
                break;
        }

        $zone.html(`<div class="drop-zone-empty">
            <i class="fas fa-${icon}"></i>
            <h4>${title}</h4>
            <p>${description}</p>
        </div>`);
    }

    // Load existing widgets from database
    function loadExistingWidgets(zone, widgets) {
        widgets.forEach(function(widget) {
            widgetCounter++;
            const id = `widget-${zone}-${widgetCounter}`;
            addWidgetWithData(zone, widget.type, id, widget);
        });
    }

    // Make zone sortable
    function makeSortable($zone) {
        if ($zone.data('ui-sortable')) {
            $zone.sortable('destroy');
        }

        $zone.sortable({
            items: '.dropped-widget',
            placeholder: 'widget-placeholder',
            cursor: 'move',
            opacity: 1,
            tolerance: 'pointer',
            forcePlaceholderSize: true,
            forceHelperSize: true,
            revert: false,
            helper: 'clone',

            start: function(e, ui) {
                ui.placeholder.height(ui.item.height());
                ui.item.addClass('ui-sortable-helper');
            },

            stop: function(e, ui) {
                ui.item.removeClass('ui-sortable-helper');
            },

            cancel: '.note-editor, .note-toolbar, .note-editable, input, select, textarea, button, .form-control'
        });
    }

    // Initialize drag and drop
    function initDragDrop() {
        $(document).off('dragstart dragend', '.widget-item');
        $(document).off('dragover dragleave drop', '.drop-zone, .widgets-drop-zone');

        $(document).on('dragstart', '.widget-item', function(e) {
            e.originalEvent.dataTransfer.effectAllowed = 'copy';
            e.originalEvent.dataTransfer.setData('widgetType', $(this).data('type'));
            $(this).addClass('dragging');
        });

        $(document).on('dragend', '.widget-item', function(e) {
            $(this).removeClass('dragging');
        });

        $(document).on('dragover', '.drop-zone, .widgets-drop-zone', function(e) {
            e.preventDefault();
            e.originalEvent.dataTransfer.dropEffect = 'copy';
            $(this).addClass('drag-over');
        });

        $(document).on('dragleave', '.drop-zone, .widgets-drop-zone', function(e) {
            if (e.target === this) {
                $(this).removeClass('drag-over');
            }
        });

        $(document).on('drop', '.drop-zone, .widgets-drop-zone', function(e) {
            e.preventDefault();
            $(this).removeClass('drag-over');

            const widgetType = e.originalEvent.dataTransfer.getData('widgetType');
            if (widgetType) {
                const $zone = $(this);
                const zoneId = $zone.attr('id');
                let zone = 'content';

                if (zoneId === 'topContentDropZone') {
                    zone = 'top-content';
                } else if (zoneId === 'contentDropZone') {
                    zone = 'content';
                } else if (zoneId === 'bottomContentDropZone') {
                    zone = 'bottom-content';
                } else if (zoneId === 'sidebarDropZone') {
                    zone = 'sidebar';
                }

                widgetCounter++;
                const id = `widget-${zone}-${widgetCounter}`;

                $zone.find('.drop-zone-empty').remove();
                addWidgetWithData(zone, widgetType, id, null);
            }
        });
    }

    // Add widget with data
    function addWidgetWithData(zone, type, id, existingData) {
        let html = createWidgetHTML(id, zone, type, existingData);
        let $zone;

        if (zone === 'top-content') {
            $zone = $('#topContentDropZone');
        } else if (zone === 'content') {
            $zone = $('#contentDropZone');
        } else if (zone === 'bottom-content') {
            $zone = $('#bottomContentDropZone');
        } else {
            $zone = $('#sidebarDropZone');
        }

        $zone.find('.drop-zone-empty').remove();

        const $widget = $(html).hide();
        $zone.append($widget);
        $widget.fadeIn(300);

        initializeWidgetEditor(id, type, existingData);

        if ($zone.data('ui-sortable')) {
            $zone.sortable('refresh');
        } else {
            makeSortable($zone);
        }

        initDragDrop();
    }

    // Create widget HTML
    function createWidgetHTML(id, zone, type, data) {
        const isAd = type === 'ad';
        let contentHTML = '';

        switch (type) {
            case 'paragraph':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-paragraph-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <textarea class="widget-editor" id="editor-${id}" placeholder="Write paragraph content...">${data?.content || ''}</textarea>`;
                break;

            case 'heading':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-heading-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <input type="text" class="widget-input mb-2" placeholder="Enter heading text" data-heading-text value="${data?.text || ''}">
                <select class="widget-select" data-heading-level>
                    <option value="h1" ${data?.level === 'h1' ? 'selected' : ''}>H1</option>
                    <option value="h2" ${data?.level === 'h2' || !data?.level ? 'selected' : ''}>H2</option>
                    <option value="h3" ${data?.level === 'h3' ? 'selected' : ''}>H3</option>
                    <option value="h4" ${data?.level === 'h4' ? 'selected' : ''}>H4</option>
                </select>`;
                break;

            case 'image':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-image-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <input type="text" class="widget-input mb-2" placeholder="Image URL" data-image-url value="${data?.url || ''}">
                <input type="text" class="widget-input" placeholder="Alt text" data-image-alt value="${data?.alt || ''}">`;
                break;

            case 'video':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-video-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <input type="text" class="widget-input" placeholder="Video URL" data-video-url value="${data?.url || ''}">`;
                break;

            case 'ad':
                const selectedAd = data?.ad_space_id || '';
                const isDynamic = data?.is_dynamic || false;
                contentHTML = `<select class="widget-select mb-2" data-ad-select>
                    <option value="">Select Advertisement</option>
                    ${availableAdSpaces.map(ad => `<option value="${ad.id}" ${selectedAd == ad.id ? 'selected' : ''}>${ad.title}</option>`).join('')}
                </select>
                <label style="font-size: 13px;"><input type="checkbox" data-ad-dynamic ${isDynamic ? 'checked' : ''}> Show after N paragraphs</label>
                <div data-ad-config style="display:${isDynamic ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 2}" data-ad-paragraphs></div>`;
                break;

            case 'widget':
                const selectedWidget = data?.widget_id || '';
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-widget-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <select class="widget-select" data-widget-select>
                    <option value="">Select Widget</option>
                    ${availableWidgets.map(w => `<option value="${w.id}" ${selectedWidget == w.id ? 'selected' : ''}>${w.title}</option>`).join('')}
                </select>`;
                break;

            case 'divider':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-divider-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <hr style="border: 1px solid #dee2e6; margin: 8px 0;">`;
                break;

            case 'spacer':
                contentHTML = `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                    <label style="font-size: 12px; margin-bottom: 5px; display: block;"><input type="checkbox" data-use-after-paragraphs ${data?.after_paragraphs ? 'checked' : ''}> Show after N paragraphs</label>
                    <div data-spacer-config style="display:${data?.after_paragraphs ? 'block' : 'none'};"><input type="number" class="widget-input" placeholder="Count" value="${data?.after_paragraphs || 0}" data-after-paragraphs></div>
                </div>
                <input type="number" class="widget-input" placeholder="Height in pixels" value="${data?.height || 50}" data-spacer-height>`;
                break;
        }

        return `<div class="dropped-widget ${isAd ? 'ad-widget' : ''}" id="${id}" data-type="${type}" data-zone="${zone}">
            <div class="widget-header">
                <div class="widget-title"><i class="fas fa-${getIcon(type)}"></i><span>${getName(type)}</span></div>
                <div class="widget-controls">
                    <button type="button" class="widget-btn btn-collapse" onclick="toggleWidget('${id}')" title="Collapse"><i class="fas fa-chevron-up"></i></button>
                    <button type="button" class="widget-btn btn-danger" onclick="removeWidget('${id}')" title="Remove"><i class="fas fa-trash"></i></button>
                </div>
            </div>
            <div class="widget-content collapsed">${contentHTML}</div>
        </div>`;
    }

    // Toggle widget content
    function toggleWidget(id) {
        const $widget = $(`#${id}`);
        const $content = $widget.find('.widget-content');
        const $icon = $widget.find('.btn-collapse i');

        if ($content.hasClass('collapsed')) {
            $content.removeClass('collapsed');
            $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $content.addClass('collapsed');
            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
        }
    }

    // Initialize Summernote and other editors
    function initializeWidgetEditor(id, type, data) {
        if (type === 'paragraph') {
            const $editor = $(`#editor-${id}`);
            if ($editor.length) {
                setTimeout(function() {
                    try {
                        $editor.summernote({
                            height: 250,
                            minHeight: 200,
                            maxHeight: 500,
                            focus: false,
                            lang: 'en-US',
                            toolbar: [
                                ['style', ['style']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                                ['color', ['forecolor', 'backcolor']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['table', ['table', 'delete']],
                                ['insert', ['link', 'picture', 'video', 'hr']],
                                ['view', ['fullscreen', 'codeview', 'help']]
                            ],
                            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Georgia', 'Palatino', 'Garamond'],
                            fontNamesIgnoreCheck: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma'],
                            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '32', '36', '40', '44', '48', '54', '60', '66', '72'],
                            colors: [
                                ['#000000', '#424242', '#636363', '#969696', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff'],
                                ['#ff0000', '#ff9c6e', '#ffbb33', '#ffeb3b', '#76ff03', '#00e676', '#00bcd4', '#2196f3', '#3f51b5', '#673ab7'],
                                ['#880000', '#ff6600', '#cc8800', '#ccaa00', '#558000', '#008080', '#004488', '#003366', '#330066', '#660066']
                            ],
                            dialogsInBody: true,
                            disableDragAndDrop: false,
                            placeholder: 'Write paragraph content...',
                            callbacks: {
                                onInit: function() {
                                    const $note = $(`#${id}`);
                                    $note.find('.note-editor').attr('draggable', false);
                                    $note.find('.note-editable').attr('draggable', false);
                                    $note.find('.note-toolbar').attr('draggable', false);
                                    $note.find('.note-statusbar').attr('draggable', false);
                                }
                            },
                            popover: {
                                image: [
                                    ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                                    ['float', ['floatLeft', 'floatRight', 'floatNone']],
                                    ['remove', ['removeMedia']]
                                ],
                                link: [
                                    ['link', ['linkDialogShow', 'unlink']]
                                ],
                                table: [
                                    ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
                                    ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
                                    ['align', ['alignLeft', 'alignCenter', 'alignRight']],
                                    ['style', ['styleBorder', 'styleColor']]
                                ],
                                air: [
                                    ['color', ['color']],
                                    ['font', ['bold', 'italic', 'underline', 'clear']],
                                    ['para', ['ul', 'paragraph']],
                                    ['table', ['table']],
                                    ['insert', ['link', 'picture']]
                                ]
                            }
                        });
                    } catch(e) {
                        console.error('Summernote error:', e);
                    }
                }, 150);
            }
        }

        // Handle ad dynamic checkbox
        const $adDynamic = $(`#${id} [data-ad-dynamic]`);
        if ($adDynamic.length) {
            $adDynamic.off('change').on('change', function() {
                if ($(this).is(':checked')) {
                    $(`#${id} [data-ad-config]`).slideDown(200);
                } else {
                    $(`#${id} [data-ad-config]`).slideUp(200);
                }
            });
        }

        // Handle other widgets' after paragraphs checkbox
        const $useAfterParagraphs = $(`#${id} [data-use-after-paragraphs]`);
        if ($useAfterParagraphs.length) {
            $useAfterParagraphs.off('change').on('change', function() {
                const $widget = $(`#${id}`);
                const widgetType = $widget.data('type');
                const configSelector = `[data-${widgetType}-config]`;

                if ($(this).is(':checked')) {
                    $widget.find(configSelector).slideDown(200);
                } else {
                    $widget.find(configSelector).slideUp(200);
                }
            });
        }
    }

    // Get icon for widget type
    function getIcon(type) {
        const icons = {
            'paragraph': 'paragraph',
            'heading': 'heading',
            'image': 'image',
            'video': 'video',
            'divider': 'minus',
            'spacer': 'arrows-alt-v',
            'ad': 'ad',
            'widget': 'th-large'
        };
        return icons[type] || 'cube';
    }

    // Get name for widget type
    function getName(type) {
        const names = {
            'paragraph': 'Paragraph',
            'heading': 'Heading',
            'image': 'Image',
            'video': 'Video',
            'divider': 'Divider',
            'spacer': 'Spacer',
            'ad': 'Advertisement',
            'widget': 'Custom Widget'
        };
        return names[type] || 'Widget';
    }

    // Remove widget
    function removeWidget(id) {
        if (confirm('Are you sure you want to remove this widget?')) {
            const $widget = $(`#${id}`);
            const $zone = $widget.parent();

            const $editor = $widget.find('.widget-editor');
            if ($editor.length && $editor.summernote) {
                try {
                    $editor.summernote('destroy');
                } catch(e) {
                    console.error('Error destroying summernote:', e);
                }
            }

            $widget.fadeOut(300, function() {
                $(this).remove();

                if ($zone.children('.dropped-widget').length === 0) {
                    const zoneId = $zone.attr('id');
                    let zoneType = 'middle';

                    if (zoneId === 'topContentDropZone') {
                        zoneType = 'top';
                    } else if (zoneId === 'contentDropZone') {
                        zoneType = 'middle';
                    } else if (zoneId === 'bottomContentDropZone') {
                        zoneType = 'bottom';
                    } else if (zoneId === 'sidebarDropZone') {
                        zoneType = 'sidebar';
                    }

                    showEmptyState(zoneId, zoneType);
                }

                if ($zone.data('ui-sortable')) {
                    $zone.sortable('refresh');
                }
            });
        }
    }

    // Collect widget data before save
    function collectAndSaveWidgets() {
        const topContentWidgets = [];
        const contentWidgets = [];
        const bottomContentWidgets = [];
        const sidebarWidgets = [];

        $('#topContentDropZone').children('.dropped-widget').each(function(i) {
            try {
                const widget = collectWidgetData($(this));
                widget.position = i;
                topContentWidgets.push(widget);
            } catch(e) {
                console.error('Error collecting widget:', e);
            }
        });

        $('#contentDropZone').children('.dropped-widget').each(function(i) {
            try {
                const widget = collectWidgetData($(this));
                widget.position = i;
                contentWidgets.push(widget);
            } catch(e) {
                console.error('Error collecting widget:', e);
            }
        });

        $('#bottomContentDropZone').children('.dropped-widget').each(function(i) {
            try {
                const widget = collectWidgetData($(this));
                widget.position = i;
                bottomContentWidgets.push(widget);
            } catch(e) {
                console.error('Error collecting widget:', e);
            }
        });

        $('#sidebarDropZone').children('.dropped-widget').each(function(i) {
            try {
                const widget = collectWidgetData($(this));
                widget.position = i;
                sidebarWidgets.push(widget);
            } catch(e) {
                console.error('Error collecting widget:', e);
            }
        });

        $('#topContentWidgetsData').val(JSON.stringify(topContentWidgets));
        $('#contentWidgetsData').val(JSON.stringify(contentWidgets));
        $('#bottomContentWidgetsData').val(JSON.stringify(bottomContentWidgets));
        $('#sidebarWidgetsData').val(JSON.stringify(sidebarWidgets));
    }

    // Collect individual widget data
    function collectWidgetData($widget) {
        const type = $widget.data('type');
        const data = { type: type };

        try {
            switch (type) {
                case 'paragraph':
                    const $editor = $widget.find('.widget-editor');
                    if ($editor.length && $editor.summernote) {
                        try {
                            data.content = $editor.summernote('code');
                        } catch(e) {
                            data.content = $editor.val() || '';
                        }
                    } else {
                        data.content = $editor.val() || '';
                    }
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'heading':
                    data.text = $widget.find('[data-heading-text]').val();
                    data.level = $widget.find('[data-heading-level]').val();
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'image':
                    data.url = $widget.find('[data-image-url]').val();
                    data.alt = $widget.find('[data-image-alt]').val();
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'video':
                    data.url = $widget.find('[data-video-url]').val();
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'ad':
                    data.ad_space_id = $widget.find('[data-ad-select]').val();
                    data.is_dynamic = $widget.find('[data-ad-dynamic]').is(':checked');
                    data.after_paragraphs = $widget.find('[data-ad-paragraphs]').val();
                    break;

                case 'widget':
                    data.widget_id = $widget.find('[data-widget-select]').val();
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'spacer':
                    data.height = $widget.find('[data-spacer-height]').val();
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;

                case 'divider':
                    data.after_paragraphs = $widget.find('[data-after-paragraphs]').val() || '0';
                    break;
            }
        } catch(e) {
            console.error('Error collecting data:', e);
        }

        return data;
    }

    // Modal functions
    function openCreatePageModal() {
        $('#createPageModal').addClass('active');
    }

    function closeCreatePageModal() {
        $('#createPageModal').removeClass('active');
    }

    $('.modal-overlay').on('click', function(e) {
        if (e.target === this) {
            $(this).removeClass('active');
        }
    });
</script>

@endsection