<?php include 'header.php'; ?>
<style>
    .tab-btn {
        color: #64748b;
        border-bottom: 2px solid transparent;
    }

    .active-tab {
        color: #4f46e5;
        border-bottom: 2px solid #4f46e5;
    }
</style>
<div class="min-h-screen bg-slate-100 px-0 py-3 md:p-2 lg:p-6">
    <!-- Main Card -->
    <div class="mx-auto max-w-7xl rounded-2xl bg-white shadow-lg border border-slate-200 overflow-hidden">
        <!-- Header -->
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 border-b border-slate-200 p-6">
            <!-- Left -->
            <div class="flex items-center gap-4">
                <!-- Icon -->
                <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-md">
                    <i class="ri-task-line text-2xl"></i>
                </div>
                <!-- Title -->
                <div>
                    <div class="flex items-center gap-3 flex-wrap">
                        <h1 class="text-2xl font-bold text-slate-800">
                            TASK-001
                        </h1>
                        <span class="rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700">
                            In Progress
                        </span>
                    </div>
                    <p class="mt-1 text-lg font-medium text-slate-600">
                        Login API Development
                    </p>
                </div>
            </div>
        </div>


        <!-- Tabs -->
        <div class="border-b border-slate-200 px-6">
            <div class="flex flex-wrap gap-8">
                <button onclick="showTab('overview')" class="tab-btn active-tab px-1 py-4 text-sm font-semibold">
                    Overview
                </button>
                <button onclick="showTab('subtasks')" class="tab-btn px-1 py-4 text-sm font-semibold">
                    Sub Tasks
                </button>
                <button onclick="showTab('comments')" class="tab-btn px-1 py-4 text-sm font-semibold">
                    Comments
                </button>
                <button onclick="showTab('activity')" class="tab-btn px-1 py-4 text-sm font-semibold">
                    Activity
                </button>
                <button onclick="showTab('qa')" class="tab-btn px-1 py-4 text-sm font-semibold">
                    QA
                </button>
                <button onclick="showTab('rework')" class="tab-btn px-1 py-4 text-sm font-semibold">
                    Rework History
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="grid grid-cols-1 lg:grid-cols-3">
            <!-- Left Section -->
            <div class="lg:col-span-2 border-r border-slate-200 p-6">
                <!-- OVERVIEW -->
                <div id="overview" class="tab-content">
                    <h3 class="mb-3 text-lg font-bold text-slate-800">
                        Description
                    </h3>
                    <p class="text-slate-600 leading-7">
                        Develop login API with email, password and social authentication.
                    </p>
                    <!-- Details -->
                    <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
                        <div>
                            <p class="text-sm font-semibold text-slate-400">
                                Project
                            </p>
                            <h4 class="mt-2 font-bold text-slate-700">
                                CRM System
                            </h4>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-slate-400">
                                Assignee
                            </p>
                            <h4 class="mt-2 font-bold text-slate-700">
                                Rahul Sharma
                            </h4>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-slate-400">
                                Priority
                            </p>
                            <h4 class="mt-2 font-bold text-red-500">
                                High
                            </h4>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-slate-400">
                                Due Date
                            </p>
                            <h4 class="mt-2 font-bold text-slate-700">
                                22 May 2024
                            </h4>
                        </div>
                    </div>
                </div>
                <!-- SUB TASKS -->
<div id="subtasks" class="tab-content hidden">

    <h3 class="mb-6 text-lg font-bold text-slate-800">
        Sub Tasks
    </h3>

    <div class="space-y-4">

        <!-- Task -->
        <div class="rounded-xl border border-slate-200 bg-white p-4">

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

                <!-- Left -->
                <div class="flex items-start gap-4">

                    <input type="checkbox"
                        class="mt-1 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">

                    <div>

                        <h4 class="font-semibold text-slate-700">
                            Design Login API
                        </h4>

                        <p class="mt-1 text-sm text-slate-500">
                            Assigned to Rahul Sharma
                        </p>

                    </div>

                </div>

                <!-- Status -->
                <span
                    class="rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700">

                    Pending

                </span>

            </div>

        </div>

        <!-- Task -->
        <div class="rounded-xl border border-slate-200 bg-white p-4">

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

                <!-- Left -->
                <div class="flex items-start gap-4">

                    <input type="checkbox" checked
                        class="mt-1 h-4 w-4 rounded border-slate-300 text-green-600 focus:ring-green-500">

                    <div>

                        <h4 class="font-semibold text-slate-700">
                            Database Integration
                        </h4>

                        <p class="mt-1 text-sm text-slate-500">
                            Assigned to Amit Patel
                        </p>

                    </div>

                </div>

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

                    Completed

                </span>

            </div>

        </div>

    </div>

</div>

                <!-- COMMENTS -->
                <div id="comments" class="tab-content hidden">
                    <h3 class="text-lg font-bold text-slate-800 mb-4">
                        Comments
                    </h3>
                    <div class="space-y-4">
                        <div class="rounded-xl bg-slate-100 p-4">
                            <p class="font-semibold text-slate-700">
                                Rahul Sharma
                            </p>
                            <p class="mt-1 text-slate-600">
                                API authentication completed.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- ACTIVITY -->
                <div id="activity" class="tab-content hidden">
                    <h3 class="text-lg font-bold text-slate-800 mb-4">
                        Activity
                    </h3>
                    <ul class="space-y-3 text-slate-600">
                        <li>Task Created - 20 May 2024</li>
                        <li>Status Changed to In Progress</li>
                        <li>Assigned to Rahul Sharma</li>
                    </ul>
                </div>
                <!-- QA -->
                <div id="qa" class="tab-content hidden">
                    <h3 class="text-lg font-bold text-slate-800 mb-4">
                        QA Testing
                    </h3>
                    <p class="text-slate-600">
                        QA review pending.
                    </p>
                </div>
                <!-- REWORK -->
                <div id="rework" class="tab-content hidden">
                    <h3 class="text-lg font-bold text-slate-800 mb-4">
                        Rework History
                    </h3>
                    <p class="text-slate-600">
                        No rework history available.
                    </p>
                </div>
            </div>
            <!-- Right Section -->
            <div class="p-6 bg-slate-50">
                <h3 class="mb-6 text-lg font-bold text-slate-800">
                    Task Actions
                </h3>
                <div class="space-y-4">
                    <!-- Start -->
                    <button
                        class="flex w-full items-center justify-center gap-3 rounded-xl border border-green-200 bg-green-50 px-5 py-4 font-semibold text-green-700 transition hover:bg-green-100">
                        <i class="ri-play-circle-line text-lg"></i>
                        Start Task
                    </button>
                    <!-- Hold -->
                    <button onclick="openHoldModal()"
                        class="flex w-full items-center justify-center gap-3 rounded-xl border border-gray-300 bg-gray-100 px-5 py-4 font-semibold text-gray-700 transition hover:bg-gray-200">
                        <i class="ri-time-line text-lg"></i>
                        Put on Hold
                    </button>
                    <!-- Resume -->
                    <button
                        class="flex w-full items-center justify-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-5 py-4 font-semibold text-indigo-700 transition hover:bg-indigo-100">
                        <i class="ri-refresh-line text-lg"></i>
                        Resume Task
                    </button>
                    <!-- Review -->
                    <button
                        class="flex w-full items-center justify-center gap-3 rounded-xl border border-purple-200 bg-purple-50 px-5 py-4 font-semibold text-purple-700 transition hover:bg-purple-100">
                        <i class="ri-eye-line text-lg"></i>
                        Mark as Review
                    </button>
                    <!-- Complete -->
                    <button
                        class="flex w-full items-center justify-center gap-3 rounded-xl border border-blue-200 bg-blue-50 px-5 py-4 font-semibold text-blue-700 transition hover:bg-blue-100">
                        <i class="ri-check-double-line text-lg"></i>
                        Mark as Complete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- HOLD MODAL -->
<div id="holdModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-md rounded-2xl bg-white shadow-2xl">
        <!-- Header -->
        <div class="flex items-center justify-between border-b border-slate-200 p-5">
            <h3 class="text-lg font-bold text-slate-800">
                Put Task on Hold
            </h3>
            <button onclick="closeHoldModal()" class="text-slate-400 transition hover:text-red-500">
                <i class="ri-close-line text-2xl"></i>
            </button>
        </div>
        <!-- Body -->
        <div class="p-5 space-y-4">
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">
                    Reason
                </label>
                <textarea rows="4" placeholder="Enter hold reason..."
                    class="w-full rounded-xl border border-slate-300 px-4 py-3 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"></textarea>
            </div>
        </div>
        <!-- Footer -->
        <div class="flex justify-end gap-3 border-t border-slate-200 p-5">
            <button onclick="closeHoldModal()"
                class="rounded-xl border border-slate-300 px-5 py-2.5 font-semibold text-slate-700 transition hover:bg-slate-100">
                Cancel
            </button>
            <button
                class="rounded-xl bg-indigo-600 px-5 py-2.5 font-semibold text-white transition hover:bg-indigo-700">
                Submit
            </button>
        </div>
    </div>
</div>

<script>

    function showTab(tabId) {

        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });

        // Remove active class from buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active-tab');
        });

        // Show selected tab
        document.getElementById(tabId).classList.remove('hidden');

        // Active current button
        event.target.classList.add('active-tab');
    }

</script>

<script>
    function openHoldModal() {

        const modal = document.getElementById('holdModal');

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeHoldModal() {

        const modal = document.getElementById('holdModal');

        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
</script>

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