@extends('user.layouts.app')
@section('title', trim($project->title) == "" ? now()->format('Y-m-d') . ' Untitled - Sophie Ranker AI' : $project->title . ' - Sophie Ranker AI')


@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/vendors/jquery-tags-input/jquery.tagsinput.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/flatpickr/flatpickr.min.css') }}">

    <!-- Theme included stylesheets -->
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ladda@latest/dist/ladda.min.css">

    <style>

        #post-sidebar .accordion-wrapper{
            box-shadow: 0 0 10px 0 rgb(183 192 206 / 20%);
            -webkit-box-shadow: 0 0 10px 0 rgb(183 192 206 / 20%);
            -moz-box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
            -ms-box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
        }
        #post-sidebar .card{
            border-radius: 0;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            -ms-box-shadow: none;
        }
        .accordion-icon[aria-expanded="false"] .link-icon {
            transform: rotate(0deg);
            transition: 0.5s;
        }

        .accordion-icon[aria-expanded="true"] .link-icon {
            transform: rotate(180deg);
            transition: 0.5s;
        }

        #categories-new-section label,
        .tags-new label{
            font-size: 12px;
            font-weight: bold;
        }

        .public-container input{
            padding: 0;
            border: 0;
            height: 20px;
            font-weight: bold;
            color: #219d98;
        }

        .ql-snow.ql-toolbar button:hover {
            color: #219d98 !important;
        }

        .drp-calendar select,input{
            display: inline-block;
        }

        #pexels-photos-section{
            max-height: 320px;
            overflow-y: scroll;
        }

        #categories-section,
        #tags-section{
            height: 200px;
            overflow-y: scroll;
        }

        .text-h1 {
            font-size: 1.12rem;
            line-height: 1.75rem;
        }

        .progress {
            height: 0.65rem
        }

        highlight-input {
            background-color: #F9F0FF;
            color: #531DAB;
            border-radius: 4px;
            padding: 4px;
            cursor: pointer;
            display: inline-block;
            margin: 2px;
        }

        .master-editor {
            height: calc(100vh - 64px);
        }

        #post-editor {
            height: calc(100vh - 130px );
        }

        .master-editor-wrapper {
            width: 100%;
            height: calc(100vh - 67px);
            overflow: hidden;
        }

        .master-editor {
            box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
            -webkit-box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
        }

        .ql-toolbar.ql-snow {
            border: 1px solid #f2f4f9;
            border-top: 0;
            box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
            -webkit-box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
        }

        .ql-container.ql-snow {
            border-color: #f2f4f9 !important;;
        }

        .editor-sidebar-wrapper {
            height: calc(100vh - 64px);
        }

        .editor-sidebar {
            height: calc(100vh - 226px);
            overflow-y: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .flex-direction-column {
            flex-direction: column;
        }

        .chat-container {
            bottom: 0;
            left: 0;
            background: #fff;
            height: auto; /* Adjusted to auto for dynamic height */
            max-height: 250px; /* Maximum height */
            z-index: 99;
            box-shadow: 0 8px 12px -2px rgba(19, 21, 22, 0.04), 0 4px 8px rgba(19, 21, 22, 0.02);
            -webkit-box-shadow: 0 8px 12px -2px rgba(19, 21, 22, 0.04), 0 4px 8px rgba(19, 21, 22, 0.02);
            border: 2px solid #f2f4f9;
            border-radius: 0.5rem;
        }

        .chat-master {
            word-wrap: break-word;
            white-space: pre-wrap;
            white-space: break-spaces;
            scrollbar-width: none;
            -ms-overflow-style: none;
            outline: none;
            overflow-y: auto; /* Enable scrolling */
            max-height: 200px; /* Maximum height for chat-master */
            min-height: 25px; /* Minimum height for chat-master */
        }

        .chat-master:empty:before {
            content: attr(data-placeholder);
            color: #6c757d; /* Placeholder color */
            pointer-events: none;
        }

        .chat-response-text h1{
            font-size: 1.5rem;
        }

        .chat-response-text h2{
            font-size: 1.25rem;
        }

        .chat-prompt-text {
            box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
            -webkit-box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
        }

        #mediaModal .modal-body {
            min-height: 482px;
        }
    </style>
    <style>
        /* Targeted CSS for the social media post modal using ID */
        #socialMediaPostModal .modal-dialog {
            max-width: 700px; /* Larger modal */
        }

        #socialMediaPostModal .modal-content {
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        #socialMediaPostModal .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
        }

        #socialMediaPostModal .modal-title {
            font-size: 18px;
            font-weight: 600;
        }

        #socialMediaPostModal .modal-body {
            padding: 20px;
        }

        #socialMediaPostModal .profiles-section {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        #socialMediaPostModal .profile-box {
            display: flex;
            align-items: center;
            padding: 8px;
            border: 1px solid #d1d5db;
            border-radius: 5px;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        #socialMediaPostModal .profile-box.selected {
            border-color: #007bff;
        }

        #socialMediaPostModal .profile-box img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 8px;
        }

        #socialMediaPostModal .profile-box span {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        #socialMediaPostModal .post-box {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        #socialMediaPostModal .content-editable {
            padding: 10px;
            font-size: 14px;
            color: #333;
            min-height: 100px;
            outline: none;
        }

        #socialMediaPostModal .content-editable:empty:before {
            content: attr(placeholder);
            color: #6b7280;
        }

        #socialMediaPostModal .media-section {
            display: flex;
            align-items: flex-start;
            padding: 10px;
        }

        #socialMediaPostModal .media-upload {
            width: 110px;
            height: 110px;
            border: 1px dashed #d1d5db;
            border-radius: 8px;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-right: 10px;
        }

        #socialMediaPostModal .media-upload i {
            color: #6b7280;
            margin-bottom: 5px;
        }

        #socialMediaPostModal .media-upload p {
            font-size: 12px;
            color: #6b7280;
            margin: 0;
            text-align: center;
        }

        #socialMediaPostModal .media-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        #socialMediaPostModal .media-preview-item {
            position: relative;
            width: 110px;
            height: 110px;
        }

        #socialMediaPostModal .media-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        #socialMediaPostModal .media-preview-item .remove-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            cursor: pointer;
        }

        #socialMediaPostModal .action-footer {
            border-top: 1px solid #d1d5db;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #socialMediaPostModal .action-buttons .btn {
            width: 30px;
            height: 30px;
            padding: 0;
            font-size: 14px;
            border-radius: 5px;
            background-color: #f1f3f5;
            border: none;
            color: #666;
            display: inline-block;
            align-items: center;
            margin-right: 5px;
        }

        #socialMediaPostModal .action-buttons .btn i {
            width: 15px;
            height: 15px;
        }

        #socialMediaPostModal .action-buttons .btn.ai-assistant {
            width: auto;
            padding: 0 10px;
        }

        #socialMediaPostModal .char-count {
            font-size: 14px;
            color: #6b7280;
        }

        #socialMediaPostModal .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #e9ecef;
        }

        #socialMediaPostModal .modal-footer .btn {
            font-size: 14px;
            padding: 8px 15px;
            border-radius: 5px;
        }

        #socialMediaPostModal .modal-footer .btn-outline-secondary {
            border-color: #d1d5db;
            color: #666;
        }

        #socialMediaPostModal .modal-footer .btn-primary {
            background-color: #007bff;
            border: none;
        }

        #socialMediaPostModal .no-profiles-message {
            text-align: center;
            font-size: 16px;
            color: #6b7280;
            padding: 20px;
        }
    </style>

@endsection
@section('modals')
    <!-- AI Prompts Modal -->
    <div class="modal fade" id="aiPromptsModal" tabindex="-1" role="dialog" aria-labelledby="aiPromptsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="aiPromptsModalLabel">AI Prompts</h5>
                    <input type="text" id="search-input" class="form-control ml-3" placeholder="Search categories, subcategories, and prompts..." style="width: 300px;">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body" style="height: 500px; overflow-y: auto;">
                    <div class="row">
                        <!-- First Column: Categories -->
                        <div class="col-md-4">
                            <h6 class="text-muted">Categories</h6>
                            <div class="list-group" id="categories-list">
                                <!-- Categories will be loaded here -->
                            </div>
                        </div>

                        <!-- Second Column: Subcategories -->
                        <div class="col-md-4">
                            <h6 class="text-muted">Subcategories</h6>
                            <div class="list-group" id="subcategories-list">
                                <!-- Subcategories will be loaded here -->
                            </div>
                        </div>

                        <!-- Third Column: Prompts -->
                        <div class="col-md-4">
                            <h6 class="text-muted">Prompts</h6>
                            <div class="list-group" id="prompts-list">
                                <!-- Prompts will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="select-prompt" class="btn btn-primary">Select Prompt</button>
                </div>
            </div>
        </div>
    </div>

    <!-- WordPress Modal -->
    <div class="modal fade" id="wordpressPostModal" tabindex="-1" role="dialog" aria-labelledby="wordpressPostModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="wordpressPostModalLabel">Create WordPress Post</h5>
                    <div class="d-flex align-items-center">
                        <select name="sites" id="sites" class="form-control mr-2" style="width: 200px;">
                            @foreach(Auth::user()->sites as $site)
                                <option value="{{ $site->id }}">{{ $site->title }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
                <div class="modal-body" style="max-height: 470px; overflow-y: auto;">
                    <div id="validation-alerts"></div>
                    <div class="row">
                        <div class="col-8">
                            <div class="form-group mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label for="post_title" class="form-label">Post Title <span class="text-danger">*</span></label>
                                    <button type="button" class="btn btn-sm btn-primary" id="generateTitleBtn">Generate AI Title</button>
                                </div>
                                <input type="text" class="form-control" id="post_title" name="title" placeholder="Enter post title" required>
                                <div class="invalid-feedback">Please enter a post title.</div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="post_description" class="form-label">Description <span class="text-danger">*</span></label>
                                <div id="quill-editor" style="height: 400px;"></div>
                                <input type="hidden" name="description" id="post_description" required>
                                <div class="invalid-feedback">Please enter a description.</div>
                            </div>
                        </div>
                        <div class="col-4 border-start" id="post-sidebar">
                            <div class="accordion-wrapper">
                                <div class="accordion" id="postAccordion">
                                    <!-- Categories -->
                                    <div class="card mb-0">
                                        <div class="card-header accordion-icon" id="headingThree" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                            <div class="row">
                                                <div class="col-10"><h6 class="mb-0">Categories <span class="text-danger">*</span></h6></div>
                                                <div class="col-2 text-end"><i class="link-icon" data-feather="chevron-down"></i></div>
                                            </div>
                                        </div>
                                        <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-bs-parent="#postAccordion">
                                            <div class="card-body">
                                                <div class="form-group mb-3">
                                                    <label for="search-category-input" class="form-label small">Search Categories</label>
                                                    <input type="text" class="form-control" id="search-category-input">
                                                </div>
                                                <div id="categories-section"></div>
                                                <button class="btn btn-link w-100 mt-3" id="category-new-btn">Add New Category</button>
                                                <form id="categories-new-section" class="mt-3" style="display: none">
                                                    <div class="form-group mb-3">
                                                        <label for="new_category_name" class="form-label small">New Category Name</label>
                                                        <input type="text" id="new_category_name" name="name" class="form-control" required>
                                                        <div class="invalid-feedback" id="categoryError"></div>
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <label for="parent_category" class="form-label small">Parent Category</label>
                                                        <select name="parent_category" id="parent_category" class="form-control">
                                                            <option value="">— Parent Category —</option>
                                                        </select>
                                                    </div>
                                                    <button class="btn btn-outline-secondary" type="submit">Create Category</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Tags -->
                                    <div class="card mb-0">
                                        <div class="card-header accordion-icon" id="headingFour" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                            <div class="row">
                                                <div class="col-10"><h6 class="mb-0">Tags <span class="text-danger">*</span></h6></div>
                                                <div class="col-2 text-end"><i class="link-icon" data-feather="chevron-down"></i></div>
                                            </div>
                                        </div>
                                        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-bs-parent="#postAccordion">
                                            <div class="card-body">
                                                <div class="form-group mb-3">
                                                    <label for="tags" class="form-label">Add New Tag</label>
                                                    <input class="form-control" name="tags" id="tags" value="{{ $project->tags }}" required />
                                                    <small class="form-text text-muted">Separate with commas or the Enter key.</small>
                                                    <div class="invalid-feedback">Please add at least one tag.</div>
                                                </div>
                                                <div id="tags-section"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Featured Image -->
                                    <div class="card mb-0">
                                        <div class="card-header accordion-icon" id="headingTwo" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            <div class="row">
                                                <div class="col-10"><h6 class="mb-0">Featured Image</h6></div>
                                                <div class="col-2 text-end"><i class="link-icon" data-feather="chevron-down"></i></div>
                                            </div>
                                        </div>
                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#postAccordion">
                                            <div class="card-body text-center">
                                                <img src="{{ $project->featured_image }}" alt="" class="img-fluid mb-3" id="featured_image">
                                                <button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#mediaModal">Change Featured Image</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div class="text-start">
                        <small class="text-muted">Words: <span id="words_count">0</span> | Reading Time: <span id="readingTime">0 MIN</span> | Status: <span id="contentStatus" class="text-muted">Empty</span></small>
                    </div>
                    <div>
                        <button class="btn btn-outline-primary" id="save-draft-btn">Save Draft</button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="add-to-queue-btn">
                                Add to Queue
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#" data-action="share-now">Share Now</a>
                                <a class="dropdown-item" href="#" data-action="share-next">Share Next</a>
                                <a class="dropdown-item" href="#" data-action="schedule-post">Schedule Post</a>
                            </div>
                        </div>
                        <input type="text" id="schedule-date-picker" class="form-control d-none" placeholder="Select date and time" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Social Modal -->
    <div class="modal fade" id="socialMediaPostModal" tabindex="-1" role="dialog" aria-labelledby="socialMediaPostModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="socialMediaPostModalLabel">Create Post</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning alert-dismissible fade d-none" role="alert" id="noContentAlert">
                        Please add some content to your post.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <div class="profiles-section" id="profilesList"></div>
                    <div class="no-profiles-message d-none text-muted" id="noProfilesMessage">
                        Your work has been saved. Select a Channel to create a post.
                    </div>
                    <div class="post-box" id="postBox">
                        <div class="content-editable form-control" contenteditable="true" id="postContent" placeholder="What's on your mind?"></div>
                        <div class="media-section mt-3">
                            <div class="media-upload border rounded p-3 text-center" id="mediaUploadTrigger">
                                <i data-feather="image" class="feather-icon"></i>
                                <p class="text-muted mb-0">Drag & drop or select a file</p>
                                <input type="file" class="d-none" id="mediaUpload" multiple accept="image/*">
                            </div>
                            <div class="media-preview mt-3" id="mediaPreview"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" id="saveDraftBtn" disabled>Save as Draft</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="addToQueueBtn">
                            Add to Queue
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#" id="shareNow">Share Now</a>
                            <a class="dropdown-item" href="#" id="schedulePost">Schedule Post</a>
                        </div>
                    </div>
                    <input type="text" id="schedulePicker" class="form-control d-none" placeholder="Select date and time">
                </div>
            </div>
        </div>
    </div>

    <!-- Media Modal -->
    <div class="modal fade" id="mediaModal" tabindex="-1" role="dialog" aria-labelledby="mediaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mediaModalLabel">Featured Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item d-none" role="presentation">
                            <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Upload File</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Media Library</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Pexels</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
                        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="row mt-3">
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="sort" class="form-label">Sort</label>
                                        <select name="sort" id="sort" class="form-control">
                                            <option value="asc">Ascending</option>
                                            <option value="desc">Descending</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="orderBy" class="form-label">Order By</label>
                                        <select name="orderBy" id="orderBy" class="form-control">
                                            <option value="author">Author</option>
                                            <option value="date">Date</option>
                                            <option value="id">ID</option>
                                            <option value="include">Include</option>
                                            <option value="modified">Modified</option>
                                            <option value="parent">Parent</option>
                                            <option value="relevance">Relevance</option>
                                            <option value="slug">Slug</option>
                                            <option value="include_slugs">Include Slugs</option>
                                            <option value="title">Title</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="searchMedia" class="form-label">Search Media</label>
                                        <input type="text" class="form-control" id="searchMedia" placeholder="Search media">
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="wp-media-section"></div>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row my-3">
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <input type="text" class="form-control" id="searchInput" placeholder="Search for Photos">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-0">
                                        <select class="form-control" id="perPageDropdown">
                                            <option value="20">20 Per Page</option>
                                            <option value="40">40 Per Page</option>
                                            <option value="80">80 Per Page</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-outline-secondary w-100" onclick="getPexelsPhotos()">Search</button>
                                </div>
                            </div>
                            <div class="row" id="pexels-photos-section"></div>
                            <div class="col-md-12 mt-3" id="pagination-section"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="set-featured-image">Set Featured Image</button>
                    <button type="button" class="btn btn-primary" id="add-image-to-editor-btn">Add To Editor</button>
                    <button type="button" class="btn btn-primary d-none">Add Image</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid master-editor-wrapper">
        <div class="row">
            <div class="col-6">
                <div class="editor-sidebar-wrapper py-3 position-relative">
                    <div class="editor-sidebar">
                        <div class="chat-welcome-note py-5 px-4">
                            <!-- Heading and Description -->
                            <h4 class="mb-2">Welcome to Sophie Ranker AI!</h4>
                            <p class="mb-4">Unlock the power of AI to create, optimize, and innovate. Whether you're crafting content, brainstorming ideas, or automating tasks, Sophie Ranker AI is here to help. Explore the Prompt Library for inspiration and get started today!</p>

                            <!-- Real-Time Insights -->
                            <div class="row align-items-center">
                                <!-- Left Column with Icon -->
                                <div class="col-auto">
                                    <i data-feather="zap" class="text-primary"></i> <!-- Feather icon for real-time insights -->
                                </div>
                                <div class="col mb-3">
                                    <h6 class="mb-2">Real-Time Insights</h6>
                                    <p>Sophie Ranker AI helps you create content instantly. From summaries to personalized emails, it’s perfect for quick tasks. e.g., "Summarize the latest trends in digital marketing.", "Write a follow-up email for a client meeting."</p>
                                </div>
                            </div>

                            <!-- Long-Form Content Creation -->
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <i data-feather="file-text" class="text-primary"></i> <!-- Feather icon for long-form content -->
                                </div>
                                <div class="col mb-3">
                                    <h6 class="mb-2">Long-Form Content Creation</h6>
                                    <p>Need detailed articles or reports? Sophie Ranker AI crafts long-form content that’s engaging and SEO-friendly. e.g., "Write a blog post about AI in healthcare.", "Create a detailed report on e-commerce growth in 2025."</p>
                                </div>
                            </div>

                            <!-- Brainstorming & Idea Generation -->
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <i data-feather="edit" class="text-primary"></i> <!-- Feather icon for brainstorming -->
                                </div>
                                <div class="col mb-3">
                                    <h6 class="mb-2">Brainstorming & Idea Generation</h6>
                                    <p>Stuck for ideas? Sophie Ranker AI generates creative prompts and suggestions to spark your imagination. e.g., "Generate 10 catchy taglines for a fitness brand.", "Brainstorm 5 unique blog topics for a travel website."</p>
                                </div>
                            </div>
                        </div>

                        <div id="conversation-history"></div>
                    </div>

                    <div class="chat-container d-flex flex-column position-absolute w-100 py-3 mb-3">
                        <!-- Chat Master -->
                        <div class="chat-master mb-3 px-3" contenteditable="true" data-placeholder="Ask or search anything"></div>

                        <!-- Buttons Row -->
                        <div class="d-flex justify-content-between align-items-center px-3">
                            <!-- Left Side Buttons -->
                            <div class="d-flex align-items-center">
                                <button class="btn btn-outline-secondary btn-icon-text mr-2 btn-xs" id="openModalButton" data-toggle="modal" data-target="#aiPromptsModal">
                                    <i class="btn-icon-prepend" data-feather="list"></i> Browse Prompts
                                </button>
                                <button class="btn btn-outline-secondary btn-icon-text mr-2 btn-xs">
                                    <i class="btn-icon-prepend" data-feather="mic"></i> Branch Voice
                                </button>
                                <button class="btn btn-outline-secondary btn-icon-text btn-xs"  data-toggle="modal" data-target="#mediaModal">
                                    <i class="btn-icon-prepend" data-feather="image"></i> Add Image
                                </button>
                            </div>

                            <!-- Right Side Buttons -->
                            <div class="d-flex align-items-center">
                                <button class="btn btn-outline-secondary btn-icon-text mr-2 d-none"  id="improve-text">
                                    <i class="btn-icon-prepend" data-feather="pen-tool"></i> Improve
                                </button>
                                <button class="btn btn-primary btn-icon" id="send-chat">
                                    <i data-feather="send"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-6 px-0">
                <div class="master-editor bg-white mb-0">
                    <div id="post-editor">
                        {!!   $project->description   !!}
                    </div>
                    <div class="px-3">
                        <div class="row">
                            <div class="col-md-8">
                                <small>Words: <span id="word-counter">0</span></small>
                                <small class="ml-3">Characters: <span id="char-counter">0</span></small>
                            </div>
                            <div class="col-md-4 text-right">
                                <small id="btn-draft">Saved</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/ladda@latest/dist/ladda.min.js"></script>

    <script src="{{ asset('assets/vendors/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('assets/js/flatpickr.js') }}"></script>

    <script>
        let quill;
        let site_id,title,description,featured_image,categories,tags, project_id = '{{ $project->encrypted_id }}', publish_date, status, author_id, language, active_workspace = {{ Auth::user()->active_workspace->id }};
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'link', 'image'], // Core text formatting and media
            ['blockquote'],                                   // Useful for quotes
            [{'header': [1, 2, 3, false]}],                  // Simplified headings (H1-H3)
            [{'list': 'ordered'}, {'list': 'bullet'}],       // Essential list types
            [{'indent': '-1'}, {'indent': '+1'}],            // Basic indentation
            ['clean']                                        // Remove formatting

            // Commented out options:
            // ['strike']                                    // Less commonly used in professional content
            // ['code-block']                                // Too technical for general content platforms
            // [{'header': 1}, {'header': 2}]               // Replaced with simpler header array
            // [{'script': 'sub'}, {'script': 'super'}]      // Rarely needed outside academic/scientific content
            // [{'direction': 'rtl'}]                        // Only needed for specific language support
            // [{'size': ['small', false, 'large', 'huge']}] // Better handled by headers; can be inconsistent
            // [{'header': [1, 2, 3, 4, 5, 6, false}]       // H4-H6 rarely used in most content
            // [{'color': []}, {'background': []}]          // Can lead to messy, inconsistent styling
            // [{'font': []}]                               // Font selection often unnecessary with theme control
            // [{'align': []}]                              // Default left align usually sufficient
        ];
        let quill_editor_options = {
            formats: ['bold', 'italic', 'underline', 'strike', 'script', 'link', 'image', 'code', 'blockquote', 'header', 'list', 'indent', 'color', 'background', 'align', 'del', 'ins'],
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        };

        $('body').on('keyup', '#search-category-input', function (){
            get_categories()
        })


        let selected_categories = [];

        $('body').on('click', 'input[name="categories"]', function(){
            console.log($(this).val())
            selected_categories.push($(this).val());
        })


        let gettingCategoriesAjax = null;

        function get_media(){
            let site_id = $('#sites').val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                /* the route pointing to the post function */
                url: '{{ route('user.integration.wordpress.get.media') }}',
                type: 'POST',
                /* send the csrf-token and the input to the controller */
                data: {site_id},
                dataType: 'JSON',
                /* remind that 'data' is the response of the AjaxController */
                success: function (data) {
                    $.each(data.data, function(i, v){
                        let media = `
                        <div class="col-md-2 mt-3">
                            <div class="custom-control custom-radio image-checkbox">
                                <input type="radio" class="custom-control-input media-radio" id="${v.id}" name="ck2" value="${v.source_url}">
                                <label class="custom-control-label" for="${v.id}">
                                    <img src="${v.source_url}" alt="#" class="img-fluid">
                                </label>
                            </div>
                        </div>
                        `;

                        $('#wp-media-section').append(media)
                    })
                },
                error: function (data) {
                    Swal.fire({
                        timer: 2000,
                        title: 'Api Error!',
                        text: data.message,
                        icon: 'error',
                        showConfirmButton: false,
                    })
                }
            });
        }
        function get_users(){
            let site_id = $('#sites').val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                /* the route pointing to the post function */
                url: '{{ route('user.integration.wordpress.get.users') }}',
                type: 'POST',
                /* send the csrf-token and the input to the controller */
                data: {site_id},
                dataType: 'JSON',
                /* remind that 'data' is the response of the AjaxController */
                success: function (data) {
                    $.each(data.data, function(i, v){
                        let authors = `<option value="${v.id}">${v.name}</option>`;
                        $('#authors').append(authors)
                    })
                },
                error: function (data) {
                    Swal.fire({
                        timer: 2000,
                        title: 'Api Error!',
                        text: data.message,
                        icon: 'error',
                        showConfirmButton: false,
                    })
                }
            });
        }
        function getPexelsPhotos(page = 1) {
            var searchInputValue = $('#searchInput').val();
            var perPageValue = $('#perPageDropdown').val();

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

            $.ajax({
                url: '{{ route('user.integration.pexels.get.photos') }}',
                type: 'GET',
                data: {
                    query: searchInputValue,
                    per_page: perPageValue,
                    page: page
                },
                dataType: 'JSON',
                success: function (data) {
                    // Clear existing photos
                    $('#pexels-photos-section').html('');

                    $.each(data.data.photos, function (i, v) {
                        let media = `
                    <div class="col-md-2 mt-3">
                        <div class="custom-control custom-radio image-checkbox">
                            <input type="radio" class="custom-control-input media-radio" id="${v.id}" name="ck2" value="${v.src.medium}">
                            <label class="custom-control-label" for="${v.id}">
                                <img src="${v.src.medium}" alt="#" class="img-fluid">
                            </label>
                        </div>
                    </div>
                `;

                        $('#pexels-photos-section').append(media);
                    });

                    // Display pagination
                    displayPagination(data.data);
                },
                error: function (data) {
                    Swal.fire({
                        timer: 2000,
                        title: 'Api Error!',
                        text: data.message,
                        icon: 'error',
                        showConfirmButton: false,
                    });
                }
            });
        }
        function displayPagination(data) {
            var totalPages = Math.ceil(data.total_results / data.per_page);
            var currentPage = data.page;
            var paginationHtml = '<nav aria-label="Page navigation example"><ul class="pagination">';
            if (currentPage > 1) {
                paginationHtml += '<li class="page-item"><a class="page-link" href="#" onclick="getPexelsPhotos(' + (currentPage - 1) + ')">Previous</a></li>';
            }
            if (currentPage > 3) {
                paginationHtml += '<li class="page-item"><a class="page-link" href="#" onclick="getPexelsPhotos(1)">1</a></li>';
                if (currentPage > 4) {
                    paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
            }
            for (var i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
                paginationHtml += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '"><a class="page-link" href="#" onclick="getPexelsPhotos(' + i + ')">' + i + '</a></li>';
            }
            if (currentPage < totalPages - 2) {
                if (currentPage < totalPages - 3) {
                    paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
                paginationHtml += '<li class="page-item"><a class="page-link" href="#" onclick="getPexelsPhotos(' + totalPages + ')">' + totalPages + '</a></li>';
            }
            if (currentPage < totalPages) {
                paginationHtml += '<li class="page-item"><a class="page-link" href="#" onclick="getPexelsPhotos(' + (currentPage + 1) + ')">Next</a></li>';
            }
            paginationHtml += '</ul></nav>';
            $('#pagination-section').html(paginationHtml);
        }
        function handle_status_btn(){
            $('#statusDropdown').on('hidden.bs.dropdown', function () {
                if($('.status:checked').val() == "Password Protected" && $('.password').val().trim() == ""){
                    $('.status[value="Public"]').prop('checked', true);
                    $('#statusDropdownBtn').html('Public')
                }
            })

            if($('.status:checked').val() == "Private"){
                Swal.fire({
                    icon: 'warning',
                    title: 'Confirmation',
                    text: "Would you like to privately publish this post now?",
                    // icon: 'error',
                    showConfirmButton: true,
                    confirmButtonText: 'Yes',
                    showCancelButton: true,
                    cancelButtonText: 'No',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#statusDropdownBtn').val($('.status:checked').val())
                        $('#statusDropdownBtn').html($('.status:checked').val())
                    }else{
                        $('.status[value="Public"]').prop('checked', true);
                        $('#statusDropdownBtn').html('Public')
                    }
                })
            }
            else{
                $('#statusDropdownBtn').val($('.status:checked').val())
                $('#statusDropdownBtn').html($('.status:checked').val())
            }

        }

        $(document).ready(function () {
            quill = new Quill('#post-editor', quill_editor_options);

            var htmlContent = document.getElementById('post-editor').innerHTML;
            quill.clipboard.dangerouslyPasteHTML(htmlContent);

            quill.root.setAttribute('spellcheck', false)

            $('#btn-draft').on('click', function (){
                save_project();
            })

            $('body').on('click', '#add-image-to-editor-btn', function() {
                var selectedImageSrc = $(".media-radio:checked").val();

                if (selectedImageSrc) {
                    var range = quill.getSelection(true); // Get the current cursor position
                    quill.insertEmbed(range.index, 'image', selectedImageSrc); // Insert image at cursor
                    quill.setSelection(range.index + 1); // Move cursor after the image
                } else {
                    alert("Please select an image first.");
                }
            });

            quill.on('text-change', function(delta, old, source) {
                save_project();
                function numberWithCommas(x) {
                    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }

                const wordsPerMinute = 200;
                let textLength = $('.ql-editor').html().split(' ').length;

                $('#words_count').html(numberWithCommas(textLength));


                if(textLength > 0){
                    let value = Math.ceil(textLength / wordsPerMinute);
                    result = `~${value} min read`;
                }
                document.getElementById("readingTime").innerText = result;

                console.log()
            });


            $('.status').on('change', function(){
                handle_status_btn()
            })

            // Create Post
            $('body').on('click', "#generate-post", function () {
                let l = Ladda.create(document.querySelector('#generate-post'));
                l.start();
                categories = [];
                $('input[name="categories"]:checked').each(function() {
                    categories.push($(this).val());
                });
                site_id = $('#sites').val();
                title = $('#post_title').val();
                description = quill.root.innerHTML;
                featured_image = $('#featured_image').attr('src');
                tags = $('#tags').val();
                status = $('#statusDropdownBtn').val().toLowerCase();
                author_id = $('#authors').val();
                publish_date = $('#publish-date').val();

                $("input:checkbox[name='categories']:checked").each(function(){
                    categories.push($(this).val())
                });

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    /* the route pointing to the post function */
                    url: '{{ route('user.integration.wordpress.post') }}',
                    type: 'POST',
                    data: {site_id, title, description, featured_image, categories, tags, author_id, status, publish_date},
                    dataType: 'JSON',
                    success: function (response) {
                        l.stop();
                        Swal.fire({
                            timer: 2000,
                            title: 'Post Added Successfully!',
                            text: response.message,
                            icon: 'success',
                            showConfirmButton: false,
                        })
                    },
                    error: function (data) {
                        Swal.fire({
                            timer: 2000,
                            title: 'Api Error!',
                            text: data.message,
                            icon: 'error',
                            showConfirmButton: false,
                        })
                    }
                });
            })


            $('#category-new-btn').on('click', function(){
                $('#categories-new-section').slideToggle()
            })

            $('body').on('click', '#set-featured-image', function(){
                var selectedImageSrc = $(".media-radio:checked").val();

                // Update the image source if a radio button is checked
                if (selectedImageSrc) {
                    $("#featured_image").attr("src", selectedImageSrc);
                } else {
                    alert("Please select a radio button first.");
                }
            })

            $('body').on('click', '#set-featured-image', function(){
                var selectedImageSrc = $(".media-radio:checked").val();

                // Update the image source if a radio button is checked
                if (selectedImageSrc) {
                    $("#featured_image").attr("src", selectedImageSrc);
                } else {
                    alert("Please select a radio button first.");
                }
            })

            $('#tags').tagsInput({
                'width': '100%',
                'height': '75%',
                'interactive': true,
                'defaultText': 'Add More',
                'removeWithBackspace': true,
                'minChars': 0,
                'maxChars': 20,
                'placeholderColor': '#666666'
            });



            $(document).on('click', '.accordion-wrapper .dropdown-menu', function (e) {
                e.stopPropagation();
            });

            $('#title').on('change', function(){
                save_project()
            })

            $('body').on("submit", "#categories-new-section", function (e){
                let form = this;
                let l = Ladda.create(document.querySelector('#categories-new-section button'));
                l.start();
                e.preventDefault();
                let site_id = $('#sites').val();
                let form_data = $(this).serialize() +  "&" + "site_id=" + site_id;
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route('user.integration.wordpress.save.category') }}',
                    type: 'POST',
                    data: form_data,
                    dataType: 'JSON',
                    before: function(){
                        $("#new_category_name").removeClass("is-invalid");
                        $("#categoryError").hide();
                    },
                    success: function (data) {
                        l.stop();
                        if(data.status){
                            $("#new_category_name").removeClass("is-invalid");
                            $("#categoryError").hide();
                            form.reset()
                            l.stop();
                            $('#categories-section').html("")
                            $('#parent_category').html("")
                            $.each(data.data, function(i, v){

                                let parent_categories = `<option value="${v.id}">${v.name}</option>`;
                                let checkboxes = `
                            <div class="custom-control custom-checkbox">
                                <input name="categories" value="${v.id}" type="checkbox" class="custom-control-input" id="cateory_check_${v.id}">
                                <label class="custom-control-label" for="cateory_check_${v.id}">${v.name}</label>
                            </div>
                            `;

                                if(typeof v.children !== 'undefined'){
                                    $.each(v.children, function(j, child){
                                        parent_categories+= `<option value="${child.id}">${child.name}</option>`;
                                        checkboxes+= `
                                    <div class="custom-control custom-checkbox ml-3">
                                        <input name="categories" value="${child.id}" type="checkbox" class="custom-control-input" id="cateory_check_${child.id}">
                                        <label class="custom-control-label" for="cateory_check_${child.id}">${child.name}</label>
                                    </div>
                                    `;
                                    })
                                }

                                $('#categories-section').append(checkboxes)
                                $('#parent_category').append(parent_categories)

                            })
                        }else{
                            if(data.wp_response !== 'undefined'){
                                $("#new_category_name").addClass("is-invalid");
                                $("#categoryError").text(data.wp_response.message).show();
                            }
                        }
                    },
                    error: function (data) {
                        l.stop();
                        Swal.fire({
                            timer: 2000,
                            title: 'Api Error!',
                            text: data.message,
                            icon: 'error',
                            showConfirmButton: false,
                        })

                    }
                });
            })


            let isSaving = false;
            function save_project() {
                if (isSaving) {
                    return;
                }

                language = $('#language').val();
                language = new URLSearchParams(language);
                language = language.get('lang');
                video_id = $('#language').val();
                title = $('#title').val();
                description = quill.root.innerHTML;
                featured_image = $('#featured_image').attr('src');
                $('#btn-draft')
                    .text('Unsaved Changes')
                isSaving = true;
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route('projects.update', $project->encrypted_id ) }}',
                    type: 'PUT',
                    data: { title, description, project_id, language : 'en' },
                    dataType: 'JSON',
                    success: function (response) {
                        console.log(response)
                        project_id = response.id;
                        $('#btn-draft')
                            .text('Saved!')
                            .attr('data-id', project_id);

                        isSaving = false;
                    },
                    error: function (data) {
                        console.log("Error! Saving Project.");
                        isSaving = false;
                    }
                });
            }
        })


    </script>
    <script>
        $(document).ready(function () {
            let allData = null; // Store all categories, subcategories, and prompts
            let selectedPrompt = null;

            // Initialize Ladda buttons
            const selectPromptButton = Ladda.create(document.querySelector('#select-prompt'));
            const sendChatButton = Ladda.create(document.querySelector('#send-chat'));
            const improveTextButton = Ladda.create(document.querySelector('#improve-text'));

            // Load prompts and history on page load

            // loadAllData();
            fetchUsageData();
            // loadRecentSubcategories(); // Load recent subcategories in the sidebar
            fetchConversationHistory(); // Fetch conversation history

            $('#openModalButton').click(async function () {
                $('#aiPromptsModal').modal('show');
                await loadAllData();
                renderCategories();
            });

            // Fetch all data
            async function loadAllData() {
                try {
                    const response = await $.get('/api/prompt-categories');
                    allData = response;
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            }

            // Render categories
            function renderCategories() {
                $('#categories-list').empty();
                allData.forEach(category => {
                    $('#categories-list').append(`
                    <a href="#" class="list-group-item list-group-item-action category-item" data-id="${category.id}" data-slug="${category.slug}">
                        ${category.name}
                    </a>
                `);
                });
            }

            // Render subcategories
            function renderSubcategories(category) {
                $('#subcategories-list').empty();
                if (category.children && category.children.length > 0) {
                    category.children.forEach(subcategory => {
                        $('#subcategories-list').append(`
                        <a href="#" class="list-group-item list-group-item-action subcategory-item" data-id="${subcategory.id}" data-slug="${subcategory.slug}">
                            <i data-feather="${subcategory.icon}" width="16" height="16"></i>
                            ${subcategory.name}
                        </a>
                    `);
                    });
                }
                feather.replace(); // Initialize Feather icons
            }

            // Handle prompt click
            $(document).on('click', '.prompt-item', function () {
                $('.prompt-item').removeClass('active');
                $(this).addClass('active');
                selectedPrompt = $(this).data('text');
            });

            // Render prompts
            function renderPrompts(subcategory) {
                $('#prompts-list').empty();
                if (subcategory.prompts && subcategory.prompts.length > 0) {
                    subcategory.prompts.forEach(prompt => {
                        $('#prompts-list').append(`
                        <a href="#" class="list-group-item list-group-item-action prompt-item" data-id="${prompt.id}" data-text="${prompt.text}">
                            ${prompt.text}
                        </a>
                    `);
                    });
                }
            }

            // Handle category click
            $(document).on('click', '.category-item', function () {
                $('.category-item').removeClass('active');
                $(this).addClass('active');

                const categoryId = $(this).data('id');
                const category = allData.find(cat => cat.id === categoryId);
                renderSubcategories(category);

                // Auto-select the first subcategory
                const firstSubcategory = category.children[0];
                if (firstSubcategory) {
                    $('.subcategory-item').first().click();
                }
            });

            // Handle subcategory click
            $(document).on('click', '.subcategory-item', function () {
                $('.subcategory-item').removeClass('active');
                $(this).addClass('active');

                const subcategoryId = $(this).data('id');
                const category = allData.find(cat => cat.children.some(sub => sub.id === subcategoryId));
                const subcategory = category.children.find(sub => sub.id === subcategoryId);
                renderPrompts(subcategory);

                // Auto-select the first prompt
                const firstPrompt = subcategory.prompts[0];
                if (firstPrompt) {
                    $('.prompt-item').first().click();
                }
            });


            // Handle "Send Chat" button click
            $('#send-chat').click(async function () {
                const promptText = $('.chat-master').text();
                if (promptText) {
                    // sendChatButton.start(); // Start Ladda loading
                    try {
                        const response = await $.post('{{ route('api.generate-response') }}', {
                            prompt: promptText,
                            _token: '{{ csrf_token() }}'
                        });
                        const generatedResponse = response.generated_text;

                        // Store the response in the conversation table
                        await storeConversation(promptText, generatedResponse);
                        fetchConversationHistory(); // Fetch updated conversation history
                        fetchUsageData();

                        // If you want to display it somewhere immediately
                        $('.chat-response').html(generatedResponse); // Assuming you have a display area

                        // Clear chat-master    
                        $('.chat-master').empty();

                    } catch (error) {
                        console.error('Error running prompt:', error);
                    } finally {
                        sendChatButton.stop(); // Stop Ladda loading
                    }
                } else {
                    alert('Please enter a prompt.');
                }
            });

            // Handle "Improve Text" button click
            $('#improve-text').click(async function () {
                const text = quill.getText().trim();
                if (text) {
                    improveTextButton.start(); // Start Ladda loading
                    try {
                        const response = await $.post('/improve-text', {
                            text: text,
                            _token: '{{ csrf_token() }}'
                        });
                        const improvedText = response.improved_text;
                        quill.clipboard.dangerouslyPasteHTML(improvedText, 'user'); // Append improved text to Quill editor
                    } catch (error) {
                        console.error('Error improving text:', error);
                    } finally {
                        improveTextButton.stop(); // Stop Ladda loading
                    }
                } else {
                    alert('Please enter text to improve.');
                }
            });

            // Fetch conversation history
            async function fetchConversationHistory() {
                try {
                    const response = await $.get('/api/conversation-history', {
                        project_id: {{ $project->id }},
                        workspace_id: active_workspace
                    });
                    renderConversationHistory(response);
                } catch (error) {
                    console.error('Error fetching conversation history:', error);
                }
            }

            // Render conversation history
            function renderConversationHistory(history) {
                console.log(history)
                $('#conversation-history').empty();
                if (history.length > 0) {
                    $('.chat-welcome-note').hide(); // Hide welcome note
                    history.forEach(item => {
                        $('#conversation-history').append(`
                        <div class="chat-item mb-3">
                            <div class="chat-prompt d-flex">
                                <img src="{{ asset('assets/images/avatars/9.png')}}" width="32" height="32" class="rounded-circle mr-2 mt-3">
                                <div class="chat-prompt-text bg-light p-3 rounded">${item.prompt.replace(/"/g, '&quot;')}</div>
                            </div>
                            <div class="chat-response d-flex mt-2">
                                <img src="{{ asset('assets/images/favicon.png') }}" width="32" height="32" class="rounded-circle mr-2 mt-3">
                                <div class="chat-response-text p-3 rounded">
                                ${item.response}
                                <div class="chat-response-actions text-right mt-2">
                                    <button class="btn btn-link btn-icon-text copy-response" data-text="${item.response.replace(/"/g, '&quot;')}">
                                        <i data-feather="copy" class="btn-icon-prepend"></i> Copy to Clipboard
                                    </button>
                                    <button class="btn btn-link btn-icon-text append-response" data-text="${item.response.replace(/"/g, '&quot;')}">
                                        <i data-feather="edit" class="btn-icon-prepend"></i> Add to Editor
                                    </button>
                                </div>
                                </div>

                            </div>
                        </div>
                    `);
                    });
                } else {
                    $('.chat-welcome-note').show(); // Show welcome note
                }
                feather.replace(); // Initialize Feather icons

                // Handle copy response button click
                $('.copy-response').click(function () {
                    const text = $(this).data('text');
                    navigator.clipboard.writeText(text);
                    alert('Copied to clipboard!');
                });

                // Handle append response button click
                $('.append-response').click(function () {
                    const text = $(this).data('text');
                    quill.clipboard.dangerouslyPasteHTML(text, 'user'); // Append response to Quill editor
                });
            }

            // Store conversation in the database
            async function storeConversation(prompt, response) {
                try {
                    await $.post('{{ route('api.conversation.store') }}', {
                        prompt: prompt,
                        response: response,
                        project_id: '{{ $project->id }}', // Use dynamic project_id
                        workspace_id: active_workspace, // Use dynamic workspace_id
                        status: 'completed',
                        model: 'gpt-3.5-turbo',
                        word_count: response.split(' ').length, // Count words in the response
                        _token: '{{ csrf_token() }}'
                    });
                } catch (error) {
                    console.error('Error storing conversation:', error);
                }
            }

            // Update word and character counter
            quill.on('text-change', function () {
                const text = quill.getText().trim();
                const words = text.split(/\s+/).filter(word => word.length > 0).length;
                const chars = text.length;
                $('#word-counter').text(words);
                $('#char-counter').text(chars);
            });

            $('#select-prompt').click(async function () {
                if (selectedPrompt) {
                    console.log(selectedPrompt)
                    selectPromptButton.start(); // Start Ladda loading
                    $('#promptEditorModal').modal('show');
                    renderHighlightedTags(selectedPrompt); // Populate prompt text with highlighted tags
                    selectPromptButton.stop(); // Stop Ladda loading
                    $('#aiPromptsModal').modal('hide'); // Hide the AI Prompts Modal
                } else {
                    alert('Please select a prompt.');
                }
            });

            // Fetch word usage data
            async function fetchUsageData() {
                try {
                    const response = await $.get('/api/usage');
                    updateUsageProgressBar(response);
                } catch (error) {
                    console.error('Error fetching usage data:', error);
                }
            }

            // Update usage progress bar
            function updateUsageProgressBar(usageData) {
                const { used, total } = usageData;
                const percentage = (used / total) * 100;
                $('.progress-bar').css('width', `${percentage}%`).attr('aria-valuenow', percentage);
                $('.text-below-progress-bar').text(`${used}/${total} Words Used (${Math.round(percentage)}%)`);
            }

            // Render highlighted tags
            function renderHighlightedTags(promptText) {
                const tags = promptText.match(/\[(.*?)\]/g) || []; // Extract tags like [tag]
                let highlightedText = promptText;
                tags.forEach(tag => {
                    highlightedText = highlightedText.replace(
                        tag,
                        `<highlight-input style="background-color: #F9F0FF; color: #531DAB; border-radius: 4px; padding: 4px; cursor: pointer;">${tag}</highlight-input>`
                    );
                });
                $('.chat-master').html(highlightedText); // Populate prompt text with highlighted tags
            }
        });
    </script>
    <!-- WordPress Post Functionality Controller -->
    <script>
        $(document).ready(function() {
            const editor = new Quill('#quill-editor', quill_editor_options);
            let postId = null;
            let isDirty = false;
            let selected_categories = [];
            let selected_tags = [];
            let gettingCategoriesAjax = null;

            const showLoading = () => {
                $('.loading-spinner').show();
                $('.content-wrapper').hide();
                $('#save-draft-btn, #add-to-queue-btn').prop('disabled', true);
            };

            const hideLoading = () => {
                $('.loading-spinner').hide();
                $('.content-wrapper').show();
                $('#save-draft-btn, #add-to-queue-btn').prop('disabled', false);
            };

            const showValidationAlert = (message) => {
                $('#validation-alerts').append(`
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
        `);
            };

            const clearValidationAlerts = () => {
                $('#validation-alerts').empty();
            };

            // Track content changes
            editor.on('text-change', function() {
                isDirty = true;
                const content = editor.root.innerHTML;
                $('#post_description').val(content);
                updateContentStats(content);
            });

            $('#post_title, #tags, #sites, #parent_category').on('input change', () => {
                isDirty = true;
            });

            const updateContentStats = (content) => {
                const words = content.replace(/<[^>]*>/g, '').split(/\s+/).filter(Boolean).length;
                $('#words_count').text(words);
                $('#readingTime').text(Math.ceil(words / 200) + ' MIN');
                $('#contentStatus').text(isDirty ? 'Draft' : 'Saved');
            };

            // Initialize Date Range Picker
            // $('#schedule-date-picker').daterangepicker({
            //     singleDatePicker: true,
            //     showDropdowns: true,
            //     minDate: moment(),
            //     drops: 'up',
            //     locale: { format: 'YYYY-MM-DD HH:mm' }
            // }).hide();

            // Modal events
            $('#wordpressPostModal').on('show.bs.modal', async function() {
                showLoading();
                await loadPostData(project_id);
                hideLoading();
            });

            async function loadPostData(project_id) {
                try {
                    // Fetch categories and tags once
                    const [categoriesData, tagsData] = await Promise.all([get_categories(), get_tags()]);

                    if (project_id) {
                        await loadPostDetails(project_id, categoriesData, tagsData);
                    } else {
                        resetForm();
                        setDefaultCategory(categoriesData);
                    }
                } catch (error) {
                    console.error('Error loading post data:', error);
                    showValidationAlert('Failed to load post data');
                }
            }

            const ajaxSetup = () => {
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });
            };

            async function get_categories() {
                if (gettingCategoriesAjax) gettingCategoriesAjax.abort();
                ajaxSetup();

                const site_id = $('#sites').val();
                const search = $('#search-category-input').val();

                try {
                    const response = await $.ajax({
                        url: '{{ route('user.integration.wordpress.get.categories') }}',
                        type: 'POST',
                        data: { site_id, search, exclude: [] },
                        dataType: 'JSON'
                    });

                    renderCategories(response.data);
                    return response.data;
                } catch (error) {
                    if (error.statusText !== 'abort') {
                        console.error('Error fetching categories:', error);
                        showValidationAlert('Failed to load categories');
                    }
                    return [];
                }
            }

            const renderCategories = (categories) => {
                $('#categories-section, #parent_category').empty();
                $('#parent_category').append('<option value="" selected>— Parent Category —</option>');

                categories.forEach(category => {
                    $('#parent_category').append(`<option value="${category.id}">${category.name}</option>`);
                    $('#categories-section').append(`
                <div class="custom-control custom-checkbox">
                    <input name="categories" value="${category.id}" type="checkbox" class="custom-control-input" id="cateory_check_${category.id}" ${selected_categories.includes(category.id.toString()) ? 'checked' : ''}>
                    <label class="custom-control-label" for="cateory_check_${category.id}">${category.name}</label>
                </div>
            `);
                    if (category.children) {
                        category.children.forEach(child => {
                            $('#parent_category').append(`<option value="${child.id}">${child.name}</option>`);
                            $('#categories-section').append(`
                        <div class="custom-control custom-checkbox ml-3">
                            <input name="categories" value="${child.id}" type="checkbox" class="custom-control-input" id="cateory_check_${child.id}" ${selected_categories.includes(child.id.toString()) ? 'checked' : ''}>
                            <label class="custom-control-label" for="cateory_check_${child.id}">${child.name}</label>
                        </div>
                    `);
                        });
                    }
                });
            };

            async function get_tags() {
                ajaxSetup();
                const site_id = $('#sites').val();

                try {
                    const response = await $.ajax({
                        url: '{{ route('user.integration.wordpress.get.tags') }}',
                        type: 'POST',
                        data: { site_id },
                        dataType: 'JSON'
                    });

                    renderTags(response.data);
                    return response.data;
                } catch (error) {
                    console.error('Error fetching tags:', error);
                    showValidationAlert('Failed to load tags');
                    return [];
                }
            }

            const renderTags = (tags) => {
                $('#tags-section').empty();
                tags.forEach(tag => {
                    $('#tags-section').append(`
                <div class="custom-control custom-checkbox">
                    <input name="tags" value="${tag.id}" type="checkbox" class="custom-control-input" id="tag_check_${tag.id}" ${selected_tags.includes(tag.id.toString()) ? 'checked' : ''}>
                    <label class="custom-control-label" for="tag_check_${tag.id}">${tag.name}</label>
                </div>
            `);
                    if (tag.children) {
                        tag.children.forEach(child => {
                            $('#tags-section').append(`
                        <div class="custom-control custom-checkbox ml-3">
                            <input name="tags" value="${child.id}" type="checkbox" class="custom-control-input" id="tag_check_${child.id}" ${selected_tags.includes(child.id.toString()) ? 'checked' : ''}>
                            <label class="custom-control-label" for="tag_check_${child.id}">${child.name}</label>
                        </div>
                    `);
                        });
                    }
                });
            };

            async function loadPostDetails(project_id, categoriesData, tagsData) {
                ajaxSetup();
                const siteId = $('#sites').val();
                try {
                    const response = await $.ajax({
                        url: '',
                        type: 'POST',
                        data: { project_id, site_id: siteId },
                        dataType: 'JSON'
                    });

                    if (response.success) {
                        mapPostToForm(response.post, categoriesData, tagsData);
                    }
                } catch (error) {
                    console.error('Error loading post details:', error);
                    showValidationAlert('Failed to load post details');
                }
            }

            const mapPostToForm = (post, categoriesData, tagsData) => {
                postId = post.id;
                $('#post_title').val(post.title || '');
                editor.root.innerHTML = post.content || '<p></p>';
                $('#contentStatus').text(post.status || 'Draft');

                // Handle featured image
                const featuredImage = post.featured_media || '{{ $project->featured_image }}';
                $('#featured_image').attr('src', featuredImage);

                // Parse categories
                try {
                    selected_categories = JSON.parse(post.categories || '[]').map(String);
                } catch (e) {
                    selected_categories = [];
                    console.error('Error parsing categories:', e);
                }

                // Parse tags
                try {
                    selected_tags = JSON.parse(post.tags || '[]').map(String);
                    $('#tags').val(selected_tags.join(', '));
                } catch (e) {
                    selected_tags = [];
                    console.error('Error parsing tags:', e);
                }

                isDirty = false;
                updateContentStats(post.content || '');

                // Re-render categories and tags with updated selections
                renderCategories(categoriesData);
                renderTags(tagsData);
            };

            const setDefaultCategory = (categoriesData) => {
                selected_categories = ['1'];
                renderCategories(categoriesData);
            };

            const resetForm = () => {
                postId = null;
                $('#post_title').val('');
                editor.root.innerHTML = '<p></p>';
                $('#featured_image').attr('src', '{{ $project->featured_image }}');
                $('#tags').val('');
                $('#contentStatus').text('Empty');
                selected_categories = [];
                selected_tags = [];
                isDirty = false;
                clearValidationAlerts();
            };

            const validateForm = () => {
                clearValidationAlerts();
                let isValid = true;

                if (!$('#post_title').val().trim()) {
                    showValidationAlert('Please enter a post title');
                    isValid = false;
                }
                if (!editor.root.innerHTML.trim() || editor.root.innerHTML === '<p><br></p>') {
                    showValidationAlert('Please enter post content');
                    isValid = false;
                }
                if (selected_categories.length === 0) {
                    showValidationAlert('Please select at least one category');
                    isValid = false;
                }
                if (selected_tags.length === 0) {
                    showValidationAlert('Please select at least one tag');
                    isValid = false;
                }
                return isValid;
            };

            async function savePost(status = 'draft') {
                if (!validateForm()) return false;

                const data = {
                    post_id: postId,
                    project_id: project_id,
                    site_id: $('#sites').val(),
                    title: $('#post_title').val().trim(),
                    description: editor.root.innerHTML,
                    categories: selected_categories,
                    tags: selected_tags.length > 0 ? selected_tags : $('#tags').val().split(',').map(tag => tag.trim()).filter(Boolean),
                    status,
                    platform: 'site',
                    post_type: 'post',
                    featured_image: $('#featured_image').attr('src'),
                    published_due: status === 'publish' ? moment().format('YYYY-MM-DD HH:mm:ss') : null
                };

                ajaxSetup();
                try {
                    const response = await $.ajax({
                        url: '',
                        type: 'POST',
                        data,
                        dataType: 'JSON'
                    });

                    postId = response.post_id;
                    isDirty = false;
                    $('#contentStatus').text(status);
                    Swal.fire({
                        timer: 2000,
                        title: response.message.includes('created') ? 'Post Added Successfully!' : 'Post Updated Successfully!',
                        text: response.message,
                        icon: 'success',
                        showConfirmButton: false
                    });
                    return true;
                } catch (xhr) {
                    Swal.fire({
                        timer: 2000,
                        title: 'Error Saving Post',
                        text: xhr.responseJSON?.message || 'An error occurred while saving',
                        icon: 'error',
                        showConfirmButton: false
                    });
                    return false;
                }
            }

            // Schedule post handling
            $('#add-to-queue-btn').siblings('.dropdown-menu').on('click', '[data-action]', async function(e) {
                e.preventDefault();
                const action = $(this).data('action');

                if (action === 'schedule-post') {
                    $('#schedule-date-picker').show().focus();
                } else if (action === 'share-now') {
                    await savePost('publish');
                }
            });

            $('#schedule-date-picker').on('apply.daterangepicker', async function(ev, picker) {
                $(this).hide();
                const published_due = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
                const saved = await savePost('queue');
                if (saved) {
                    ajaxSetup();
                    await $.ajax({
                        url: '',
                        type: 'POST',
                        data: { post_id: postId, published_due },
                        dataType: 'JSON'
                    });
                }
            });

            // Category and tag selection
            $('#categories-section').on('change', 'input[name="categories"]', function() {
                selected_categories = $('input[name="categories"]:checked').map(function() { return this.value; }).get();
                isDirty = true;
            });

            $('#tags-section').on('change', 'input[name="tags"]', function() {
                selected_tags = $('input[name="tags"]:checked').map(function() { return this.value; }).get();
                isDirty = true;
            });

            let isHiding = false;
            // Save draft with Ladda
            $('#save-draft-btn').click(async function(e) {
                e.preventDefault();
                const l = Ladda.create(this);
                l.start();
                const saved = await savePost('draft');
                l.stop();
                if (saved) {
                    isHiding = true;
                    $('#wordpressPostModal').modal('hide');
                }
            });

            $('#wordpressPostModal').on('hide.bs.modal', function(e) {
                if (isHiding || !isDirty) return;

                e.preventDefault();
                Swal.fire({
                    title: 'Discard Changes?',
                    text: 'You’ll permanently lose any unsaved changes.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Discard Changes',
                    cancelButtonText: 'Keep Editing'
                }).then(({ isConfirmed }) => {
                    if (!isConfirmed) return;

                    isHiding = true;
                    if (postId) {
                        ajaxSetup();
                        $.ajax({
                            url: '/?id=' + postId,
                            type: 'DELETE',
                            dataType: 'JSON',
                            success: () => {
                                resetForm();
                                $('#wordpressPostModal').modal('hide');
                            },
                            error: (xhr) => {
                                console.error('Error deleting post:', xhr);
                                Swal.fire({
                                    timer: 2000,
                                    title: 'Error',
                                    text: 'Failed to discard changes',
                                    icon: 'error',
                                    showConfirmButton: false
                                });
                            },
                            complete: () => {
                                isHiding = false;
                            }
                        });
                    } else {
                        resetForm();
                        $('#wordpressPostModal').modal('hide');
                        isHiding = false;
                    }
                });
            });
        });
    </script>
    <!-- Social Media Post Functionality Controller -->
    <script>
        let postIds = [];

        $(document).ready(function() {
            feather.replace({ 'class': 'feather-icon', 'data-feather': true }, document.querySelector('#socialMediaPostModal'));

            const $createPostBtn = $('#createPostBtn');
            const $profilesList = $('#socialMediaPostModal #profilesList');
            const $postContent = $('#socialMediaPostModal #postContent');
            const $charCount = $('#socialMediaPostModal #charCount');
            const $mediaUpload = $('#socialMediaPostModal #mediaUpload');
            const $mediaUploadTrigger = $('#socialMediaPostModal #mediaUploadTrigger');
            const $mediaPreview = $('#socialMediaPostModal #mediaPreview');
            const $saveDraftBtn = $('#socialMediaPostModal #saveDraftBtn');
            const $postBox = $('#socialMediaPostModal #postBox');
            const $noProfilesMessage = $('#socialMediaPostModal #noProfilesMessage');
            const $noContentAlert = $('#socialMediaPostModal #noContentAlert');
            const maxChars = 2988;
            let selectedProfiles = [];
            let selectedFiles = [];
            let savedState = { content: '', files: [] };
            let isSaving = false;
            let hasChanges = false;
            let isDiscarding = false;

            function ajaxSetup() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
            }

            async function fetchSocialAccounts() {
                ajaxSetup();
                try {
                    const response = await $.ajax({
                        url: '/ajax/social-accounts',
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                        },
                        dataType: 'JSON'
                    });

                    if (response.success) {
                        $profilesList.empty();
                        response.data.forEach(account => {
                            const profileBox = `
                        <div class="profile-box" data-profile-id="${account.id}">
                            <img src="${account.avatar || 'https://picsum.photos/40/40?random=' + account.id}" alt="${account.name}">
                            <span>${account.name} (${account.service})</span>
                        </div>
                    `;
                            $profilesList.append(profileBox);
                        });

                        $profilesList.find('.profile-box').each(function() {
                            const profileId = $(this).data('profile-id');
                            if (selectedProfiles.includes(profileId)) {
                                $(this).addClass('selected');
                            }
                        });

                        if (selectedProfiles.length === 0) {
                            const firstProfile = $profilesList.find('.profile-box').first();
                            const profileId = firstProfile.data('profile-id');
                            selectedProfiles.push(profileId);
                            firstProfile.addClass('selected');
                        }
                        $postBox.removeClass('d-none');
                        $noProfilesMessage.addClass('d-none');
                    }
                } catch (xhr) {
                    console.error('Error fetching social accounts:', xhr.responseJSON?.message || 'Unknown error');
                }
            }

            async function loadPostDetails() {
                ajaxSetup();
                try {
                    const response = await $.ajax({
                        url: '/ajax/post/get',
                        type: 'POST',
                        data: { project_id, platform: 'linkedin', post_ids: postIds },
                        dataType: 'JSON'
                    });

                    if (response.success) {
                        postIds = response.post.post_ids || [];
                        $postContent.text(response.post.content);
                        selectedProfiles = response.post.social_accounts || [];

                        if (response.post.images && response.post.images.length > 0) {
                            response.post.images.forEach(image => {
                                const previewItem = `
                            <div class="media-preview-item" data-file-name="${image.name}">
                                <img src="https://via.placeholder.com/110?text=${image.name}" alt="${image.name}">
                                <button class="remove-btn">×</button>
                            </div>
                        `;
                                $mediaPreview.append(previewItem);
                                selectedFiles.push({
                                    name: image.name,
                                    size: image.size,
                                    type: image.type
                                });
                            });
                        }

                        const text = $postContent.text();
                        const remaining = maxChars - text.length;
                        $charCount.text(remaining);
                        $charCount.css('color', remaining < 0 ? 'red' : '#6b7280');
                        $saveDraftBtn.removeAttr('disabled');
                        hasChanges = text.length > 0 || selectedFiles.length > 0;
                    }
                } catch (error) {
                    console.error('Error loading post details:', error);
                }
            }

            async function savePost(status = 'draft', silent = false, schedule = null) {
                if (isSaving) return;
                const text = $postContent.text().trim();
                if (text.length === 0) return;

                isSaving = true;
                const data = {
                    project_id: project_id,
                    platform: 'linkedin',
                    post_type: 'social',
                    status,
                    description: text,
                    social_accounts: selectedProfiles,
                    images: selectedFiles.map(file => ({
                        name: file.name,
                        size: file.size,
                        type: file.type
                    })),
                    scheduled_at: schedule
                };

                ajaxSetup();
                try {
                    const response = await $.ajax({
                        url: '/ajax/post/create-or-update',
                        type: 'POST',
                        data,
                        dataType: 'JSON'
                    });

                    postIds = response.post_ids || postIds;
                    if (!silent) {
                        Swal.fire({
                            timer: 2000,
                            title: response.message.includes('created') ? 'Post Saved Successfully!' : 'Post Updated Successfully!',
                            text: response.message,
                            icon: 'success',
                            showConfirmButton: false
                        });
                    }
                    hasChanges = false;
                    return response;
                } catch (xhr) {
                    if (!silent) {
                        Swal.fire({
                            timer: 2000,
                            title: 'API Error!',
                            text: xhr.responseJSON?.message || 'An error occurred',
                            icon: 'error',
                            showConfirmButton: false
                        });
                    }
                    throw xhr;
                } finally {
                    isSaving = false;
                }
            }

            async function deletePost() {
                ajaxSetup();
                try {
                    await $.ajax({
                        url: '/ajax/post/delete',
                        type: 'DELETE',
                        data: { project_id, post_ids: postIds },
                        dataType: 'JSON'
                    });
                    postIds = [];
                    selectedProfiles = [];
                    selectedFiles = [];
                    $postContent.text('');
                    $mediaPreview.empty();
                    $charCount.text(maxChars);
                    hasChanges = false;
                } catch (error) {
                    console.error('Error deleting post:', error);
                }
            }

            function clearModal() {
                postIds = [];
                selectedProfiles = [];
                selectedFiles = [];
                $postContent.text('');
                $mediaPreview.empty();
                $charCount.text(maxChars);
                $profilesList.find('.profile-box').removeClass('selected');
                hasChanges = false;
            }

            $('#socialMediaPostModal').on('shown.bs.modal', function() {
                fetchSocialAccounts();
                loadPostDetails();

                $('#schedulePicker').daterangepicker({
                    singleDatePicker: true,
                    timePicker: true,
                    timePicker24Hour: true,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm'
                    }
                });
            });

            $('#socialMediaPostModal').on('hide.bs.modal', function(e) {
                if (hasChanges && !isDiscarding) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Discard Changes?',
                        text: 'You’ll permanently lose any changes you’ve made.',
                        showCancelButton: true,
                        confirmButtonText: 'Discard Changes',
                        cancelButtonText: 'Keep Editing'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            isDiscarding = true;
                            if (postIds.length > 0) {
                                deletePost().then(() => {
                                    $('#socialMediaPostModal').modal('hide');
                                    isDiscarding = false;
                                });
                            } else {
                                clearModal();
                                $('#socialMediaPostModal').modal('hide');
                                isDiscarding = false;
                            }
                        }
                    });
                }
            });

            $profilesList.on('click', '.profile-box', function() {
                const profileId = $(this).data('profile-id');
                if (selectedProfiles.includes(profileId)) {
                    selectedProfiles = selectedProfiles.filter(id => id !== profileId);
                    $(this).removeClass('selected');
                } else {
                    selectedProfiles.push(profileId);
                    $(this).addClass('selected');
                }

                if (selectedProfiles.length === 0) {
                    savedState.content = $postContent.text();
                    savedState.files = [...selectedFiles];
                    $postBox.addClass('d-none');
                    $noProfilesMessage.removeClass('d-none');
                } else {
                    $postBox.removeClass('d-none');
                    $noProfilesMessage.addClass('d-none');
                    $postContent.text(savedState.content);
                    $mediaPreview.empty();
                    savedState.files.forEach(file => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const previewItem = `
                        <div class="media-preview-item" data-file-name="${file.name}">
                            <img src="${e.target.result}" alt="${file.name}">
                            <button class="remove-btn">×</button>
                        </div>
                    `;
                            $mediaPreview.append(previewItem);
                        };
                        reader.readAsDataURL(file);
                    });
                    selectedFiles = [...savedState.files];
                }
                hasChanges = true;
            });

            $postContent.on('input', function() {
                const text = $(this).text();
                const remaining = maxChars - text.length;
                $charCount.text(remaining);
                $charCount.css('color', remaining < 0 ? 'red' : '#6b7280');
                $saveDraftBtn.removeAttr('disabled');
                hasChanges = true;
            });

            $mediaUploadTrigger.on('click', function(event) {
                event.stopPropagation();
                $mediaUpload[0].click();
            });

            $mediaUpload.on('change', function(event) {
                const files = Array.from(event.target.files);
                files.forEach(file => {
                    if (!selectedFiles.some(f => f.name === file.name)) {
                        selectedFiles.push(file);
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const previewItem = `
                        <div class="media-preview-item" data-file-name="${file.name}">
                            <img src="${e.target.result}" alt="${file.name}">
                            <button class="remove-btn">×</button>
                        </div>
                    `;
                            $mediaPreview.append(previewItem);
                        };
                        reader.readAsDataURL(file);
                    }
                });
                $mediaUpload.val('');
                hasChanges = true;
            });

            $mediaPreview.on('click', '.remove-btn', function() {
                const $item = $(this).closest('.media-preview-item');
                const fileName = $item.data('file-name');
                selectedFiles = selectedFiles.filter(file => file.name !== fileName);
                $item.remove();
                hasChanges = true;
            });

            $saveDraftBtn.on('click', function() {
                savePost('draft', false);
            });

            $('#shareNow').on('click', function(e) {
                e.preventDefault();
                savePost('sent', false).then(() => {
                    $('#socialMediaPostModal').modal('hide');
                });
            });

            $('#schedulePost').on('click', function(e) {
                e.preventDefault();
                $('#schedulePicker').removeClass('d-none').focus();
            });

            $('#schedulePicker').on('apply.daterangepicker', function(ev, picker) {
                const scheduledTime = picker.startDate.format('YYYY-MM-DD HH:mm');
                savePost('scheduled', false, scheduledTime).then(() => {
                    $('#socialMediaPostModal').modal('hide');
                });
            });
        });
    </script>

@endsection