@extends('layouts.vertical', ['title' => 'Kanban Board'])

@section('content')

@include('layouts.partials/page-title', ['subtitle' => 'Projects', 'title' => 'Kanban Board'])

<div class="outlook-box kanban-app">
    <div class="card h-100 mb-0 flex-grow-1">
        <div class="card-header border-light align-items-center gap-2">
            <!-- Search Bar -->
            <div class="app-search">
                <input type="search" class="form-control" placeholder="Search tasks...">
                <i data-lucide="search" class="app-search-icon text-muted"></i>
            </div>

            <!-- Filter Controls -->
            <div class="d-flex flex-wrap align-items-center gap-2">
                <!-- Department Filter -->
                <div class="app-search">
                    <select class="form-select form-control">
                        <option selected>Department</option>
                        <option value="Design">Design</option>
                        <option value="Development">Development</option>
                        <option value="UI/UX">UI/UX</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Finance">Finance</option>
                        <option value="QA">QA</option>
                    </select>
                    <i data-lucide="briefcase" class="app-search-icon text-muted"></i>
                </div>


                <!-- Due Date Filter -->
                <div class="app-search">
                    <select class="form-select form-control">
                        <option selected>Due Date</option>
                        <option value="Today">Today</option>
                        <option value="This Week">This Week</option>
                        <option value="This Month">This Month</option>
                    </select>
                    <i data-lucide="calendar-clock" class="app-search-icon text-muted"></i>
                </div>
            </div>

            <!-- Apply Filter Button -->
            <button type="submit" class="btn btn-secondary ms-lg-auto"><i class="ti ti-plus me-1"></i> Add New Card</button>
        </div>

        <div class="card-body p-0">
            <div class="kanban-content bg-light bg-opacity-40">

                <!-- TODO Data-->
                <div class="kanban-board">
                    <div class="kanban-item py-2 px-3 d-flex align-items-center">
                        <h5 class="m-0">To Do (6)</h5>
                        <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i class="ti ti-plus"></i></a>
                    </div>
                    <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                        <ul data-plugins="sortable">
                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-success"><i class="ti ti-point-filled"></i> Design</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                <p class="fw-semibold mb-0">65%</p>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-success" style="width: 65%;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li>

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-warning"><i class="ti ti-point-filled"></i> Development</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                        </h5>

                                        <div class="mb-3">
                                            <img src="/images/kanban/img-1.png" alt="" class="rounded img-fluid">
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </li>

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> UI/UX</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-warning"><i class="ti ti-point-filled"></i> App Development</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Mobile App Redesign</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                <p class="fw-semibold mb-0">80%</p>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-warning" style="width: 80%;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-purple"><i class="ti ti-point-filled"></i> Marketing</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">CRM System Upgrade</a>
                                        </h5>

                                        <div class="mb-3">
                                            <img src="/images/kanban/img-2.png" alt="" class="rounded img-fluid">
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                <p class="fw-semibold mb-0">45%</p>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-primary" style="width: 45%;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->
                        </ul>
                    </div>
                </div>
                <!-- end TODO Data-->

                <!-- IN Progress Data-->
                <div class="kanban-board">
                    <div class="py-2 px-3 d-flex align-items-center">
                        <h5 class="m-0">In Progress (5)</h5>
                        <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i class="ti ti-plus"></i></a>
                    </div>
                    <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                        <ul data-plugins="sortable">

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> Testing</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->


                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> UI/UX</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Mobile App Redesign</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-success"><i class="ti ti-point-filled"></i> UI/UX Design</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Website User Experience Overhaul</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">15 June, 2025</h5>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                <p class="fw-semibold mb-0">55%</p>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-success" style="width: 55%;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-danger"><i class="ti ti-point-filled"></i> Marketing</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3 lh-base">
                                            <a href="#!" class="link-reset">Customer Engagement Platform Development</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">10 June, 2025</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                        </ul>
                    </div>
                </div>
                <!-- end IN Progress Data-->

                <!-- In Review Data-->
                <div class="kanban-board">
                    <div class="kanban-item py-2 px-3 d-flex align-items-center">
                        <h5 class="m-0">In Review (3)</h5>
                        <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i class="ti ti-plus"></i></a>
                    </div>
                    <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                        <ul data-plugins="sortable">
                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-success"><i class="ti ti-point-filled"></i> Design</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                        </h5>

                                        <div class="mb-3">
                                            <img src="/images/kanban/img-3.png" alt="" class="rounded img-fluid">
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                <p class="fw-semibold mb-0">65%</p>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-success" style="width: 65%;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li>

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-warning"><i class="ti ti-point-filled"></i> Development</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </li>

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> UI/UX</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm  btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->
                        </ul>
                    </div>
                </div>
                <!-- end In Review Data-->

                <!-- Done Data-->
                <div class="kanban-board">
                    <div class="py-2 px-3 d-flex align-items-center">
                        <h5 class="m-0">Done (2)</h5>
                        <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i class="ti ti-plus"></i></a>
                    </div>
                    <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                        <ul data-plugins="sortable">

                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> Testing</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                        </h5>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->


                            <li class="kanban-item">
                                <div class="card shadow border-light mb-2">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge p-1 badge-soft-info"><i class="ti ti-point-filled"></i> UI/UX</span>
                                            <div class="ms-auto">
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical fs-xl"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-share me-2"></i>Share</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-edit me-2"></i>Edit</a></li>
                                                        <li><a class="dropdown-item" href="#"><i class="ti ti-ban me-2"></i>Block</a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h5 class="mb-3">
                                            <a href="#!" class="link-reset">Mobile App Redesign</a>
                                        </h5>

                                        <div class="mb-3">
                                            <img src="/images/kanban/img-4.png" alt="" class="rounded img-fluid">
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <div class="avatar-group avatar-group-xs">
                                                <div class="avatar">
                                                    <img src="/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                                <div class="avatar">
                                                    <img src="/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- end card-->
                            </li> <!-- end kanban item-->

                        </ul>
                    </div>
                </div>
                <!-- end Done Data-->

            </div> <!-- End Kanban-content-->
        </div> <!-- end card-body-->
    </div> <!-- end card-->
</div> <!-- end row-->

@endsection

@section('scripts')
@vite(['resources/js/pages/apps-kanban.js'])
@endsection