<?php include 'header.php'; ?>

<!-- Chart JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Page Wrapper -->
<div class="px-0 py-3 md:p-2 lg:p-6 min-h-screen">

    <!-- Header -->
    <div
        class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">

        <!-- Title -->
        <div>

            <h1 class="text-2xl font-bold text-gray-800">
                Project List
            </h1>

            <p class="text-sm text-gray-500">
                Manage all project from here
            </p>

        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">

            <!-- Search -->
            <div class="relative">

                <input type="text" placeholder="Search Users..."
                    class="w-full sm:w-[220px] pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm">

                <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>

            </div>

            <!-- Filter -->
            <button id="openFilter"
                class="px-4 py-2.5 rounded-xl border border-blue-100 bg-white hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-white transition-all duration-300 text-sm text-blue-600 flex items-center gap-2">

                <i class="ri-filter-3-line"></i>
                Filter

            </button>

            <!-- Add Project -->
            <a href="add_project.php"
                class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium px-5 py-2.5 rounded-xl shadow-lg hover:shadow-blue-200 transition-all duration-300 flex items-center gap-2">

                <i class="ri-add-line text-lg"></i>
                Add New Project

            </a>

        </div>

    </div>

    <!-- Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden">

        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="w-full min-w-[1000px]">

                <!-- Table Head -->
                <thead class="bg-gray-50 border-b border-gray-200">

                    <tr class="text-left">

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Project Name
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Client
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Deadline
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Progress
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Status
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Manager
                        </th>

                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Action
                        </th>

                    </tr>

                </thead>

                <!-- Table Body -->
                <tbody class="divide-y divide-gray-100 bg-white">

                    <!-- Row 1 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            CRM System
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            TechSoft Pvt. Ltd.
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            31 May 2024
                        </td>

                        <td class="px-6 py-4">

                            <div class="flex items-center gap-2">

                                <div class="w-24 bg-gray-200 rounded-full h-1.5">

                                    <div class="bg-green-500 h-1.5 rounded-full" style="width: 79%"></div>

                                </div>

                                <span class="text-xs text-gray-600 font-medium">
                                    79%
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4">

                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                On Track
                            </span>

                        </td>

                        <td class="px-6 py-4">

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=3"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Amit Kumar
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 align-middle">

                            <div class="flex items-center justify-center gap-2">

                                <a href="view_project.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">

                                    <i class="ri-eye-line"></i>

                                </a>

                                <button
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">

                                    <i class="ri-edit-line"></i>

                                </button>

                                <button
                                    onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">

                                    <i class="ri-delete-bin-line"></i>

                                </button>

                            </div>

                        </td>

                    </tr>

                    <!-- Row 2 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
                            E-commerce Website
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-700">
                            NextGen Retail
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            25 May 2024
                        </td>

                        <td class="px-6 py-4">

                            <div class="flex items-center gap-2">

                                <div class="w-24 bg-gray-200 rounded-full h-1.5">

                                    <div class="bg-green-500 h-1.5 rounded-full" style="width: 80%"></div>

                                </div>

                                <span class="text-xs text-gray-600 font-medium">
                                    80%
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4">

                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                On Track
                            </span>

                        </td>

                        <td class="px-6 py-4">

                            <div class="flex items-center gap-3">

                                <img src="https://i.pravatar.cc/40?img=2"
                                    class="w-8 h-8 rounded-full object-cover">

                                <span class="text-sm text-gray-700 font-medium">
                                    Priya Verma
                                </span>

                            </div>

                        </td>

                        <td class="px-6 py-4 align-middle">

                            <div class="flex items-center justify-center gap-2">

                                <a href="view_project.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">

                                    <i class="ri-eye-line"></i>

                                </a>

                                <button
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">

                                    <i class="ri-edit-line"></i>

                                </button>

                                <button
                                    onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">

                                    <i class="ri-delete-bin-line"></i>

                                </button>

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <!-- Footer -->
        <div
            class="px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4">

            <!-- Left -->
            <p class="text-sm text-gray-500">
                Showing 1 to 6 of 24 projects
            </p>

            <!-- Pagination -->
            <div class="flex items-center gap-2">

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">

                    <i class="ri-arrow-left-s-line"></i>

                </button>

                <button
                    class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">
                    1
                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    2
                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    3
                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    4
                </button>

                <button
                    class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">

                    <i class="ri-arrow-right-s-line"></i>

                </button>

            </div>

        </div>

    </div>

    <!-- Analytics Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-5">

        <!-- Project Progress -->
        <div class="bg-white rounded-lg border border-gray-200 p-5">

            <div class="flex items-center justify-between mb-6">

                <h3 class="text-lg font-semibold text-gray-800">
                    Project Progress
                </h3>

                <span class="px-3 py-1 rounded-full bg-green-100 text-green-600 text-sm font-semibold">
                    74%
                </span>

            </div>

            <div class="h-[220px]">

                <canvas id="projectProgressChart"></canvas>

            </div>

        </div>

        <!-- Task Summary -->
        <!-- Task Summary -->
<div class="bg-white rounded-xl border border-gray-200 p-6">

    <!-- Heading -->
    <div class="flex items-center justify-between mb-6">

        <div>

            <h3 class="text-lg font-semibold text-gray-800">
                Task Summary
            </h3>

            <p class="text-sm text-gray-500 mt-1">
                Overview of all project tasks
            </p>

        </div>

        <div class="w-11 h-11 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">

            <i class="ri-task-line text-xl"></i>

        </div>

    </div>

    <!-- Stats -->
    <div class="grid grid-cols-2 gap-4">

        <!-- Total Tasks -->
        <div
            class="rounded-2xl border border-blue-100 bg-blue-50/60 p-5 hover:shadow-sm transition">

            <div class="flex items-center justify-between mb-3">

                <span class="text-sm font-medium text-blue-600">
                    Total Tasks
                </span>

                <div class="w-10 h-10 rounded-xl bg-white text-blue-600 flex items-center justify-center shadow-sm">

                    <i class="ri-file-list-3-line text-lg"></i>

                </div>

            </div>

            <h2 class="text-3xl font-bold text-gray-900">
                120
            </h2>

        </div>

        <!-- Completed -->
        <div
            class="rounded-2xl border border-green-100 bg-green-50/60 p-5 hover:shadow-sm transition">

            <div class="flex items-center justify-between mb-3">

                <span class="text-sm font-medium text-green-600">
                    Completed
                </span>

                <div class="w-10 h-10 rounded-xl bg-white text-green-600 flex items-center justify-center shadow-sm">

                    <i class="ri-checkbox-circle-line text-lg"></i>

                </div>

            </div>

            <h2 class="text-3xl font-bold text-gray-900">
                72
            </h2>

        </div>

        <!-- In Progress -->
        <div
            class="rounded-2xl border border-yellow-100 bg-yellow-50/60 p-5 hover:shadow-sm transition">

            <div class="flex items-center justify-between mb-3">

                <span class="text-sm font-medium text-yellow-600">
                    In Progress
                </span>

                <div class="w-10 h-10 rounded-xl bg-white text-yellow-600 flex items-center justify-center shadow-sm">

                    <i class="ri-loader-4-line text-lg"></i>

                </div>

            </div>

            <h2 class="text-3xl font-bold text-gray-900">
                28
            </h2>

        </div>

        <!-- Streak -->
        <div
            class="rounded-2xl border border-red-100 bg-red-50/60 p-5 hover:shadow-sm transition">

            <div class="flex items-center justify-between mb-3">

                <span class="text-sm font-medium text-red-600">
                    Streak
                </span>

                <div class="w-10 h-10 rounded-xl bg-white text-red-600 flex items-center justify-center shadow-sm">

                    <i class="ri-fire-line text-lg"></i>

                </div>

            </div>

            <h2 class="text-3xl font-bold text-gray-900">
                10
            </h2>

        </div>

    </div>

</div>

    </div>

</div>
<!-- Filter Sidebar -->
<div id="filterSidebar"
    class="fixed top-0 right-[-400px] w-[320px] h-full bg-white shadow-2xl z-50 transition-all duration-300 border-l border-gray-200">
    <!-- Header -->
    <div class="flex items-center justify-between p-5 border-b border-gray-100">
        <h2 class="text-lg font-bold text-gray-800">
            Filters
        </h2>
        <button id="closeFilter"
            class="w-9 h-9  text-black  flex items-center justify-center">

            <i class="ri-close-line text-xl"></i>

        </button>
    </div>
    <!-- Body -->
    <div class="p-5 space-y-5 pb-28 overflow-y-auto">

        <!-- From Date -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                From Date
            </label>

            <div class="relative">

                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>

                <input type="date"
                    class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">

            </div>

        </div>

        <!-- To Date -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                To Date
            </label>

            <div class="relative">

                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>

                <input type="date"
                    class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">

            </div>

        </div>

                <!-- Client Name -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Project Name
            </label>

            <div class="relative">

                <div class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-slate-400">

                    <i class="ri-folder-line"></i>

                </div>

                <select id="companyName">

                    <option value="">Select Project</option>
                    <option value="Raj Enterprise">CRM System</option>
                    <option value="ABC Corporation">E-commerce Website</option>
                    <option value="Galaxy Pvt Ltd">Gym Website</option>
                    <option value="Bright Solutions">Bright Website</option>

                </select>

            </div>

        </div>

<!-- Status -->
<div class="w-full">

    <label class="mb-1 block text-sm font-medium text-slate-700">
        Status
    </label>

    <div class="relative">

        <div class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-slate-400">

            <i class="ri-loader-4-line"></i>

        </div>

        <select id="statusSelect">

            <option value="">Select Status</option>

            <option value="Active">
                Active
            </option>

            <option value="Expiring">
                Expiring
            </option>

            <option value="Expired">
                Expired
            </option>

            <option value="All">
                All
            </option>

        </select>

    </div>

</div>

<!-- Client Name -->
<div class="w-full">

    <label class="mb-1 block text-sm font-medium text-slate-700">
        Client Name
    </label>

    <div class="relative">

        <i class="ri-building-4-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>

        <input 
            type="text"
            id="clientName"
            placeholder="Enter Client Name"
            class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100"
        >

    </div>

</div>

    </div>
    <!-- Bottom Fixed Buttons -->
    <div class="absolute bottom-0 left-0 w-full border-t border-gray-200 bg-white p-4">
        <div class="flex flex-row items-center justify-center gap-3 whitespace-nowrap">
            <!-- Reset Button -->
            <button
                class="w-1/2 h-11 rounded-md border border-slate-200 bg-slate-100 text-sm font-medium text-slate-700 transition hover:bg-slate-200">
                Reset
            </button>
            <!-- Apply Filter Button -->
            <button
                class="w-1/2 h-11 rounded-md bg-gradient-to-r from-blue-500 to-indigo-600 text-sm font-medium text-white shadow-md transition hover:from-blue-600 hover:to-indigo-700">
                Apply Filter
            </button>
        </div>
    </div>
</div>



<script>

const statusSelect = new TomSelect("#statusSelect", {

    create: false,
    maxOptions: 10,
    placeholder: "Search Status...",

    openOnFocus: false,
    dropdownParent: "body",

    closeAfterSelect: true,

    onType: function(str) {

        if (str.trim().length > 0) {

            this.open();

        } else {

            this.close();

        }

    },

    onItemAdd:function(){

        this.control_input.value = "";

        this.control_input.setAttribute(
            "readonly",
            "readonly"
        );

        this.blur();
        this.close();

    },

    onDropdownOpen:function(){

        this.control_input.removeAttribute(
            "readonly"
        );

    }

});


// Control Style
statusSelect.control.classList.add(
    "flex",
    "items-center",
    "h-11",
    "w-full",
    "rounded-lg",
    "border",
    "border-gray-200",
    "bg-white",
    "pl-10",
    "pr-4",
    "text-sm",
    "text-gray-700"
);


// Dropdown Style
statusSelect.dropdown.classList.add(
    "z-[99999]",
    "overflow-hidden",
    "rounded-xl",
    "border",
    "border-gray-200",
    "bg-white",
    "shadow-xl"
);


// Input Style
statusSelect.control_input.classList.add(
    "w-full",
    "bg-transparent",
    "text-sm",
    "text-gray-700",
    "placeholder:text-gray-400",
    "focus:outline-none",
    "ml-2"
);


// Dropdown Position Fix
statusSelect.on("dropdown_open", function() {

    const controlRect =
        statusSelect.control.getBoundingClientRect();

    statusSelect.dropdown.style.position = "absolute";

    statusSelect.dropdown.style.width =
        controlRect.width + "px";

    statusSelect.dropdown.style.top =
        (controlRect.bottom + window.scrollY) + "px";

    statusSelect.dropdown.style.left =
        (controlRect.left + window.scrollX) + "px";

    statusSelect.dropdown.style.zIndex = "99999";

});

</script>

<script>

    const openFilter = document.getElementById("openFilter");
    const closeFilter = document.getElementById("closeFilter");
    const filterSidebar = document.getElementById("filterSidebar");
    const sidebarOverlay = document.getElementById("sidebarOverlay");

    openFilter.addEventListener("click", () => {

        filterSidebar.style.right = "0";
        sidebarOverlay.classList.remove("hidden");

    });

    closeFilter.addEventListener("click", () => {

        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");

    });

    sidebarOverlay.addEventListener("click", () => {

        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");

    });

</script>
<script>

const companyName = new TomSelect("#companyName", {

    create: false,
    maxOptions: 10,
    placeholder: "Search Project Name...",

    openOnFocus: false,

    dropdownParent: "body",

    onType: function(str) {

        if (str.length > 0) {

            this.open();

        } else {

            this.close();

        }

    }

});


// Control Style
companyName.control.classList.add(
    "flex",
    "items-center",
    "h-11",
    "w-full",
    "rounded-lg",
    "border",
    "border-gray-200",
    "bg-white",
    "pl-10",
    "pr-4",
    "text-sm",
    "text-gray-700"
);


// Dropdown Style
companyName.dropdown.classList.add(
    "z-[99999]",
    "overflow-hidden",
    "rounded-xl",
    "border",
    "border-gray-200",
    "bg-white",
    "shadow-xl"
);


// Input Style
companyName.control_input.classList.add(
    "w-full",
    "bg-transparent",
    "text-sm",
    "text-gray-700",
    "placeholder:text-gray-400",
    "focus:outline-none",
    "ml-2"
);


// Dropdown Position Fix
companyName.on("dropdown_open", function() {

    const controlRect =
        companyName.control.getBoundingClientRect();

    companyName.dropdown.style.position = "absolute";

    companyName.dropdown.style.width =
        controlRect.width + "px";

    companyName.dropdown.style.top =
        (controlRect.bottom + window.scrollY + 5) + "px";

    companyName.dropdown.style.left =
        (controlRect.left + window.scrollX) + "px";

    companyName.dropdown.style.zIndex = "99999";

});

</script>
<script>

const ctx = document.getElementById('projectProgressChart');

new Chart(ctx, {

    type: 'line',

    data: {

        labels: ['1 May', '5 May', '10 May', '15 May', '20 May', '25 May', '30 May'],

        datasets: [{

            data: [10, 35, 40, 60, 55, 50, 74],

            borderColor: '#34d399',
            backgroundColor: 'rgba(52, 211, 153, 0.08)',

            fill: true,

            tension: 0.4,

            pointRadius: 4,
            pointHoverRadius: 5,

            pointBackgroundColor: '#ffffff',
            pointBorderColor: '#34d399',
            pointBorderWidth: 2

        }]

    },

    options: {

        responsive: true,
        maintainAspectRatio: false,

        plugins: {

            legend: {
                display: false
            }

        },

        scales: {

            y: {

                display: false,

                grid: {
                    display: false
                }

            },

            x: {

                grid: {
                    display: false
                },

                ticks: {

                    color: '#6b7280',

                    font: {
                        size: 12
                    }

                }

            }

        }

    }

});

</script>

<?php include 'footer.php'; ?>