@extends('user.layouts.app')

@section('styles')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/css/emoji-mart.css">


    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/tui-image-editor/dist/tui-image-editor.css" />
    <style>
        .modal-full {
            max-width: 95%;
        }
    </style>

    <style>
        #scheduleDropdownContainer .line-left,
        #scheduleDropdownContainer .line-right {
            position: absolute;
            top: 50%;
            height: 1px;
            background-color: #dee2e6;
            width: calc(50% - 40px);
        }

        #scheduleDropdownContainer .line-left {
            left: 0;
        }

        #scheduleDropdownContainer .line-right {
            right: 0;
        }

        #scheduleDropdownContainer .badge.btn-sm {
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
        }

        #scheduleDropdownContainer .btn-outline-success.btn-sm {
            font-size: 12px;
            padding: 5px 8px;
        }

        #scheduleDropdownContainer .flatpickr-day.prevMonthDay,
        #scheduleDropdownContainer .flatpickr-day.nextMonthDay,
        #scheduleDropdownContainer .flatpickr-day.disabled {
            color: #adb5bd !important; /* Light color for past dates */
        }
    </style>

    <!-- Post Editor CSS -->
    <style>
        /* Existing styles for post editor */
        #postCaption {
            height: 120px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border: 1px solid #dee2e6;
            padding: 10px;
            font-size: 14px;
            outline: none;
        }
        #postCaption:empty::before {
            content: "Start writing or use the AI Assistant";
            color: #adb5bd;
            font-size: 14px;
        }
        #actionButtons {
            border: 1px solid #dee2e6;
            border-top: 0;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        #actionButtons .btn {
            padding: 0;
            margin-right: 5px;
            border: 0;
        }
        #actionButtons .btn:hover {
            background-color: transparent;
        }
        #actionButtons .btn svg {
            height: 18px;
            color: #6c757d;
        }
        #actionButtons .btn-assistant svg {
            color: #6f42c1;
        }
        #uploadArea {
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            background-color: #f8f9fa;
            width: 125px;
            height: 125px;
            padding: 20px;
            position: relative;
        }
        .image-container {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .uploaded-image {
            width: 125px;
            height: 125px;
            object-fit: cover;
            border-radius: 8px;
        }
        .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 50%;
            padding: 2px;
            cursor: pointer;
            color: red;
            font-weight: bold;
        }
        .preview-collage {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .preview-image {
            width: 125px;
            height: 125px;
            object-fit: cover;
            border-radius: 8px;
            position: relative;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            border-radius: 8px;
        }
        .show-more {
            color: #0d6efd;
            cursor: pointer;
            margin-top: 5px;
        }
        .show-more.hidden {
            display: none;
        }
        .emoji-picker {
            position: absolute;
            z-index: 1000;
            top: -300px;
            left: 0;
        }
        #loader {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2000;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 15px;
            border-radius: 5px;
        }
        .btn-icon-text .btn-icon-prepend {
            margin-right: 5px;
        }
        .action-buttons {
            position: absolute;
            bottom: 5px;
            left: 5px;
            display: flex;
            gap: 5px;
        }
        .action-buttons .btn {
            font-size: 12px;
            padding: 2px 5px;
        }
        .swiper-container {
            width: 100%;
            height: 400px;
        }
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>

    <!-- New styles for image editor modal -->
    <style>
        #editorModal .modal-dialog {
            max-width: 90%;
        }
        #editorModal .modal-content {
            background: #e9ecef;
        }
        #editorModal .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #dee2e6;
        }
        #editorModal .modal-title {
            flex: 1;
            text-align: center;
            font-weight: 600;
            color: #343a40;
        }
        #editorModal .modal-body {
            display: flex;
            padding: 0;
            height: calc(100vh - 100px);
        }
        .editor-sidebar {
            width: 60px;
            background: #212529;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
        }
        .editor-sidebar .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #adb5bd;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            text-align: center;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .editor-sidebar .nav-item.active {
            background: #343a40;
            color: #fff;
        }
        .editor-sidebar .nav-item:hover {
            background: #343a40;
            color: #fff;
        }
        .editor-sidebar .nav-item i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .editor-sidebar .nav-item span {
            font-size: 12px;
        }
        .editor-menu {
            width: 265px;
            background: #343a40;
            color: #fff;
            display: none;
            flex-direction: column;
            padding: 10px;
            border-right: 1px solid #495057;
        }
        .editor-menu.active {
            display: flex;
        }
        .editor-menu .menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .editor-menu .menu-header h6 {
            margin: 0;
            font-weight: 500;
        }
        .editor-menu .menu-header i {
            cursor: pointer;
        }
        .editor-menu .search-input {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #495057;
            border-radius: 4px;
            background: #495057;
            color: #fff;
        }
        .editor-menu .menu-content {
            flex: 1;
            overflow-y: auto;
        }
        .editor-menu .menu-content::-webkit-scrollbar {
            width: 8px;
        }
        .editor-menu .menu-content::-webkit-scrollbar-track {
            background: #2c3236;
            border-radius: 4px;
        }
        .editor-menu .menu-content::-webkit-scrollbar-thumb {
            background: #5c666d;
            border-radius: 4px;
            transition: background 0.2s ease;
        }
        .editor-menu .menu-content::-webkit-scrollbar-thumb:hover {
            background: #7a858c;
        }
        .editor-menu .assets {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .editor-menu .asset-container {
            position: relative;
            width: 115px;
            height: 115px;
        }
        .editor-menu .asset {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: move;
            border: 2px solid transparent;
            border-radius: 4px;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }
        .editor-menu .asset:hover {
            border-color: #0d6efd;
            transform: scale(1.05);
        }
        .editor-menu .asset.dragging {
            opacity: 0.5;
        }
        .asset-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 2px 5px;
            font-size: 10px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .asset-date, .asset-desc {
            display: block;
        }
        .editor-workspace {
            flex: 1;
            padding: 20px;
            position: relative;
            overflow: hidden;
            background: #e9ecef;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .canvas-toolbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background: #fff;
            border-bottom: 1px solid #dee2e6;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        .quick-actions, .right-actions {
            display: flex;
            gap: 8px;
        }
        .quick-actions .btn, .right-actions .btn {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 4px;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .quick-actions .btn:disabled, .right-actions .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .quick-actions .dropdown-menu, .right-actions .dropdown-menu {
            min-width: 150px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .quick-actions .dropdown-item, .right-actions .dropdown-item {
            font-size: 12px;
            padding: 6px 12px;
        }
        .quick-actions .dropdown-item:hover, .right-actions .dropdown-item:hover {
            background: #f8f9fa;
        }
        .canvas-container {
            position: relative;
            width: 940px;
            height: 788px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            transform-origin: center center;
        }
        #editorCanvas {
            width: 100%;
            height: 100%;
        }
        .zoom-controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .zoom-controls .btn {
            font-size: 12px;
            padding: 5px;
        }
        .zoom-controls span {
            font-size: 14px;
            color: #343a40;
        }
        .current-page {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: #343a40;
        }
        .crop-rect {
            stroke: #0d6efd;
            strokeWidth: 2;
            fill: 'rgba(0, 0, 0, 0.2)';
            dash: [5, 5];
        }
    </style>
@endsection

@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0">Social Posts</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">
            <button type="button" class="btn btn-outline-primary btn-icon-text me-2 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#createPostModal">
                <i class="btn-icon-prepend" data-feather="printer"></i>
                Create Post
            </button>
            <button type="button" class="btn btn-primary btn-icon-text mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#createPostModal">
                <i class="btn-icon-prepend" data-feather="download-cloud"></i>
                Create with AI
            </button>
        </div>
    </div>
    <div class="row">
        <!-- Sidebar for Post Previews -->
        <div class="col-md-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text"><i data-feather="search"></i></span>
                        <input type="text" class="form-control" placeholder="Search posts">
                    </div>
                    <div class="text-center">
                        <p class="text-muted">No posts yet.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-body text-center">
                    <h4>Create your first post</h4>
                    <p class="text-muted mb-4">
                        Easy to get followers when they are most engaged! Design posts and schedule when to post.
                        <br><br>
                        <i class="text-success me-2">✔</i> Choose from different post variations, including general posting schedule to you<br>
                        <i class="text-success me-2">✔</i> Pre-design templates<br>
                        <i class="text-success me-2">✔</i> Use AI to create
                    </p>
                    <button class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#createPostModal">Create new</button>
                    <button class="btn btn-outline-primary">Create with AI</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Create Post Modal -->
    <div class="modal fade" id="createPostModal" tabindex="-1" aria-labelledby="createPostModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-full modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <!-- Left Side: Post Creation -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <select class="form-select" disabled>
                                    <option>Select social profiles (3)</option>
                                </select>
                            </div>
                            <div id="postCreationContainer" class="">
                                <div contenteditable="true" class="form-control" id="postCaption"></div>
                                <div id="actionButtons" class="d-flex justify-content-between align-items-center mb-3 p-2">
                                    <div class="w-100">
                                        <button class="btn btn-outline-secondary rounded-circle me-2" id="emojiBtn"><i data-feather="smile"></i></button>
                                        <button class="btn btn-outline-secondary rounded-circle me-2" id="hashtagBtn"><i data-feather="hash"></i></button>
                                        <button class="btn btn-assistant" id="aiAssistantBtn"><i data-feather="zap"></i> AI Assistant</button>
                                    </div>
                                    <span id="charCounter" class="badge bg-secondary-subtle text-secondary">0</span>
                                </div>
                                <div class="d-flex align-items-start">
                                    <div id="uploadArea" class="text-center">
                                        <i data-feather="image"></i>
                                        <p class="text-muted mb-0">Drag & drop or <a href="#" id="uploadLink" class="text-primary text-decoration-none">select a file</a></p>
                                        <input type="file" id="fileInput" style="display: none;" accept="image/*" multiple>
                                    </div>
                                    <div id="imagePreview" class="d-flex flex-column"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Right Side: Post Preview -->
                        <div class="col-md-6">

                            <ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="preview-line-tab" data-bs-toggle="tab" href="#preview" role="tab" aria-controls="preview" aria-selected="true">Preview</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="plugins-line-tab" data-bs-toggle="tab" href="#plugins" role="tab" aria-controls="plugins" aria-selected="false">Plugins</a>
                                </li>
                            </ul>
                            <div class="tab-content mt-3" id="lineTabContent">
                                <div class="tab-pane fade show active p-5 bg-light" id="preview" role="tabpanel" aria-labelledby="preview-line-tab">
                                    <div id="postPreview" class="card rounded">
                                        <div class="card-header">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <img class="img-xs rounded-circle" src="{{ auth()->user()->avatar ? Storage::url(auth()->user()->avatar) : asset('assets/images/default-user.png') }}" alt="">
                                                    <div class="ms-2">
                                                        <p>{{ auth()->user()->name }}</p>
                                                        <p class="fs-11px text-secondary">5 min ago</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <p class="mb-3 fs-14px"><span class="post-content"></span><span class="show-more text-primary hidden">Show more</span></p>
                                            <div class="preview-images"></div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="d-flex post-actions">
                                                <a href="javascript:;" class="d-flex align-items-center text-primary me-4">
                                                    <i class="icon-md" data-feather="heart"></i>
                                                    <p class="d-none d-md-block ms-2">Like</p>
                                                </a>
                                                <a href="javascript:;" class="d-flex align-items-center text-primary me-4">
                                                    <i class="icon-md" data-feather="message-square"></i>
                                                    <p class="d-none d-md-block ms-2">Comment</p>
                                                </a>
                                                <a href="javascript:;" class="d-flex align-items-center text-primary">
                                                    <i class="icon-md" data-feather="share"></i>
                                                    <p class="d-none d-md-block ms-2">Share</p>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="plugins" role="tabpanel" aria-labelledby="plugins-line-tab">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Design Editor
                                        </button>
                                        <div class="dropdown-menu text-secondary w-100" style="max-height: 400px; overflow-y: scroll"  aria-labelledby="dropdownMenuButton5">
                                            <h6 class="dropdown-header">Popular</h6>
                                            <div class="px-2">
                                                <div class="dropdown-item d-flex justify-content-between p-2">
                                                    <div class="d-flex align-items-center hover-pointer">
                                                        <img class="img-xs rounded-circle" src="../../../assets/images/faces/face2.jpg" alt="">
                                                        <div class="ms-2">
                                                            <p>Mike Popescu</p>
                                                            <p class="fs-11px text-secondary">12 Mutual Friends</p>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-icon border-0"><i data-feather="user-plus"></i></button>
                                                </div>
                                                <div class="dropdown-item d-flex justify-content-between p-2">
                                                    <div class="d-flex align-items-center hover-pointer">
                                                        <img class="img-xs rounded-circle" src="../../../assets/images/faces/face3.jpg" alt="">
                                                        <div class="ms-2">
                                                            <p>Mike Popescu</p>
                                                            <p class="fs-11px text-secondary">12 Mutual Friends</p>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-icon border-0"><i data-feather="user-plus"></i></button>
                                                </div>
                                                <div class="dropdown-item d-flex justify-content-between p-2">
                                                    <div class="d-flex align-items-center hover-pointer">
                                                        <img class="img-xs rounded-circle" src="../../../assets/images/faces/face4.jpg" alt="">
                                                        <div class="ms-2">
                                                            <p>Mike Popescu</p>
                                                            <p class="fs-11px text-secondary">12 Mutual Friends</p>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-icon border-0"><i data-feather="user-plus"></i></button>
                                                </div>
                                            </div>
                                            <h6 class="dropdown-header">Copywriting</h6>
                                            <div class="px-2">
                                                <div class="dropdown-item d-flex justify-content-between p-2">
                                                    <div class="d-flex align-items-center hover-pointer">
                                                        <img class="img-xs rounded-circle" src="../../../assets/images/faces/face5.jpg" alt="">
                                                        <div class="ms-2">
                                                            <p>Mike Popescu</p>
                                                            <p class="fs-11px text-secondary">12 Mutual Friends</p>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-icon border-0"><i data-feather="user-plus"></i></button>
                                                </div>
                                                <div class="dropdown-item d-flex justify-content-between p-2">
                                                    <div class="d-flex align-items-center hover-pointer">
                                                        <img class="img-xs rounded-circle" src="../../../assets/images/faces/face6.jpg" alt="">
                                                        <div class="ms-2">
                                                            <p>Mike Popescu</p>
                                                            <p class="fs-11px text-secondary">12 Mutual Friends</p>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-icon border-0"><i data-feather="user-plus"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-feather="x"></i> Cancel</button>
                    <div class="dropdown" id="scheduleDropdownContainer">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="scheduleDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i data-feather="clock" style="width: 14px; height: 14px; margin-right: 5px;"></i>
                            <span id="scheduleButtonText">Schedule for later</span>
                            <span id="resetIcon" style="display: none; margin-left: 5px; cursor: pointer;">
            <i data-feather="x" style="width: 12px; height: 12px; color: #dc3545;"></i>
        </span>
                        </button>
                        <div class="dropdown-menu p-3" style="min-width: 200px; background-color: #f8f9fa;">
                            <div class="mb-2">
                                <label class="form-label mb-1">Pick date and time</label>
                                <div class="d-flex align-items-center gap-2">
                <span class="icon-wrapper" style="background-color: #e6f4ea; padding: 5px; border-radius: 5px;">
                    <i data-feather="clock" style="width: 12px; height: 12px; color: #2e7d32;"></i>
                </span>
                                    <input type="text" class="form-control datetimepicker" id="scheduleDateTime" placeholder="November 21, 2023" readonly>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 text-center position-relative">
                                    <span class="d-inline-block px-3" style="background-color: #f8f9fa;">Date</span>
                                    <span class="line-left"></span>
                                    <span class="line-right"></span>
                                </label>
                                <div class="d-flex gap-2">
                                    <a class="badge bg-secondary text-white btn-sm" data-value="tomorrow">Tomorrow</a>
                                    <a class="badge bg-secondary text-white btn-sm" data-value="in2days">In 2 days</a>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 text-center position-relative">
                                    <span class="d-inline-block px-3" style="background-color: #f8f9fa;">Day periods</span>
                                    <span class="line-left"></span>
                                    <span class="line-right"></span>
                                </label>
                                <div class="d-flex gap-2 flex-wrap">
                                    <a class="btn btn-outline-success btn-sm" data-value="morning"><i data-feather="sunrise" style="width: 12px; height: 12px;"></i> Morning</a>
                                    <a class="btn btn-outline-success btn-sm" data-value="midday"><i data-feather="sun" style="width: 12px; height: 12px;"></i> Midday</a>
                                    <a class="btn btn-outline-success btn-sm" data-value="noon"><i data-feather="sun" style="width: 12px; height: 12px;"></i> Noon</a>
                                    <a class="btn btn-outline-success btn-sm" data-value="evening"><i data-feather="moon" style="width: 12px; height: 12px;"></i> Evening</a>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 text-center position-relative">
                                    <span class="d-inline-block px-3" style="background-color: #f8f9fa;">Time</span>
                                    <span class="line-left"></span>
                                    <span class="line-right"></span>
                                </label>
                                <div class="d-flex align-items-center gap-2">
                <span class="icon-wrapper" style="background-color: #e6f4ea; padding: 5px; border-radius: 5px;">
                    <i data-feather="clock" style="width: 12px; height: 12px; color: #2e7d32;"></i>
                </span>
                                    <input type="text" class="form-control" id="scheduleTime" placeholder="02:39 AM" readonly>
                                </div>
                                <div class="d-flex gap-2 mt-1">
                                    <a class="badge bg-secondary text-white btn-sm" data-value="in30m">In 30min</a>
                                    <a class="badge bg-secondary text-white btn-sm" data-value="in1h">In 1h</a>
                                    <a class="badge bg-secondary text-white btn-sm" data-value="in2h">In 2h</a>
                                </div>
                            </div>
                            <div class="d-flex gap-2 mt-2">
                                <button type="button" class="btn btn-outline-secondary w-50" id="cancelSchedule">Cancel</button>
                                <button type="button" class="btn btn-success w-50" id="confirmSchedule">Done</button>
                            </div>
                        </div>
                    </div>

                    <button type="button" class="btn btn-success" id="postButton">
                        <i data-feather="send"></i> <span id="postButtonText">Post now</span> [1]
                    </button>
                    <button type="button" class="btn btn-success"><i data-feather="save"></i> Save to</button>
                </div>
            </div>
        </div>
    </div>





    <div id="loader">Loading...</div>

    <!-- Slider Modal (Unchanged) -->
    <div class="modal fade" id="sliderModal" tabindex="-1" aria-labelledby="sliderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sliderModalLabel">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="swiper-container">
                        <div class="swiper-wrapper"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Editor Modal UI -->
    <div class="modal fade" id="editorModal" tabindex="-1" aria-labelledby="editorModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editorModalLabel">Facebook Post 940x788 px</h5>
                    <div class="d-flex align-items-center">
                        <i data-feather="cloud" class="me-2"></i>
                        <button class="btn btn-outline-secondary btn-sm me-2" id="resizeBtn">Resize</button>
                        <button class="btn btn-primary btn-sm" id="saveBtn">Save</button>
                    </div>
                </div>
                <div class="modal-body">
                    <!-- Sidebar Navigation -->
                    <div class="editor-sidebar">
                        <div class="nav-item active" data-menu="uploads">
                            <i data-feather="upload"></i>
                            <span>Uploads</span>
                        </div>
                        <div class="nav-item" data-menu="photos">
                            <i data-feather="image"></i>
                            <span>Photos</span>
                        </div>
                        <div class="nav-item" data-menu="videos">
                            <i data-feather="video"></i>
                            <span>Videos</span>
                        </div>
                        <div class="nav-item" data-menu="music">
                            <i data-feather="music"></i>
                            <span>Music</span>
                        </div>
                        <div class="nav-item" data-menu="objects">
                            <i data-feather="box"></i>
                            <span>Objects</span>
                        </div>
                        <div class="nav-item" data-menu="backgrounds">
                            <i data-feather="image"></i>
                            <span>Backgrounds</span>
                        </div>
                        <div class="nav-item" data-menu="text">
                            <i data-feather="type"></i>
                            <span>Text</span>
                        </div>
                        <div class="nav-item" data-menu="brand-kits">
                            <i data-feather="briefcase"></i>
                            <span>Brand Kits</span>
                        </div>
                    </div>

                    <!-- Menu Panel -->
                    <div class="editor-menu active" id="menu-uploads">
                        <div class="menu-header">
                            <h6>Uploads</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <input type="text" class="search-input" placeholder="Search assets...">
                        <div class="menu-content">
                            <!-- Placeholder for user assets -->
                            <p>User-uploaded assets will be displayed here.</p>
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-photos">
                        <div class="menu-header">
                            <h6>Photos</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <input type="text" class="search-input" placeholder="Search photos...">
                        <div class="menu-content">
                            <!-- Pexels photos will be loaded here -->
                        </div>
                    </div>

                    <!-- Videos Menu -->
                    <div class="editor-menu" id="menu-videos">
                        <div class="menu-header">
                            <h6>Videos</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <input type="text" class="search-input" placeholder="Search videos...">
                        <div class="menu-content">
                            <!-- Pexels videos will be loaded here -->
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-music">
                        <div class="menu-header">
                            <h6>Music</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <div class="menu-content">
                            <p>Music will be displayed here.</p>
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-objects">
                        <div class="menu-header">
                            <h6>Objects</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <div class="menu-content">
                            <p>Objects will be displayed here.</p>
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-backgrounds">
                        <div class="menu-header">
                            <h6>Backgrounds</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <div class="menu-content">
                            <p>Backgrounds will be displayed here.</p>
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-text">
                        <div class="menu-header">
                            <h6>Text</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <div class="menu-content">
                            <p>Text options will be displayed here.</p>
                        </div>
                    </div>
                    <div class="editor-menu" id="menu-brand-kits">
                        <div class="menu-header">
                            <h6>Brand Kits</h6>
                            <i data-feather="x" class="menu-close"></i>
                        </div>
                        <div class="menu-content">
                            <p>Brand kits will be displayed here.</p>
                        </div>
                    </div>

                    <!-- Workspace -->
                    <div class="editor-workspace">
                        <div class="canvas-toolbar">
                            <div class="quick-actions">
                                <button class="btn btn-outline-primary btn-sm" id="removeBackgroundBtn">Remove Background</button>
                                <button class="btn btn-outline-primary btn-sm" id="applyMaskBtn">Apply Mask</button>
                                <button class="btn btn-outline-primary btn-sm" id="cropBtn">Crop</button>
                                <button class="btn btn-outline-primary btn-sm" id="rotateBtn">Rotate</button>
                                <div class="btn-group">
                                    <button class="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">Animate</button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Fade In</a></li>
                                        <li><a class="dropdown-item" href="#">Slide Up</a></li>
                                        <li><a class="dropdown-item" href="#">Bounce</a></li>
                                        <li><a class="dropdown-item" href="#">Rotate</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="right-actions">
                                <button class="btn btn-outline-primary btn-sm dropdown-toggle" id="layerBtn" data-bs-toggle="dropdown" title="Layers"><i data-feather="layers"></i></button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" data-action="send-back-one">Send Back One</a></li>
                                    <li><a class="dropdown-item" href="#" data-action="send-back-all">Send Back All</a></li>
                                </ul>
                                <button class="btn btn-outline-primary btn-sm" id="saveBtn" title="Save"><i data-feather="save"></i></button>
                                <button class="btn btn-outline-primary btn-sm" title="Undo"><i data-feather="rotate-ccw"></i></button>
                                <button class="btn btn-outline-primary btn-sm" title="Redo"><i data-feather="rotate-cw"></i></button>
                                <button class="btn btn-outline-primary btn-sm" title="Delete"><i data-feather="trash-2"></i></button>
                                <button class="btn btn-outline-primary btn-sm" title="Copy"><i data-feather="copy"></i></button>
                                <button class="btn btn-outline-primary btn-sm" title="Lock"><i data-feather="lock"></i></button>
                            </div>
                        </div>
                        <div class="canvas-container">
                            <div id="editorCanvas"></div>
                        </div>
                        <div class="zoom-controls">
                            <button class="btn btn-outline-secondary btn-sm" title="Zoom Out"><i data-feather="zoom-out"></i></button>
                            <span>100%</span>
                            <button class="btn btn-outline-secondary btn-sm" title="Zoom In"><i data-feather="zoom-in"></i></button>
                        </div>
                        <div class="current-page">
                            Page 1 of 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('scripts')


    <script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>

    <script>
        feather.replace();
    </script>

    <script>
        $(document).ready(function() {
            // Initialize feather icons
            feather.replace();

            // Initialize flatpickr for date (no time in date picker)
            let selectedDateTime = null;
            const datePicker = flatpickr("#scheduleDateTime", {
                minDate: new Date(), // Disable past dates
                maxDate: new Date().fp_incr(365), // Limit to 1 year ahead
                dateFormat: "F j, Y",
                disableMobile: true,
                onChange: function(selectedDates, dateStr) {
                    if (selectedDates[0]) {
                        if (!selectedDateTime) selectedDateTime = new Date();
                        selectedDateTime.setFullYear(selectedDates[0].getFullYear(), selectedDates[0].getMonth(), selectedDates[0].getDate());
                        updateTimeDisplay();
                    }
                }
            });

            // Initialize flatpickr for time (separate selection)
            const timePicker = flatpickr("#scheduleTime", {
                enableTime: true,
                noCalendar: true,
                dateFormat: "h:i K",
                minTime: "00:00",
                maxTime: "23:59",
                defaultDate: new Date(),
                onChange: function(selectedDates, dateStr) {
                    if (selectedDates[0] && selectedDateTime) {
                        selectedDateTime.setHours(selectedDates[0].getHours(), selectedDates[0].getMinutes());
                        updateTimeDisplay();
                    }
                }
            });

            // Prevent dropdown from closing on click
            $("#scheduleDropdownContainer").on("click", function(e) {
                e.stopPropagation();
            });

            // Date selection (Tomorrow, In 2 days)
            $("#scheduleDropdownContainer .badge[data-value='tomorrow']").on("click", function() {
                selectedDateTime = new Date();
                selectedDateTime.setDate(selectedDateTime.getDate() + 1);
                datePicker.setDate(selectedDateTime);
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .badge[data-value='in2days']").on("click", function() {
                selectedDateTime = new Date();
                selectedDateTime.setDate(selectedDateTime.getDate() + 2);
                datePicker.setDate(selectedDateTime);
                updateTimeDisplay();
            });

            // Day periods (Morning, Midday, Noon, Evening)
            $("#scheduleDropdownContainer .btn[data-value='morning']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(8, 0); // 8:00 AM
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .btn[data-value='midday']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(11, 0); // 11:00 AM
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .btn[data-value='noon']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(12, 0); // 12:00 PM
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .btn[data-value='evening']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(18, 0); // 6:00 PM
                updateTimeDisplay();
            });

            // Time adjustments (In 30min, In 1h, In 2h)
            $("#scheduleDropdownContainer .badge[data-value='in30m']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setMinutes(selectedDateTime.getMinutes() + 30);
                datePicker.setDate(selectedDateTime);
                timePicker.setDate(selectedDateTime);
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .badge[data-value='in1h']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(selectedDateTime.getHours() + 1);
                datePicker.setDate(selectedDateTime);
                timePicker.setDate(selectedDateTime);
                updateTimeDisplay();
            });

            $("#scheduleDropdownContainer .badge[data-value='in2h']").on("click", function() {
                if (!selectedDateTime) selectedDateTime = new Date();
                selectedDateTime.setHours(selectedDateTime.getHours() + 2);
                datePicker.setDate(selectedDateTime);
                timePicker.setDate(selectedDateTime);
                updateTimeDisplay();
            });

            // Update time display, button text, and post button
            function updateTimeDisplay() {
                if (selectedDateTime) {
                    const currentDate = new Date();
                    if (selectedDateTime < currentDate) {
                        selectedDateTime = currentDate;
                    }
                    datePicker.setDate(selectedDateTime);
                    timePicker.setDate(selectedDateTime);
                    const formattedDate = selectedDateTime.toLocaleString("en-US", {
                        month: "short",
                        day: "numeric",
                        year: "numeric"
                    });
                    const formattedTime = selectedDateTime.toLocaleString("en-US", {
                        hour: "numeric",
                        minute: "2-digit",
                        hour12: true
                    });
                    $("#scheduleButtonText").text(`${formattedDate} at ${formattedTime}`);
                    $("#resetIcon").show();
                    $("#postButtonText").text("Schedule"); // Change to "Schedule"
                } else {
                    $("#postButtonText").text("Post now"); // Revert to "Post now"
                }
            }

            // Reset button functionality
            $("#resetIcon").on("click", function() {
                selectedDateTime = null;
                $("#scheduleButtonText").text("Schedule for later");
                $("#resetIcon").hide();
                $("#postButtonText").text("Post now"); // Reset post button text
                datePicker.clear();
                timePicker.clear();
            });

            // Cancel button
            $("#cancelSchedule").on("click", function() {
                $("#scheduleButtonText").text("Schedule for later");
                $("#resetIcon").hide();
                $("#postButtonText").text("Post now"); // Reset post button text
                selectedDateTime = null;
                datePicker.clear();
                timePicker.clear();
                $("#scheduleDropdownContainer").removeClass("show");
                $("#scheduleDropdownContainer .dropdown-menu").removeClass("show");
            });

            // Done button
            $("#confirmSchedule").on("click", function() {
                if (selectedDateTime) {
                    updateTimeDisplay();
                }
                $("#scheduleDropdownContainer").removeClass("show");
                $("#scheduleDropdownContainer .dropdown-menu").removeClass("show");
            });

            // Prevent dropdown from closing when selecting time
            $("#scheduleTime").on("click", function(e) {
                e.stopPropagation();
                timePicker.open();
            });
        });
    </script>


    <!-- Post Editor Script -->
    <script>
        $(document).ready(function() {
            feather.replace();

            // Set global AJAX headers
            $.ajaxSetup({
                headers: {
                    'Authorization': 'Bearer ' + (window.authToken || ''),
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Swiper
            let swiper = null;
            function initSwiper(images) {
                $('.swiper-wrapper').empty();
                images.forEach(img => {
                    $('.swiper-wrapper').append(
                        `<div class="swiper-slide"><img src="${img.asset_url}" alt="Slide"></div>`
                    );
                });

                swiper = new Swiper('.swiper-container', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            }

            // Emoji Picker with emoji-mart
            let emojiPicker = null;
            $('#emojiBtn').on('click', function(e) {
                e.preventDefault();
                if (!emojiPicker) {
                    emojiPicker = new window.EmojiMart.Picker({
                        onEmojiSelect: (emoji) => {
                            const caption = document.getElementById('postCaption');
                            caption.focus();

                            const selection = window.getSelection();
                            let range;

                            selection.removeAllRanges();

                            if (selection.rangeCount === 0 || !caption.contains(selection.anchorNode)) {
                                range = document.createRange();
                                range.selectNodeContents(caption);
                                range.collapse(false);
                                selection.addRange(range);
                            } else {
                                range = selection.getRangeAt(0);
                            }

                            range.deleteContents();
                            range.insertNode(document.createTextNode(emoji.native));

                            range.setStartAfter(range.endContainer);
                            range.setEndAfter(range.endContainer);
                            selection.removeAllRanges();
                            selection.addRange(range);

                            updateCharCount();
                        },
                        theme: 'light',
                        position: 'top'
                    });
                    $(this).after($('<div>').addClass('emoji-picker').append(emojiPicker));
                } else if ($('.emoji-picker').is(':visible')) {
                    $('.emoji-picker').hide();
                } else {
                    $('.emoji-picker').show();
                }
            });

            $(document).on('click', function(e) {
                if (!$(e.target).closest('#emojiBtn').length && !$(e.target).closest('.emoji-picker').length) {
                    $('.emoji-picker').hide();
                }
            });

            // Character Counter and Show More
            function updateCharCount() {
                const text = $('#postCaption').text();
                const charCount = text.length;
                $('#charCounter').text(charCount);

                const previewText = $('.post-content');
                const maxLength = 50;
                if (text.length > maxLength) {
                    previewText.text(text.substring(0, maxLength) + '...');
                    $('.show-more').removeClass('hidden');
                } else {
                    previewText.text(text);
                    $('.show-more').addClass('hidden');
                }
            }

            $('.show-more').on('click', function() {
                const fullText = $('#postCaption').text();
                $('.post-content').text(fullText);
                $(this).addClass('hidden');
            });

            // Drag and Drop & Upload Image
            let uploadedImages = [];
            let isProcessingClick = false;

            $('#uploadArea').off('click.upload').on('click.upload', function(e) {
                if (!$(e.target).is('#uploadLink') && !isProcessingClick) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Triggering file input');
                    isProcessingClick = true;
                    $('#fileInput')[0].click();
                    setTimeout(() => { isProcessingClick = false; }, 100);
                }
            });

            $('#uploadLink').off('click.upload').on('click.upload', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (!isProcessingClick) {
                    console.log('Triggering file input via link');
                    isProcessingClick = true;
                    $('#fileInput')[0].click();
                    setTimeout(() => { isProcessingClick = false; }, 100);
                }
            });

            $('#uploadArea, #fileInput').off('dragover dragenter dragleave dragend drop').on('dragover dragenter', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(this).addClass('bg-primary-subtle');
            }).on('dragleave dragend drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(this).removeClass('bg-primary-subtle');
            }).on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                handleFiles(e.originalEvent.dataTransfer.files);
            });

            $('#fileInput').off('change').on('change', function(e) {
                handleFiles(e.target.files);
                $(this).val('');
            });

            function handleFiles(files) {
                $('#loader').show();
                const formData = new FormData();
                $.each(files, function(i, file) {
                    formData.append('images[]', file);
                });

                $.ajax({
                    url: '/api/upload-assets',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        uploadedImages = uploadedImages.concat(response.data);
                        displayImages();
                        updatePreview();
                        $('#loader').hide();
                    },
                    error: function(xhr) {
                        console.error('Upload failed', xhr.responseText);
                        alert('Failed to upload assets. Please try again.');
                        $('#loader').hide();
                    }
                });
            }

            function displayImages() {
                $('#imagePreview').empty();
                uploadedImages.forEach((img, index) => {
                    const container = $('<div>').addClass('image-container');
                    const imgElement = $('<img>').attr({
                        src: img.asset_url,
                        class: 'uploaded-image'
                    });
                    const closeBtn = $('<button>').addClass('close-btn').text('×').on('click', function() {
                        $('#loader').show();
                        deleteImage(img.id, index);
                    });
                    const actionButtons = $('<div>').addClass('action-buttons');
                    const previewBtn = $('<button>').addClass('btn btn-outline-primary btn-sm').text('Preview').on('click', function() {
                        initSwiper([img]);
                        $('#sliderModal').modal('show');
                    });
                    const editBtn = $('<button>').addClass('btn btn-outline-secondary btn-sm').text('Edit').on('click', function() {
                        $('#editorModal').modal('show');
                    });
                    actionButtons.append(previewBtn).append(editBtn);
                    container.append(imgElement).append(closeBtn).append(actionButtons);
                    $('#imagePreview').append(container);
                });
                feather.replace();
            }

            function deleteImage(assetId, index) {
                $.ajax({
                    url: '/api/upload-assets/' + assetId,
                    type: 'DELETE',
                    success: function(response) {
                        uploadedImages.splice(index, 1);
                        displayImages();
                        updatePreview();
                        $('#loader').hide();
                    },
                    error: function(xhr) {
                        console.error('Deletion failed', xhr.responseText);
                        alert('Failed to delete the asset. Please try again.');
                        $('#loader').hide();
                    }
                });
            }

            function updatePreview() {
                const previewImages = $('.preview-images');
                previewImages.empty();
                if (uploadedImages.length === 0) return;

                const maxDisplay = 4;
                const displayImages = uploadedImages.slice(0, maxDisplay);
                displayImages.forEach((img, index) => {
                    const imgContainer = $('<div>').addClass('position-relative d-inline-block');
                    const imgElement = $('<img>').attr({
                        src: img.asset_url,
                        class: 'preview-image'
                    });
                    if (index === maxDisplay - 1 && uploadedImages.length > maxDisplay) {
                        const remaining = uploadedImages.length - maxDisplay;
                        const overlay = $('<div>').addClass('overlay').text(`+${remaining}`).on('click', function() {
                            initSwiper(uploadedImages);
                            $('#sliderModal').modal('show');
                        });
                        imgContainer.append(imgElement).append(overlay);
                    } else {
                        imgContainer.append(imgElement);
                    }
                    previewImages.append(imgContainer);
                });
            }

            $('#postCaption').on('input', updateCharCount);
            updateCharCount();
        });
    </script>
    <!-- Post Editor Script -->

    <!-- New script for image editor modal with updated functionalities -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            feather.replace();

            // Konva.js Stage Setup
            let stage = null;
            let layer = null;
            let transformer = null;
            let selectedImage = null;
            let currentImageIndex = null;
            let uploadedImages = [];
            let history = [];
            let historyIndex = -1;
            let isCropping = false;
            let cropRect = null;
            let initialZoom = 100;
            const canvasContainer = document.getElementById('editorCanvas').parentElement;
            const workspace = document.querySelector('.editor-workspace');

            function initKonva() {
                stage = new Konva.Stage({
                    container: 'editorCanvas',
                    width: 940,
                    height: 788
                });
                layer = new Konva.Layer();
                stage.add(layer);

                transformer = new Konva.Transformer({
                    nodes: [],
                    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
                    rotateAnchorOffset: 30,
                    anchorSize: 10,
                    anchorStroke: '#0d6efd',
                    anchorFill: '#fff',
                    anchorStrokeWidth: 2,
                    borderStroke: '#0d6efd',
                    borderStrokeWidth: 2,
                    boundBoxFunc: (oldBox, newBox) => {
                        if (newBox.width < 20 || newBox.height < 20) {
                            return oldBox;
                        }
                        return newBox;
                    }
                });
                layer.add(transformer);

                stage.on('click tap', function(e) {
                    if (isCropping) return;
                    if (e.target === stage || e.target === cropRect) {
                        deselectImage();
                        return;
                    }
                    if (e.target instanceof Konva.Image) {
                        selectImage(e.target);
                    }
                });

                transformer.on('transformend', saveState);
            }

            function selectImage(image) {
                if (isCropping) return;
                if (selectedImage) {
                    selectedImage.stroke(null);
                    transformer.nodes([]);
                }
                selectedImage = image;
                selectedImage.stroke('#0d6efd');
                selectedImage.strokeWidth(2);
                transformer.nodes([selectedImage]);
                layer.draw();
                updateButtonStates();
            }

            function deselectImage() {
                if (isCropping) return;
                if (selectedImage) {
                    selectedImage.stroke(null);
                    transformer.nodes([]);
                    selectedImage = null;
                    layer.draw();
                    updateButtonStates();
                }
            }

            function saveState() {
                history = history.slice(0, historyIndex + 1);
                const state = stage.toJSON();
                history.push(state);
                historyIndex++;
                updateButtonStates();
            }

            function undo() {
                if (historyIndex <= 0) return;
                historyIndex--;
                loadState(history[historyIndex]);
            }

            function redo() {
                if (historyIndex >= history.length - 1) return;
                historyIndex++;
                loadState(history[historyIndex]);
            }

            function loadState(stateJSON) {
                const newStage = Konva.Node.create(JSON.parse(stateJSON), 'editorCanvas');
                stage.destroy();
                stage = newStage;
                layer = stage.findOne('Layer');
                transformer = new Konva.Transformer({
                    nodes: [],
                    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
                    rotateAnchorOffset: 30,
                    anchorSize: 10,
                    anchorStroke: '#0d6efd',
                    anchorFill: '#fff',
                    anchorStrokeWidth: 2,
                    borderStroke: '#0d6efd',
                    borderStrokeWidth: 2,
                    boundBoxFunc: (oldBox, newBox) => {
                        if (newBox.width < 20 || newBox.height < 20) {
                            return oldBox;
                        }
                        return newBox;
                    }
                });
                layer.add(transformer);
                stage.find('Image').forEach(img => {
                    img.draggable(true);
                    img.on('click tap', () => selectImage(img));
                });
                selectedImage = layer.findOne('.image') || null;
                if (selectedImage) {
                    selectedImage.stroke('#0d6efd');
                    selectedImage.strokeWidth(2);
                    transformer.nodes([selectedImage]);
                }
                updateButtonStates();
                layer.draw();
            }

            function loadImageToCanvas(imageUrl) {
                if (!stage) initKonva();
                const imageObj = new Image();
                imageObj.crossOrigin = 'Anonymous';
                imageObj.onload = function() {
                    const naturalWidth = imageObj.naturalWidth;
                    const naturalHeight = imageObj.naturalHeight;
                    const containerWidth = canvasContainer.offsetWidth;
                    const containerHeight = canvasContainer.offsetHeight;

                    const workspaceWidth = workspace.offsetWidth - 40;
                    const workspaceHeight = workspace.offsetHeight - 40;

                    let scale = 1;
                    if (naturalWidth > workspaceWidth || naturalHeight > workspaceHeight) {
                        const widthScale = workspaceWidth / naturalWidth;
                        const heightScale = workspaceHeight / naturalHeight;
                        scale = Math.min(widthScale, heightScale);
                    }
                    initialZoom = scale * 100;
                    document.querySelector('.zoom-controls span').textContent = `${Math.round(initialZoom)}%`;
                    canvasContainer.style.transform = `scale(${initialZoom / 100})`;

                    layer.destroyChildren();
                    layer.add(transformer);

                    const konvaImage = new Konva.Image({
                        x: (containerWidth - naturalWidth * scale) / 2,
                        y: (containerHeight - naturalHeight * scale) / 2,
                        image: imageObj,
                        width: naturalWidth * scale,
                        height: naturalHeight * scale,
                        draggable: true
                    });
                    layer.add(konvaImage);
                    layer.draw();
                    selectImage(konvaImage);
                    saveState();
                };
                imageObj.src = imageUrl;
            }

            const navItems = document.querySelectorAll('.editor-sidebar .nav-item');
            const menus = document.querySelectorAll('.editor-menu');

            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    const menuId = this.dataset.menu;
                    menus.forEach(menu => menu.classList.remove('active'));
                    document.getElementById(`menu-${menuId}`).classList.add('active');

                    if (menuId === 'uploads') {
                        loadUserAssets();
                    } else if (menuId === 'photos') {
                        loadPexelsAssets('photos', 'pexels/photos');
                    } else if (menuId === 'videos') {
                        loadPexelsAssets('videos', 'pexels/videos');
                    }
                });
            });

            const closeButtons = document.querySelectorAll('.menu-close');
            closeButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    menus.forEach(menu => menu.classList.remove('active'));
                });
            });

            const editorModal = document.getElementById('editorModal');
            editorModal.addEventListener('shown.bs.modal', function() {
                if (!stage) initKonva();

                if (document.querySelector('.editor-sidebar .nav-item.active')?.dataset.menu === 'uploads') {
                    loadUserAssets();
                }

                if (currentImageIndex !== null && uploadedImages[currentImageIndex]) {
                    const imageUrl = uploadedImages[currentImageIndex].asset_url;
                    loadImageToCanvas(imageUrl);
                }
            });

            function loadUserAssets() {
                const assetList = document.getElementById('menu-uploads').querySelector('.menu-content');
                const searchInput = document.getElementById('menu-uploads').querySelector('.search-input');
                assetList.innerHTML = '<p>Loading assets...</p>';

                let currentRequest = null;

                function fetchAssets(query = '') {
                    if (currentRequest) currentRequest.abort();
                    currentRequest = new AbortController();
                    const signal = currentRequest.signal;

                    fetch(`/api/user/assets/search?query=${encodeURIComponent(query)}`, {
                        headers: {
                            'Authorization': 'Bearer ' + (window.authToken || ''),
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        signal
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                assetList.innerHTML = '';
                                data.data.forEach(asset => {
                                    if (asset.asset_type === 'image' || asset.asset_type === 'gif') {
                                        const assetDiv = document.createElement('div');
                                        assetDiv.className = 'asset-container';
                                        assetDiv.innerHTML = `
                                        <img class="asset" src="${asset.asset_url}" alt="${asset.file_name || 'User Asset'}" draggable="true" data-url="${asset.asset_url}" data-type="image">
                                        <div class="asset-info">
                                            <span class="asset-date">${new Date(asset.updated_at).toLocaleDateString()}</span>
                                            <span class="asset-desc">${asset.description || 'No description'}</span>
                                        </div>
                                    `;
                                        assetList.appendChild(assetDiv);
                                    }
                                });

                                document.querySelectorAll('.editor-menu .asset').forEach(asset => {
                                    asset.addEventListener('dragstart', function(e) {
                                        e.dataTransfer.setData('text/plain', `${this.dataset.url}|${this.dataset.type}`);
                                        this.classList.add('dragging');
                                    });
                                    asset.addEventListener('dragend', function(e) {
                                        this.classList.remove('dragging');
                                    });
                                });
                            } else {
                                assetList.innerHTML = '<p>Failed to load assets.</p>';
                            }
                        })
                        .catch(error => {
                            if (error.name !== 'AbortError') {
                                console.error('Failed to fetch assets', error);
                                assetList.innerHTML = '<p>Error loading assets. Please try again.</p>';
                            }
                        });
                }

                let debounceTimeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(debounceTimeout);
                    debounceTimeout = setTimeout(() => fetchAssets(this.value), 300);
                });

                fetchAssets();
            }

            function loadPexelsAssets(menuId, apiEndpoint) {
                const assetList = document.getElementById(`menu-${menuId}`).querySelector('.menu-content');
                const searchInput = document.getElementById(`menu-${menuId}`).querySelector('.search-input');
                assetList.innerHTML = '<p>Loading assets...</p>';

                let currentRequest = null;

                function fetchPexelsAssets(query = '') {
                    if (currentRequest) currentRequest.abort();
                    currentRequest = new AbortController();
                    const signal = currentRequest.signal;

                    fetch(`/api/${apiEndpoint}?query=${encodeURIComponent(query)}`, {
                        headers: {
                            'Authorization': 'Bearer ' + (window.authToken || ''),
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        signal
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                assetList.innerHTML = '';
                                data.data.forEach(asset => {
                                    const assetDiv = document.createElement('div');
                                    assetDiv.className = 'asset-container';
                                    assetDiv.innerHTML = `
                                    <img class="asset" src="${asset.asset_type === 'image' ? asset.asset_url : asset.asset_url.replace(/(\.mp4)$/, '.jpg')}" alt="${asset.file_name || 'Pexels Asset'}" draggable="true" data-url="${asset.asset_url}" data-type="${asset.asset_type}">
                                    <div class="asset-info">
                                        <span class="asset-date">${new Date().toLocaleDateString()}</span>
                                        <span class="asset-desc">${asset.description || 'No description'}</span>
                                    </div>
                                `;
                                    assetList.appendChild(assetDiv);
                                });

                                document.querySelectorAll(`#menu-${menuId} .asset`).forEach(asset => {
                                    asset.addEventListener('dragstart', function(e) {
                                        e.dataTransfer.setData('text/plain', `${this.dataset.url}|${this.dataset.type}`);
                                        this.classList.add('dragging');
                                    });
                                    asset.addEventListener('dragend', function(e) {
                                        this.classList.remove('dragging');
                                    });
                                });
                            } else {
                                assetList.innerHTML = '<p>Failed to load assets.</p>';
                            }
                        })
                        .catch(error => {
                            if (error.name !== 'AbortError') {
                                console.error('Failed to fetch assets', error);
                                assetList.innerHTML = '<p>Error loading assets. Please try again.</p>';
                            }
                        });
                }

                let debounceTimeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(debounceTimeout);
                    debounceTimeout = setTimeout(() => fetchPexelsAssets(this.value), 300);
                });

                fetchPexelsAssets();
            }

            canvasContainer.addEventListener('dragover', function(e) {
                e.preventDefault();
            });

            canvasContainer.addEventListener('drop', function(e) {
                e.preventDefault();
                const data = e.dataTransfer.getData('text/plain').split('|');
                const url = data[0];
                const type = data[1] || 'image';
                const rect = canvasContainer.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                const imageObj = new Image();
                imageObj.crossOrigin = 'Anonymous';
                imageObj.onload = function() {
                    const naturalWidth = imageObj.naturalWidth;
                    const naturalHeight = imageObj.naturalHeight;
                    const workspaceWidth = workspace.offsetWidth - 40;
                    const workspaceHeight = workspace.offsetHeight - 40;

                    let scale = 1;
                    if (naturalWidth > workspaceWidth || naturalHeight > workspaceHeight) {
                        const widthScale = workspaceWidth / naturalWidth;
                        const heightScale = workspaceHeight / naturalHeight;
                        scale = Math.min(widthScale, heightScale);
                    }
                    initialZoom = scale * 100;
                    document.querySelector('.zoom-controls span').textContent = `${Math.round(initialZoom)}%`;
                    canvasContainer.style.transform = `scale(${initialZoom / 100})`;

                    const konvaImage = new Konva.Image({
                        x: x - (naturalWidth * scale) / 2,
                        y: y - (naturalHeight * scale) / 2,
                        image: imageObj,
                        width: naturalWidth * scale,
                        height: naturalHeight * scale,
                        draggable: true
                    });
                    layer.add(konvaImage);
                    layer.draw();
                    selectImage(konvaImage);
                    saveState();
                };
                imageObj.src = type === 'image' ? url : url.replace(/(\.mp4)$/, '.jpg');
            });

            const quickActions = document.querySelector('.quick-actions');
            const rightActions = document.querySelector('.right-actions');
            const buttons = document.querySelectorAll('.quick-actions .btn:not(.dropdown-toggle), .quick-actions .dropdown-toggle, .right-actions .btn');
            let animationTween = null;

            function updateButtonStates() {
                buttons.forEach(btn => {
                    btn.disabled = !selectedImage || isCropping;
                });
            }

            quickActions.querySelector('#removeBackgroundBtn').addEventListener('click', function() {
                if (selectedImage) {
                    alert('Remove Background feature (AI/ML) is not implemented in this demo.');
                }
            });

            quickActions.querySelector('#applyMaskBtn').addEventListener('click', function() {
                if (selectedImage) {
                    if (!selectedImage.filters()) {
                        selectedImage.filters([Konva.Filters.Blur]);
                    }
                    const currentBlur = selectedImage.blurRadius() || 0;
                    selectedImage.blurRadius(currentBlur + 5);
                    layer.draw();
                    saveState();
                }
            });

            quickActions.querySelector('#cropBtn').addEventListener('click', function() {
                if (!selectedImage || isCropping) return;
                isCropping = true;
                updateButtonStates();

                const imgPos = selectedImage.getAbsolutePosition();
                const imgWidth = selectedImage.width() * selectedImage.scaleX();
                const imgHeight = selectedImage.height() * selectedImage.scaleY();

                cropRect = new Konva.Rect({
                    x: imgPos.x,
                    y: imgPos.y,
                    width: imgWidth,
                    height: imgHeight,
                    draggable: true,
                    className: 'crop-rect'
                });
                layer.add(cropRect);
                const cropTransformer = new Konva.Transformer({
                    nodes: [cropRect],
                    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
                    anchorSize: 10,
                    anchorStroke: '#0d6efd',
                    anchorFill: '#fff',
                    anchorStrokeWidth: 2,
                    borderStroke: '#0d6efd',
                    borderStrokeWidth: 2,
                    boundBoxFunc: (oldBox, newBox) => {
                        const imgBounds = {
                            x: imgPos.x,
                            y: imgPos.y,
                            width: imgWidth,
                            height: imgHeight
                        };
                        newBox.x = Math.max(imgBounds.x, Math.min(newBox.x, imgBounds.x + imgBounds.width - newBox.width));
                        newBox.y = Math.max(imgBounds.y, Math.min(newBox.y, imgBounds.y + imgBounds.height - newBox.height));
                        newBox.width = Math.min(newBox.width, imgBounds.x + imgBounds.width - newBox.x);
                        newBox.height = Math.min(newBox.height, imgBounds.y + imgBounds.height - newBox.y);
                        if (newBox.width < 20 || newBox.height < 20) {
                            return oldBox;
                        }
                        return newBox;
                    }
                });
                layer.add(cropTransformer);
                layer.draw();

                const applyCropBtn = document.createElement('button');
                applyCropBtn.className = 'btn btn-primary btn-sm';
                applyCropBtn.textContent = 'Apply Crop';
                applyCropBtn.style.position = 'absolute';
                applyCropBtn.style.bottom = '10px';
                applyCropBtn.style.left = '50%';
                applyCropBtn.style.transform = 'translateX(-50%)';
                canvasContainer.parentNode.appendChild(applyCropBtn);

                applyCropBtn.addEventListener('click', function() {
                    const cropPos = cropRect.getAbsolutePosition();
                    const cropWidth = cropRect.width() * cropRect.scaleX();
                    const cropHeight = cropRect.height() * cropRect.scaleY();

                    const cropX = (cropPos.x - imgPos.x) / selectedImage.scaleX();
                    const cropY = (cropPos.y - imgPos.y) / selectedImage.scaleY();
                    const cropW = cropWidth / selectedImage.scaleX();
                    const cropH = cropHeight / selectedImage.scaleY();

                    selectedImage.crop({
                        x: cropX,
                        y: cropY,
                        width: cropW,
                        height: cropH
                    });
                    selectedImage.width(cropW);
                    selectedImage.height(cropH);
                    selectedImage.position({
                        x: cropPos.x,
                        y: cropPos.y
                    });
                    selectedImage.scaleX(1);
                    selectedImage.scaleY(1);

                    cropRect.destroy();
                    cropTransformer.destroy();
                    applyCropBtn.remove();
                    isCropping = false;
                    updateButtonStates();
                    layer.draw();
                    saveState();
                });
            });

            quickActions.querySelector('#rotateBtn').addEventListener('click', function() {
                if (selectedImage) {
                    const centerX = selectedImage.x() + (selectedImage.width() * selectedImage.scaleX()) / 2;
                    const centerY = selectedImage.y() + (selectedImage.height() * selectedImage.scaleY()) / 2;
                    selectedImage.offsetX(selectedImage.width() / 2);
                    selectedImage.offsetY(selectedImage.height() / 2);
                    selectedImage.x(centerX);
                    selectedImage.y(centerY);
                    selectedImage.rotate(90);
                    layer.draw();
                    saveState();
                }
            });

            quickActions.querySelectorAll('.dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (selectedImage) {
                        const animation = this.textContent;
                        if (animationTween) animationTween.destroy();

                        if (animation === 'Fade In') {
                            animationTween = new Konva.Tween({
                                node: selectedImage,
                                duration: 1,
                                opacity: 1,
                                easing: Konva.Easings.EaseIn,
                                onFinish: saveState
                            });
                        } else if (animation === 'Slide Up') {
                            animationTween = new Konva.Tween({
                                node: selectedImage,
                                duration: 1,
                                y: selectedImage.y() - 50,
                                easing: Konva.Easings.EaseOut,
                                onFinish: saveState
                            });
                        } else if (animation === 'Bounce') {
                            animationTween = new Konva.Tween({
                                node: selectedImage,
                                duration: 1,
                                scaleX: 1.2,
                                scaleY: 1.2,
                                y: selectedImage.y() - 20,
                                easing: Konva.Easings.BounceEaseOut,
                                onFinish: () => {
                                    new Konva.Tween({
                                        node: selectedImage,
                                        duration: 0.5,
                                        scaleX: 1,
                                        scaleY: 1,
                                        y: selectedImage.y() + 20,
                                        onFinish: saveState
                                    }).play();
                                }
                            });
                        } else if (animation === 'Rotate') {
                            const centerX = selectedImage.x() + (selectedImage.width() * selectedImage.scaleX()) / 2;
                            const centerY = selectedImage.y() + (selectedImage.height() * selectedImage.scaleY()) / 2;
                            selectedImage.offsetX(selectedImage.width() / 2);
                            selectedImage.offsetY(selectedImage.height() / 2);
                            selectedImage.x(centerX);
                            selectedImage.y(centerY);
                            animationTween = new Konva.Tween({
                                node: selectedImage,
                                duration: 1,
                                rotation: 360,
                                easing: Konva.Easings.EaseInOut,
                                onFinish: function() {
                                    animationTween.reverse();
                                    saveState();
                                }
                            });
                        }
                        animationTween.play();
                        layer.draw();
                    }
                });
            });

            rightActions.querySelector('#layerBtn').addEventListener('show.bs.dropdown', function() {
                updateButtonStates();
            });

            rightActions.querySelectorAll('.dropdown-item[data-action]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (selectedImage) {
                        const action = this.dataset.action;
                        const images = layer.find('.Image');
                        const index = images.indexOf(selectedImage);
                        if (action === 'send-back-one' && index > 0) {
                            images[index].moveDown();
                        } else if (action === 'send-back-all') {
                            images[index].moveToBottom();
                        }
                        layer.draw();
                        saveState();
                    }
                });
            });

            rightActions.querySelector('button[title="Save"]').addEventListener('click', function() {
                if (layer) {
                    const dataURL = stage.toDataURL({ pixelRatio: 2 });
                    const blob = dataURItoBlob(dataURL);
                    const formData = new FormData();
                    formData.append('image', blob, `edited_image_${Date.now()}.png`);
                    formData.append('user_id', window.currentUserId || 1);
                    formData.append('asset_type', 'image');
                    formData.append('asset_domain', 'local');
                    formData.append('mime_type', 'image/png');
                    formData.append('file_size', blob.size);
                    formData.append('dimensions', `${stage.width()}x${stage.height()}`);
                    formData.append('status', 'active');

                    fetch('/api/assets/save', {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer ' + (window.authToken || ''),
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: formData
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                alert('Image saved successfully!');
                                uploadedImages.push({ asset_url: data.asset_url, file_name: data.file_name });
                            } else {
                                alert('Failed to save image.');
                            }
                        })
                        .catch(error => console.error('Save error:', error));
                }
            });

            function dataURItoBlob(dataURI) {
                const byteString = atob(dataURI.split(',')[1]);
                const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                const ab = new ArrayBuffer(byteString.length);
                const ia = new Uint8Array(ab);
                for (let i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ab], { type: mimeString });
            }

            rightActions.querySelector('button[title="Undo"]').addEventListener('click', undo);
            rightActions.querySelector('button[title="Redo"]').addEventListener('click', redo);

            rightActions.querySelector('button[title="Delete"]').addEventListener('click', function() {
                if (selectedImage) {
                    selectedImage.destroy();
                    deselectImage();
                    layer.draw();
                    saveState();
                }
            });

            rightActions.querySelector('button[title="Copy"]').addEventListener('click', function() {
                if (selectedImage) {
                    const clone = selectedImage.clone({
                        x: selectedImage.x() + 20,
                        y: selectedImage.y() + 20
                    });
                    layer.add(clone);
                    deselectImage();
                    selectImage(clone);
                    layer.draw();
                    saveState();
                }
            });

            rightActions.querySelector('button[title="Lock"]').addEventListener('click', function() {
                if (selectedImage) {
                    selectedImage.draggable(!selectedImage.draggable());
                    transformer.enabledAnchors(selectedImage.draggable() ? ['top-left', 'top-right', 'bottom-left', 'bottom-right'] : []);
                    layer.draw();
                    saveState();
                }
            });

            const zoomOut = document.querySelector('.zoom-controls button[title="Zoom Out"]');
            const zoomIn = document.querySelector('.zoom-controls button[title="Zoom In"]');
            const zoomText = document.querySelector('.zoom-controls span');
            let zoomLevel = initialZoom;

            function adjustZoomToFit() {
                const workspaceWidth = workspace.offsetWidth - 40;
                const workspaceHeight = workspace.offsetHeight - 40;
                const images = layer.find('Image');
                if (images.length > 0) {
                    let maxWidth = 0;
                    let maxHeight = 0;
                    images.forEach(img => {
                        const absPos = img.getAbsolutePosition();
                        const width = img.width() * img.scaleX();
                        const height = img.height() * img.scaleY();
                        maxWidth = Math.max(maxWidth, absPos.x + width);
                        maxHeight = Math.max(maxHeight, absPos.y + height);
                    });
                    if (maxWidth > workspaceWidth || maxHeight > workspaceHeight) {
                        const widthScale = workspaceWidth / maxWidth;
                        const heightScale = workspaceHeight / maxHeight;
                        zoomLevel = Math.min(widthScale, heightScale) * 100;
                        zoomText.textContent = `${Math.round(zoomLevel)}%`;
                        canvasContainer.style.transform = `scale(${zoomLevel / 100})`;
                    }
                }
            }

            zoomOut.addEventListener('click', function() {
                if (zoomLevel > 50) {
                    zoomLevel -= 10;
                    zoomText.textContent = `${Math.round(zoomLevel)}%`;
                    canvasContainer.style.transform = `scale(${zoomLevel / 100})`;
                    adjustZoomToFit();
                }
            });

            zoomIn.addEventListener('click', function() {
                if (zoomLevel < 200) {
                    zoomLevel += 10;
                    zoomText.textContent = `${Math.round(zoomLevel)}%`;
                    canvasContainer.style.transform = `scale(${zoomLevel / 100})`;
                    adjustZoomToFit();
                }
            });

            editorModal.addEventListener('hidden.bs.modal', function() {
                zoomLevel = 100;
                zoomText.textContent = `${zoomLevel}%`;
                canvasContainer.style.transform = 'scale(1)';
            });

            window.editorModal = {
                setCurrentImageIndex: (index) => {
                    currentImageIndex = index;
                },
                setUploadedImages: (images) => {
                    uploadedImages = images;
                }
            };
        });
    </script>

@endsection