@extends('layouts.location_app')
@section('title', 'Tasks')
@section('content')
    <style>
        /* .task-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        } */

        .badge-status {
            background-color: #f5c16c;
            color: #000;
            font-size: 14px;
            border-radius: 5px;
            padding: 5px 10px;
        }

        .items-selected {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            background: #fff;
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
        }

        .dot {
            position: absolute;
            left: 55px;
            bottom: 8px;
            width: 4px;
            height: 4px;
            background-color: black;
            border-radius: 50%;
        }

        .drag-handle {
            cursor: grab;
            font-size: 18px;
            padding: 5px;
        }

        .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;
        }

        .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;
        }

        .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);
            min-width: 250px;
            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;
        }

        .reset-filters {
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
            display: block;
            width: 100%;
            text-align: center;
        }
    </style>
    @livewireStyles()
    <div class="row gap-5 mt-4">
        <div class="col-2 p-3 ">
            <h5 class="mb-3">Filter Tasks</h5>
            <div class="filter-sidebar">

                <div class="filter-section">
                    <div class="filter-header">
                        <span class="filter-title">Type</span>
                        <span class="filter-toggle">▼</span>
                    </div>
                    <div class="filter-content">
                        <div>
                            <input type="checkbox" class="priority-filter" value="urgent">
                            <label>Urgent</label><br>
                            <input type="checkbox" class="priority-filter" value="high">
                            <label>High</label><br>
                            <input type="checkbox" class="priority-filter" value="medium">
                            <label>Medium</label><br>
                            <input type="checkbox" class="priority-filter" value="low">
                            <label>Low</label>
                        </div>
                    </div>
                </div>

                <div class="filter-section">
                    <div class="filter-header">
                        <span class="filter-title">Status</span>
                        <span class="filter-toggle">▼</span>
                    </div>
                    <div class="filter-content">
                        <div>
                            <input type="checkbox" class="status-filter" value="to_do">
                            <label>To do</label><br>
                            <input type="checkbox" class="status-filter" value="in_progress">
                            <label>In Progress</label><br>
                            <input type="checkbox" class="status-filter" value="completed">
                            <label>Completed</label><br>
                            <input type="checkbox" class="status-filter" value="close">
                            <label>Close</label><br>
                            <input type="checkbox" class="status-filter" value="cant_do">
                            <label>Can't do</label>
                        </div>
                    </div>
                </div>
                <div class="filter-section">
                    <div class="filter-header">
                        <span class="filter-title">Date</span>
                        <span class="filter-toggle">▼</span>
                    </div>
                    <div class="filter-content">
                        <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 class="filter-section">
                    <div class="filter-header">
                        <span class="filter-title">Task Deadline</span>
                        <span class="filter-toggle">▼</span>
                    </div>
                    <div class="filter-content">
                        <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>
                <button id="resetFilters" class="reset-filters">Reset All Filter</button>
            </div>
        </div>
        <div class="col">
           <div style="display: flex; align-items: center; justify-content: space-between;">
            <div class="text-left">
                {{-- <select id="viewSelector" class="custom-dropdown" onchange="toggleView()">
                    <option value="Tiles-View">List</option>
                    <option value="Board-View">Board</option>
                    <option value="Calender-View">Calendar</option>
                </select> --}}
            </div>
            <div class="d-flex justify-content-end align-items-center">
                <a href="{{ route('be_spoke_forms.be_spoke_form.records') }}" class="text-info">
                    <i class="fa fa-arrow-left"></i>Back
                </a>
            </div>
          </div>

            <div id="Tiles-View" class="view-section" style="margin: 6% 0">
                <h4 class="text-center">Tasks</h4>

              @if($tasks->isEmpty())
                  <div class="alert alert-info text-center">No tasks found.</div>
              @else
                  @foreach ($tasks as $task)
                                  @php
        // Use the due date from the task
        $effectiveDueDate = $task->due_date;
        
        // Calculate if overdue based on the due date
        $isOverdue = $effectiveDueDate && 
                    \Carbon\Carbon::parse($effectiveDueDate)->isPast() &&
                    $task->status !== 'completed';
                    
        $deadlineDays = $effectiveDueDate ? \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($effectiveDueDate), false) : '';
        
        // Get allocations for this task
        $taskHoAllocations = $hoAllocations->get($task->id, collect());
        $taskLocAllocations = $locAllocations->get($task->id, collect());
    @endphp
    <div class="d-flex align-items-start my-3">
        <!-- Main Card -->
        <div class="card w-100 p-3 task-card"
             data-id="{{ $task->id }}"
             data-priority="{{ strtolower($task->priority) }}"
             data-status="{{ strtolower($task->status) }}"
             data-due-date="{{ $effectiveDueDate ?? $task->due_date }}"
             data-created-date="{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('Y-m-d') : '' }}"
             data-deadline="{{ $deadlineDays }}">
            <div class="row text-muted" style="font-size: 0.9rem;">

                <!-- Section 1 -->
                <div style="margin-left: -32px;font-size: 15px;" class="col-md-3 border-end pe-3">
                    <div class="text-black">Task #{{ $task->id }}</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 ($task->created_by_name)
                        <div class="mt-1">
                            <i class="bi bi-sun"></i>
                            Created by:
                            <span class="fw-medium"
                                style="padding-left: 10px">{{ $task->created_by_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 {{ \Carbon\Carbon::parse($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 ($taskHoAllocations->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:
                            {{ $taskHoAllocations->pluck('name')->implode(', ') }}
                        </div>
                    @endif
                    @if ($taskLocAllocations->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:
                                {{ $taskLocAllocations->pluck('trading_name')->implode(', ') }}
                        </div>
                    @endif
                    @if ($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:
                                {{ $task->case_location_name ?? 'Unknown Site' }}
                        </div>
                    @endif
                </div>

                <!-- Section 3 -->
                <div class="col-md-3 border-end px-3">
                    Description:<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])
                    </div>
                    <div class="text-end">
                        <a href="{{ route('location.tasks.show', $task->id) }}" 
                           class="btn btn-outline-secondary btn-sm m-0 mt-3 pe-4 py-1 fs-6" 
                           style="padding-left: 26px;" target="_blank">View Task</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach
              @endif
                <div class="items-selected mt-4">
                    <span class="badge bg-primary rounded-pill px-3 py-2">1</span>
                    <strong class="ms-2">Items Selected</strong>
                    <div class="dot"></div>
                    <div class="color-line"></div>
                    <div class="drag-handle ms-2">☰</div>
                </div>
            </div>
        </div>
    </div>
@endsection
@livewireScripts
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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>
    $(document).ready(function() {
        // Initialize filter sections
        $('.filter-content').hide();
        
        // Toggle filter sections
        $(document).on('click', '.filter-header', function() {
            $(this).toggleClass('active');
            $(this).next('.filter-content').slideToggle();
            let toggleIcon = $(this).find('.filter-toggle');
            toggleIcon.text(toggleIcon.text() === '▼' ? '▲' : '▼');
        });

        // Filter tasks for both views
        function filterTasks() {
            let selectedPriorities = $('.priority-filter:checked').map(function() {
                return $(this).val().toLowerCase();
            }).get();

            let selectedStatuses = $('.status-filter:checked').map(function() {
                return $(this).val().toLowerCase();
            }).get();

            let specificDate = $('#specificDate').val();
            let startDate = $('#startDate').val();
            let endDate = $('#endDate').val();
            let maxDeadline = parseInt($('#deadlineSlider').val());

            // Filter List View (Tiles)
            $('.task-card').each(function() {
                let taskPriority = $(this).data('priority').toLowerCase();
                let taskStatus = $(this).data('status').toLowerCase();
                let taskDueDate = $(this).data('due-date');
                let taskCreatedDate = $(this).data('created-date');
                let deadlineDays = parseInt($(this).data('deadline')) || 0;

                let priorityMatch = selectedPriorities.length === 0 || 
                    selectedPriorities.includes(taskPriority);
                let statusMatch = selectedStatuses.length === 0 || 
                    selectedStatuses.includes(taskStatus);
                let dateMatch = true;
                let deadlineMatch = true;

                if (specificDate) {
                    dateMatch = taskCreatedDate === specificDate;
                } else if (startDate && endDate) {
                    dateMatch = taskCreatedDate >= startDate && taskCreatedDate <= endDate;
                }

                if (maxDeadline < 30) {
                    deadlineMatch = deadlineDays <= maxDeadline;
                }

                if (priorityMatch && statusMatch && dateMatch && deadlineMatch) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });

            // Filter Board View
            $('.kanban-card').each(function() {
                let taskPriority = $(this).data('priority').toLowerCase();
                let taskStatus = $(this).data('status').toLowerCase();
                let taskDueDate = $(this).data('due-date');
                let taskCreatedDate = $(this).data('created-date');
                
                let priorityMatch = selectedPriorities.length === 0 || 
                    selectedPriorities.includes(taskPriority);
                let statusMatch = selectedStatuses.length === 0 || 
                    selectedStatuses.includes(taskStatus);
                let dateMatch = true;

                if (specificDate) {
                    dateMatch = taskCreatedDate === specificDate;
                } else if (startDate && endDate) {
                    dateMatch = taskCreatedDate >= startDate && taskCreatedDate <= endDate;
                }

                if (priorityMatch && statusMatch && dateMatch) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        // Apply filters when any filter changes
        $('.priority-filter, .status-filter, #specificDate, #startDate, #endDate').on('change', filterTasks);
        $('#deadlineSlider').on('input', function() {
            $('#deadlineValue').text($(this).val() + ' Days');
            filterTasks();
        });

        // Reset filters
        $('#resetFilters').on('click', function(e) {
            e.preventDefault();
            $('.priority-filter, .status-filter').prop('checked', false);
            $('#specificDate, #startDate, #endDate').val('');
            $('#deadlineSlider').val(30);
            $('#deadlineValue').text('30 Days');
            filterTasks();
        });

        // Prepare tasks for calendar

        function daysBetweenExclusive(date1, date2) {
            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));
        }


        var calendar = null;

        // View toggle functionality
        // function toggleView() {
        //     let selectedView = $("#viewSelector").val();
        //     $(".view-section").hide();
        //     $("#" + selectedView).show();
            
        //     if (selectedView === 'Calender-View') {
        //         let dateType = $('#calendarDateType').val();
        //         if (!dateType) dateType = 'all';
        //     } else {
        //         filterTasks();
        //     }
        // }


        // Drag and drop functionality for board view
        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {
            event.dataTransfer.setData("taskId", event.target.getAttribute("data-task-id"));
        }

        function drop(event, newStatus) {
            event.preventDefault();
            let taskId = event.dataTransfer.getData("taskId");
            let draggedElement = document.querySelector(`[data-task-id='${taskId}']`);
            
            // Find the kanban-cards container in the drop target
            let cardsContainer = event.currentTarget.querySelector('.kanban-cards');
            if (cardsContainer) {
                cardsContainer.appendChild(draggedElement);
                // Update the status data attribute
                draggedElement.setAttribute('data-status', newStatus);
                Livewire.emit('updateTaskStatus', taskId, newStatus);
            }
        }

        // Task selection functionality
        let selectedTasks = new Set();
        let isDragging = false,
            startX, startY, offsetX, offsetY;

        function updateTaskbar() {
            let count = selectedTasks.size;
            if (count > 0) {
                $(".items-selected").addClass("visible");
                $(".items-selected strong").text(`${count} Items Selected`);
                $(".items-selected .badge").text(count);

                $(".task-dots").empty();
                for (let i = 0; i < count; i++) {
                    $(".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();
        });

        // Auto-check "to_do" and "in_progress" on page load
        // $('.status-filter').each(function() {
        //     let val = $(this).val();
        //     if (val === 'to_do' || val === 'in_progress') {
        //         $(this).prop('checked', true);
        //     }
        // });

        // Initialize drag handle
        $(".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");
        });

        // Initialize view
        // $("#viewSelector").change(toggleView);
        // toggleView();
        filterTasks();
    });
</script>
@endsection