@extends('layouts/layoutMaster')

@section('title', 'Task Management')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    body:not(.modal-open) .select2-container--open {
        z-index: 99;
    }
</style>
@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss', 'resources/assets/vendor/libs/animate-css/animate.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss', 'resources/assets/vendor/libs/jkanban/jkanban.scss', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/flatpickr/flatpickr.scss', 'resources/assets/vendor/libs/quill/typography.scss', 'resources/assets/vendor/libs/quill/katex.scss', 'resources/assets/vendor/libs/quill/editor.scss'])
@endsection

@section('page-style')
    @vite('resources/assets/vendor/scss/pages/app-kanban.scss')
@endsection

@section('vendor-script')

    @vite(['resources/assets/vendor/libs/autosize/autosize.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/cleavejs/cleave.js', 'resources/assets/vendor/libs/cleavejs/cleave-phone.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js', 'resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/flatpickr/flatpickr.js', 'resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/jkanban/jkanban.js', 'resources/assets/vendor/libs/quill/katex.js', 'resources/assets/vendor/libs/quill/quill.js'])
@endsection

@section('page-script')
    @vite('resources/assets/js/app-kanban.js')
    @vite('resources/js/task-management.js')
@endsection

@section('content')
    <div class="app-kanban">
        <!-- Add new board -->
        <div class="row">
            <div class="col-12">
                <form class="kanban-add-new-board">
                    <label class="kanban-add-board-btn" for="kanban-add-board-input" data-bs-toggle="modal"
                        data-bs-target="#modalAddtask">
                        <i class="ri-add-line"></i>
                        <span id="modalAddtaskLabel">Add new</span>

                    </label>
                </form>
            </div>
        </div>
        <div class="modal fade" id="modalAddtask" tabindex="-1">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalAddtaskLabel">Add Task</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="addNewtaskForm" enctype="multipart/form-data" method="POST">
                        @csrf



                        <div class="modal-body px-4 py-3">
                            <input type="hidden" id="id" name="id" value="">
                            <input type="hidden" id="tag_id" name="tag_id" value="">
                            {{-- <input type="hidden" name="tags" id="tagsInput" value="[]"> --}}

                            <!-- Header Info -->
                            <div class="row mb-3 align-items-center">
                                <div class="col-md-auto me-2 pe-2">
                                    {{-- @php
                                        // Example data (replace with your dynamic data from DB)
                                        $statuses = [
                                            ['name' => 'Open', 'color' => '#f56565'], // red
                                            ['name' => 'In-Progress', 'color' => '#facc15'], // yellow
                                            ['name' => 'In-Review', 'color' => '#60a5fa'], // blue
                                            ['name' => 'Done', 'color' => '#48bb78'], // green
                                        ];
                                        $colors = [
                                            '#f56565',
                                            '#76e2e7',
                                            '#f6e05e',
                                            '#68d391',
                                            '#63b3ed',
                                            '#a0aec0', // ...add more
                                        ];
                                    @endphp --}}

                                    <div class="dropdown" style="display:inline-block;">
                                        <button class="btn dropdown-toggle" type="button" id="statusDropdown"
                                            data-bs-toggle="dropdown" aria-expanded="false"
                                            style="background-color:#f56565;color:#333">
                                            <span id="selectedStatus">Open</span>
                                        </button>

                                        <div class="dropdown-menu p-2" aria-labelledby="statusDropdown"
                                            style="min-width: 280px;">
                                            <div class="input-group mb-2">
                                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                                <input type="text" id="statusSearch" class="form-control"
                                                    placeholder="Search or create status..." autocomplete="off"
                                                    oninput="filterStatuses()">
                                            </div>
                                            <div id="statusList">
                                                @foreach ($statuses as $status)
                                                    <div class="dropdown-item d-flex align-items-center"
                                                        onclick="selectStatus('{{ $status['name'] }}', '{{ $status['color'] }}')">
                                                        <span class="badge me-2"
                                                            style="background-color: {{ $status['color'] }};">&nbsp;</span>
                                                        {{ $status['name'] }}
                                                    </div>
                                                @endforeach
                                            </div>

                                            <div id="createStatusSection" class="d-none mt-2">
                                                <div class="d-flex align-items-center mb-2">
                                                    <span class="me-2 text-primary" style="cursor:pointer;">Create
                                                        Status</span>
                                                    <span id="newStatusName" class="badge"
                                                        style="background-color: #e2e8f0; color: #222;"></span>
                                                </div>
                                                <div class="d-flex flex-wrap" id="colorPalette">
                                                    @foreach ($colors as $color)
                                                        <div class="color-swatch m-1"
                                                            style="width: 24px; height: 24px; background: {{ $color }}; border: 2px solid #fff; cursor: pointer;"
                                                            onclick="selectNewColor('{{ $color }}')"></div>
                                                    @endforeach
                                                </div>
                                                <button class="btn btn-sm btn-primary mt-2"
                                                    onclick="addNewStatus(event)">Add</button>
                                            </div>
                                        </div>
                                        <input type="hidden" name="status_name" id="statusInput" value="">
                                        <input type="hidden" name="status_color" id="colorInput" value="">


                                    </div>

                                </div>
                                <!-- Assigned User Block -->
                                <div class="col-md-auto me-2 pe-2 position-relative">
                                    <div id="assignedToBlock" class="assigned-user d-inline-flex align-items-center"
                                        onclick="toggleUserSearch()" style="cursor:pointer;">
                                        <div id="assigneeAvatar"
                                            class="avatar-initials me-2 bg-primary text-white px-2 py-1">KR</div>
                                        <div>
                                            <div class="assigned-label text-muted small">Assigned to</div>
                                            @php
                                                use Illuminate\Support\Facades\Auth;
                                            @endphp
                                            <div class="assigned-name fw-bold" id="assigneeName">
                                                {{ Auth::user()->name }}
                                            </div>

                                        </div>
                                        <input type="hidden" name="assignedUserId" id="assignedUserId" value="">
                                    </div>

                                    <!-- Suggestions Dropdown -->
                                    <div id="userDropdown" class="position-absolute bg-white border rounded shadow p-3"
                                        style="display:none; width:350px; z-index:1000; top:100%;">
                                        <div class="mb-2 d-flex align-items-center">
                                            <span class="me-2"><i class="bi bi-search"></i></span>
                                            <input type="text" id="userSearchInput"
                                                class="form-control border-0 p-0 shadow-none"
                                                placeholder="Search users..." onkeyup="searchUsers(this.value)">
                                        </div>
                                        <div id="user_search" name="user_search"class="mt-2"></div>
                                    </div>
                                </div>



                                <div class="col-md-auto d-flex align-items-center" style="gap: 8px;">
                                    <!-- Start Date -->
                                    <div class="date-box me-2 pe-2" style="border-right: 1px solid #e0e0e0;">
                                        <div class="date-label me-4 pe-3 "><small class="text-muted"
                                                style="font-family: 'Segoe UI', Arial, sans-serif;cursor:pointer;">Start
                                                Date</small></div>
                                        <div class="date-value" id="startDateDisplay"
                                            onclick="showDatePicker('startDate')" style="cursor:pointer;">Yet to set</div>
                                        <input type="datetime-local" id="startDateInput" name="start_date"
                                            class="hidden-date-picker">


                                    </div>
                                </div>
                                <!-- Due Date -->
                                <div class="col-md-auto date-box due-date-highlight ps-2">
                                    <div class="date-label"><small class="text-muted"
                                            style="font-family: 'Segoe UI', Arial, sans-serif;cursor:pointer;">Due
                                            Date</small></div>
                                    <div class="date-value" id="dueDateDisplay" onclick="showDatePicker('dueDate')"
                                        style="cursor:pointer;">Yet to set</div>
                                    <input type="datetime-local" id="dueDateInput" name="due_date"
                                        class="hidden-date-picker">
                                </div>


                                <div class="col-md-auto d-flex justify-content-end">
                                    <div id="attachmentIconContainer">
                                        <i class="ri-attachment-2 ri-20px" style="font-size: 24px; cursor: pointer;"
                                            onclick="triggerFileInput()"></i>
                                    </div>
                                </div>

                                <div id="tagIconContainer" class="col-md-auto d-inline-block">
                                    <i class="ri-price-tag-line ri-20px" style="font-size: 24px; cursor: pointer;"
                                        onclick="triggerTagAction()" tabindex="0" role="button" aria-label="Add"
                                        title="Add"
                                        onkeydown="if(event.key==='Enter'||event.key===' '){triggerTagAction();}">
                                    </i>

                                    <!-- Tag Input Popup -->
                                    <div id="tagInputSection"
                                        class="col-md-auto tag-popup d-none position-absolute bg-white border rounded p-3 shadow"
                                        style="min-width: 200px; z-index: 1050;">
                                        <div class="mb-2">
                                            <input type="text" id="tagInput" maxlength="25"
                                                placeholder="Enter or select tag name" class="form-control"
                                                autocomplete="off" onfocus="showTagDropdown()" />
                                        </div>


                                        <div class="mb-2 position-relative">
                                            <div id="tagDropdown" class="tag-dropdown"
                                                style="border:1px solid #ccc; max-height:150px; overflow-y:auto; display:none; position:absolute; background:#fff; z-index:1000; width:200px;">
                                            </div>
                                        </div>

                                        <!-- New tag creation section -->
                                        <div id="tagCreationSection" class="d-none">
                                            <div class="mb-2">
                                                <div id="tagColorPalette" class="d-flex flex-wrap gap-1"></div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-primary"
                                                onclick="addTag()">Add</button>
                                            <button type="button" class="btn btn-sm btn-secondary ms-2"
                                                onclick="closeTagInput()">Cancel</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Hidden input and visual tag list -->


                            </div>


                            <!-- Title -->
                            <div class="mb-3 position-relative">
                                <input type="text" name="title" id="task-title"
                                    class="form-control fs-5 fw-semibold border-0 border-bottom rounded-0"
                                    placeholder="Task Title, @mention assignee">
                                <div id="user-suggestions" class="list-group position-absolute" style="z-index: 1000;">

                                </div>
                                <div id="mentioned-users-container"></div>

                            </div>

                            <!-- Tags and Priority Row -->
                            <div class="d-flex align-items-center gap-2 mb-4">


                                <select class="pill pill-blue pill-select">
                                    <option>Mpiric Team</option>
                                    <option>Other</option>
                                </select>
                                {{-- <span class="dot-separator"></span>
                                <span class="text-muted">under</span>
                                <select class="pill pill-blue pill-select">
                                    <option>General</option>
                                    <option>Other</option>
                                </select> --}}
                                <span class="dot-separator"></span>
                                <select class="pill pill-gray pill-select" name="priority" id="priority">
                                    <option>! Medium</option>
                                    <option>! High</option>
                                    <option>! Low</option>
                                </select>
                                {{-- <span class="dot-separator"></span>
                                <button type="button" class="pill pill-gray d-flex align-items-center border-0">
                                    <i class="ri-alarm-line me-1"></i>
                                    Set reminder
                                </button> --}}
                            </div>



                            <!-- Description -->
                            <div class="mb-4">
                                <label class="form-label fw-bold">Description</label>
                                <textarea name="description" id="description" class="form-control" rows="4" placeholder="Description"></textarea>
                            </div>

                            <!-- Tag Icon Trigger -->

                            <!-- Where tags are displayed on the form -->
                            <div id="tagList" class="mt-2"></div>


                            <input type="hidden" name="tags" id="tagsInput" value="[]">

                            <div class="mb-3">
                                <input type="file" id="attachmentInput" name="attachments[]" class="d-none" multiple
                                    onchange="handleFileChange(event)">
                                <div id="uploadedFileContainer" class="d-none mt-2">
                                    <ul id="fileList"></ul> <!-- The list of selected files will appear here -->
                                </div>

                            </div>
                            <div class="mb-3">
                                <h6 class="mb-3">Activity Timeline <i class="fas fa-chevron-circle-down mb-3"
                                        id="toggleTimeline" style="cursor: pointer"></i></h6>
                                <ul class="timeline-lists" id="timeline-list">

                                </ul>
                                <a href="javascript:void(0);" id="see-more" class="text-primary"
                                    style="cursor: pointer;">See More</a>
                            </div>


                            {{-- <div class="mb-4">
                                <label class="form-label fw-bold">Subtasks</label>
                                <div class="input-group">
                                    <span class="input-group-text">+</span>
                                    <input type="text" name="subtask" class="form-control"
                                        placeholder="Subtask Title, @mention assignee">
                                </div>
                            </div> --}}

                            <!-- Footer -->
                            <div class="d-flex justify-content-end gap-2">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>



                    {{-- <script>
            function addSubtaskInput() {
                const wrapper = document.getElementById('subtasks-wrapper');
                const input = document.createElement('input');
                input.type = 'text';
                input.name = 'subtasks[]';
                input.className = 'form-control mb-2';
                input.placeholder = 'Subtask Title, @mention assignee';
                wrapper.appendChild(input);
            }
        </script> --}}


                </div>
            </div>
        </div>
        <!-- Kanban Wrapper -->
        <div class="kanban-wrapper">

        </div>

        <div id="kanban-board" class="kanban-container"></div>

        <!-- Task content here -->
    </div>

    <!-- Edit Task/Task & Activities -->
    <div class="offcanvas offcanvas-end kanban-update-item-sidebar">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title">Edit Task</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body pt-2">
            <div class="nav-align-top">
                <ul class="nav nav-tabs mb-2">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-update">
                            <i class="ri-edit-box-line me-2"></i>
                            <span class="align-middle">Edit</span>
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-activity">
                            <i class="ri-pie-chart-line me-2"></i>
                            <span class="align-middle">Activity</span>
                        </button>
                    </li>
                </ul>
            </div>
            <div class="tab-content px-0 pb-0">
                <!-- Update item/tasks -->
                <div class="tab-pane fade show active" id="tab-update" role="tabpanel">
                    <form>
                        <div class="form-floating form-floating-outline mb-5">
                            <input type="text" id="title" class="form-control" placeholder="Enter Title" />
                            <label for="title">Title</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="text" id="start-date" class="form-control" placeholder="Enter Due Date" />
                            <label for="start-date">start date</label>
                        </div>


                        <div class="form-floating form-floating-outline mb-5">
                            <select class="select2 select2-label form-select" id="label">
                                <option data-color="bg-label-success" value="UX">UX</option>
                                <option data-color="bg-label-warning" value="Images">
                                    Images
                                </option>
                                <option data-color="bg-label-secondary" value="App">App</option>
                                <option data-color="bg-label-danger" value="Code Review">
                                    Code Review
                                </option>
                                <option data-color="bg-label-info" value="Info">
                                    Info
                                </option>
                                <option data-color="bg-label-primary" value="Charts & Maps">
                                    Charts & Maps
                                </option>
                            </select>
                            <label for="label"> label</label>
                        </div>
                        <div class="mb-5">
                            <label class="form-label">Assigned</label>
                            <div class="assigned d-flex flex-wrap"></div>
                        </div>
                        <div class="mb-5">
                            <label class="form-label" for="attachments">Attachments</label>
                            <div>
                                <input type="file" class="form-control" id="attachments" />
                            </div>
                        </div>
                        <div class="mb-5">
                            <label class="form-label">Comment</label>
                            <div class="comment-editor"></div>
                            <div class="d-flex justify-content-end">
                                <div class="comment-toolbar">
                                    <span class="ql-formats me-0">
                                        <button class="ql-bold"></button>
                                        <button class="ql-italic"></button>
                                        <button class="ql-underline"></button>
                                        <button class="ql-link"></button>
                                        <button class="ql-image"></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="d-flex flex-wrap">
                                <button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">
                                    Update
                                </button>
                                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="offcanvas">
                                    Delete
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- Activities -->
                <div class="tab-pane fade text-heading" id="tab-activity" role="tabpanel">
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-success rounded-circle">HJ</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Jordan</span> Left the board.
                            </p>
                            <small class="text-muted">Today 11:00 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/6.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Dianna</span> mentioned
                                <span class="text-primary">@bruce</span> in
                                a comment.
                            </p>
                            <small class="text-muted">Today 10:20 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/2.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Martian</span> added moved
                                Charts & Maps task to the done board.
                            </p>
                            <small class="text-muted">Today 10:00 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/1.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Barry</span> Commented on App
                                review task.
                            </p>
                            <small class="text-muted">Today 8:32 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-dark rounded-circle">BW</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Bruce</span> was assigned
                                task of code review.
                            </p>
                            <small class="text-muted">Today 8:30 PM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-danger rounded-circle">CK</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Clark</span> assigned task UX
                                Research to
                                <span class="text-primary">@martian</span>
                            </p>
                            <small class="text-muted">Today 8:00 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/4.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Ray</span> Added moved
                                <span>Forms & Tables</span> task
                                from in progress to done.
                            </p>
                            <small class="text-muted">Today 7:45 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/1.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Barry</span> Complete all the
                                tasks assigned to him.
                            </p>
                            <small class="text-muted">Today 7:17 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-success rounded-circle">HJ</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Jordan</span> added task to
                                update new images.
                            </p>
                            <small class="text-muted">Today 7:00 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <img src="{{ asset('assets/img/avatars/6.png') }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Dianna</span> moved task
                                <span>FAQ UX</span> from in
                                progress to done board.
                            </p>
                            <small class="text-muted">Today 7:00 AM</small>
                        </div>
                    </div>
                    <div class="media mb-4 d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-danger rounded-circle">CK</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Clark</span> added new board
                                with name <span>Done</span>.
                            </p>
                            <small class="text-muted">Yesterday 3:00 PM</small>
                        </div>
                    </div>
                    <div class="media d-flex align-items-center">
                        <div class="avatar me-3 flex-shrink-0">
                            <span class="avatar-initial bg-label-dark rounded-circle">BW</span>
                        </div>
                        <div class="media-body ms-1">
                            <p class="mb-0">
                                <span>Bruce</span> added new task
                                in progress board.
                            </p>
                            <small class="text-muted">Yesterday 12:00 PM</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <style>
        .hidden-date-picker {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            z-index: -1;
        }

        .assigned-user {
            background: #f6f8f9;
            padding: 4px 10px;
            border-radius: 4px;
            font-family: 'Segoe UI', Arial, sans-serif;
            min-width: 220px;
        }

        .avatar-initials {
            background: #c4d79b;
            color: #222;
            font-weight: 600;
            font-size: 16px;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .assigned-label {
            color: #888;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.1;
        }

        .assigned-name {
            color: #222;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.2;
        }

        .assigned-edit {
            background: #f6f8f9;
            padding: 6px 10px;
            border-radius: 4px;
            min-width: 220px;
            font-family: 'Segoe UI', Arial, sans-serif;
            position: relative;
            z-index: 10;
        }

        .assignee-list {
            max-height: 120px;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            background: #fff;
            border-radius: 4px;
            margin-top: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .assignee-option {
            padding: 6px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 15px;
        }

        .pill {
            border-radius: 6px;
            padding: 2px 12px;
            font-weight: 500;
            font-size: 14px;
            display: inline-block;
            border: none;
            outline: none;
            background: #f6f8f9;
            transition: background 0.2s;

        }

        .pill-blue {
            background: #eaf2ff;
            color: #5e93ff;

        }

        .pill-gray {
            background: #e5e7ea;
            color: #888;
        }

        .pill-select {
            appearance: none;
            -webkit-appearance: none;
            border: none;
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            min-width: 90px;
            padding-right: 28px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }

        /* Custom dropdown arrow for selects */
        .pill-blue.pill-select {
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='%232563eb' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%232563eb' stroke-width='2' fill='none'/%3E%3C/svg%3E");
        }

        .pill-gray.pill-select {
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E");
        }

        .pill-select:focus {
            outline: none;
            box-shadow: 0 0 0 2px #c7d7fe;
        }

        .dot-separator {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #d1d5db;
            border-radius: 50%;
            margin: 0 8px;
            vertical-align: middle;
        }

        /* Remove default button border and background */
        .pill-gray.border-0,
        .pill-gray:focus {
            box-shadow: none;
            outline: none;
            border: none;
            background: #e5e7ea;
        }


        #user-suggestions {
            background: #fff;
            border: 1px solid #ccc;
            max-height: 180px;
            overflow-y: auto;
            width: fit-content;
        }

        .suggestion-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            cursor: pointer;
            transition: background 0.2s ease-in-out;
            width: 100%;
            /* Take up full width of #user-suggestions */
            /* box-sizing: border-box; */
        }

        .suggestion-item:hover {
            background-color: #f0f4f8;
        }

        .avatar-initials {
            width: 28px;
            height: 30px;
            background-color: #6caff7;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            border-radius: 4px;
        }

        .avatar-initials {
            font-weight: bold;
            font-size: 14px;
            text-align: center;
            line-height: 1;
        }

        .hover-bg-light:hover {
            background-color: #f8f9fa;
        }

        .tag-popup {
            top: 40px;
            /* Adjust based on your icon position */

            min-width: 260px;
            display: none;
        }

        .tag-popup.d-block {
            display: block;
        }

        .color-swatch {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #fff;
            cursor: pointer;
            display: inline-block;
            box-shadow: 0 0 2px #aaa;
        }

        .color-swatch.selected {
            border: 2px solid #222;
        }

        .tag-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25em 0.75em;
            border-radius: 12px;
            margin-right: 6px;
            margin-bottom: 4px;
            color: #fff;
            font-size: 90%;
        }

        .tag-badge .remove-tag {
            margin-left: 6px;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
        }

        .timeline-lists {
            position: relative;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .timeline-item {
            position: relative;
            min-height: 40px;
            display: flex;
            align-items: flex-start;
        }

        .timeline-dot {
            position: relative;
            z-index: 2;
            width: 10px;
            height: 10px;
            background: #fff;
            border: 3px solid #6c63ff;
            border-radius: 50%;
            margin: 0 24px;
            box-shadow: 0 2px 6px rgba(108, 99, 255, 0.08);
            flex-shrink: 0;
        }


        .timeline-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 29px;
            /* centers the line with the dot */
            top: 10px;
            width: 1px;
            height: calc(100% - 16px);
            background: #e0e0e0;
            z-index: 1;
        }

        .timeline-content {
            /* padding: 8px 12px; */

            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(60, 60, 60, 0.04);
            font-size: 14px;
            color: #222;
            min-width: 200px;
        }

        .timeline-date {


            font-size: 12px;
            margin-top: 4px;
            font-weight: 400;
        }

        #see-more {
            padding: 2%;
        }
    </style>


    <script>
        $(document).ready(function() {
            // Initialize Select2 dropdown
            $('.select2').select2({
                dropdownParent: $('.modal')
            });
        });

        // Date Picker logic
        function showDatePicker(type) {
            const input = document.getElementById(type + 'Input');
            const display = document.getElementById(type + 'Display');

            input.onchange = function() {
                if (input.value) {
                    const date = new Date(input.value);
                    const options = {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit',
                    };
                    display.textContent = date.toLocaleDateString(undefined, options);
                } else {
                    display.textContent = 'Yet to set';
                }
            };

            input.focus();
            if (typeof input.showPicker === 'function') {
                input.showPicker();
            } else {
                input.click();
            }
        }

        document.getElementById('task-title').addEventListener('keyup', function(e) {
            const input = e.target.value;
            const match = input.match(/@(\w{2,})$/); // Detect "@name"
            const suggestionBox = document.getElementById('user-suggestions');

            if (match) {
                const keyword = match[1];
                fetch(`/user-search?q=${keyword}`)
                    .then(res => res.json())
                    .then(users => {
                        suggestionBox.innerHTML = ''; // Clear previous suggestions

                        users.forEach(user => {
                            const item = document.createElement('a');
                            item.className = 'suggestion-item';

                            // Avatar initials
                            const initials = user.name.split(' ').map(n => n.charAt(0)).join('');
                            const avatar = document.createElement('div');
                            avatar.className = 'avatar-initials';
                            avatar.textContent = initials.toUpperCase();

                            item.appendChild(avatar);
                            item.appendChild(document.createTextNode(` ${user.name} (${user.email})`));

                            // When item is clicked, call selectUsers
                            item.onclick = () => selectUsers(user);

                            suggestionBox.appendChild(item);
                        });

                        suggestionBox.style.display = users.length ? 'block' : 'none';
                    })
                    .catch(err => console.error('Error fetching users:', err));
            } else {
                suggestionBox.innerHTML = ''; // Clear suggestions when no match
                suggestionBox.style.display = 'none';
            }
        });

        function selectUsers(user) {
            const taskTitleInput = document.getElementById('task-title');
            const input = taskTitleInput.value;
            const newText = input.replace(/@\w+$/, '@' + user.name); // Replace "@name" with the selected user's name
            taskTitleInput.value = newText;

            // Avoid duplicate mentions
            if (!document.querySelector(`input[data-user-id="${user.id}"]`)) {
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'mentionedUserId[]'; // Make it an array
                hiddenInput.value = user.id;
                hiddenInput.setAttribute('data-user-id', user.id); // For identifying duplicates
                document.getElementById('mentioned-users-container').appendChild(hiddenInput);
            }

            // Clear suggestions and close dropdown
            const suggestionBox = document.getElementById('user-suggestions');
            suggestionBox.innerHTML = '';
            suggestionBox.style.display = 'none';

            // Blur input to avoid triggering keyup again
            taskTitleInput.blur();

            // Optionally refocus the input to continue typing
            setTimeout(() => {
                taskTitleInput.focus();
            }, 0);
        }
        let statuses = @json($statuses);
        let colors = @json($colors);
        let selectedColor = colors[0];

        function filterStatuses() {
            const search = document.getElementById('statusSearch').value.toLowerCase();
            const statusList = document.getElementById('statusList');
            const createSection = document.getElementById('createStatusSection');
            let found = false;
            statusList.innerHTML = '';
            statuses.forEach(status => {
                if (status.name.toLowerCase().includes(search)) {
                    found = true;
                    statusList.innerHTML += `
                <div class="dropdown-item d-flex align-items-center" onclick="selectStatus('${status.name}', '${status.color}')">
                    <span class="badge me-2" style="background-color: ${status.color};">&nbsp;</span> ${status.name}
                </div>
            `;
                }
            });
            if (!found && search.trim() !== '') {
                createSection.classList.remove('d-none');
                document.getElementById('newStatusName').textContent = search;
            } else {
                createSection.classList.add('d-none');
            }
        }

        function selectNewColor(color) {
            event.stopPropagation();
            selectedColor = color;
            // Highlight selected color
            document.querySelectorAll('.color-swatch').forEach(el => el.style.border = '2px solid #fff');
            event.target.style.border = '2px solid #333';
        }

        function addNewStatus(event) {
            if (event) event.preventDefault();
            const name = document.getElementById('newStatusName').textContent;
            statuses.push({
                name: name,
                color: selectedColor
            });
            selectStatus(name, selectedColor);
            filterStatuses();

        }

        function selectStatus(name, color) {
            document.getElementById('selectedStatus').textContent = name;
            document.getElementById('statusDropdown').style.backgroundColor = color;
            document.getElementById('statusDropdown').style.color = '#000'; // Change text color if necessary
            document.getElementById('statusInput').value = name;
            document.getElementById('colorInput').value = color;
            document.getElementById('statusDropdown').click(); // Close the dropdown
        }

        // Toggle user search dropdown visibility
        let dropdownVisible = false;

        function toggleUserSearch() {
            const dropdown = document.getElementById('userDropdown');
            dropdown.style.display = dropdownVisible ? 'none' : 'block';
            dropdownVisible = !dropdownVisible;
            document.getElementById('userSearchInput').focus();
        }

        // Fetch & display matching users
        function searchUsers(query) {
            if (query.length < 2) {
                document.getElementById('user_search').innerHTML = '';
                return;
            }

            fetch(`/user-search?q=${query}`)
                .then(res => res.json())
                .then(users => {
                    const suggestionBox = document.getElementById('user_search');
                    suggestionBox.innerHTML = '';

                    users.forEach(user => {
                        const initials = user.name.split(' ').map(word => word[0]).join('').substring(0, 2)
                            .toUpperCase();

                        const item = document.createElement('div');
                        item.className = 'd-flex align-items-center mb-2 p-2 rounded hover-bg-light';
                        item.style.cursor = 'pointer';
                        item.onclick = () => selectUser(user, initials);

                        const avatar = document.createElement('div');
                        avatar.className = 'avatar-initials';
                        avatar.style.width = '36px';
                        avatar.style.height = '36px';
                        avatar.textContent = initials;

                        const info = document.createElement('div');
                        info.innerHTML =
                            `<strong>${user.name}</strong><br><small class="text-muted">${user.email}</small>`;

                        item.appendChild(avatar);
                        item.appendChild(info);

                        suggestionBox.appendChild(item);
                    });
                })
                .catch(err => console.error('Error searching users:', err)); // Error handling
        }

        // Select a user and populate assignee fields
        function selectUser(user, initials) {
            document.getElementById('assigneeName').textContent = user.name;
            document.getElementById('assigneeAvatar').textContent = initials;
            document.getElementById('assignedUserId').value = user.id;

            document.getElementById('userDropdown').style.display = 'none';
            dropdownVisible = false;
        }


        // Close dropdown on outside click
        document.addEventListener('click', function(e) {
            const block = document.getElementById('assignedToBlock');
            const dropdown = document.getElementById('userDropdown');

            if (!block.contains(e.target) && !dropdown.contains(e.target)) {
                dropdown.style.display = 'none';
                dropdownVisible = false;
            }
        });

        function triggerFileInput() {
            document.getElementById('attachmentInput').click();

        }
        let selectedFiles = [];

        function handleFileChange(event) {
            const files = Array.from(event.target.files); // convert FileList to array
            const fileListContainer = document.getElementById('fileList');
            const uploadedFileContainer = document.getElementById('uploadedFileContainer');

            // Add new files to selectedFiles (avoid duplicates)
            files.forEach(file => {
                if (!selectedFiles.some(f => f.name === file.name && f.lastModified === file.lastModified)) {
                    selectedFiles.push(file);
                }
            });

            // Clear and re-render the list
            fileListContainer.innerHTML = '';

            selectedFiles.forEach((file, index) => {
                const li = document.createElement('li');
                li.style.marginBottom = '10px';
                li.style.display = 'flex';

                const fileName = document.createElement('span');
                fileName.textContent = file.name;
                fileName.style.marginRight = '10px';

                const removeButton = document.createElement('button');
                removeButton.textContent = 'Remove';
                removeButton.type = 'button';
                removeButton.classList.add('btn', 'btn-link', 'text-danger');
                removeButton.onclick = function() {
                    selectedFiles.splice(index, 1);
                    handleFileChange({
                        target: {
                            files: []
                        }
                    }); // re-render
                };

                li.appendChild(fileName);
                li.appendChild(removeButton);
                fileListContainer.appendChild(li);
            });

            if (selectedFiles.length > 0) {
                uploadedFileContainer.classList.remove('d-none');
            } else {
                uploadedFileContainer.classList.add('d-none');
            }

            // Reset file input so the same file can be selected again if needed
            event.target.value = '';
        }





        function removeFile(index) {
            const fileInput = document.getElementById('attachmentInput');
            const fileList = Array.from(fileInput.files);
            fileList.splice(index, 1);

            // Create a new DataTransfer object to update the file input with the new list of files
            const dataTransfer = new DataTransfer();
            fileList.forEach(f => dataTransfer.items.add(f));
            fileInput.files = dataTransfer.files;

            // Remove the file from the displayed list
            const fileListContainer = document.getElementById('fileList');
            fileListContainer.removeChild(fileListContainer.childNodes[index]);

            // Hide the container if no files are left
            if (fileList.length === 0) {
                document.getElementById('uploadedFileContainer').classList.add('d-none');
            }
        }

        const tagColors = ['#f56565', '#76e2e7', '#f6e05e', '#68d391', '#63b3ed', '#a0aec0'];
        let selectedTagColor = tagColors[0];
        let tags = [];

        // Tags from backend (Blade JSON)
        const tagsFromBackend = @json($existingTags);

        function triggerTagAction() {
            const tagSection = document.getElementById('tagInputSection');
            tagSection.classList.toggle('d-none');
            tagSection.classList.toggle('d-block');
            document.getElementById('tagInput').focus();
            showTagDropdown(tagsFromBackend);
            hideTagCreation();
        }

        function closeTagInput() {
            const tagSection = document.getElementById('tagInputSection');
            tagSection.classList.add('d-none');
            tagSection.classList.remove('d-block');
            document.getElementById('tagInput').value = '';
            hideTagDropdown();
            hideTagCreation();
        }

        function showTagDropdown(list = []) {
            const dropdown = document.getElementById('tagDropdown');
            dropdown.innerHTML = '';

            list.forEach(tag => {
                const option = document.createElement('div');
                option.className = 'tag-dropdown-item';
                option.style.display = 'flex';
                option.style.alignItems = 'center';
                option.style.cursor = 'pointer';
                option.style.padding = '5px';

                const colorBox = document.createElement('span');
                colorBox.style.backgroundColor = tag.color;
                colorBox.style.width = '20px';
                colorBox.style.height = '20px';
                colorBox.style.borderRadius = '4px';
                colorBox.style.marginRight = '8px';

                const textNode = document.createTextNode(tag.name);

                option.appendChild(colorBox);
                option.appendChild(textNode);

                option.onclick = () => {
                    // Prevent duplicates
                    if (tags.some(t => t.name.toLowerCase() === tag.name.toLowerCase())) {
                        alert('Tag already added!');
                        return;
                    }
                    tags.push(tag);
                    updateTagList();
                    closeTagInput();
                };

                dropdown.appendChild(option);
            });

            openDropdown();
            dropdown.classList.remove('d-none');
        }

        function hideTagDropdown() {
            const dropdown = document.getElementById('tagDropdown');
            dropdown.classList.add('d-none');
            dropdown.style.display = 'none';
        }

        function openDropdown() {
            const dropdown = document.getElementById('tagDropdown');
            dropdown.style.display = 'block';
        }

        function showTagCreation() {
            document.getElementById('tagCreationSection').classList.remove('d-none');
            renderTagColorPalette();
        }

        function hideTagCreation() {
            document.getElementById('tagCreationSection').classList.add('d-none');
        }

        function addTag() {
            const input = document.getElementById('tagInput');
            const name = input.value.trim();
            if (!name) return;

            if (tags.some(t => t.name.toLowerCase() === name.toLowerCase())) {
                alert('Tag already added!');
                return;
            }

            const newTag = {
                name,
                color: selectedTagColor
            };
            tags.push(newTag);
            updateTagList();
            input.value = '';
            closeTagInput();
        }

        function renderTagColorPalette() {
            const palette = document.getElementById('tagColorPalette');
            palette.innerHTML = '';

            tagColors.forEach(color => {
                const swatch = document.createElement('div');
                swatch.className = 'color-swatch' + (color === selectedTagColor ? ' selected' : '');
                swatch.style.background = color;
                swatch.onclick = (e) => {
                    e.stopPropagation();
                    selectedTagColor = color;
                    renderTagColorPalette();
                };
                palette.appendChild(swatch);
            });
        }

        function updateTagList() {
            const tagList = document.getElementById('tagList');
            tagList.innerHTML = '';

            tags.forEach((tag, idx) => {
                const badge = document.createElement('span');
                badge.className = 'tag-badge';
                badge.style.background = tag.color;
                badge.innerHTML = `${tag.name} <span class="remove-tag" onclick="removeTag(${idx})">&times;</span>`;
                tagList.appendChild(badge);
            });

            // Store tags as JSON string in hidden input or wherever needed
            document.getElementById('tagsInput').value = JSON.stringify(tags);
        }

        function removeTag(idx) {
            tags.splice(idx, 1);
            updateTagList();
        }

        // Input event to filter dropdown tags
        document.getElementById('tagInput').addEventListener('input', function() {
            const value = this.value.trim().toLowerCase();
            const matches = tagsFromBackend.filter(tag => tag.name.toLowerCase().includes(value));

            if (!value || matches.length > 0) {
                showTagDropdown(matches);
                hideTagCreation();
            } else {
                hideTagDropdown();
                showTagCreation();
            }
        });

        // Show dropdown on input focus
        document.getElementById('tagInput').addEventListener('focus', function() {
            showTagDropdown(tagsFromBackend);
            hideTagCreation();
        });

        // Close popup when clicking outside
        document.addEventListener('click', function(e) {
            const section = document.getElementById('tagInputSection');
            const icon = document.getElementById('tagIconContainer');
            if (!section.contains(e.target) && !icon.contains(e.target)) {
                closeTagInput();
            }
        });


        document.getElementById("toggleTimeline").addEventListener("click", function() {
            const timeline = document.getElementById("timeline-list");
            if (timeline.style.display === "none" || timeline.style.display === "") {
                timeline.style.display = "block";
            } else {
                timeline.style.display = "none";
            }
        });
    </script>

@endsection