@extends('layouts.head_office_app')
@section('title', 'Tasks')
@section('content')
@php
    $has_access_to_all_tasks = $profile->super_access == 1 || ($profile->is_access_tasks == 1 && $profile->task_access_type && (in_array('all_tasks', $profile->task_access_type) || in_array('sites_tasks', $profile->task_access_type) || in_array('certain_users_tasks', $profile->task_access_type)));
    $has_own_tasks_access = $profile->super_access == 1 || ($profile->is_access_tasks == 1 && (empty($profile->task_access_type) || in_array('all_tasks', $profile->task_access_type) || in_array('own_tasks', $profile->task_access_type)));


@endphp
    <style>
        /* .task-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        } */

        /* Fix Select2 z-index in modal */
        .select2-container {
            z-index: 9999 !important;
        }
        .select2-dropdown {
            z-index: 9999 !important;
        }

        .dropdown-menu.show{
            transform: none !important;
        }
        .badge-status {
            background-color: #f5c16c;
            color: #000;
            font-size: 14px;
            border-radius: 5px;
            padding: 5px 10px;
        }
        .items-selected {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border-radius: 10px;
            padding: 12px 20px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            transition: bottom 0.3s ease-in-out;
            z-index: 9999;
            cursor: grab;
            width: 80%;
            max-width: 900px;
            justify-content: space-between;
        }
        .items-selected.visible {
            bottom: 20px;
        }
        .task-dots {
            display: flex;
            align-items: center;
        }
        .dot {
            width: 8px;
            height: 8px;
            background: #2bafa5;
            border-radius: 50%;
            margin: 0 4px;
        }
        .drag-handle {
            cursor: grab;
            font-size: 18px;
        }
        .color-line {
            height: 2px;
            background-color: #009688;
            flex-grow: 1;
            margin-left: 10px;
        }
        .wrapper {
            display: block !important;
            align-items: stretch;
        }
        .row {
            padding: 0 4% !important;
        }
        .filter-sidebar {
            width: 250px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            font-family: Arial, sans-serif;
            position: relative;
            z-index: 3;
        }
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            background: #E0F2F1;
            color: #007bff;
            border-radius: 5px;
            margin-bottom: 5px;
        }
        .filter-header.active {
            background: #C8E6C9;
        }
        .filter-toggle {
            font-size: 12px;
        }
        .filter-content {
            padding: 10px;
            display: none;
        }
        .filter-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin: 5px 0;
            cursor: pointer;
        }
        .filter-item input {
            margin-right: 10px;
        }
        .badge {
            background: #6c757d;
            color: white;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 20px;
            margin-left: auto;
        }
        .items-selected {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border-radius: 10px;
            padding: 12px 20px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            transition: bottom 0.3s ease-in-out;
            z-index: 1000;
            cursor: grab;
            width: 80%;
            max-width: 900px;
            justify-content: space-between;
        }
        .items-selected.visible {
            bottom: 20px;
        }
        .task-dots {
            display: flex;
            align-items: center;
        }
        .dot {
            width: 8px;
            height: 8px;
            background: #2bafa5;
            border-radius: 50%;
            margin: 0 4px;
        }
        .drag-handle {
            cursor: grab;
            font-size: 18px;
        }
        
        .select2-container--default .select2-selection--multiple {
            border: 1px solid #ced4da;
            border-radius: 4px;
        }
        
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #007bff;
            border-color: #0056b3;
        }
        
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        
        .select2-container--focus .select2-selection--multiple {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        .kanban-board {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 20px;
            justify-content: space-between;
            overflow-x: hidden;
        }
        .kanban-column {
            flex: 1 1 calc(25% - 10px);
            max-width: 25%;
            background: #eef0f4;
            padding: 15px;
            border-radius: 10px;
        }
        .kanban-cards {
            min-height: 100px;
        }
        .kanban-card {
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            cursor: grab;
            margin-bottom: 10px;
        }
        .wrapper {
            display: block !important;
            align-items: stretch;
        }
        .row {
            padding: 0 4% !important;
        }
        .custom-dropdown {
            width: 200px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background: #f8f9fa;
            appearance: none;
            cursor: pointer;
        }
        .custom-dropdown::after {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        
        #serchInput::placeholder {
            color: #999 !important;
        }
        
        /* Search input styling */
        .search-container {
            position: relative;
            max-width: 300px;
        }
        
        .search-container input {
            padding-right: 40px;
        }
        
        .search-container .btn {
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            background: none;
            color: #6c757d;
            height: 100%;
            padding: 0 12px;
            transition: color 0.2s ease;
        }
        
        .search-container .btn:hover {
            color: #495057;
        }
        
        /* Loading states */
        .loading-indicator {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }
        .custom-show-btn {
            font-size: 22px;
            font-weight: 600;
            border: none;
            background: none;
            color: #5cab9a;
            transition: 0.2s ease-in-out;
        }
        .custom-show-btn i {
            color: #999;
            margin-left: 0.5rem;
        }
        .custom-show-btn:hover {
            letter-spacing: 1.1px;
            background: #00000003;
            transition: 0.2s ease-in-out;
            border-radius: 0.5rem;
            opacity: 0.8;
        }
        #calendar {
            min-height: 800px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px #0001;
            padding: 20px 10px 30px 10px;
            max-width: 2000px;
            margin: 0 auto;
        }
        /* Calendar view should not force display/min-height by default.
           It will be shown/hidden dynamically from JS to avoid large
           blank space when not in use. */
        #Calender-View { /* intentionally minimal */ }
        .lazy-sentinel { height: 1px; }
        /* Fix vertical space between tasks */
        .task-card {
            margin-bottom: 15px !important;
            position: relative;
            z-index: 0 !important;
        }
        /* Loading states */
        .loading-indicator {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }
        /* Filter improvements */
        .filter-header:hover {
            background: #d4edda !important;
            transition: background 0.2s ease;
        }
        .task-type-filter:checked + label {
            color: #007bff;
            font-weight: 600;
        }
        /* Fix overlapping issues */
        .tab-content {
            position: relative;
            z-index: 1;
        }
        .view-section {
            position: relative;
            z-index: 1;
        }
        .nav-tabs {
            position: relative;
            z-index: 2;
        }
        /* Ensure proper spacing */
        .tab-pane {
            padding-top: 20px;
        }
        /* Fix task card positioning */
        .task-card .row {
            position: relative;
            z-index: 1;
        }
        /* Ensure filter sidebar doesn't overlap */
        .filter-sidebar {
            position: relative;
            z-index: 3;
        }
        /* Additional fixes for overlapping */
        .tab-pane.show.active {
            position: relative;
            z-index: 1;
        }
        .view-section.Tiles-View {
            position: relative;
            min-height: 500px;
        }
        .view-section.Board-View {
            position: relative;
            z-index: 1;
        }
        .view-section.Calender-View {
            position: relative;
            z-index: 1;
        }
        /* Ensure proper spacing between elements */
        .task-card + .task-card {
            margin-top: 15px;
        }
        /* Fix any potential z-index conflicts */
        .nav-tabs .nav-link {
            position: relative;
            z-index: 2;
        }
        .nav-tabs .nav-link.active {
            z-index: 3;
        }
        /* Ensure content doesn't overlap with fixed elements */
        .main-content {
            position: relative;
            z-index: 1;
        }
        /* Fix for any Bootstrap conflicts */
        .tab-content > .tab-pane {
            display: block;
            height: 0;
            overflow: hidden;
        }
        .tab-content > .active {
            height: auto;
        }
        
        .loading-indicator {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }
        
        .infinite-scroll-container {
            min-height: 200px;
            transition: opacity 0.3s ease;
        }
        
        .filter-header:hover {
            background: #d4edda !important;
            transition: background 0.2s ease;
        }
        .task-type-filter:checked + label {
            color: #007bff;
            font-weight: 600;
        }
        
        /* Prevent flickering during search/filter */
        .task-card {
            transition: opacity 0.2s ease;
        }
        
        .task-card.fade-out {
            opacity: 0;
        }
        
        .task-card.fade-in {
            opacity: 1;
        }
        
        /* Loading state improvements */
        .loading-state {
            opacity: 0.6;
            pointer-events: none;
        }
        
        /* No results message styling */
        .no-results-message {
            text-align: center;
            padding: 40px 20px;
            color: #666;
            font-style: italic;
        }
        
        .custom-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .filter-chip {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            background-color: #e3f2fd;
            border: 1px solid #2196F3;
            border-radius: 16px;
            font-size: 13px;
            color: #1976D2;
            cursor: pointer;
            transition: all 0.2s;
            width: 100%;
        }
        
        .filter-chip:hover {
            background-color: #bbdefb;
        }
        
        /* .filter-chip.active {
            background-color: #2196F3;
            color: white;
        } */
        
        /* .filter-chip.active .edit-chip,
        .filter-chip.active .remove-chip {
            color: white !important;
        } */
        
        .filter-name {
            flex: 1;
        }
        
        .filter-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-chip .remove-chip {
            cursor: pointer;
            font-weight: bold;
            opacity: 0.7;
        }
        
        .filter-chip .remove-chip:hover {
            opacity: 1;
        }
        
        .filter-chip .edit-chip {
            color: #666;
            cursor: pointer;
            font-size: 16px;
        }
        
        .filter-chip .edit-chip:hover {
            color: #2196F3;
        }
        
        /* Applied filter at top */
        .applied-filter-display {
            background-color: #e8f5e9;
            border: 1px solid #4caf50;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 15px;
            display: none;
        }
        
        .applied-filter-display.show {
            display: block;
        }
        
        .applied-filter-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .applied-filter-name {
            font-weight: 600;
            color: #2e7d32;
            flex: 1;
        }
        
        .applied-filter-remove {
            cursor: pointer;
            color: #d32f2f;
            font-weight: bold;
            font-size: 18px;
            opacity: 0.8;
        }
        
        .applied-filter-remove:hover {
            opacity: 1;
        }
        
        /* Saved filters section */
        .saved-filters-heading {
            font-size: 14px;
            font-weight: 600;
            color: #666;
            margin-bottom: 8px;
            margin-top: 15px;
        }
        
        /* Search query chips */
        #searchQueryChips {
            display: flex;
        }
        
        .search-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 12px;
            font-size: 12px;
            color: #856404;
        }
        
        .search-chip .remove-search-term {
            cursor: pointer;
            color: #dc3545;
            font-weight: bold;
            opacity: 0.7;
        }
        
        .search-chip .remove-search-term:hover {
            opacity: 1;
        }

        #reassignConfirmationModal #reassignSummaryContent .table {
            margin-bottom: 0;
        }

        #reassignConfirmationModal #reassignSummaryContent .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
        }

        #reassignConfirmationModal #reassignSummaryContent .table td {
            vertical-align: middle;
        }

        #reassignConfirmationModal .badge {
            font-size: 0.9rem;
            padding: 0.4rem 0.8rem;
        }
    </style>
    <script src="{{asset('admin_assets/js/view_case.js')}}"></script>
    <script src="{{asset('js/alertify.min.js')}}"></script>
    <div class="d-flex gap-5 px-5 ps-4">
        <div class="" style="min-width: 220px;">
            <h5 class="mb-3">Filter Tasks</h5>
            
            <!-- Applied/Default Filter Display -->
            <div id="appliedFilterDisplay" class="applied-filter-display">
                <small class="text-muted d-block mb-1" style="font-size: 11px;">APPLIED FILTER</small>
                <div class="applied-filter-content">
                    <span class="applied-filter-name" id="appliedFilterName"></span>
                    <span class="applied-filter-remove" id="removeAppliedFilter" title="Remove filter and clear default">&times;</span>
                </div>
            </div>
            <div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Priority
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="priority-filter me-2" value="urgent" checked>
                                        <span>Urgent</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="priority-filter me-2" value="high" checked>
                                        <span>High</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="priority-filter me-2" value="medium" checked>
                                        <span>Medium</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="priority-filter me-2" value="low" checked>
                                        <span>Low</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Task Type
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="task-type-filter me-2" value="user" checked>
                                        <span>User Task</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="task-type-filter me-2" value="location" checked>
                                        <span>Site Task</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="task-type-filter me-2" value="case" checked>
                                        <span>Case Task</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Status
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="status-filter me-2" value="To do" checked>
                                        <span>To do</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="status-filter me-2" value="In progress" checked>
                                        <span>In Progress</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="status-filter me-2" value="Completed" checked>
                                        <span>Completed</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="status-filter me-2" value="Cant do" checked>
                                        <span>Can't do</span>
                                    </label>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="d-flex align-items-center">
                                        <input type="checkbox" class="status-filter me-2" value="Close" checked>
                                        <span>Close</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Created By
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <select id="createdByFilter" class="form-control created-by-filter" multiple="multiple" style="width: 100%;">
                                @php
                                    $creators = collect();
                                    foreach(($all_tasks ?? []) as $task) {
                                        if($task->created_by && $task->created_by->user) {
                                            $creators->push((object)[
                                                'id' => $task->created_by->user->id,
                                                'name' => $task->created_by->user->name
                                            ]);
                                        }
                                    }
                                    foreach(($user_tasks ?? []) as $task) {
                                        if($task->created_by && $task->created_by->user) {
                                            $creators->push((object)[
                                                'id' => $task->created_by->user->id,
                                                'name' => $task->created_by->user->name
                                            ]);
                                        }
                                    }
                                    foreach(($tasks ?? []) as $task) {
                                        if($task->created_by && $task->created_by->user) {
                                            $creators->push((object)[
                                                'id' => $task->created_by->user->id,
                                                'name' => $task->created_by->user->name
                                            ]);
                                        }
                                    }
                                    $creators = $creators->unique('id')->values();
                                @endphp
                                @foreach($creators as $creator)
                                    <option value="{{ $creator->id }}">{{ $creator->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Assigned To
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <select id="assignedToFilter" class="form-control assigned-to-filter" multiple="multiple" style="width: 100%;">
                                <optgroup label="Users">
                                    @foreach($head_office->users as $hoUser)
                                        @if($hoUser->user)
                                            <option value="user_{{ $hoUser->user->id }}">{{ $hoUser->user->name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                                <optgroup label="Sites">
                                    @foreach($head_office->locations as $location)
                                        @if($location->location)
                                            <option value="location_{{ $location->location->id }}">{{ $location->location->trading_name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                       Due Date
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <div class="">
                                <label for="specificDate">Specific Date:</label>
                                <input type="date" id="specificDate" class="form-control mb-2">
                                <label for="startDate">Start Date:</label>
                                <input type="date" id="startDate" class="form-control mb-2">
                                <label for="endDate">End Date:</label>
                                <input type="date" id="endDate" class="form-control mb-2">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-wrapper">
                    <button class="accordion" type="button">
                        Task Deadline
                    </button>
                    <div class="panel">
                        <div class="my-2">
                            <div class="" style="max-width: 220px;">
                                <label for="deadlineSlider">Max Days Remaining:</label>
                                <input type="range" id="deadlineSlider" min="1" max="30" step="1"
                                    value="30" class="form-range">
                                <span id="deadlineValue">30 Days</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <!-- Saved Filters Section -->
                    <div class="saved-filters-heading" id="savedFiltersHeading" style="display: none;">Saved Filters</div>
                    <div id="customFilterChipsContainer" class="custom-filter-chips mb-3" style="display: none;">
                    </div>
                    
                    <!-- Create Custom Filter Button -->
                    <button id="createCustomFilterBtn"
                            class="btn primary-btn btn-sm w-100 d-flex justify-content-center align-items-center" style="color:white !important">
                            <i class="bi bi-plus-circle me-1"></i> Create Custom Filter
                    </button>

<!-- Reset Filters Button -->
<!-- <button id="resetFilters"
        class="btn outline-btn btn-sm w-100 d-flex justify-content-center align-items-center">
    <i class="bi bi-arrow-clockwise me-1"></i> Show All Tasks
</button> -->

                </div>
            </div>
        </div>
        <div class="w-100">
            <h2 class="fw-bold text-center mb-4">Tasks</h2>
            <div class="d-flex gap-2 justify-content-between align-items-center">
                <div class="search-container" style="flex: 1; max-width: 600px;">
                    <input type="text" id="serchInput" placeholder="Search tasks (comma-separated for multiple)..." class="form-control text-muted">
                    <button type="button" id="searchBtn" class="btn">
                        <i class="bi bi-search"></i>
                    </button>
                    <!-- Search Query Chips -->
                    <div id="searchQueryChips" class="mt-2" style="display: none; gap: 6px; flex-wrap: wrap;">
                        <!-- Chips will be added here dynamically -->
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <select id="viewSelector" class="custom-dropdown rounded-2 text-muted border" onchange="toggleView()">
                        <option value="Tiles-View">List</option>
                        <option value="Board-View">Board</option>
                        <option value="Calender-View">Calendar</option>
                    </select>
                    <a href="{{ route('head_office.create_task') }}" class="primary-btn" target="_blank">Send Task</a>
                </div>
            </div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                @if ($has_access_to_all_tasks && isset($all_tasks))
                    <li class="nav-item" role="presentation">
                        <a onclick="changeTabUrl('all_tasks_tab')" style="background: transparent;font-weight:bold;"
                            class="nav-link active" id="all_tasks_tab" data-bs-toggle="tab" href="#all_task_tab_panel" type="button"
                            role="tab" aria-controls="all_task_tab_panel" aria-selected="true">All tasks</a>
                    </li>
                @endif
                @if ($has_own_tasks_access)
                    <li class="nav-item" role="presentation">
                        <a onclick="changeTabUrl('sent_by_me_tab')" style="background: transparent;font-weight:bold;"
                            class="nav-link {{ $has_access_to_all_tasks && isset($all_tasks) ? '' : 'active' }}" id="sent_by_me_tab" data-bs-toggle="tab" href="#sent_by_me_panel" type="button"
                            role="tab" aria-controls="sent_by_me_panel" aria-selected="false">Sent by me</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a onclick="changeTabUrl('assigned_to_me_tab')" style="background: transparent;font-weight:bold;"
                            class="nav-link" id="assigned_to_me_tab" data-bs-toggle="tab" href="#assigned_to_me_tab_panel" type="button"
                            role="tab" aria-controls="assigned_to_me_tab_panel" aria-selected="false">Assigned to me</a>
                    </li>
                @endif
            </ul>
            <div class="tab-content" id="myTabContent">
                {{-- ALL TASKS TAB PANEL --}}
                @if ($has_access_to_all_tasks && isset($all_tasks))
                    <div class="tab-pane fade show active px-3" id="all_task_tab_panel" role="tabpanel"
                        aria-labelledby="all_tasks_tab">
                        <div class="mb-3 p-3 bg-light rounded border">
                            <label style="cursor: pointer; margin-bottom: 0;">
                                <input type="checkbox" id="select-all-tasks" class="me-2" style="width: 18px; height: 18px; cursor: pointer;">
                                <strong style="font-size: 16px;">Select All Tasks</strong>
                            </label>
                            <small class="text-muted ms-2" id="select-all-tasks-status"></small>
                        </div>
                        <div id="Tiles-View-All" class="view-section Tiles-View"> {{-- Changed ID to be unique --}}
                            <div id="all-tasks-list">
                                @forelse ((($all_tasks ?? collect())->take(10)) as $task) {{-- Initial slice for lazy load --}}
                                    @php
                                        // Check if there's an extended due date (dead_line_date or task_over_due_date)
                                        $extendedDueDate = null;
                                        if ($task->dead_line_date) {
                                            $extendedDueDate = $task->dead_line_date;
                                        } elseif ($task->task_over_due_date) {
                                            $extendedDueDate = $task->task_over_due_date;
                                        }
                                        
                                        // Use extended due date if available, otherwise use the original due date
                                        $effectiveDueDate = $extendedDueDate ? $extendedDueDate : $task->due_date;
                                        
                                        // Calculate if overdue based on the effective due date
                                        $isOverdue = $effectiveDueDate && 
                                                    \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                                                    $task->status !== 'completed';
                                    @endphp
                                    <div class="d-flex align-items-start my-1" style="position: relative;z-index:0;">
                                        <!-- Checkbox -->
                                        <!-- <div class="me-2 mt-2">
                                            <input style="margin-top: 58px;" type="checkbox" class="task-select">
                                        </div> -->
                                        <!-- Main Card -->
                                        <div class="card w-100 p-3 task-card " style="border-left: 5px solid black;"
                                            data-id="{{ $task->id }}"
                                            data-priority="{{ $task->priority }}"
                                            data-status="{{ strtolower(str_replace('_', ' ', $task->status)) }}"
                                            data-task-type="{{ $task->shared_with == 'user' ? 'user' : ($task->shared_with == 'location' ? 'location' : (isset($task->case_id) ? 'case' : 'unknown')) }}"
                                            data-due-date="{{ $effectiveDueDate ?? $task->due_date }}"
                                            data-deadline="{{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->diffInDays(now()) : '' }}">
                                          <div class="row text-muted" style="font-size: 0.9rem;">
                                                <!-- Section 1 -->
                                                <div style="margin-left: -32px;font-size: 15px;min-height:300px;" class="col-md-3 border-end pe-3 position-relative">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div class="text-black">
                                                            @if ($profile->super_access == 1 && $task->shared_with == 'user')
                                                            <input type="checkbox" name="all_tasks_checkbox" value="{{ $task->id }}" class="task-select">
                                                            @endif
                                                            Task #{{ $task->id }}</div>
                                                        <div>
                                                            @if ($task->shared_with == 'user')
                                                                <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                            @elseif ($task->shared_with == 'location')
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                            @elseif(isset($task->case_id))
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <h6 class="mt-2 fw-bold text-black" style="margin-left: 2px;">
                                                        {{ $task->title ?? '[Task Name goes here]' }}
                                                    </h6>
                                                    <span style="font-size: 15px" class="badge pri-tag mt-2 {{ $task->priority }}">
                                                        {{ $task->priority ?? 'No Priority' }}
                                                    </span>
                                                    @if ($isOverdue)
                                                        <span style="font-size: 15px" class="badge bg-danger mt-2">Overdue</span>
                                                    @endif
                                                </div>
                                                <!-- Section 2 -->
                                                 <div class="col-md-4 border-end px-3">
                                                    @if (isset($task->created_by) && isset($task->created_by->user->logo))
                                                        <div class="mt-1">
                                                            <i class="bi bi-sun"></i>
                                                            <img class="img-profile rounded-circle" width="22" height="22"
                                                                src="{{ optional(optional($task->created_by)->user)->logo ?? asset('images/default-user.png') }}">
                                                            Created by:
                                                            <span class="fw-medium" style="padding-left: 10px">{{ optional(optional($task->created_by)->user)->name ?? 'Default Task' }}</span>
                                                        </div>
                                                    @endif
                                                    <div class="mt-1">
                                                        <i class="bi bi-sun"></i>
                                                        <svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)" d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        </svg>Created at:
                                                        {{ \Carbon\Carbon::parse($task->created_at)->format('d M Y (D) h:i a') }}
                                                    </div>
                                                    <div class="mt-1"><i class="bi bi-clock-history"></i><svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path stroke="rgb(103,105,121)" d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg> Last Updated {{ $task->updated_at->diffForHumans() }}
                                                    </div>
                                                    <div style="font-size: 14px">
                                                        <svg width="20" height="20" style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)" d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                                                Due Date:
                        {{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->format('d M Y (D) h:i a') : 'No Due Date' }}
                                                    </div>
                                                    @if ($task->ho_allocations->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20" style="margin-top: -3px;margin-right: 5px" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)" d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                            Assigned To:
                                                            {{ optional($task->ho_allocations)->pluck('head_office_user.user.name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if ($task->loc_allocations->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20" style="margin-top: -3px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)" d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                            Assigned To:
                                                            {{ optional($task->loc_allocations)->load('head_office_location.location')->pluck('head_office_location.location.trading_name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if (isset($task->task_case) && $task->task_case->location_name != null)
                                                        <div class="mt-1">
                                                            <i class="bi bi-sun"></i>
                                                            <svg width="20" height="20" style="margin-top: -4px;margin-right: 5px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M11 11H6.2C5.07989 11 4.51984 11 4.09202 11.218C3.71569 11.4097 3.40973 11.7157 3.21799 12.092C3 12.5198 3 13.0799 3 14.2V21M21 21V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H14.2C13.0799 3 12.5198 3 12.092 3.21799C11.7157 3.40973 11.4097 3.71569 11.218 4.09202C11 4.51984 11 5.0799 11 6.2V21M22 21H2M14.5 7H17.5M14.5 11H17.5M14.5 15H17.5" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                            </svg>Site Involved:
                                                            {{ optional($task->task_case)->location_name ?? 'Unknown Site' }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <!-- Section 3 -->
                                               <div class="col-md-3 border-end px-3">
                                                    <br>
                                                    {!! $task->description ?? 'No Description' !!}
                                                </div>
                                                <!-- Section 4 -->
                                                <div class="col-md-2 d-flex flex-column align-items-end " style="margin-right: -10px">
                                                    <div class="mb-1">
                                                        @livewire('task-status', ['task' => $task->id], key('task-status-' . $task->id))
                                                    </div>
                                                    <div class="text-end ">
                                                        <a href="{{ route('tasks.show', $task->id) }}"
                                                            class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6 "
                                                            style="padding-left: 27px;">View Task </a>
                                                    </div>
                                                    <div class="text-end">
                                                        @if ($task->task_case && ($profile->super_access == 1 || $profile->is_access_case_manager == 1))
                                                            <a href="/head_office/case/manager/view/{{ $task->task_case->id }}"
                                                                class="btn btn-outline-secondary btn-sm mt-3 ps-4 pe-4 py-1 fs-6 ">View Case</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center mt-4">No tasks found for this view.</p>
                                @endforelse
                            </div>
                            <div class="loading-indicator" style="display: none; text-align: center; padding: 20px;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">Loading more tasks...</p>
                            </div>
                            <div id="all-sentinel" class="lazy-sentinel"></div>
                        </div>
                        <div id="Board-View-All" class="view-section Board-View" style="display: none;"> {{-- Changed ID to be unique --}}
                            <div class="" >
                                    <div class="d-flex justify-content-between align-items-center p-3">
                                      
                                      
                                    </div>
                                    <div class="kanban-board p-0">
                                        <!-- To Do Column -->
                                        <div class="kanban-column" ondrop="drop(event, 'to do')" ondragover="allowDrop(event)">
                                            <h6>To do</h6>
                                            <div class="kanban-cards" id="todo-all"> {{-- Changed ID to be unique --}}
                                                @forelse (($all_tasks ?? []) as $task) {{-- Using $all_tasks --}}
                                                    @if ($task->status == 'to do')
                                                        <div class="kanban-card" draggable="true" wire:key="task-{{ $task->id }}" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span>
                                                                    @if ($task->shared_with == 'user')
                                                                        <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                                    @elseif ($task->shared_with == 'location')
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                                    @elseif(isset($task->case_id))
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                                    @endif
                                                                </small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-all-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'in_progress')" ondragover="allowDrop(event)">
                                            <h6>In progress</h6>
                                            <div class="kanban-cards" id="in-progress-all"> {{-- Changed ID to be unique --}}
                                                @forelse (($all_tasks ?? []) as $task) {{-- Using $all_tasks --}}
                                                    @if ($task->status == 'in_progress')
                                                        <div class="kanban-card" draggable="true" wire:key="task-{{ $task->id }}" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span>
                                                                    @if ($task->ho_allocations->count() > 0)
                                                                        <span class="badge bg-primary ms-1" style="font-size: 10px;">User</span>
                                                                    @elseif ($task->loc_allocations->count() > 0)
                                                                        <span class="badge bg-success ms-1" style="font-size: 10px;">Site</span>
                                                                    @endif
                                                                </small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-all-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'complete')" ondragover="allowDrop(event)">
                                            <h6>Complete</h6>
                                            <div class="kanban-cards" id="complete-all"> {{-- Changed ID to be unique --}}
                                                @forelse (($all_tasks ?? []) as $task) {{-- Using $all_tasks --}}
                                                    @if ($task->status == 'Completed')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span>
                                                                    @if ($task->shared_with == 'user')
                                                                        <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                                    @elseif ($task->shared_with == 'location')
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                                    @elseif(isset($task->case_id))
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                                    @endif
                                                                </small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-all-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'cant_do')" ondragover="allowDrop(event)">
                                            <h6>Can't do</h6>
                                            <div class="kanban-cards" id="cant-do-all"> {{-- Changed ID to be unique --}}
                                                @forelse (($all_tasks ?? []) as $task) {{-- Using $all_tasks --}}
                                                    @if ($task->status == 'cant_do')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span>
                                                                    @if ($task->shared_with == 'user')
                                                                        <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                                    @elseif ($task->shared_with == 'location')
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                                    @elseif(isset($task->case_id))
                                                                        <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                                    @endif
                                                                </small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-all-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($has_own_tasks_access)
                    {{-- SENT BY ME TAB PANEL --}}
                    <div class="tab-pane fade px-3 {{ $has_access_to_all_tasks && isset($all_tasks) ? '' : 'show active' }}"
                        id="sent_by_me_panel" role="tabpanel" aria-labelledby="sent_by_me_tab">
                        <div class="mb-3 p-3 bg-light rounded border">
                            <label style="cursor: pointer; margin-bottom: 0;">
                                <input type="checkbox" id="select-all-user-tasks" class="me-2" style="width: 18px; height: 18px; cursor: pointer;">
                                <strong style="font-size: 16px;">Select All User Tasks</strong>
                            </label>
                            <small class="text-muted ms-2" id="select-all-status"></small>
                        </div>
                        <div id="Tiles-View-Sent" class="view-section Tiles-View"> {{-- Changed ID to be unique --}}
                            <div class="sent-by-me-list"> {{-- Changed class to be unique --}}
                                @forelse ((collect($user_tasks ?? [])->take(10)) as $main_task) {{-- Initial slice for lazy load --}}
                                    @php
                                        // Check if there's an extended due date (dead_line_date or task_over_due_date)
                                        $extendedDueDate = null;
                                        if ($main_task->dead_line_date) {
                                            $extendedDueDate = $main_task->dead_line_date;
                                        } elseif ($main_task->task_over_due_date) {
                                            $extendedDueDate = $main_task->task_over_due_date;
                                        }
                                        
                                        // Use extended due date if available, otherwise use the original due date
                                        $effectiveDueDate = $extendedDueDate ? $extendedDueDate : $main_task->due_date;
                                        
                                        // Calculate if overdue based on the effective due date
                                        $isOverdue = $effectiveDueDate && 
                                                    \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                                                    $main_task->status !== 'completed';
                                    @endphp
                                    <div class="d-flex align-items-start my-1" style="position: relative;z-index:0;">
                                        <!-- Checkbox OUTSIDE -->
                                        <!-- <div class="me-2 mt-2">
                                            <input style="margin-top: 58px;" type="checkbox" class="task-select">
                                        </div> -->
                                        <!-- Main Card -->
                                        <div class="card w-100 p-3 task-card"
                                            data-id="{{ $main_task->id }}"
                                            data-priority="{{ $main_task->priority }}"
                                            data-status="{{ strtolower(str_replace('_', ' ', $main_task->status)) }}"
                                            data-task-type="{{ $main_task->shared_with == 'user' ? 'user' : ($main_task->shared_with == 'location' ? 'location' : (isset($main_task->case_id) ? 'case' : 'unknown')) }}"
                                                                                        data-due-date="{{ $effectiveDueDate ?? $main_task->due_date }}"
                                                                                        data-deadline="{{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->diffInDays(now()) : '' }}">
                                            <div class="row text-muted" style="font-size: 0.9rem;">
                                                <!-- Section 1 -->
                                                <div style="margin-left: -32px;font-size: 15px;min-height:300px;"
                                                    class="col-md-3 border-end pe-3 position-relative">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div class="text-black">
                                                            @if ($main_task->shared_with == 'user')
                                                                <input type="checkbox" name="tasks_checkbox" value="{{ $main_task->id }}" class="task-select" >
                                                            @endif
                                                            Task #{{ $main_task->id }}</div>
                                                        <div>
                                                            @if ($main_task->shared_with == 'user')
                                                                <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                            @elseif ($main_task->shared_with == 'location')
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                            @elseif(isset($main_task->case_id))
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <h6 class="mt-2 fw-bold text-black" style="margin-left: 2px;">
                                                        {{ $main_task->title ?? '[Task Name goes here]' }}
                                                    </h6>
                                                    <span style="font-size: 15px"
                                                        class="badge  pri-tag mt-2 {{ $main_task->priority }}">{{ $main_task->priority ?? 'No Priority' }}</span>
                                                    @if ($isOverdue)
                                                        <span style="font-size: 15px"
                                                            class="badge bg-danger mt-2">Overdue</span>
                                                    @endif

                                                
                                                </div>
                                                <!-- Section 2 -->
                                                <div class="col-md-4 border-end px-3">
                                                    <div class="mt-1">
                                                        <i class="bi bi-sun"></i>
                                                        <img class="img-profile rounded-circle" width="22"
                                                            height="22"
                                                            src="{{ optional(optional($main_task->created_by)->user)->logo ?? asset('images/default-user.png') }}">
                                                        Created by:
                                                        <span class="fw-medium"
                                                            style="padding-left: 10px">{{ optional(optional($main_task->created_by)->user)->name ?? 'Default Task' }}</span>
                                                    </div>
                                                    <div class="mt-1">
                                                        <i class="bi bi-sun"></i>
                                                        <svg width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
                                                                stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round"></path>
                                                        </svg>Created at:
                                                        {{ \Carbon\Carbon::parse($main_task->created_at)->format('d M Y (D) h:i a') }}
                                                    </div>
                                                    <div class="mt-1"><i class="bi bi-clock-history"></i><svg
                                                            width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                                                                stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round"></path>
                                                        </svg> Last Updated {{ $main_task->updated_at->diffForHumans() }}
                                                    </div>
                                                    <div style="font-size: 14px">
                                                        <svg width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z"
                                                                stroke="black" stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                        </svg>
                                                                                Due Date:
                            {{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->format('d M Y (D) h:i a') : 'No Due Date' }}
                                                    </div>
                                                    @if (optional($main_task->ho_allocations)->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -3px;margin-right: 5px" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)"
                                                                    d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                    stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                            Assigned To:
                                                            {{ optional($main_task->ho_allocations)->pluck('head_office_user.user.name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if (optional($main_task->loc_allocations)->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -3px;margin-right: 5px"
                                                                viewBox="0 0 24 24" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)"
                                                                    d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                    stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                                </svg>
                                                                Assigned To:
                                                                {{ optional($main_task->loc_allocations)->load('head_office_location.location')->pluck('head_office_location.location.trading_name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if (isset($main_task->task_case) && isset($main_task) && isset($main_task->task_case) && isset($main_task->task_case->location_name))
                                                        <div class="mt-1">
                                                            <i class="bi bi-sun"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -4px;margin-right: 5px" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11 11H6.2C5.07989 11 4.51984 11 4.09202 11.218C3.71569 11.4097 3.40973 11.7157 3.21799 12.092C3 12.5198 3 13.0799 3 14.2V21M21 21V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H14.2C13.0799 3 12.5198 3 12.092 3.21799C11.7157 3.40973 11.4097 3.71569 11.218 4.09202C11 4.51984 11 5.0799 11 6.2V21M22 21H2M14.5 7H17.5M14.5 11H17.5M14.5 15H17.5" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                                </svg>Site Involved:
                                                                {{ optional($main_task->task_case)->location_name ?? 'Unknown Site' }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <!-- Section 3 -->
                                                <div class="col-md-3 border-end px-3">
                                                    <br>
                                                    {!! $main_task->description ?? 'No Description' !!}
                                                </div>
                                                <!-- Section 4 -->
                                                <div class="col-md-2 d-flex flex-column align-items-end "
                                                    style="margin-right: -10px">
                                                    <div class="mb-1">
                                                        @livewire('task-status', ['task' => $main_task->id], key('task-status-' . $main_task->id))
                                                    </div>
                                                    <div class="text-end ">
                                                        <a href="{{ route('tasks.show', $main_task->id) }}"
                                                            class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6 "
                                                            style="padding-left: 27px;">View Task </a>
                                                    </div>
                                                    <div class="text-end">
                                                        @if ($main_task->task_case && ($profile->super_access == 1 || $profile->is_access_case_manager == 1))
                                                            <a href="/head_office/case/manager/view/{{ $main_task->task_case->id }}"
                                                                class="btn btn-outline-secondary btn-sm mt-3 ps-4 pe-4 py-1 fs-6 ">View Case</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center mt-4">No tasks found for this view.</p>
                                @endforelse
                            </div>
                            <div class="loading-indicator" style="display: none; text-align: center; padding: 20px;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">Loading more tasks...</p>
                            </div>
                            <div id="sent-sentinel" class="lazy-sentinel"></div>
                        </div>
                        <div id="Board-View-Sent" class="view-section Board-View" style="display: none;"> {{-- Changed ID to be unique --}}
                            <div class="" >
                                <div class="d-flex justify-content-between align-items-center p-3">
                                
                                
                                </div>
                                <div class="kanban-board p-0">
                                    <!-- To Do Column -->
                                    <div class="kanban-column" ondrop="drop(event, 'to do')" ondragover="allowDrop(event)">
                                        <h6>To do</h6>
                                        <div class="kanban-cards" id="todo-sent"> {{-- Changed ID to be unique --}}
                                            @forelse (($user_tasks ?? []) as $task) {{-- Using $user_tasks --}}
                                                @if (strtolower(str_replace('_', ' ', $task->status)) == 'to do')
                                                    <div class="kanban-card" draggable="true" ondragstart="drag(event)"
                                                        data-task-id="{{ $task->id }}">
                                                        <div class="d-flex justify-content-between">
                                                            <small class="text-primary">@ ACTION</small>
                                                            <small class="text-muted">AC-1</small>
                                                        </div>
                                                        <h6>{{ $task->title }}</h6>
                                                        <p class="text-muted">
                                                            <small>📅
                                                                {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                - <span
                                                                    class="pri-tag {{ $task->priority }}">{{ $task->priority }}</span></small>
                                                        </p>
                                                        <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-sent-' . $task->id))</span>
                                                    </div>
                                                @endif
                                            @empty
                                                <p class="text-center text-muted small">No tasks</p>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="kanban-column" ondrop="drop(event, 'in_progress')"
                                        ondragover="allowDrop(event)">
                                        <h6>In progress</h6>
                                        <div class="kanban-cards" id="in-progress-sent"> {{-- Changed ID to be unique --}}
                                            @forelse (($user_tasks ?? []) as $task) {{-- Using $user_tasks --}}
                                                @if (strtolower(str_replace('_', ' ', $task->status)) == 'in progress')
                                                    <div class="kanban-card" draggable="true" ondragstart="drag(event)"
                                                        data-task-id="{{ $task->id }}">
                                                        <div class="d-flex justify-content-between">
                                                            <small class="text-primary">@ ACTION</small>
                                                            <small class="text-muted">AC-1</small>
                                                        </div>
                                                        <h6>{{ $task->title }}</h6>
                                                        <p class="text-muted">
                                                            <small>📅
                                                                {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                - <span
                                                                    class="pri-tag {{ $task->priority }}">{{ $task->priority }}</span></small>
                                                        </p>
                                                        <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-sent-' . $task->id))</span>
                                                    </div>
                                                @endif
                                            @empty
                                                <p class="text-center text-muted small">No tasks</p>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="kanban-column" ondrop="drop(event, 'complete')"
                                        ondragover="allowDrop(event)">
                                        <h6>Complete</h6>
                                        <div class="kanban-cards" id="complete-sent"> {{-- Changed ID to be unique --}}
                                            @forelse (($user_tasks ?? []) as $task) {{-- Using $user_tasks --}}
                                                @if (strtolower(str_replace('_', ' ', $task->status)) == 'completed')
                                                    <div class="kanban-card" draggable="true" ondragstart="drag(event)"
                                                        data-task-id="{{ $task->id }}">
                                                        <div class="d-flex justify-content-between">
                                                            <small class="text-primary">@ ACTION</small>
                                                            <small class="text-muted">AC-1</small>
                                                        </div>
                                                        <h6>{{ $task->title }}</h6>
                                                        <p class="text-muted">
                                                            <small>📅
                                                                {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                - <span
                                                                    class="pri-tag {{ $task->priority }}">{{ $task->priority }}</span></small>
                                                        </p>
                                                        <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-sent-' . $task->id))</span>
                                                    </div>
                                                @endif
                                            @empty
                                                <p class="text-center text-muted small">No tasks</p>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="kanban-column" ondrop="drop(event, 'cant_do')" ondragover="allowDrop(event)">
                                        <h6>Can't do</h6>
                                        <div class="kanban-cards" id="cant-do-sent"> {{-- Changed ID to be unique --}}
                                            @forelse (($user_tasks ?? []) as $task) {{-- Using $user_tasks --}}
                                                @if (strtolower(str_replace('_', ' ', $task->status)) == 'cant do')
                                                    <div class="kanban-card" draggable="true" ondragstart="drag(event)"
                                                        data-task-id="{{ $task->id }}">
                                                        <div class="d-flex justify-content-between">
                                                            <small class="text-primary">@ ACTION</small>
                                                            <small class="text-muted">AC-1</small>
                                                        </div>
                                                        <h6>{{ $task->title }}</h6>
                                                        <p class="text-muted">
                                                            <small>📅
                                                                {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                - <span
                                                                    class="pri-tag {{ $task->priority }}">{{ $task->priority }}</span></small>
                                                        </p>
                                                        <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-sent-' . $task->id))</span>
                                                    </div>
                                                @endif
                                            @empty
                                                <p class="text-center text-muted small">No tasks</p>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ASSIGNED TO ME TAB PANEL --}}
                    <div class="tab-pane fade px-3" id="assigned_to_me_tab_panel" role="tabpanel" {{-- Changed ID --}}
                        aria-labelledby="assigned_to_me_tab"> {{-- Changed aria-labelledby --}}
                        <div id="Tiles-View-Assigned" class="view-section Tiles-View"> {{-- Changed ID to be unique --}}
                            <div class="assigned-to-me-list"> {{-- Changed class to be unique --}}
                            @forelse ((($tasks ?? collect())->take(10)) as $taskItem)


                                    @php
                                        // Check if there's an extended due date (dead_line_date or task_over_due_date)
                                        $extendedDueDate = null;
                                        if ($taskItem->dead_line_date) {
                                            $extendedDueDate = $taskItem->dead_line_date;
                                        } elseif ($taskItem->task_over_due_date) {
                                            $extendedDueDate = $taskItem->task_over_due_date;
                                        }
                                        
                                        // Use extended due date if available, otherwise use the original due date
                                        $effectiveDueDate = $extendedDueDate ? $extendedDueDate : $taskItem->due_date;
                                        
                                        // Calculate if overdue based on the effective due date
                                        $isOverdue = $effectiveDueDate && 
                                                    \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                                                    $taskItem->status !== 'completed';
                                    @endphp
                                    <div class="d-flex align-items-start my-1" style="position: relative;z-index:0;">
                                        <!-- Checkbox OUTSIDE -->
                                        <!-- <div class="me-2 mt-2">
                                            
                                            <input style="margin-top: 58px;" type="checkbox" class="task-select">
                                        </div> -->
                                        <!-- Main Card -->
                                        <div class="card w-100 p-3 task-card"
                                            data-id="{{ $taskItem->id }}"
                                            data-priority="{{ $taskItem->priority }}"
                                            data-status="{{ strtolower(str_replace('_', ' ', $taskItem->status)) }}"
                                            data-task-type="{{ $taskItem->shared_with == 'user' ? 'user' : ($taskItem->shared_with == 'location' ? 'location' : (isset($taskItem->case_id) ? 'case' : 'unknown')) }}"
                                                                                        data-due-date="{{ $effectiveDueDate ?? $taskItem->due_date }}"
                                                                                        data-deadline="{{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->diffInDays(now()) : '' }}">
                                            <div class="row text-muted" style="font-size: 0.9rem;">
                                                <!-- Section 1 -->
                                                <div style="margin-left: -32px;font-size: 15px;min-height:300px;" class="col-md-3 border-end pe-3 position-relative">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div class="text-black">
                                                            
                                                            @if (
                                                                    ($profile->super_access == 1 && $taskItem->shared_with == 'user') ||
                                                                    (
                                                                        $profile->super_access != 1 &&
                                                                        $profile->is_access_tasks == 1 &&
                                                                        $taskItem->shared_with == 'user' &&
                                                                        (
                                                                            $taskItem->ho_allocations->where('head_office_user_id', $head_office_user->id)->first() != null ||
                                                                            $taskItem->head_office_user_id == $head_office_user->id
                                                                        )
                                                                    )
                                                                )
                                                            <input type="checkbox" name="tasks_checkbox" value="{{ $taskItem->id }}" class="task-select">
                                                            @endif
                                                            Task #{{ $taskItem->id }}</div>
                                                        <div>
                                                            @if ($taskItem->shared_with == 'user')
                                                                <span style="font-size: 12px" class="badge bg-primary" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a user">User Task</span>
                                                            @elseif ($taskItem->shared_with == 'location')
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a site">Site Task</span>
                                                            @elseif(isset($taskItem->case_id))
                                                                <span style="font-size: 12px" class="badge bg-success" data-toggle="tooltip" data-bs-placement="top" title="This task is assigned to a case investigator">Case Task</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <h6 class="mt-2 fw-bold text-black" style="margin-left: 2px;">
                                                        {{ $taskItem->title ?? '[Task Name goes here]' }}
                                                    </h6>
                                                    <span style="font-size: 15px"
                                                        class="badge  pri-tag mt-2 {{ $taskItem->priority }}">{{ $taskItem->priority ?? 'No Priority' }}</span>
                                                    @if ($isOverdue)
                                                        <span style="font-size: 15px"
                                                            class="badge bg-danger mt-2">Overdue</span>
                                                    @endif



                                                
                                                </div>
                                                <!-- Section 2 -->
                                                <div class="col-md-4 border-end px-3">
                                                    @if (isset($taskItem->created_by) && isset($taskItem->created_by->user->logo))
                                                        <div class="mt-1">
                                                            <i class="bi bi-sun"></i>
                                                            <img class="img-profile rounded-circle" width="22"
                                                                height="22"
                                                                src="{{ optional(optional($taskItem->created_by)->user)->logo ?? asset('images/default-user.png') }}">
                                                            Created by:
                                                            <span class="fw-medium"
                                                                style="padding-left: 10px">{{ optional(optional($taskItem->created_by)->user)->name ?? 'Default Task' }}</span>
                                                        </div>
                                                    @endif
                                                    <div class="mt-1">
                                                        <i class="bi bi-sun"></i>
                                                        <svg width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
                                                                stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round"></path>
                                                        </svg>Created at:
                                                        {{ \Carbon\Carbon::parse($taskItem->created_at)->format('d M Y (D) h:i a') }}
                                                    </div>
                                                    <div class="mt-1"><i class="bi bi-clock-history"></i><svg
                                                            width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                                                                stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round"></path>
                                                        </svg> Last Updated {{ $taskItem->updated_at->diffForHumans() }}
                                                    </div>
                                                    <div style="font-size: 14px">
                                                        <svg width="20" height="20"
                                                            style="margin-top: -2px;margin-right: 5px" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke="rgb(103,105,121)"
                                                                d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z"
                                                                stroke="black" stroke-width="2" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                        </svg>
                                                                                Due Date:
                            {{ $effectiveDueDate ? \Carbon\Carbon::parse($effectiveDueDate)->format('d M Y (D) h:i a') : 'No Due Date' }}
                                                    </div>


                                                    @if (optional($taskItem->ho_allocations)->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -3px;margin-right: 5px" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)"
                                                                    d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                    stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                            Assigned To:
                                                            {{ optional($taskItem->ho_allocations)->pluck('head_office_user.user.name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if (optional($taskItem->loc_allocations)->count() > 0)
                                                        <div class="mt-1">
                                                            <i class="bi bi-bookmark"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -3px;margin-right: 5px" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke="rgb(103,105,121)"
                                                                    d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
                                                                    stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                                </svg>
                                                                Assigned To:
                                                                {{ optional($taskItem->loc_allocations)->load('head_office_location.location')->pluck('head_office_location.location.trading_name')->filter()->implode(', ') ?? '' }}
                                                        </div>
                                                    @endif
                                                    @if (isset($taskItem->task_case) && isset($taskItem->task_case->location_name))
                                                        <div class="mt-1">
                                                            <i class="bi bi-sun"></i>
                                                            <svg width="20" height="20"
                                                                style="margin-top: -4px;margin-right: 5px" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11 11H6.2C5.07989 11 4.51984 11 4.09202 11.218C3.71569 11.4097 3.40973 11.7157 3.21799 12.092C3 12.5198 3 13.0799 3 14.2V21M21 21V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H14.2C13.0799 3 12.5198 3 12.092 3.21799C11.7157 3.40973 11.4097 3.71569 11.218 4.09202C11 4.51984 11 5.0799 11 6.2V21M22 21H2M14.5 7H17.5M14.5 11H17.5M14.5 15H17.5" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                                </svg>Site Involved:
                                                                {{ optional($taskItem->task_case)->location_name ?? 'Unknown Site' }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <!-- Section 3 -->
                                                <div class="col-md-3 border-end px-3">
                                                    <br>
                                                    {!! $taskItem->description ?? 'No Description' !!}
                                                </div>
                                                <!-- Section 4 -->
                                                <div class="col-md-2 d-flex flex-column align-items-end "
                                                    style="margin-right: -10px">
                                                    <div class="mb-1">
                                                        @livewire('task-status', ['task' => $taskItem->id], key('task-status-' . $taskItem->id))
                                                    </div>
                                                    <div class="text-end ">
                                                        <a href="{{ route('tasks.show', $taskItem->id) }}"
                                                            class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6 "
                                                            style="padding-left: 27px;">View Task </a>
                                                    </div>
                                                    <div class="text-end">
                                                        @if ($taskItem->task_case && ($profile->super_access == 1 || $profile->is_access_case_manager == 1))
                                                            <a href="/head_office/case/manager/view/{{ $taskItem->task_case->id }}"
                                                                class="btn btn-outline-secondary btn-sm mt-3 ps-4 pe-4 py-1 fs-6 ">View Case</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center mt-4">No tasks found for this view.</p>
                                @endforelse
                            </div>
                            <div class="loading-indicator" style="display: none; text-align: center; padding: 20px;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">Loading more tasks...</p>
                            </div>
                            <div id="assigned-sentinel" class="lazy-sentinel"></div>
                        </div>
                        <div id="Board-View-Assigned" class="view-section Board-View" style="display: none;"> {{-- Changed ID to be unique --}}
                            <div class="" >
                                    <div class="d-flex justify-content-between align-items-center p-3">
                                    
                                    
                                    </div>
                                    <div class="kanban-board p-0">
                                        <!-- To Do Column -->
                                        <div class="kanban-column" ondrop="drop(event, 'to do')" ondragover="allowDrop(event)">
                                            <h6>To do</h6>
                                            <div class="kanban-cards" id="todo-assigned"> {{-- Changed ID to be unique --}}
                                                @forelse (($tasks ?? []) as $task) {{-- Using $tasks --}}
                                                    @if ($task->status == 'to do')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span></small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-assigned-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'in_progress')" ondragover="allowDrop(event)">
                                            <h6>In progress</h6>
                                            <div class="kanban-cards" id="in-progress-assigned"> {{-- Changed ID to be unique --}}
                                                @forelse (($tasks ?? []) as $task) {{-- Using $tasks --}}
                                                    @if ($task->status == 'in_progress')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span></small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-assigned-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'complete')" ondragover="allowDrop(event)">
                                            <h6>Complete</h6>
                                            <div class="kanban-cards" id="complete-assigned"> {{-- Changed ID to be unique --}}
                                                @forelse (($tasks ?? []) as $task) {{-- Using $tasks --}}
                                                    @if ($task->status == 'Completed')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span></small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-assigned-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>

                                        <div class="kanban-column" ondrop="drop(event, 'cant_do')" ondragover="allowDrop(event)">
                                            <h6>Can't do</h6>
                                            <div class="kanban-cards" id="cant-do-assigned"> {{-- Changed ID to be unique --}}
                                                @forelse (($tasks ?? []) as $task) {{-- Using $tasks --}}
                                                    @if (strtolower(str_replace('_', ' ', $task->status)) == 'cant do')
                                                        <div class="kanban-card" draggable="true" ondragstart="drag(event)" data-task-id="{{ $task->id }}">
                                                            <div class="d-flex justify-content-between">
                                                                <small class="text-primary">@ ACTION</small>
                                                                <small class="text-muted">AC-1</small>
                                                            </div>
                                                            <h6>{{ $task->title }}</h6>
                                                            <p class="text-muted">
                                                                <small>📅
                                                                    {{ $task->updated_at ? $task->updated_at->diffForHumans() : 'Unknown Date' }}
                                                                    - <span class="pri-tag {{$task->priority}}">{{ $task->priority }}</span></small>
                                                            </p>
                                                            <span>@livewire('task-status', ['task' => $task->id], key('task-status-board-assigned-' . $task->id))</span>
                                                        </div>
                                                    @endif
                                                @empty
                                                    <p class="text-center text-muted small">No tasks</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <!-- Calendar View Placeholder -->
            <div id="calendar-view-placeholder"></div>
        </div>
    </div>
    <div id="draggable" class="bottom-nav position-fixed display_cases_nav" style="z-index: 10; display: none;" aria-describedby="drag" >
        <div class="left-side">
            <div class="info-wrapper">
                <div class="selected-show">
                    <h5 id="count">0</h5>
                </div>
                <div class="info-heading" style="max-width: 180px;overflow:hidden;">
                    <p>Items Selected</p>
                    <div class="dots-wrapper"></div>
                </div>
            </div>
            <div style="max-width: 570px;overflow-x:scroll;height:100%;" class="custom-drag-scroll">
                <div class="btn-wrapper" style="width: 1200px;justify-content:flex-start;">
                    <button id='reassign-btn-bar' class="bar-btn" data-bs-toggle="modal" data-bs-target="#reassign_modal">
                        <img src="{{ asset('images/shield-off.svg') }}" alt="icon">
                        <p>Reassign</p>
                    </button>
                </div>
            </div>
        </div>
        <button class="drag-btn">
            <img src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
            <img style="margin-top:-15px;" src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
        </button>
    </div>

    <div class="modal fade" id="reassign_modal" tabindex="-1" aria-labelledby="reassign_modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="reassign_modalLabel">Reassign</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="reassign-content-wrapper">
                <form action="{{ route('head_office.reassign_tasks') }}" method="post" id="reassign-form">
                    @csrf
                    <p>Select users to reassign the task to</p>
                    <input type="hidden" name="task_ids" id="task_ids">
                    <div class="w-100">
                        <select name="users[]" id="users" class="form-select user-select-2" multiple>
                            @if (isset($head_office))
                                @foreach ($head_office->users as $ho_user)
                                    <option value="{{ $ho_user->id }}">{{ $ho_user->user->name }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <button type="button" id="reassign-btn" class="primary-btn mt-2">Reassign</button>
                </form>
              </div>
            </div>
        </div>
        </div>
    </div>

    <div class="modal fade" id="reassignConfirmationModal" tabindex="-1" aria-labelledby="reassignConfirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="alert alert-warning" role="alert">
                        <strong>Warning:</strong> You are about to reassign <span id="confirmTaskCount" class="fw-bold">0</span> task(s) to the selected user(s).
                    </div>
                    
                    <div id="reassignSummaryContent">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" id="confirmReassignBtn">
                        <i class="bi bi-check-circle me-2"></i>Confirm Reassignment
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Filter Modal -->
    <div class="modal fade" id="customFilterModal" tabindex="-1" aria-labelledby="customFilterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customFilterModalLabel">Create Custom Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="customFilterForm">
                        <input type="hidden" id="filterIdInput" name="filter_id">
                        
                        <!-- Filter Name -->
                        <div class="mb-3">
                            <label for="filterNameInput" class="form-label">Filter Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="filterNameInput" name="filter_name" placeholder="e.g., My High Priority Tasks" required>
                        </div>

                        <hr>
                        <h6>Filter Criteria</h6>

                        <!-- Priority Filter -->
                        <div class="mb-3">
                            <label class="form-label">Priority</label>
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input modal-priority-filter" type="checkbox" value="urgent" id="modalPriorityUrgent">
                                    <label class="form-check-label" for="modalPriorityUrgent">Urgent</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-priority-filter" type="checkbox" value="high" id="modalPriorityHigh">
                                    <label class="form-check-label" for="modalPriorityHigh">High</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-priority-filter" type="checkbox" value="medium" id="modalPriorityMedium">
                                    <label class="form-check-label" for="modalPriorityMedium">Medium</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-priority-filter" type="checkbox" value="low" id="modalPriorityLow">
                                    <label class="form-check-label" for="modalPriorityLow">Low</label>
                                </div>
                            </div>
                        </div>

                        <!-- Task Type Filter -->
                        <div class="mb-3">
                            <label class="form-label">Task Type</label>
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input modal-task-type-filter" type="checkbox" value="user" id="modalTaskTypeUser">
                                    <label class="form-check-label" for="modalTaskTypeUser">User Task</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-task-type-filter" type="checkbox" value="location" id="modalTaskTypeLocation">
                                    <label class="form-check-label" for="modalTaskTypeLocation">Site Task</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-task-type-filter" type="checkbox" value="case" id="modalTaskTypeCase">
                                    <label class="form-check-label" for="modalTaskTypeCase">Case Task</label>
                                </div>
                            </div>
                        </div>

                        <!-- Status Filter -->
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input modal-status-filter" type="checkbox" value="To do" id="modalStatusTodo">
                                    <label class="form-check-label" for="modalStatusTodo">To do</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-status-filter" type="checkbox" value="In progress" id="modalStatusInProgress">
                                    <label class="form-check-label" for="modalStatusInProgress">In Progress</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-status-filter" type="checkbox" value="Completed" id="modalStatusCompleted">
                                    <label class="form-check-label" for="modalStatusCompleted">Completed</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-status-filter" type="checkbox" value="Cant do" id="modalStatusCantDo">
                                    <label class="form-check-label" for="modalStatusCantDo">Can't do</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input modal-status-filter" type="checkbox" value="Close" id="modalStatusClose">
                                    <label class="form-check-label" for="modalStatusClose">Close</label>
                                </div>
                            </div>
                        </div>

                        <!-- Search Query -->
                        <div class="mb-3">
                            <label for="modalSearchQuery" class="form-label">Search Query (optional)</label>
                            <input type="text" class="form-control" id="modalSearchQuery" name="search_query" placeholder="Enter keywords to filter tasks">
                            <small class="form-text text-muted">You can add multiple keywords separated by commas</small>
                        </div>

                        <!-- Date Filters -->
                        <div class="mb-3">
                            <label class="form-label">Due Date (optional)</label>
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label for="modalStartDate" class="form-label small">Start Date</label>
                                    <input type="date" class="form-control" id="modalStartDate" name="start_date">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="modalEndDate" class="form-label small">End Date</label>
                                    <input type="date" class="form-control" id="modalEndDate" name="end_date">
                                </div>
                            </div>
                        </div>

                        <!-- Created By Filter -->
                        <div class="mb-3">
                            <label for="modalCreatedByFilter" class="form-label">Created By (optional)</label>
                            <select class="form-control" id="modalCreatedByFilter" multiple size="5">
                                @php $userCount = 0; @endphp
                                @foreach($head_office->users as $user)
                                    @if($user->user)
                                        @php $userCount++; @endphp
                                        <option value="{{ $user->user->id }}">{{ $user->user->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                            <small class="text-muted">{{ $userCount }} users available</small>
                        </div>

                        <!-- Assigned To Filter -->
                        <div class="mb-3">
                            <label for="modalAssignedToFilter" class="form-label">Assigned To (optional)</label>
                            <select class="form-control" id="modalAssignedToFilter" multiple size="5">
                                @php $assignCount = 0; @endphp
                                <optgroup label="Users">
                                    @foreach($head_office->users as $hoUser)
                                        @if($hoUser->user)
                                            @php $assignCount++; @endphp
                                            <option value="user_{{ $hoUser->user->id }}">{{ $hoUser->user->name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                                <optgroup label="Sites">
                                    @foreach($head_office->locations as $location)
                                        @if($location->location)
                                            @php $assignCount++; @endphp
                                            <option value="location_{{ $location->location->id }}">{{ $location->location->trading_name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            <small class="text-muted">{{ $assignCount }} options available</small>
                        </div>

                        <!-- Deadline Slider -->
                        <div class="mb-3">
                            <label for="modalDeadlineSlider" class="form-label">Max Days Remaining</label>
                            <input type="range" class="form-range" id="modalDeadlineSlider" min="1" max="30" step="1" value="30">
                            <span id="modalDeadlineValue">30 Days</span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCustomFilterBtn">Save Filter</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
<script>
    $(document).ready(function() {
            $('.user-select-2').select2({
                dropdownParent: $('#reassign_modal .modal-content'),
                width:'100%'
            })
    })
    
    // Initialize Select2 when modal is shown
    $('#customFilterModal').on('shown.bs.modal shown', function () {
        if (!$('#modalCreatedByFilter').hasClass('select2-hidden-accessible')) {
            $('#modalCreatedByFilter').select2({
                dropdownParent: $('body'),
                placeholder: 'Select users...',
                allowClear: true,
                width: '100%'
            });
        }
        
        if (!$('#modalAssignedToFilter').hasClass('select2-hidden-accessible')) {
            $('#modalAssignedToFilter').select2({
                dropdownParent: $('body'),
                placeholder: 'Select users or sites...',
                allowClear: true,
                width: '100%'
            });
        }
    });

    $(document).on('change', '#all_task_tab_panel input[name="all_tasks_checkbox"]', function() {
        if ($('#select-all-tasks').is(':checked') && !$(this).is(':checked')) {
            $('#select-all-tasks').prop('checked', false);
            $('#select-all-tasks-status').text('');
        }
    });

    $(document).on('change', '#sent_by_me_panel input[name="tasks_checkbox"]', function() {
        if ($('#select-all-user-tasks').is(':checked') && !$(this).is(':checked')) {
            $('#select-all-user-tasks').prop('checked', false);
            $('#select-all-status').text('');
        }
    });

    $('#reassign-btn').on('click', function(e) {
        e.preventDefault();
        
        var taskIds = [];
        
        if (window.allSelectedTaskIds && window.allSelectedTaskIds.length > 0) {
            taskIds = window.allSelectedTaskIds;
        } else {
            $('#all_task_tab_panel input[name="all_tasks_checkbox"]:checked').each(function() {
                taskIds.push($(this).val());
            });
            
            $('#sent_by_me_panel input[name="tasks_checkbox"]:checked').each(function() {
                taskIds.push($(this).val());
            });
            
            $('#assigned_to_me_tab_panel input[name="tasks_checkbox"]:checked').each(function() {
                taskIds.push($(this).val());
            });
        }
        
        if (taskIds.length === 0) {
            alert('Please select at least one task to reassign.');
            return;
        }

        var selectedUsers = $('#users').val();
        if (!selectedUsers || selectedUsers.length === 0) {
            alert('Please select at least one user to reassign tasks to.');
            return;
        }

        var assignmentSummary = [];
        selectedUsers.forEach(function(userId) {
            var userName = $('#users option[value="' + userId + '"]').text();
            assignmentSummary.push({
                name: userName,
                count: taskIds.length
            });
        });

        $('#confirmTaskCount').text(taskIds.length);
        
        var summaryHtml = '<table class="table table-sm"><thead><tr><th>User</th><th>Tasks to Assign</th></tr></thead><tbody>';
        assignmentSummary.forEach(function(item) {
            summaryHtml += '<tr><td><i class="bi bi-person-fill me-2"></i>' + item.name + '</td><td><span class="badge bg-primary">' + item.count + ' task(s)</span></td></tr>';
        });
        summaryHtml += '</tbody></table>';
        
        $('#reassignSummaryContent').html(summaryHtml);
        
        $('#reassign_modal').modal('hide');
        $('#reassignConfirmationModal').modal('show');
        
        $('#task_ids').val(JSON.stringify(taskIds));
    });

    $('#confirmReassignBtn').on('click', function(e) {
        e.preventDefault();
        
        $('#reassign-form').submit();
        
        $('#reassignConfirmationModal').modal('hide');
    });
</script>
    <script src="{{ asset('admin_assets/js/infinite-scroll.pkgd.min.js') }}"></script>
    <!-- FullCalendar CSS & JS -->
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <script>
    var currentPage = {
        all: 1,
        sent: 1,
        assigned: 1
    };
    var loading = {
        all: false,
        sent: false,
        assigned: false
    };
    var hasMore = {
        all: true,
        sent: true,
        assigned: true
    };
    
    // Blade to JS: tasks for calendar, per tab
    // Ensure these variables are always arrays, even if empty
    var allTasks = [
        @foreach(($all_tasks ?? []) as $task)
        @php $isOverdue = $task->due_date && \Carbon\Carbon::parse($task->due_date)->isPast(); @endphp
        {
            title: "{{ addslashes($task->title ?? 'No Title') }}",
            due_date: "{{ $task->due_date ?? '' }}",
            created_at: "{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('Y-m-d') : '' }}",
            url: "{{ route('tasks.show', $task->id) }}",
            isOverdue: {{ $isOverdue ? 'true' : 'false' }}
        },
        @endforeach
    ];
    var userTasks = [
        @foreach(($user_tasks ?? []) as $task) {{-- Added null coalescing for safety --}}
        @php $isOverdue = $task->due_date && \Carbon\Carbon::parse($task->due_date)->isPast(); @endphp
        {
            title: "{{ addslashes($task->title ?? 'No Title') }}",
            due_date: "{{ $task->due_date ?? '' }}",
            created_at: "{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('Y-m-d') : '' }}",
            url: "{{ route('tasks.show', $task->id) }}",
            isOverdue: {{ $isOverdue ? 'true' : 'false' }}
        },
        @endforeach
    ];
    var assignedTasks = [
        @foreach(($tasks ?? []) as $task) {{-- Added null coalescing for safety --}}
        @php $isOverdue = $task->due_date && \Carbon\Carbon::parse($task->due_date)->isPast(); @endphp
        {
            title: "{{ addslashes($task->title ?? 'No Title') }}",
            due_date: "{{ $task->due_date ?? '' }}",
            created_at: "{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('Y-m-d') : '' }}",
            url: "{{ route('tasks.show', $task->id) }}",
            isOverdue: {{ $isOverdue ? 'true' : 'false' }}
        },
        @endforeach
    ];

    // Helper to get current tab
    function getCurrentTab() {
        // Corrected tab IDs
        if ($('#sent_by_me_tab').hasClass('active')) return 'sent_by_me';
        if ($('#assigned_to_me_tab').hasClass('active')) return 'assigned_to_me'; // Corrected ID
        return 'all_tasks';
    }

    function getCalendarTasks(dateType) {
        var today = new Date().toISOString().slice(0, 10);
        var tab = getCurrentTab();
        var baseTasks = []; // Initialize as empty array

        // Select correct task array based on active tab
        if (tab === 'sent_by_me') {
            baseTasks = userTasks;
        } else if (tab === 'assigned_to_me') {
            baseTasks = assignedTasks;
        } else {
            baseTasks = allTasks;
        }
        
        var tasks = [];
        baseTasks.forEach(function(task) {
            if (dateType === 'all') {
                if (task.due_date) {
                    tasks.push({
                        title: task.title,
                        start: task.due_date,
                        url: task.url,
                        isOverdue: task.isOverdue,
                        type: 'due_date'
                    });
                }
                if (task.created_at) {
                    tasks.push({
                        title: task.title,
                        start: task.created_at,
                        url: task.url,
                        isOverdue: false,
                        type: 'created_at'
                    });
                }
            } else if (dateType === 'due_date' && task.due_date) {
                tasks.push({
                    title: task.title,
                    start: task.due_date,
                    url: task.url,
                    isOverdue: task.isOverdue,
                    type: 'due_date'
                });
            } else if (dateType === 'created_at' && task.created_at) {
                tasks.push({
                    title: task.title,
                    start: task.created_at,
                    url: task.url,
                    isOverdue: false,
                    type: 'created_at'
                });
            }
        });
        return tasks.filter(function(t) { return t.start; });
    }
    function daysBetween(date1, date2) {
        // date1, date2: JS Date objects, returns integer days (date1 - date2)
        let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
        let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
        return Math.round((d1 - d2) / (1000 * 60 * 60 * 24));
    }
    function daysBetweenInclusive(date1, date2) {
        // date1: due date or created date, date2: today
        let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
        let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
        return Math.floor((d1 - d2) / (1000 * 60 * 60 * 24)) + 1;
    }
    function daysBetweenExclusive(date1, date2) {
        // date1: due date, date2: today (both as Date objects)
        let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
        let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
        return Math.floor((d1 - d2) / (1000 * 60 * 60 * 24));
    }
    $(document).ready(function () {
        let selectedTasks = new Set();
        let isDragging = false, startX, startY, offsetX, offsetY;

        $('#createdByFilter').select2({
            placeholder: 'Select creators...',
            allowClear: true,
            width: '100%'
        });
        
        $('#assignedToFilter').select2({
            placeholder: 'Select assignees...',
            allowClear: true,
            width: '100%'
        });


        $(document).on('click', '#select-all-tasks', function() {
            var isChecked = $(this).prop('checked');
            
            if (isChecked) {
                $('#select-all-tasks-status').text('Loading...');
                
                let params;
                if (window.activeCustomFilterData) {
                    const filterData = window.activeCustomFilterData;
                    params = {
                        tab: 'all',
                        search: filterData.search_query || '',
                        priorities: filterData.priorities || [],
                        taskTypes: filterData.task_types || [],
                        statuses: filterData.statuses || [],
                        createdBy: filterData.created_by || [],
                        assignedTo: filterData.assigned_to || [],
                        specificDate: '',
                        startDate: filterData.start_date || '',
                        endDate: filterData.end_date || '',
                        maxDeadline: filterData.max_deadline || '30'
                    };
                } else {
                    params = {
                        tab: 'all',
                        search: $('#serchInput').val() || '',
                        priorities: $('.priority-filter:checked').map(function(){return $(this).val();}).get(),
                        taskTypes: $('.task-type-filter:checked').map(function(){return $(this).val();}).get(),
                        statuses: $('.status-filter:checked').map(function(){return $(this).val();}).get(),
                        createdBy: $('#createdByFilter').val() || [],
                        assignedTo: $('#assignedToFilter').val() || [],
                        specificDate: $('#specificDate').val() || '',
                        startDate: $('#startDate').val() || '',
                        endDate: $('#endDate').val() || '',
                        maxDeadline: $('#deadlineSlider').val() || ''
                    };
                }
                
                $.ajax({
                    url: '{{ route("tasks.get_all_task_ids") }}',
                    type: 'GET',
                    data: params,
                    success: function(response) {
                        if (response.success && response.task_ids) {
                            window.allSelectedTaskIds = response.task_ids;
                            
                            var checkboxes = $('input[name="all_tasks_checkbox"]');
                            
                            selectedTasks.clear();
                            response.task_ids.forEach(function(id) {
                                selectedTasks.add(parseInt(id));
                            });
                            
                            checkboxes.each(function() {
                                $(this).prop('checked', true).trigger('change');
                            });
                            
                            $('#select-all-tasks-status').text('(' + response.task_ids.length + ' tasks selected across all pages)');
                            updateTaskbar();
                        }
                    },
                    error: function(xhr) {
                        alert('Failed to fetch all tasks');
                        $('#select-all-tasks').prop('checked', false);
                        $('#select-all-tasks-status').text('');
                    }
                });
            } else {
                window.allSelectedTaskIds = null;
                $('input[name="all_tasks_checkbox"]').each(function() {
                    $(this).prop('checked', false).trigger('change');
                });
                $('#select-all-tasks-status').text('');
                selectedTasks.clear();
                updateTaskbar();
            }
        });
 
        $(document).on('click', '#select-all-user-tasks', function() {
            var isChecked = $(this).prop('checked');
            
            if (isChecked) {
                $('#sent_by_me_panel input[type="checkbox"][name="tasks_checkbox"]').prop('checked', true);
                
                selectedTasks.clear();
                $('#sent_by_me_panel input[type="checkbox"][name="tasks_checkbox"]').each(function() {
                    var taskId = parseInt($(this).val());
                    if (taskId) {
                        selectedTasks.add(taskId);
                    }
                });
                
                var count = $('#sent_by_me_panel input[type="checkbox"][name="tasks_checkbox"]').length;
                $('#select-all-status').text('(' + count + ' tasks selected)');
                updateTaskbar();
            } else {
                $('#sent_by_me_panel input[type="checkbox"][name="tasks_checkbox"]').prop('checked', false);
                $('#select-all-status').text('');
                selectedTasks.clear();
                updateTaskbar();
            }
        });
 
        var allTasksObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length && $('#select-all-tasks').is(':checked') && window.allSelectedTaskIds) {
                    $('#all_task_tab_panel input[name="all_tasks_checkbox"]:not(:checked)').each(function() {
                        $(this).prop('checked', true);
                    });
                    updateTaskbar();
                }
            });
        });
 
        if ($('#all-tasks-list').length) {
            allTasksObserver.observe($('#all-tasks-list')[0], { childList: true, subtree: true });
        }
        
        // ============== Lazy Loading State ==============
        // Lazy loading only works for Tiles-View (list view), not for Board or Calendar views
        lazy = {
            all: { page: 1, loading: false, done: false },
            sent: { page: 1, loading: false, done: false },
            assigned: { page: 1, loading: false, done: false }
        };
        // ✅ Master filter function - now triggers backend search
        function filterTasks() {
            // Reset pagination when filters change
            const tab = currentTabKey();
            currentPage[tab] = 1;
            hasMore[tab] = true;
            
            $('#select-all-tasks').prop('checked', false);
            $('#select-all-tasks-status').text('');
            window.allSelectedTaskIds = null;
            
            // Clear current content and load filtered results
            loadTasks(true);
        }
        
        // Make filterTasks globally accessible
        window.filterTasks = filterTasks;
        
        // ✅ Load tasks from backend
        function loadTasks(reset = false) {
            const tab = currentTabKey();
            if (loading[tab] || (!hasMore[tab] && !reset)) return;
            
            loading[tab] = true;
            
            // Show loading indicator
            const container = getTaskContainer(tab);
            if (reset) {
                container.html('<div class="text-center py-4"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>');
            } else {
                container.append('<div class="text-center py-3" id="loading-indicator"><div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div> Loading more tasks...</div>');
            }
            
            // Gather filter parameters
            // If custom filter is active, use its data instead of checkboxes
            let params;
            if (window.activeCustomFilterData) {
                console.log('Using active custom filter data:', window.activeCustomFilterData);
                const filterData = window.activeCustomFilterData;
                params = {
                    tab: tab,
                    page: reset ? 1 : currentPage[tab],
                    search: filterData.search_query || '',
                    priorities: filterData.priorities || [],
                    taskTypes: filterData.task_types || [],
                    statuses: filterData.statuses || [],
                    createdBy: filterData.created_by || [],
                    assignedTo: filterData.assigned_to || [],
                    specificDate: '',
                    startDate: filterData.start_date || '',
                    endDate: filterData.end_date || '',
                    maxDeadline: filterData.max_deadline || '30'
                };
            } else {
                // Use checkbox UI values
                params = {
                    tab: tab,
                    page: reset ? 1 : currentPage[tab],
                    search: $('#serchInput').val() || '',
                    priorities: $('.priority-filter:checked').map(function(){return $(this).val();}).get(),
                    taskTypes: $('.task-type-filter:checked').map(function(){return $(this).val();}).get(),
                    statuses: $('.status-filter:checked').map(function(){return $(this).val();}).get(),
                    createdBy: $('#createdByFilter').val() || [],
                    assignedTo: $('#assignedToFilter').val() || [],
                    specificDate: $('#specificDate').val() || '',
                    startDate: $('#startDate').val() || '',
                    endDate: $('#endDate').val() || '',
                    maxDeadline: $('#deadlineSlider').val() || ''
                };
            }
            
            // DEBUG: Check what we're actually collecting
            console.log('=== CHECKBOX DEBUG ===');
            console.log('Total priority checkboxes found:', $('.priority-filter').length);
            console.log('Priority checkboxes CHECKED:', $('.priority-filter:checked').length);
            console.log('Priority values:', params.priorities);
            console.log('Total taskType checkboxes found:', $('.task-type-filter').length);
            console.log('TaskType checkboxes CHECKED:', $('.task-type-filter:checked').length);
            console.log('TaskType values:', params.taskTypes);
            console.log('Total status checkboxes found:', $('.status-filter').length);
            console.log('Status checkboxes CHECKED:', $('.status-filter:checked').length);
            console.log('Status values:', params.statuses);
            console.log('=== END CHECKBOX DEBUG ===');
            
            console.log('Loading tasks for tab:', tab, 'params:', params);
            
            $.ajax({
                url: "{{ route('head_office.tasks.load_more') }}",
                method: 'GET',
                data: params,
                timeout: 30000, // 30 second timeout
                success: function(response) {
                    loading[tab] = false;
                    $('#loading-indicator').remove();
                    
                    console.log('Tasks loaded successfully for tab:', tab, 'response length:', response ? response.length : 0);
                    
                    if (!response || response.trim() === '') {
                        hasMore[tab] = false;
                        if (reset) {
                            container.html('<div class="text-center py-4 text-muted">No tasks found matching your criteria.</div>');
                        } else {
                            container.append('<div class="text-center py-3 text-muted">No more tasks to load</div>');
                        }
                        return;
                    }
                    
                    if (reset) {
                        container.html(response);
                        currentPage[tab] = 1;
                    } else {
                        container.append(response);
                        currentPage[tab]++;
                    }
                    
                    // i dont know merry pass same task duplicate hoo rahy thy iss lie mai nai ye code likha hai
                    let taskIds = [];
                    let duplicates = [];
                    container.find('.task-card').each(function() {
                        let taskId = $(this).data('id');
                        if (taskIds.includes(taskId)) {
                            duplicates.push(taskId);
                        } else {
                            taskIds.push(taskId);
                        }
                    });
                    
                    if (duplicates.length > 0) {
                        console.warn('Duplicate task IDs found:', duplicates);
                        console.warn('Total tasks in container:', taskIds.length, 'Unique tasks:', new Set(taskIds).size);
                        
                        // Remove duplicate task cards
                        let seenIds = new Set();
                        container.find('.task-card').each(function() {
                            let taskId = $(this).data('id');
                            if (seenIds.has(taskId)) {
                                console.log('Removing duplicate task card:', taskId);
                                $(this).remove();
                            } else {
                                seenIds.add(taskId);
                            }
                        });
                    }
                    
                    // Reinitialize Livewire components
                    if (typeof Livewire !== 'undefined') {
                        setTimeout(function() {
                            Livewire.rescan();
                        }, 100);
                    }
                },
                error: function(xhr, status, error) {
                    loading[tab] = false;
                    $('#loading-indicator').remove();
                    console.error('Error loading tasks for tab:', tab, 'status:', status, 'error:', error);
                    
                    let errorMessage = 'Error loading tasks.';
                    if (status === 'timeout') {
                        errorMessage = 'Request timed out. Please try again.';
                    } else if (xhr.status === 500) {
                        errorMessage = 'Server error. Please try again later.';
                    } else if (xhr.status === 404) {
                        errorMessage = 'Page not found. Please refresh the page.';
                    }
                    
                    if (reset) {
                        container.html(`<div class="text-center py-4 text-danger">${errorMessage} <button onclick="loadTasks(true)" class="btn btn-sm btn-outline-danger">Retry</button></div>`);
                    } else {
                        container.append(`<div class="text-center py-3 text-danger">${errorMessage} <button onclick="loadTasks(false)" class="btn btn-sm btn-outline-danger">Retry</button></div>`);
                    }
                }
            });
        }
        
        // ✅ Get task container for current tab
        function getTaskContainer(tab) {
            if (tab === 'sent') return $('.sent-by-me-list');
            if (tab === 'assigned') return $('.assigned-to-me-list');
            return $('#all-tasks-list');
        }
        // ✅ Bind filter on all input changes
        $('.priority-filter, .task-type-filter, .status-filter, .stage-filter, #specificDate, #startDate, #endDate').on('change', function() {
            filterTasks();
        });
        
        $('#createdByFilter, #assignedToFilter').on('change', function() {
            filterTasks();
        });
        
        $('#deadlineSlider').on('input', function () {
            $('#deadlineValue').text($(this).val() + ' Days');
            filterTasks();
        });
        
        // ✅ Search functionality
        function renderSearchChips() {
            const searchValue = $('#serchInput').val().trim();
            const container = $('#searchQueryChips');
            
            container.empty();
            
            if (!searchValue) {
                container.hide();
                return;
            }
            
            const searchTerms = searchValue.split(',').map(t => t.trim()).filter(t => t);
            
            if (searchTerms.length === 0) {
                container.hide();
                return;
            }
            
            container.show();
            
            searchTerms.forEach(function(term) {
                const chip = $(`
                    <div class="search-chip">
                        <span>${term}</span>
                        <span class="remove-search-term" data-term="${term}">&times;</span>
                    </div>
                `);
                container.append(chip);
            });
        }
        
        let searchTimeout;
        $('#serchInput').on('keyup', function(){
            renderSearchChips();
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                filterTasks();
            }, 500); // Debounce search
        });
        
        // Remove search term chip
        $(document).on('click', '.remove-search-term', function() {
            const termToRemove = $(this).data('term');
            const currentSearch = $('#serchInput').val();
            const terms = currentSearch.split(',').map(t => t.trim()).filter(t => t && t !== termToRemove);
            $('#serchInput').val(terms.join(', '));
            renderSearchChips();
            filterTasks();
        });
        
        // ✅ Search button click
        $('#searchBtn').on('click', function() {
            filterTasks();
        });
        
        // ✅ Enter key in search input
        $('#serchInput').on('keypress', function(e) {
            if (e.which === 13) { // Enter key
                filterTasks();
            }
        });
        
        $('#resetFilters').on('click', function (e) {
            e.preventDefault();
            
            // Reset all checkboxes to checked (show all by default)
            $('.priority-filter, .task-type-filter, .status-filter, .stage-filter').prop('checked', true);
            
            // Clear date filters and search
            $('#specificDate, #startDate, #endDate').val('');
            $('#deadlineSlider').val(30);
            $('#deadlineValue').text('30 Days');
            $('#serchInput').val('');
            
            filterTasks();
        });
        
        // ✅ Infinite scroll implementation
        function checkScroll() {
            const tab = currentTabKey();
            if (loading[tab] || !hasMore[tab]) return;
            
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;
            
            // Trigger when user is 200px from bottom
            if (scrollTop + windowHeight >= docHeight - 200) {
                loadTasks(false);
            }
        }
        
        // Throttled scroll event
        let scrollTimer = null;
        $(window).on('scroll', function() {
            if (scrollTimer !== null) {
                clearTimeout(scrollTimer);
            }
            scrollTimer = setTimeout(checkScroll, 100);
        });
        
        // Also check on window resize
        $(window).on('resize', checkScroll);
        // ✅ Run filter on Livewire update
        Livewire.hook('message.processed', () => {
            // Only re-filter if we're not currently loading
            const tab = currentTabKey();
            if (!loading[tab]) {
                // Re-apply filters to current content
                applyFiltersToCurrentContent();
            }
        });
        
        // ✅ Optimize Livewire updates to prevent full page re-renders
        Livewire.hook('message.sent', (message, component) => {
            // Only update the specific component that changed
            if (message.updateQueue && message.updateQueue.length > 0) {
                // Prevent full page refresh for task status updates
                message.updateQueue = message.updateQueue.filter(update => {
                    return !update.type || update.type !== 'fullPage';
                });
            }
        });
        
        // ✅ Handle task status updates efficiently
        Livewire.hook('message.processed', (message, component) => {
            // If this is a task status update, only update that specific component
            if (message && message.fingerprint && message.fingerprint.name === 'task-status') {
                // Prevent full page re-render for task status components
                const taskId = message.fingerprint.memo.task;
                const taskComponent = document.querySelector(`[wire\\:key*="task-status-${taskId}"]`);
                if (taskComponent) {
                    // Only update this specific component
                    taskComponent.style.pointerEvents = 'none';
                    setTimeout(() => {
                        taskComponent.style.pointerEvents = 'auto';
                    }, 100);
                }
            }
        });
        
        // ✅ Apply filters to current content without reloading
        function applyFiltersToCurrentContent() {
            let searchText = $('#serchInput').val()?.toLowerCase().trim();
            let selectedPriorities = $('.priority-filter:checked').map(function () { return $(this).val(); }).get();
            let selectedTaskTypes = $('.task-type-filter:checked').map(function () { return $(this).val(); }).get();
            let selectedStatuses = $('.status-filter:checked').map(function () {
                return $(this).val().toLowerCase().trim();
            }).get();
            let specificDate = $('#specificDate').val();
            let startDate = $('#startDate').val();
            let endDate = $('#endDate').val();
            let maxDeadline = parseInt($('#deadlineSlider').val() || "999");

            // Get the currently active tab's content area
            let activeTabContentId = $('.tab-pane.show.active').attr('id');
            let currentViewSection = $('#' + activeTabContentId + ' .view-section.Tiles-View');

            // Apply filtering to visible .task-card elements
            currentViewSection.find('.task-card').each(function () {
                let taskText = $(this).text().toLowerCase().trim();
                let taskPriority = ($(this).data('priority') || '').toString().toLowerCase().trim();
                let taskType = ($(this).data('task-type') || '').toString().toLowerCase().trim();
                let taskStatus = ($(this).data('status') || '').toString().toLowerCase().trim();
                let taskDueDate = $(this).data('due-date');
                let deadlineDays = parseInt($(this).data('deadline'));
                
                let statusMatch = selectedStatuses.length === 0 || selectedStatuses.includes(taskStatus);
                let priorityMatch = selectedPriorities.length === 0 || selectedPriorities.includes(taskPriority);
                let taskTypeMatch = selectedTaskTypes.length === 0 || selectedTaskTypes.includes(taskType);
                let deadlineMatch = isNaN(deadlineDays) || deadlineDays <= maxDeadline;
                let dateMatch = true;
                if (specificDate) {
                    dateMatch = taskDueDate === specificDate;
                } else if (startDate && endDate) {
                    dateMatch = taskDueDate >= startDate && taskDueDate <= endDate;
                }
                let searchMatch = !searchText || taskText.includes(searchText);
                let show = statusMatch && priorityMatch && taskTypeMatch && deadlineMatch && dateMatch && searchMatch;
                $(this).toggle(show);
            });
        }
        
        // ✅ Global variable to store active custom filter data (instead of manipulating checkboxes)
        window.activeCustomFilterData = null;
        
        // ✅ Initial load
        // Load custom filters FIRST, then load tasks (filters will apply if default exists)
        window.customFiltersLoaded = false;
        
        $(document).ready(function() {
            // Wait for custom filters to load before loading tasks
            const checkFiltersLoaded = setInterval(function() {
                if (window.customFiltersLoaded) {
                    clearInterval(checkFiltersLoaded);
                    // Load initial tasks for current tab
                    if ($('.tab-pane.show.active .Tiles-View').is(':visible')) {
                        loadTasks(true);
                    }
                }
            }, 50);
        });
        // ✅ Filter collapse
        $('.filter-header').on('click', function () {
            $(this).toggleClass('active');
            $(this).next('.filter-content').slideToggle();
            let toggleIcon = $(this).find('.filter-toggle');
            toggleIcon.text(toggleIcon.text() === '▼' ? '▲' : '▼');
        });
        // ✅ Accordion toggle
        $(".accordion").click(function () {
            $(this).toggleClass("active");
            $(this).next().slideToggle();
        });
        $(".assigned-me").click(function () {
            $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
            $(".assigned-to-me").slideToggle();
        });
        $(".sent-me").click(function () {
            $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
            $(".sent-to-me").slideToggle();
        });
        // ✅ Task selection bar
        function updateTaskbar() {
            // Use allSelectedTaskIds count if "Select All" is active, otherwise use selectedTasks.size
            let count = (window.allSelectedTaskIds && window.allSelectedTaskIds.length > 0) 
                ? window.allSelectedTaskIds.length 
                : selectedTasks.size;
                
            if (count > 0) {
                $(".items-selected").addClass("visible");
                $("#count").text(count);
                $(".task-dots").empty();
                for (let i = 0; i < Math.min(count, 10); i++) { // Limit dots to 10 for performance
                    $(".task-dots").append('<div class="dot"></div>');
                }
            } else {
                $(".items-selected").removeClass("visible");
            }
        }
        $(".task-card input[type='checkbox']").on("change", function () {
            let taskId = $(this).closest(".task-card").data("id");
            if ($(this).is(":checked")) {
                selectedTasks.add(taskId);
            } else {
                selectedTasks.delete(taskId);
            }
            updateTaskbar();
        });
        $(".drag-handle").on("mousedown", function (e) {
            isDragging = true;
            let taskbar = $(".items-selected");
            offsetX = e.clientX - taskbar.offset().left;
            offsetY = e.clientY - taskbar.offset().top;
            taskbar.css("cursor", "grabbing");
        });
        $(document).on("mousemove", function (e) {
            if (isDragging) {
                $(".items-selected").css({
                    left: e.clientX - offsetX + "px",
                    top: e.clientY - offsetY + "px",
                    transform: "none"
                });
            }
        });
        $(document).on("mouseup", function () {
            isDragging = false;
            $(".items-selected").css("cursor", "grab");
        });
        // ✅ View switcher
        window.toggleView = function () {
            let selectedView = document.getElementById("viewSelector").value;
            document.querySelectorAll(".view-section").forEach(section => {
                section.style.display = "none";
            });
            // Remove Calendar section if not selected
            if(selectedView !== 'Calender-View') {
                $('#Calender-View').remove();
            } else {
                // If Calendar section is not present, insert it
                if($('#Calender-View').length === 0) {
                    $('#calendar-view-placeholder').html(`
                    <div id="Calender-View" class="view-section" style="margin: 6% 0;">
                        <div class="calendar-legend mb-3" style="display: flex; gap: 18px; align-items: center;">
                            <span style="display: flex; align-items: center;">
                                <span style="width: 16px; height: 16px; background: #2bafa5; border-radius: 4px; display: inline-block; margin-right: 6px;"></span>
                                Created
                            </span>
                            <span style="display: flex; align-items: center;">
                                <span style="width: 16px; height: 16px; background: #f5a623; border-radius: 4px; display: inline-block; margin-right: 6px;"></span>
                                Due
                            </span>
                            <span style="display: flex; align-items: center;">
                                <span style="width: 16px; height: 16px; background: #e74c3c; border-radius: 4px; display: inline-block; margin-right: 6px;"></span>
                                Overdue
                            </span>
                        </div>
                        <div class="d-flex justify-content-end mb-3">
                            <label class="me-2 fw-bold">Show tasks by:</label>
                            <select id="calendarDateType" class="form-select w-auto" style="display:inline-block;">
                                <option value="all" selected>All</option>
                                <option value="due_date">Due Date</option>
                                <option value="created_at">Created Date</option>
                            </select>
                        </div>
                        <div id="calendar"></div>
                    </div>
                    `);
                }
                $('#Calender-View').css({ display: 'block' });
                let dateType = $('#calendarDateType').val();
                if (!dateType) dateType = 'all';
                renderCalendar(dateType);
            }
            // Show the selected view (List/Board)
            // Target the specific view section within the active tab
            let activeTabContentId = $('.tab-pane.show.active').attr('id');
            $('#' + activeTabContentId + ' .' + selectedView).css({ display: 'block' });
            // Call filterTasks() when switching to a List or Board view
            if (selectedView !== 'Calender-View') {
                filterTasks();
                // Setup lazy loading for List view
                if (selectedView === 'Tiles-View') {
                    setTimeout(() => {
                        setupLazyLoading();
                    }, 100);
                }
            } else {
                // Remove lazy loading for Calendar view
                try { if(ioInstance){ ioInstance.disconnect(); } } catch(e){}
            }
        }
        // ✅ Drag & Drop Kanban
        window.allowDrop = function (event) {
            event.preventDefault();
        }
        window.drag = function (event) {
            event.dataTransfer.setData("taskId", event.target.getAttribute("data-task-id"));
        }
        window.drop = function (event, newStatus) {
            event.preventDefault();
            let taskId = event.dataTransfer.getData("taskId");
            let draggedElement = document.querySelector(`[data-task-id='${taskId}']`);
            event.target.appendChild(draggedElement);
            Livewire.emit('updateTaskStatus', taskId, newStatus);
        }
        // If Calendar is default, render it
        if(document.getElementById("viewSelector").value === 'Calender-View') {
            window.toggleView();
        }
        var calendar = null;
        function renderCalendar(dateType) {
            var calendarTasks = getCalendarTasks(dateType);
            if (calendar) {
                calendar.destroy();
                calendar = null;
            }
            if ($('#calendar').children().length > 0) {
                $('#calendar').html('');
            }
            if ($('#calendar').length) {
                if (calendarTasks.length === 0) {
                    $('#calendar').html('<div style="text-align:center;color:#888;font-size:1.2em;margin-top:2em;">No tasks to show on calendar.</div>');
                } else {
                    calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
                        initialView: 'dayGridMonth',
                        height: 600,
                        events: calendarTasks.map(function(ev) {
                            let color = '#2bafa5'; // default
                            if (ev.type === 'due_date') {
                                if (ev.isOverdue) {
                                    color = '#e74c3c'; // red for overdue
                                } else {
                                    color = '#f5a623'; // orange for due date
                                }
                            }
                            // Tooltip logic
                            let tooltip = '';
                            if (ev.type === 'due_date' && ev.start) {
                                let today = new Date();
                                let due = new Date(ev.start);
                                let diff = Math.floor((due - today) / (1000 * 60 * 60 * 24));
                                if (ev.isOverdue) {
                                    tooltip = 'Task overdue by ' + Math.abs(diff) + ' day' + (Math.abs(diff) !== 1 ? 's' : '');
                                } else if (diff === 0) {
                                    tooltip = 'Task due today';
                                } else if (diff === 1) {
                                    tooltip = 'Task due in 1 day';
                                } else {
                                    tooltip = 'Task due in ' + diff + ' days';
                                }
                            } else if (ev.type === 'created_at' && ev.start) {
                                let today = new Date();
                                let created = new Date(ev.start);
                                let diff = daysBetweenExclusive(today, created);
                                if (diff === 0) {
                                    tooltip = 'Task created today';
                                } else if (diff === 1) {
                                    tooltip = 'Task created 1 day ago';
                                } else {
                                    tooltip = 'Task created ' + diff + ' days ago';
                                }
                            }
                                                        return {
                                title: ev.title,
                                start: ev.start,
                                url: ev.url,
                                color: color,
                                textColor: '#fff',
                                display: 'block',
                                tooltip: tooltip,
                                // For browser default tooltip
                                description: tooltip
                            };
                        }),
                        eventDidMount: function(info) {
                            if (info.event.extendedProps.tooltip) {
                                info.el.setAttribute('title', info.event.extendedProps.tooltip);
                            }
                        },
                        eventClick: function(info) {
                            info.jsEvent.preventDefault();
                            if (info.event.url) {
                                window.open(info.event.url, '_blank');
                            }
                        },
                        displayEventTime: false, // Only show date, not time
                        buttonText: {
                            today: 'Today',
                        }
                    });
                    calendar.render();
                }
            }
        }
        // Calendar date type toggle
        $(document).on('change', '#calendarDateType', function() {
            renderCalendar($(this).val());
        });
        // Tab change: re-render calendar with correct data
        $('.nav-link').on('shown.bs.tab', function() {
            if ($('#Calender-View').is(':visible')) {
                let dateType = $('#calendarDateType').val();
                if (!dateType) dateType = 'all';
                renderCalendar(dateType);
            }
            
            // Reset pagination for new tab
            const tab = currentTabKey();
            currentPage[tab] = 1;
            hasMore[tab] = true;
            loading[tab] = false;
            
            // Load initial tasks for new tab
            if ($('.tab-pane.show.active .Tiles-View').is(':visible')) {
                loadTasks(true);
            }
        });

        // On page load, activate tab from URL if present
        const urlParams = new URLSearchParams(window.location.search);
        const tabId = urlParams.get('tab');
        if(tabId) {
            // Only activate if tabId matches one of the known tab IDs
            if(["all_tasks_tab","sent_by_me_tab","assigned_to_me_tab"].includes(tabId)){
                changeTabUrl(tabId);
            }
        }
        // Pagination links: preserve tab info
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let url = new URL($(this).attr('href'), window.location.origin);
            // Use correct tab id for current tab
            let currentTab = $('.nav-link.active').attr('id') || 'all_tasks_tab';
            url.searchParams.set('tab', currentTab);
            window.location.href = url.toString();
        });
    });
    // ============== Infinite Scroll Utilities ==============
    function currentTabKey(){
        if($('#sent_by_me_tab').hasClass('active')) return 'sent';
        if($('#assigned_to_me_tab').hasClass('active')) return 'assigned';
        return 'all';
    }
    </script>
    <script>
        function changeTabUrl(tabId) {
            // Get the tab element
            var tabEl = document.getElementById(tabId);
            if (tabEl) {
                var tab = new bootstrap.Tab(tabEl);
                tab.show();
            }
            // Update URL (optional)
            const currentURL = new URL(window.location.href);
            currentURL.searchParams.set('tab', tabId);
            window.history.pushState({ tabId: tabId }, null, currentURL.href);
        }
    </script>
    <script>
    // Infinite scroll and backend search implementation complete
    </script>
    
    <script>
    // ========== CUSTOM FILTERS FUNCTIONALITY ==========
    (function($) {
        'use strict';

        // Global variables
        window.customFilters = [];
        window.activeFilterId = null;

        /**
         * Load all custom filters for the current user
         */
        function loadCustomFilters(callback) {
            $.ajax({
                url: '/head_office/custom-filters',
                method: 'GET',
                success: function(response) {
                    if (response.success && response.filters) {
                        window.customFilters = response.filters;
                        renderFilterChips();
                        
                        // Execute callback if provided
                        if (typeof callback === 'function') {
                            callback();
                        } else {
                            // Check if there's a default filter and apply it (only on initial load)
                            const defaultFilter = window.customFilters.find(f => f.is_default);
                            if (defaultFilter) {
                                console.log('Applying default filter on load:', defaultFilter.name);
                                applyFilter(defaultFilter.id, true); // Skip setting as default on initial load
                                // DON'T set customFiltersLoaded here - applyFilter will do it after completion
                            } else {
                                console.log('No default filter found');
                                // No default filter, mark as loaded immediately
                                window.customFiltersLoaded = true;
                            }
                        }
                    } else {
                        // No filters at all, mark as loaded
                        window.customFiltersLoaded = true;
                        if (typeof callback === 'function') {
                            callback();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading custom filters:', error);
                    // Even on error, mark as loaded so page doesn't hang
                    window.customFiltersLoaded = true;
                }
            });
        }

        /**
         * Render filter chips in the sidebar
         */
        function renderFilterChips() {
            const container = $('#customFilterChipsContainer');
            const heading = $('#savedFiltersHeading');
            const appliedDisplay = $('#appliedFilterDisplay');
            
            container.empty();

            if (window.customFilters.length === 0) {
                container.hide();
                heading.hide();
                appliedDisplay.removeClass('show');
                return;
            }

            container.show();
            heading.show();
            
            // Update applied filter display at top
            const activeFilter = window.customFilters.find(f => f.id === window.activeFilterId);
            if (activeFilter) {
                $('#appliedFilterName').text(activeFilter.name);
                appliedDisplay.addClass('show');
            } else {
                appliedDisplay.removeClass('show');
            }

            // Render saved filter chips
            window.customFilters.forEach(function(filter) {
                const isActive = window.activeFilterId === filter.id;
                const chipClass = isActive ? 'filter-chip active' : 'filter-chip';
                
                const chip = $(`
                    <div class="${chipClass}" data-filter-id="${filter.id}">
                        <span class="filter-name">${filter.name}</span>
                        <div class="filter-actions">
                            <span class="edit-chip" data-filter-id="${filter.id}" title="Edit filter">✎</span>
                            <span class="remove-chip" data-filter-id="${filter.id}" title="Delete filter"><i class="fa fa-trash" style="color: #dc3545;"></i></span>
                        </div>
                    </div>
                `);
                
                container.append(chip);
            });
        }

        /**
         * Open the custom filter modal
         */
        function openFilterModal(filterId = null) {
            const form = $('#customFilterForm')[0];
            form.reset();
            $('#filterIdInput').val('');

            // Reset modal state
            $('.modal-priority-filter, .modal-task-type-filter, .modal-status-filter').prop('checked', false);
            $('#modalDeadlineSlider').val(30);
            $('#modalDeadlineValue').text('30 Days');
            $('#modalCreatedByFilter').val(null).trigger('change');
            $('#modalAssignedToFilter').val(null).trigger('change');

            // If editing, load filter data
            if (filterId) {
                const filter = window.customFilters.find(f => f.id === filterId);
                if (filter) {
                    $('#customFilterModalLabel').text('Edit Custom Filter');
                    $('#filterIdInput').val(filter.id);
                    $('#filterNameInput').val(filter.name);

                    // Load filter criteria
                    const filters = filter.filters;

                    // Priority
                    if (filters.priorities && filters.priorities.length > 0) {
                        filters.priorities.forEach(function(priority) {
                            $(`.modal-priority-filter[value="${priority}"]`).prop('checked', true);
                        });
                    }

                    // Task types
                    if (filters.task_types && filters.task_types.length > 0) {
                        filters.task_types.forEach(function(type) {
                            $(`.modal-task-type-filter[value="${type}"]`).prop('checked', true);
                        });
                    }

                    // Statuses
                    if (filters.statuses && filters.statuses.length > 0) {
                        filters.statuses.forEach(function(status) {
                            $(`.modal-status-filter[value="${status}"]`).prop('checked', true);
                        });
                    }

                    // Search query
                    if (filters.search_query) {
                        $('#modalSearchQuery').val(filters.search_query);
                    }

                    // Dates
                    if (filters.start_date) {
                        $('#modalStartDate').val(filters.start_date);
                    }
                    if (filters.end_date) {
                        $('#modalEndDate').val(filters.end_date);
                    }

                    // Deadline
                    if (filters.max_deadline) {
                        $('#modalDeadlineSlider').val(filters.max_deadline);
                        $('#modalDeadlineValue').text(filters.max_deadline + ' Days');
                    }
                    
                    // Created By
                    if (filters.created_by && filters.created_by.length > 0) {
                        $('#modalCreatedByFilter').val(filters.created_by).trigger('change');
                    }
                    
                    // Assigned To
                    if (filters.assigned_to && filters.assigned_to.length > 0) {
                        $('#modalAssignedToFilter').val(filters.assigned_to).trigger('change');
                    }
                }
            } else {
                $('#customFilterModalLabel').text('Create Custom Filter');
            }

            // Show modal using jQuery
            $('#customFilterModal').modal('show');
        }

        /**
         * Populate modal select dropdowns from sidebar selects
         */


        /**
         * Save custom filter
         */
        function saveCustomFilter() {
            const filterId = $('#filterIdInput').val();
            const filterName = $('#filterNameInput').val().trim();

            if (!filterName) {
                alert('Please enter a filter name');
                return;
            }

            // Collect filter criteria
            const filters = {
                priorities: $('.modal-priority-filter:checked').map(function() { return $(this).val(); }).get(),
                task_types: $('.modal-task-type-filter:checked').map(function() { return $(this).val(); }).get(),
                statuses: $('.modal-status-filter:checked').map(function() { return $(this).val(); }).get(),
                search_query: $('#modalSearchQuery').val().trim(),
                created_by: $('#modalCreatedByFilter').val() || [],
                assigned_to: $('#modalAssignedToFilter').val() || [],
                start_date: $('#modalStartDate').val(),
                end_date: $('#modalEndDate').val(),
                max_deadline: parseInt($('#modalDeadlineSlider').val())
            };

            console.log('Saving filter with data:', filters);

            // Preserve is_default if editing an existing filter
            let isDefault = false;
            if (filterId) {
                const existingFilter = window.customFilters.find(f => f.id == filterId);
                isDefault = existingFilter ? existingFilter.is_default : false;
            }

            const data = {
                name: filterName,
                filters: filters,
                filter_type: 'task',
                is_default: isDefault,
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            const url = filterId 
                ? `/head_office/custom-filters/${filterId}` 
                : '/head_office/custom-filters';
            
            const method = filterId ? 'PUT' : 'POST';

            $.ajax({
                url: url,
                method: method,
                data: data,
                success: function(response) {
                    if (response.success) {
                        // Check if we're editing the currently active filter
                        const wasActiveFilter = filterId && window.activeFilterId == filterId;
                        const savedFilterId = response.filter.id;
                        
                        // Close modal
                        $('#customFilterModal').modal('hide');
                        
                        // Show success message
                        alert('Filter saved successfully!');
                        
                        // Reload filters
                        loadCustomFilters(function() {
                            // If we edited the active filter, re-apply it to show updated results
                            if (wasActiveFilter) {
                                console.log('Re-applying edited filter with ID:', savedFilterId);
                                // Don't skip setting as default - use false to trigger full application
                                applyFilter(savedFilterId, false);
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error saving filter:', error);
                    alert('Failed to save filter. Please try again.');
                }
            });
        }

        /**
         * Delete custom filter
         */
        function deleteCustomFilter(filterId) {
            if (!confirm('Are you sure you want to delete this filter?')) {
                return;
            }

            $.ajax({
                url: `/head_office/custom-filters/${filterId}`,
                method: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        // If this was the active filter, reset
                        if (window.activeFilterId === filterId) {
                            window.activeFilterId = null;
                            resetFiltersUI();
                        }
                        
                        // Reload filters
                        loadCustomFilters();
                        alert('Filter deleted successfully!');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error deleting filter:', error);
                    alert('Failed to delete filter. Please try again.');
                }
            });
        }

        /**
         * Apply a custom filter
         */
        function applyFilter(filterId, skipSetDefault = false) {
            const filter = window.customFilters.find(f => f.id === filterId);
            if (!filter) {
                console.error('Filter not found:', filterId);
                return;
            }

            window.activeFilterId = filterId;
            
            // Store filter data globally (DON'T touch checkboxes)
            window.activeCustomFilterData = filter.filters;
            
            console.log('Custom filter activated:', filter.name);
            console.log('Filter data stored:', window.activeCustomFilterData);

            // Set default filter unless we're on initial load
            if (!skipSetDefault) {
                setDefaultFilter(filterId);
            }

            // Update chip UI
            renderFilterChips();

            // On initial load, just mark as loaded
            if (skipSetDefault) {
                window.customFiltersLoaded = true;
                console.log('Custom filters loaded, page can now load tasks');
            } else {
                // Manual filter click - reload tasks immediately
                if (typeof window.filterTasks === 'function') {
                    window.filterTasks();
                } else if (typeof filterTasks === 'function') {
                    filterTasks();
                } else {
                    console.error('filterTasks function not found!');
                }
            }
        }

        /**
         * Reset all filters
         */
        function resetFiltersUI() {
            window.activeFilterId = null;
            window.activeCustomFilterData = null; // Clear custom filter data
            
            // Reset all checkboxes to checked (show all by default)
            $('.priority-filter, .task-type-filter, .status-filter, .stage-filter').prop('checked', true);
            
            // Clear date filters and search
            $('#specificDate, #startDate, #endDate').val('');
            $('#deadlineSlider').val(30);
            $('#deadlineValue').text('30 Days');
            $('#serchInput').val('');
            $('#createdByFilter').val(null).trigger('change');
            $('#assignedToFilter').val(null).trigger('change');
            
            renderFilterChips();
            
            if (typeof window.filterTasks === 'function') {
                window.filterTasks();
            } else if (typeof filterTasks === 'function') {
                filterTasks();
            }
        }

        /**
         * Set a filter as default
         */
        function setDefaultFilter(filterId, skipReload = false) {
            $.ajax({
                url: `/head_office/custom-filters/${filterId}/set-default`,
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        // Update local state
                        window.customFilters.forEach(f => f.is_default = (f.id === filterId));
                        
                        // Only reload if not skipped
                        if (!skipReload) {
                            renderFilterChips();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error setting default filter:', error);
                    alert('Failed to set default filter. Please try again.');
                }
            });
        }

        // Event Handlers
        $(document).ready(function() {
            console.log('Custom Filters JS Loaded');
            
            // Load custom filters on page load
            loadCustomFilters();

            // Remove applied filter from top display
            $(document).on('click', '#removeAppliedFilter', function(e) {
                e.preventDefault();
                if (window.activeFilterId) {
                    // Clear default and reset filters
                    $.ajax({
                        url: '/head_office/custom-filters/clear-default',
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                window.customFilters.forEach(f => f.is_default = false);
                                resetFiltersUI();
                            }
                        }
                    });
                }
            });

            // Create custom filter button
            $(document).on('click', '#createCustomFilterBtn', function(e) {
                e.preventDefault();
                console.log('Create Custom Filter button clicked');
                openFilterModal();
            });

            // Save custom filter button
            $(document).on('click', '#saveCustomFilterBtn', function(e) {
                e.preventDefault();
                saveCustomFilter();
            });

            // Click on filter chip to apply
            $(document).on('click', '.filter-chip', function(e) {
                if ($(e.target).hasClass('remove-chip') || $(e.target).hasClass('edit-chip')) {
                    return; // Don't apply filter if clicking action buttons
                }
                const filterId = $(this).data('filter-id');
                applyFilter(filterId);
            });

            // Click pencil icon to edit filter
            $(document).on('click', '.edit-chip', function(e) {
                e.stopPropagation();
                const filterId = $(this).data('filter-id');
                openFilterModal(filterId);
            });

            // Remove filter chip (delete filter)
            $(document).on('click', '.remove-chip', function(e) {
                e.stopPropagation();
                const filterId = $(this).data('filter-id');
                deleteCustomFilter(filterId);
            });

            // Modal deadline slider
            $('#modalDeadlineSlider').on('input', function() {
                $('#modalDeadlineValue').text($(this).val() + ' Days');
            });

            // Show All Tasks button - clear active filter and default
            $(document).on('click', '#resetFilters', function() {
                window.activeFilterId = null;
                
                // Clear all defaults
                $.ajax({
                    url: '/head_office/custom-filters/clear-default',
                    method: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function() {
                        loadCustomFilters();
                    }
                });
                
                renderFilterChips();
            });
        });

        // Expose functions globally if needed
        window.loadCustomFilters = loadCustomFilters;
        window.applyCustomFilter = applyFilter;

    })(jQuery);
    </script>
@endsection