@extends('layouts.app')

@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box head">
                    <h1 class="page-title" style="margin-bottom: 32px; margin-left: 32px; margin-right: 45px;">Tasks</h1>
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="exportTaskButton"
                        data-toggle="dropdown" aria-expanded="false">
                        Export
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'excel']) }}">Excel</a>
                        <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'csv']) }}">CSV</a>
                        <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'pdf']) }}">PDF</a>
                        <a class="dropdown-item" href="#" onclick="printLeads()">Print</a>
                    </div>
                    <button class="new-task" data-bs-toggle="modal" data-bs-target="#addNewTaskModal"> {{-- New Lead button
                        --}}
                        + New Task
                    </button>
                </div>
            </div>
        </div>

        {{-- Task Cards --}}
        <div class="row mb-4" style="margin-left: 40px;">
            <div class="col-md-2" style="margin-left: -23px;">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title" id="not-started-count">0 Not Started</h5>
                        <p class="card-text">My Tasks: 0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title" id="in-progress-count">0 In Progress</h5>
                        <p class="card-text">My Tasks: 0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title" id="testing-count">0 Testing</h5>
                        <p class="card-text">My Tasks: 0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title" id="awaiting-feedback-count">0 Awaiting Feedback</h5>
                        <p class="card-text">My Tasks: 0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-success" id="complete-count">0 Complete</h5>
                        <p class="card-text">My Tasks: 0</p>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal for New Task -->
        <div class="modal fade" id="addNewTaskModal" tabindex="-1" aria-labelledby="addNewTaskModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewTaskModalLabel">Add New Task</h5>
                        <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa-solid fa-xmark" style="font-size: 22px;"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="newTaskForm">

                            <!-- Public and Billable checkboxes -->
                            <div class="row mb-3">
                                <div class="col d-flex align-items-center">
                                    <div class="form-check" style="margin-right: 14px;">
                                        <!-- me-4 adds margin to the right -->
                                        <input type="checkbox" class="form-check-input" id="publicCheckbox">
                                        <label class="form-check-label" for="publicCheckbox">Public</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="billableCheckbox">
                                        <label class="form-check-label" for="billableCheckbox">Billable</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Subject, Hourly Rate -->
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" id="subject" class="form-control" placeholder="Task Subject">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col">
                                    <label for="hourlyRate" class="form-label">Hourly Rate</label>
                                    <input type="number" id="hourlyRate" class="form-control" placeholder="Hourly Rate">
                                </div>
                            </div>

                            <!-- Start Date, Due Date -->
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="startDate" class="form-label">Start Date</label>
                                    <input type="date" id="startDate" class="form-control">
                                </div>
                                <div class="col">
                                    <label for="dueDate" class="form-label">Due Date</label>
                                    <input type="date" id="dueDate" class="form-control">
                                </div>
                            </div>

                            <!-- Priority, Repeat Every -->
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="priority" class="form-label">Priority</label>
                                    <select class="form-control" id="priority" name="priority">
                                        <option value="">Select Priority</option>
                                        <option value="low">Low</option>
                                        <option value="medium">Medium</option>
                                        <option value="high">High</option>
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="repeat" class="form-label">Repeat Every</label>
                                    <select class="form-control" id="repeat-every" name="repeat-every">
                                        <option value="">Select Repeat Every</option>
                                        <option value="week">Week</option>
                                        <option value="2 weeks">2 Weeks</option>
                                        <option value="1 month">1 Month</option>
                                        <option value="2 months">2 Months</option>
                                        <option value="3 months">3 Months</option>
                                        <option value="6 months">6 Months</option>
                                        <option value="1 year">1 Year</option>
                                        <option value="custom">Custom</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Related To, Assignees, Followers -->
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="relatedTo" class="form-label">Related To</label>
                                    <select class="form-control" id="related-to" name="related-to">
                                        <option value="">Nothing Selected</option>
                                        <option value="project">Project</option>
                                        <option value="invoice">Invoice</option>
                                        <option value="customer">Customer</option>
                                        <option value="estimate">Estimate</option>
                                        <option value="contract">Contract</option>
                                        <option value="ticket">Ticket</option>
                                        <option value="expense">Expense</option>
                                        <option value="lead">Lead</option>
                                        <option value="proposal">Proposal</option>
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="assignees" class="form-label">Assignees</label>
                                    <select class="form-control" id="assignees" name="assignees">
                                        <option value="">Select Assignee</option>
                                        <option value="atul bhilare">Atul Bhilare</option>
                                        <option value="komal borse">Komal Borse</option>
                                        <option value="shaheen khan">Shaheen Khan</option>
                                        <option value="priyanka chorat">Priyanka Chorat</option>
                                        <option value="sakshi pisal">Sakshi Pisal</option>
                                        <option value="wasim sayyed">Wasim Sayyed</option>
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="followers" class="form-label">Followers</label>
                                    <select class="form-control" id="followers" name="followers">
                                        <option value="">Select Follower</option>
                                        <option value="atul bhilare">Atul Bhilare</option>
                                        <option value="komal borse">Komal Borse</option>
                                        <option value="shaheen khan">Shaheen Khan</option>
                                        <option value="priyanka chorat">Priyanka Chorat</option>
                                        <option value="sakshi pisal">Sakshi Pisal</option>
                                        <option value="wasim sayyed">Wasim Sayyed</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="tags">Tags</label>
                                    <input type="text" class="form-control" id="tags"
                                        placeholder="Enter tags (comma-separated)" name="tags">
                                </div>
                            </div>
                            <!-- Task Description -->
                            <div class="mb-3">
                                <label for="taskDescription" class="form-label">Task Description</label>
                                <textarea id="taskDescription" class="form-control" rows="4"
                                    placeholder="Enter task description"></textarea>
                            </div>
                        </form>
                    </div>
                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                            id="close-btn">Close</button>
                        <button type="button" class="btn btn-primary" id="save-btn">Save Task</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Edit Modal -->
        <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">Edit Task</h5>
                        <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa-solid fa-xmark" style="font-size: 22px;"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="edit-task-form">
                            <div class="form-group">
                                <label for="task-name">Name</label>
                                <input type="text" id="task-name" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-status">Status</label>
                                <input type="text" id="task-status" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-start-date">Start Date</label>
                                <input type="date" id="task-start-date" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-due-date">Due Date</label>
                                <input type="date" id="task-due-date" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-assigned-to">Assigned To</label>
                                <input type="text" id="task-assigned-to" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-tags">Tags</label>
                                <input type="text" id="task-tags" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="task-priority">Priority</label>
                                <input type="text" id="task-priority" class="form-control" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="close-task" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="save-task" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="card" style="width: 96%;right: -31px;">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-centered w-100 dt-responsive nowrap" id="tasksTable">
                                <thead>
                                    <tr>
                                        <th class="all">ID</th>
                                        <th class="all">Name</th>
                                        <th>Status</th>
                                        <th>Start Date</th>
                                        <th>Due Date</th>
                                        <th>Assigned to</th>
                                        <th>Tags</th>
                                        <th>Priority</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($tasks->count() > 0)
                                        @foreach ($tasks as $task)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>  <!-- Auto-increment task numbering -->
                                                <td>
                                                    {{ $task->name }}
                                                    <div class="task-actions">
                                                        <a href="#" class="edit-task" data-id="{{ $task->id }}" data-name="{{ $task->name }}" data-status="{{ $task->status }}" data-start-date="{{ $task->startDate }}" data-due-date="{{ $task->dueDate }}" data-assigned-to="{{ $task->assignedTo }}" data-bs-toggle="modal" data-bs-target="#editTaskModal">Edit</a> | 
                                                        <a href="#" class="delete-task" data-id="{{ $task->id }}">Delete</a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <select class="form-select task-status-dropdown" data-id="{{ $task->id }}" data-status="{{ $task->status }}">
                                                        <option value="Not Started" {{ $task->status == 'Not Started' ? 'selected' : '' }}>Not Started</option>
                                                        <option value="In Progress" {{ $task->status == 'In Progress' ? 'selected' : '' }}>In Progress</option>
                                                        <option value="Testing" {{ $task->status == 'Testing' ? 'selected' : '' }}>Testing</option>
                                                        <option value="Awaiting Feedback" {{ $task->status == 'Awaiting Feedback' ? 'selected' : '' }}>Awaiting Feedback</option>
                                                        <option value="Complete" {{ $task->status == 'Complete' ? 'selected' : '' }}>Complete</option>
                                                    </select>
                                                </td>
                                                <td>{{ $task->startDate }}</td>
                                                <td>{{ $task->dueDate }}</td>
                                                <td>{{ $task->assignedTo }}</td>
                                                <td>{{ $task->tags }}</td>
                                                <td>{{ $task->priority }}</td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr><td colspan="8">No tasks found.</td></tr>
                                    @endif
                                </tbody>
                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function () {

            const storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
            console.log("Stored Tasks:", storedTasks); // Inspect the data here

            // // Function to load data from localStorage into DataTable
            // function loadTasksFromLocalStorage() {
            //     var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
            //     var table = $('#tasksTable').DataTable();

            //     table.clear().draw(); // Clear the DataTable

            //     storedTasks.forEach(function (task) {
            //         // Check if the task object has at least a 'name' property (or any other required property)
            //         if (task && task.name) {
            //             table.row.add([
            //                 task.id || '',
            //                 task.name || '',
            //                 task.status || '',
            //                 task.startDate || '',
            //                 task.dueDate || '',
            //                 task.assignedTo || '',
            //                 task.tags || '',
            //                 task.priority || ''
            //             ]);
            //         }
            //     });

            //     table.draw(); // Re-draw the DataTable to apply render functions
            // }

            // Clear the table's HTML before initializing DataTable
            $('#tasksTable tbody').empty();

            // Initialize DataTable
            $('#tasksTable').DataTable({
                "columnDefs": [
                    {
                        "targets": 0,
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;  // Auto-increment ID column
                        }
                    },
                    {
                        "targets": 1,  // The "Name" column
                        "data": 1,  // Ensure this matches the index for the "Name" field
                        "render": function (data, type, row) {
                            // Add Edit | Delete links inside the 'Name' column
                            return data + '<br><div class="actions" style="color: #e83e8c;">' +
                                '<a href="#" class="edit-link" data-id="' + row[0] + '">Edit</a> | ' +
                                '<a href="#" class="delete-link" data-id="' + row[0] + '">Delete</a>' +
                                '</div>';
                        }
                    },
                    {
                        "targets": 2,  // The "Status" column
                        "data": 2,
                        "render": function (data, type, row) {
                            var statusOptions = ['Not Started', 'In Progress', 'Testing', 'Awaiting Feedback', 'Complete'];
                            var dropdown = '<select class="task-status-dropdown" data-id="' + row[0] + '">';

                            statusOptions.forEach(function (status) {
                                var selected = (status === data) ? 'selected' : '';
                                dropdown += '<option value="' + status + '" ' + selected + '>' + status + '</option>';
                            });

                            dropdown += '</select>';
                            return dropdown;
                        }
                    },
                    {
            "targets": 7,  // Ensure this is the correct index for the "Priority" column
            "data": function (row, type, val, meta) {
                return row[7]; // Ensure this corresponds to the right column in your dataset
            },
            "render": function (data, type, row) {
                if (type === 'display' || type === 'filter') {
                    if (!data || data === '') {
                        return '<span style="color: gray;">No Priority</span>'; // Handle empty, null, or undefined cases
                    }
                    switch (data.toLowerCase()) {
                        case 'low':
                            return '<span style="color: #d7d700;">Low</span>'; // Text color for "Low"
                        case 'medium':
                            return '<span style="color: #03a9f4;">Medium</span>'; // Text color for "Medium"
                        case 'high':
                            return '<span style="color: #ff6f00;">High</span>'; // Text color for "High"
                        default:
                            return '<span style="color: gray;">No Priority</span>'; // Fallback for other cases
                    }
                }
                return data;
            }
        }

                ],
                "columns": [
                    { "title": "ID" },
                    { "title": "Name" },
                    { "title": "Status" },
                    { "title": "Start Date" },
                    { "title": "Due Date" },
                    { "title": "Assigned To" },
                    { "title": "Tags" },
                    { "title": "Priority" }
                ],
                "rowCallback": function (row, data) {
                    $(row).addClass('task-row');
                }
            });


            // Load tasks from localStorage when the page loads
            loadTasksFromLocalStorage();


            // Save new task
            $('#save-btn').on('click', function () {
                // Capture data from the modal form
                var name = $('#subject').val();
                var status = 'Not Started'; // Default status
                var startDate = $('#startDate').val();
                var dueDate = $('#dueDate').val();
                var assignedTo = $('#assignees').val();
                var tags = $('#tags').val();
                var priority = $('#priority').val();

                // Get existing tasks from localStorage
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];

                // Create a new task object
                var newTask = {
                    id: storedTasks.length + 1, // Generate a new ID
                    name: name,
                    status: status,
                    startDate: startDate,
                    dueDate: dueDate,
                    assignedTo: assignedTo,
                    tags: tags,
                    priority: priority
                };


                // Add the new task to the array
                storedTasks.push(newTask);

                // Save updated task list to localStorage
                localStorage.setItem('tasks', JSON.stringify(storedTasks));

                // Reload tasks in the DataTable
                loadTasksFromLocalStorage();

                // Optionally, close the modal
                $('#addNewTaskModal').modal('hide');
            });

            // Edit Button Click
            $('#tasksTable tbody').on('click', '.edit-btn', function () {
                var taskId = $(this).data('id');
                console.log('Edit task with ID:', taskId);
            });

            // Delete Button Click
            $('#tasksTable tbody').on('click', '.delete-btn', function () {
                var taskId = $(this).data('id');
                if (confirm("Are you sure you want to delete this task?")) {
                    var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                    var updatedTasks = storedTasks.filter(task => task.id !== taskId);
                    localStorage.setItem('tasks', JSON.stringify(updatedTasks));

                    resequenceIds();
                    loadTasksFromLocalStorage(); // Reload data after deletion
                }
            });

            function resequenceIds() {
                var table = $('#tasksTable').DataTable();
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];

                table.clear().draw();

                storedTasks.forEach(function (task, index) {
                    task.id = index + 1;
                    table.row.add({
                        id: task.id,
                        name: task.name,
                        status: task.status,
                        startDate: task.startDate,
                        dueDate: task.dueDate,
                        assignedTo: task.assignedTo,
                        tags: task.tags,
                        priority: task.priority
                    }).draw(false);
                });

                localStorage.setItem('tasks', JSON.stringify(storedTasks));
            }



            // Edit Button Click
            $('#tasksTable tbody').on('click', '.edit-link', function () {
                var taskId = $(this).data('id');
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var task = storedTasks.find(t => t.id == taskId);

                if (task) {
                    // Populate modal fields with task data
                    $('#editModal #task-name').val(task.name);
                    $('#editModal #task-status').val(task.status);
                    $('#editModal #task-start-date').val(task.startDate);
                    $('#editModal #task-due-date').val(task.dueDate);
                    $('#editModal #task-assigned-to').val(task.assignedTo);
                    $('#editModal #task-tags').val(task.tags);
                    $('#editModal #task-priority').val(task.priority);

                    $('#editModal').data('task-id', task.id).modal('show');  // Open the modal
                }
            });

            // Save edited task
            $('#save-task').on('click', function () {
                var taskId = $('#editModal').data('task-id');
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var taskIndex = storedTasks.findIndex(t => t.id == taskId);

                if (taskIndex !== -1) {
                    // Update the task object
                    storedTasks[taskIndex].name = $('#editModal #task-name').val();
                    storedTasks[taskIndex].status = $('#editModal #task-status').val();
                    storedTasks[taskIndex].startDate = $('#editModal #task-start-date').val();
                    storedTasks[taskIndex].dueDate = $('#editModal #task-due-date').val();
                    storedTasks[taskIndex].assignedTo = $('#editModal #task-assigned-to').val();
                    storedTasks[taskIndex].tags = $('#editModal #task-tags').val();
                    storedTasks[taskIndex].priority = $('#editModal #task-priority').val();

                    // Save updated task list to localStorage
                    localStorage.setItem('tasks', JSON.stringify(storedTasks));

                    // Reload tasks in the DataTable
                    loadTasksFromLocalStorage();

                    // Close the modal
                    $('#editModal').modal('hide');
                }
            });

            // Delete Button Click
            $('#tasksTable tbody').on('click', '.delete-link', function () {
                var taskId = $(this).data('id');
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var updatedTasks = storedTasks.filter(task => task.id != taskId);

                // Save updated task list to localStorage
                localStorage.setItem('tasks', JSON.stringify(updatedTasks));

                // Reload tasks in the DataTable
                loadTasksFromLocalStorage();
            });


            // Status options
            var statusColors = {
                'Not Started': 'status-not-started',
                'In Progress': 'status-in-progress',
                'Testing': 'status-testing',
                'Awaiting Feedback': 'status-awaiting-feedback',
                'Complete': 'status-complete'
            };

            // Update the dropdown background and border based on the selected option
            function updateDropdownStyle(dropdown) {
                var statusColors = {
                    'Not Started': 'status-not-started',
                    'In Progress': 'status-in-progress',
                    'Testing': 'status-testing',
                    'Awaiting Feedback': 'status-awaiting-feedback',
                    'Complete': 'status-complete'
                };

                var selectedOption = dropdown.value;
                var statusClass = statusColors[selectedOption] || '';

                // Reset any previously applied status classes
                dropdown.classList.remove(...Object.values(statusColors));

                // Add the new status class
                if (statusClass) {
                    dropdown.classList.add(statusClass);
                }
            }


            // When the status dropdown is rendered, apply the initial styles
            $('#tasksTable').on('change', '.task-status-dropdown', function () {
                var taskId = $(this).data('id');
                var newStatus = $(this).val();

                // Update the task's status in localStorage
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var taskIndex = storedTasks.findIndex(task => task.id == taskId);

                if (taskIndex !== -1) {
                    storedTasks[taskIndex].status = newStatus;
                    localStorage.setItem('tasks', JSON.stringify(storedTasks));
                }

                updateDropdownStyle(this); // Apply the style after selection
            });

            // When the page loads, apply the correct styles for each dropdown based on the pre-selected value
            $('.task-status-dropdown').each(function () {
                updateDropdownStyle(this);
            });


            function updateTaskCounts() {
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];

                var statusCounts = {
                    'Not Started': 0,
                    'In Progress': 0,
                    'Testing': 0,
                    'Awaiting Feedback': 0,
                    'Complete': 0
                };

                // Count tasks by their status
                storedTasks.forEach(function (task) {
                    if (task.status && statusCounts.hasOwnProperty(task.status)) {
                        statusCounts[task.status]++;
                    }
                });

                // Update the task cards with the new counts
                $('#not-started-count').text(statusCounts['Not Started'] + ' Not Started');
                $('#in-progress-count').text(statusCounts['In Progress'] + ' In Progress');
                $('#testing-count').text(statusCounts['Testing'] + ' Testing');
                $('#awaiting-feedback-count').text(statusCounts['Awaiting Feedback'] + ' Awaiting Feedback');
                $('#complete-count').text(statusCounts['Complete'] + ' Complete');
            }

            // Call this function whenever tasks are added, edited, or deleted
            function loadTasksFromLocalStorage() {
                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var table = $('#tasksTable').DataTable();

                table.clear().draw(); // Clear the DataTable

                storedTasks.forEach(function (task) {
                    if (task && task.name) {
                        table.row.add([
                            task.id || '',
                            task.name || '',
                            task.status || '',
                            task.startDate || '',
                            task.dueDate || '',
                            task.assignedTo || '',
                            task.tags || '',
                            task.priority || ''
                        ]);
                    }
                });

                table.draw(); // Re-draw the DataTable to apply render functions

                // Apply styles to the dropdowns after the table is redrawn
                $('.task-status-dropdown').each(function () {
                    updateDropdownStyle(this);
                });
            }

            // Whenever a task is saved or edited, update the counts
            $('#save-btn').on('click', function () {
                // (Saving new task logic here)
                loadTasksFromLocalStorage();
                updateTaskCounts(); // Update counts after saving a new task
            });

            $('#save-task').on('click', function () {
                // (Save edited task logic here)
                loadTasksFromLocalStorage();
                updateTaskCounts(); // Update counts after editing a task
            });

            $('#tasksTable tbody').on('click', '.delete-link', function () {
                // (Task deletion logic here)
                loadTasksFromLocalStorage();
                updateTaskCounts(); // Update counts after editing a task
            });

            // Update counts when task status changes
            $('#tasksTable').on('change', '.task-status-dropdown', function () {
                var taskId = $(this).data('id');
                var newStatus = $(this).val();

                var storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                var taskIndex = storedTasks.findIndex(task => task.id == taskId);

                if (taskIndex !== -1) {
                    storedTasks[taskIndex].status = newStatus;
                    localStorage.setItem('tasks', JSON.stringify(storedTasks));
                }

                updateTaskCounts(); // Update counts after status change
            });

            // Load tasks and update counts when the page loads
            loadTasksFromLocalStorage();
            updateTaskCounts(); // Update counts after status change

        }); 
    </script>
@endsection