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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task Management - Multi Step Form</title>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>

    <style>

/* =========================
   TOM SELECT COMPLETE FIX
========================= */

.ts-wrapper{
    width:100%;
    position:relative;
}

.ts-control{
    min-height:56px !important;
    height:56px !important;
    border:1px solid #d1d5db !important;
    border-radius:16px !important;
    padding:0 16px !important;
    background:#fff !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
}

.ts-control input{
    font-size:14px !important;
}

.ts-wrapper.focus .ts-control{
    border-color:#8b5cf6 !important;
    box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;
}

/* DROPDOWN */
.ts-dropdown{
    margin-top:8px !important;
    border-radius:16px !important;
    border:1px solid #e5e7eb !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;
    z-index:9999 !important;
}

/* SCROLLABLE AREA */
.ts-dropdown-content{
    max-height:220px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scroll-behavior:smooth;
}

/* SCROLLBAR */
.ts-dropdown-content::-webkit-scrollbar{
    width:6px;
}

.ts-dropdown-content::-webkit-scrollbar-track{
    background:transparent;
}

.ts-dropdown-content::-webkit-scrollbar-thumb{
    background:#c4b5fd;
    border-radius:20px;
}

/* OPTIONS */
.ts-dropdown .option{
    padding:14px 16px !important;
    font-size:14px !important;
    line-height:1.4;
    cursor:pointer;
}

/* ACTIVE OPTION */
.ts-dropdown .active{
    background:#f3e8ff !important;
    color:#7c3aed !important;
}

/* SELECTED ITEM */
.ts-dropdown .selected{
    background:#ede9fe !important;
    color:#6d28d9 !important;
}

/* MOBILE */
@media(max-width:640px){

    .ts-control{
        min-height:52px !important;
        height:52px !important;
        border-radius:14px !important;
    }

    .ts-dropdown-content{
        max-height:180px !important;
    }

}

        /* ── Floating label input ── */
        .fi { position: relative; }

        .fi input,
        .fi textarea {
            width: 100%;
            height: 56px;
            border: 1px solid #d1d5db;
            border-radius: 0.75rem;
            padding: 0 1rem;
            outline: none;
            font-size: 0.9375rem;
            color: #1f2937;
            background: white;
            transition: border-color 0.25s, box-shadow 0.25s;
            box-sizing: border-box;
            font-family: inherit;
        }

        .fi textarea {
            height: 100px;
            resize: none;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
        }

        .fi input:focus,
        .fi textarea:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 4px rgba(139,92,246,0.10);
        }

        /* Label sits vertically centred by default */
        .fi label {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            padding: 0 4px;
            color: #000000;
            font-size: 0.9375rem;
            pointer-events: none;
            transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, transform 0.2s ease;
            white-space: nowrap;
        }

        /* Textarea label starts at top */
        .fi textarea + label {
            top: 1.1rem;
            transform: none;
        }

        /* Float up on focus or when filled */
        .fi input:focus + label,
        .fi input:not(:placeholder-shown) + label {
            top: 0;
            transform: translateY(-50%);
            font-size: 0.6875rem;
            color: #8b5cf6;
        }

        .fi textarea:focus + label,
        .fi textarea:not(:placeholder-shown) + label {
            top: -0.55rem;
            transform: none;
            font-size: 0.6875rem;
            color: #8b5cf6;
        }

        /* ── Custom select wrapper ── */
        .si { position: relative; }

        .si select {
            width: 100%;
            height: 56px;
            border: 1px solid #d1d5db;
            border-radius: 0.75rem;
            padding: 0 2.5rem 0 1rem;
            outline: none;
            font-size: 0.9375rem;
            color: #000000;          /* placeholder colour when nothing chosen */
            background: white;
            appearance: none;
            cursor: pointer;
            transition: border-color 0.25s, box-shadow 0.25s;
            box-sizing: border-box;
            font-family: inherit;
        }

        /* Once an option is chosen the value attr is set, darken text */
        .si select.chosen {
            color: #1f2937;
        }

        .si select:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 4px rgba(139,92,246,0.10);
            color: #1f2937;
        }

        /* Chevron icon */
        .si::after {
            content: '\ea4e';           /* ri-arrow-down-s-line codepoint */
            font-family: 'remixicon';
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #000000;
            pointer-events: none;
            font-size: 1.1rem;
        }

        /* form step visibility */
        .form-step { display: none; }
        .form-step.active { display: block; }
    </style>
</head>

<body class="bg-gray-100 min-h-screen">
<!-- ══ PAGE HEADER ══ -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

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

        <!-- Heading -->
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                Add Task
            </h1>
        </div>

        <!-- Back Button -->
        <a href="task_list.php">
        <button
            class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

            <i class="ri-arrow-left-line"></i>
            Back
        </button>
        </a>

    </div>

</div>
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

    <!-- CARD -->
   <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

       <div class="flex flex-col lg:flex-row gap-6 lg:gap-14">

            <!-- ── LEFT SIDEBAR ── -->
            <div class="w-full lg:w-64 xl:w-72 flex-shrink-0">

                <!-- Mobile progress bar -->
                <div class="flex lg:hidden items-center justify-between mb-6">
                    <span id="mobileLabel" class="text-sm font-semibold text-gray-800">Step 1 of 4 — Task Details</span>
                    <div class="flex gap-1.5">
                        <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500 transition-all"></div>
                        <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                        <div id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                        <div id="mdot3" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                    </div>
                </div>

                <!-- Desktop sidebar -->
                <div class="hidden lg:flex flex-col gap-0">

                    <!-- Step 1 -->
                    <div class="flex gap-4 items-start">
                        <div class="flex flex-col items-center">
                            <div id="sd0" class="w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                            <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                        </div>
                        <div class="pt-0.5">
                            <div class="text-[11px] font-semibold text-gray-400">01</div>
                            <div id="st0" class="text-[15px] font-bold text-gray-900">Task Details</div>
                            <div class="text-xs text-gray-400">Name, type &amp; tags</div>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="flex gap-4 items-start">
                        <div class="flex flex-col items-center">
                            <div id="sd1" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                            <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                        </div>
                        <div class="pt-0.5">
                            <div class="text-[11px] font-semibold text-gray-400">02</div>
                            <div id="st1" class="text-[15px] font-bold text-gray-400">Assignment</div>
                            <div class="text-xs text-gray-400">Team &amp; priority</div>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="flex gap-4 items-start">
                        <div class="flex flex-col items-center">
                            <div id="sd2" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                            <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                        </div>
                        <div class="pt-0.5">
                            <div class="text-[11px] font-semibold text-gray-400">03</div>
                            <div id="st2" class="text-[15px] font-bold text-gray-400">Schedule</div>
                            <div class="text-xs text-gray-400">Dates &amp; milestones</div>
                        </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="flex gap-4 items-start">
                        <div class="flex flex-col items-center">
                            <div id="sd3" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                        </div>
                        <div class="pt-0.5">
                            <div class="text-[11px] font-semibold text-gray-400">04</div>
                            <div id="st3" class="text-[15px] font-bold text-gray-400">Review</div>
                            <div class="text-xs text-gray-400">Confirm &amp; create</div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- ── RIGHT FORM ── -->
            <div class="flex-1 min-w-0 lg:border-l lg:border-gray-100 lg:pl-10 xl:pl-12">

                <!-- ══ STEP 1: Task Details ══ -->
                <div class="form-step active" id="fs0">
                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 1 of 4</p>
                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Task Details</h1>
                        <p class="text-sm text-gray-500 mt-1.5">Describe what needs to be done.</p>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                        <!-- Task name -->
                        <div class="fi sm:col-span-2">
                            <input type="text" placeholder=" " id="taskName" />
                            <label>Task name</label>
                        </div>

                        <!-- Description -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="taskDesc"></textarea>
                            <label>Description</label>
                        </div>

                        <!-- Task type -->
                        <div class="si">
                            <select id="taskType">
                                <option value="" disabled selected>Task type</option>
                                <option>Feature</option>
                                <option>Bug Fix</option>
                                <option>Research</option>
                                <option>Design</option>
                                <option>Documentation</option>
                                <option>Maintenance</option>
                            </select>
                        </div>

                        <!-- Status -->
                        <div class="si">
                            <select id="taskStatus">
                                <option value="" disabled selected>Status</option>
                                <option>To Do</option>
                                <option>In Progress</option>
                                <option>In Review</option>
                                <option>Done</option>
                            </select>
                        </div>

                    </div>

                </div>

                <!-- ══ STEP 2: Assignment ══ -->
                <div class="form-step" id="fs1">
                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 2 of 4</p>
                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Assignment</h1>
                        <p class="text-sm text-gray-500 mt-1.5">Assign team members and set priority.</p>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                        <div class="si">
                            <select id="project">
                                <option value="" disabled selected>Project / Sprint</option>
                                <option>Project Alpha</option>
                                <option>Project Beta</option>
                                <option>Sprint Q3</option>
                                <option>Backlog</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="reporter">
                                <option value="" disabled selected>Reporter</option>
                                <option>Saif</option>
                                <option>Dev Mistry</option>
                                <option>Drashti</option>
                                <option>Dev Pancholi</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="storyPoints" min="1" max="100" />
                            <label>Story points</label>
                        </div>

                        <div class="si">
                            <select id="department">
                                <option value="" disabled selected>Department</option>
                                <option>Frontend</option>
                                <option>Backend</option>
                                <option>Graphics</option>
                                <option>QA</option>
                                <option>App</option>
                                <option>API</option>
                            </select>
                        </div>

                    </div>

                    <!-- Assignees -->
                    <div class="mt-6">
                        <p class="text-xs font-semibold text-gray-500 mb-3">Assignees</p>
                        <div class="flex flex-wrap gap-2">
                            <span onclick="toggleMember(this)" class="member inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-gray-50 text-violet-700 cursor-pointer select-none transition-all">
                                <span class="w-5 h-5 rounded-full bg-violet-100 flex items-center justify-center text-[9px] font-bold text-violet-700 flex-shrink-0 av">SS</span>Shaikh Mohammed Saif Kamal Ahmed 
                            </span>
                            <span onclick="toggleMember(this)" class="member inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-gray-50 text-violet-700 cursor-pointer select-none transition-all">
                                <span class="w-5 h-5 rounded-full bg-violet-100 flex items-center justify-center text-[9px] font-bold text-violet-700 flex-shrink-0 av">DM</span>Dev Dipakbhai Mistry
                            </span>
                            <span onclick="toggleMember(this)" class="member inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-gray-50 text-violet-700 cursor-pointer select-none transition-all">
                                <span class="w-5 h-5 rounded-full bg-violet-100 flex items-center justify-center text-[9px] font-bold text-violet-700 flex-shrink-0 av">DP</span>Drashti Hiren Pancholi
                            </span>
                            <span onclick="toggleMember(this)" class="member inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-gray-50 text-violet-700 cursor-pointer select-none transition-all">
                                <span class="w-5 h-5 rounded-full bg-violet-100 flex items-center justify-center text-[9px] font-bold text-violet-700 flex-shrink-0 av">DP</span>Dev Hiren Pancholi
                            </span>
                            <span onclick="toggleMember(this)" class="member inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-gray-50 text-violet-700 cursor-pointer select-none transition-all">
                                <span class="w-5 h-5 rounded-full bg-violet-100 flex items-center justify-center text-[9px] font-bold text-violet-700 flex-shrink-0 av">SB</span>Shubham Ramnikbhai Babariya
                            </span>
                        </div>
                    </div>

                    <!-- Priority -->
                    <div class="mt-6">
                        <p class="text-xs font-semibold text-gray-500 mb-3">Priority</p>
                        <div class="flex flex-wrap gap-2">
                            <button type="button" onclick="setPri(this,'Low','low')" class="pri inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-sm border border-gray-200 bg-gray-50 text-gray-500 font-medium cursor-pointer transition-all">
                                <i class="ri-arrow-down-circle-line text-base"></i> Low
                            </button>
                            <button type="button" onclick="setPri(this,'Medium','med')" class="pri inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-sm border border-gray-200 bg-gray-50 text-gray-500 font-medium cursor-pointer transition-all">
                                <i class="ri-record-circle-line text-base"></i> Medium
                            </button>
                            <button type="button" onclick="setPri(this,'High','high')" class="pri inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-sm border border-gray-200 bg-gray-50 text-gray-500 font-medium cursor-pointer transition-all">
                                <i class="ri-arrow-up-circle-line text-base"></i> High
                            </button>
                        </div>
                    </div>
                </div>

                <!-- ══ STEP 3: Schedule ══ -->
                <div class="form-step" id="fs2">
                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 3 of 4</p>
                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Schedule</h1>
                        <p class="text-sm text-gray-500 mt-1.5">Set dates and milestone information.</p>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                        <div class="fi">
                            <input type="date" id="startDate" placeholder=" " />
                            <label>Start date</label>
                        </div>

                        <div class="fi">
                            <input type="date" id="dueDate" placeholder=" " />
                            <label>Due date</label>
                        </div>

                        <div class="si">
                            <select id="estimation">
                                <option value="" disabled selected>Time estimation</option>
                                <option>1 hour</option>
                                <option>2-4 hours</option>
                                <option>Half day</option>
                                <option>1 day</option>
                                <option>2-3 days</option>
                                <option>1 week</option>
                                <option>2+ weeks</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="reminderType">
                                <option value="" disabled selected>Reminder</option>
                                <option>No reminder</option>
                                <option>1 day before</option>
                                <option>2 days before</option>
                                <option>1 week before</option>
                            </select>
                        </div>

                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="notes"></textarea>
                            <label>Additional notes</label>
                        </div>

                    </div>
                </div>

                <!-- ══ STEP 4: Review ══ -->
                <div class="form-step" id="fs3">
                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 4 of 4</p>
                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Review &amp; Create</h1>
                        <p class="text-sm text-gray-500 mt-1.5">Confirm your task details before creating.</p>
                    </div>
                    <div id="reviewContent" class="rounded-xl border border-gray-100 divide-y divide-gray-100 overflow-y-auto max-h-[55vh] sm:max-h-[500px] pr-1"></div>
                </div>

                <!-- ══ SUCCESS ══ -->
                <div id="successMsg" class="hidden text-center py-8 sm:py-12">
                    <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-3">
                        <i class="ri-check-line text-3xl text-violet-600"></i>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 mb-2">Task Created!</h2>
                    <p class="text-sm text-gray-500 mb-4">Your task has been created successfully.</p>

                </div>

                <!-- ══ NAV BUTTONS ══ -->
                <div id="btnRow" class="flex flex-col-reverse sm:flex-row gap-3 sm:gap-0 items-stretch sm:items-center justify-between mt-8 sm:mt-10 pt-6 border-t border-gray-100">
                    <button id="prevBtn" onclick="goStep(-1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-7 rounded-xl border border-gray-200 bg-white text-black-400 text-sm font-semibold opacity-40 cursor-not-allowed transition-all">
                        <i class="ri-arrow-left-line"></i> Previous
                    </button>
                    <button id="nextBtn" onclick="goStep(1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">
                        Next <i class="ri-arrow-right-line"></i>
                    </button>
                </div>

            </div>
            <!-- end right -->

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

</div>

<script>
    let cur = 0;
    const total = 4;

    let selPri = '';
    let selMembers = new Set();
    let selTags = new Set();

    const mobileLabels = [
        'Step 1 of 4 — Task Details',
        'Step 2 of 4 — Assignment',
        'Step 3 of 4 — Schedule',
        'Step 4 of 4 — Review'
    ];

    /* =========================
       SEARCHABLE DROPDOWNS
    ========================== */

    const searchableSelects = [
        '#taskType',
        '#taskStatus',
        '#project',
        '#reporter',
        '#department',
        '#estimation',
        '#reminderType'
    ];

    searchableSelects.forEach(id => {

new TomSelect(id, {
    create: false,
    allowEmptyOption: true,
    placeholder: 'Search...',
    closeAfterSelect: true,

    render: {
        no_results: function () {
            return '<div class="p-3 text-sm text-gray-400">No results found</div>';
        }
    }
});

    });

    /* =========================
       TAG TOGGLE
    ========================== */

    function toggleTag(el) {

        const on = el.classList.contains('!border-violet-400');

        if (on) {

            el.classList.remove(
                '!border-violet-400',
                '!bg-violet-100',
                '!text-violet-700'
            );

            selTags.delete(el.textContent.trim());

        } else {

            el.classList.add(
                '!border-violet-400',
                '!bg-violet-100',
                '!text-violet-700'
            );

            selTags.add(el.textContent.trim());
        }
    }

    /* =========================
       MEMBER TOGGLE
    ========================== */

    function toggleMember(el) {

        const on = el.classList.contains('!border-violet-300');

        const av = el.querySelector('.av');

        if (on) {

            el.classList.remove(
                '!border-violet-300',
                '!bg-violet-100',
                '!text-violet-700'
            );

            av.classList.remove(
                '!bg-violet-500',
                '!text-white'
            );

            selMembers.delete(el.textContent.trim());

        } else {

            el.classList.add(
                '!border-violet-300',
                '!bg-violet-100',
                '!text-violet-700'
            );

            av.classList.add(
                '!bg-violet-500',
                '!text-white'
            );

            selMembers.add(el.textContent.trim());
        }
    }

    /* =========================
       PRIORITY
    ========================== */

    const priMap = {

        low: [
            '!bg-green-50',
            '!border-green-300',
            '!text-green-700'
        ],

        med: [
            '!bg-yellow-50',
            '!border-yellow-300',
            '!text-yellow-700'
        ],

        high: [
            '!bg-red-50',
            '!border-red-300',
            '!text-red-700'
        ],
    };

    function setPri(el, val, key) {

        document.querySelectorAll('.pri').forEach(b => {

            Object.values(priMap)
                .flat()
                .forEach(c => b.classList.remove(c));

            b.classList.remove('!border-violet-300');
        });

        priMap[key].forEach(c => el.classList.add(c));

        selPri = val;
    }

    /* =========================
       BUILD REVIEW
    ========================== */

    function buildReview() {

        const rows = [

            ['Task name', document.getElementById('taskName').value || '—'],

            ['Description', document.getElementById('taskDesc').value || '—'],

            ['Type', document.getElementById('taskType').value || '—'],

            ['Status', document.getElementById('taskStatus').value || '—'],

            ['Tags', selTags.size ? [...selTags].join(', ') : '—'],

            ['Project', document.getElementById('project').value || '—'],

            ['Reporter', document.getElementById('reporter').value || '—'],

            ['Department', document.getElementById('department').value || '—'],

            ['Assignees', selMembers.size ? [...selMembers].join(', ') : '—'],

            ['Priority', selPri || '—'],

            ['Story points', document.getElementById('storyPoints').value || '—'],

            ['Start date', document.getElementById('startDate').value || '—'],

            ['Due date', document.getElementById('dueDate').value || '—'],

            ['Estimation', document.getElementById('estimation').value || '—'],

            ['Reminder', document.getElementById('reminderType').value || '—'],

            ['Notes', document.getElementById('notes').value || '—'],
        ];

        document.getElementById('reviewContent').innerHTML = rows.map(([k, v]) => `

            <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 px-4 sm:px-5 py-3.5 bg-white hover:bg-gray-50 transition-colors">

                <span class="text-xs text-gray-500 sm:min-w-[120px] flex-shrink-0 font-semibold">
                    ${k}
                </span>

                <span class="text-sm text-gray-800 break-all whitespace-pre-wrap flex-1 min-w-0">
                    ${v}
                </span>

            </div>

        `).join('');
    }

    /* =========================
       UPDATE SIDEBAR
    ========================== */

    function updateSidebar() {

        for (let i = 0; i < 4; i++) {

            const dot = document.getElementById('sd' + i);

            const title = document.getElementById('st' + i);

            if (i < cur) {

                dot.className =
                    'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center flex-shrink-0 transition-all duration-300';

                dot.innerHTML =
                    '<i class="ri-check-line text-white text-xs"></i>';

                if (title)
                    title.className =
                    'text-[15px] font-bold text-gray-400';

            } else if (i === cur) {

                dot.className =
                    'w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300';

                dot.innerHTML = '';

                if (title)
                    title.className =
                    'text-[15px] font-bold text-gray-900';

            } else {

                dot.className =
                    'w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300';

                dot.innerHTML = '';

                if (title)
                    title.className =
                    'text-[15px] font-bold text-gray-400';
            }
        }

        document.getElementById('mobileLabel').textContent =
            mobileLabels[Math.min(cur, 3)];

        for (let i = 0; i < 4; i++) {

            document.getElementById('mdot' + i).className =
                i <= cur ?
                'w-2.5 h-2.5 rounded-full bg-violet-500 transition-all' :
                'w-2.5 h-2.5 rounded-full bg-violet-200 transition-all';
        }
    }

    /* =========================
       NAVIGATION
    ========================== */

    function goStep(dir) {

        if (cur === 3 && dir === 1) {

            document.querySelectorAll('.form-step')
                .forEach(s => s.classList.remove('active'));

            document.getElementById('btnRow').style.display = 'none';

            document.getElementById('successMsg')
                .classList.remove('hidden');

            cur = 4;

            updateSidebar();

            return;
        }

        const nxt = cur + dir;

        if (nxt < 0 || nxt >= total) return;

        document.getElementById('fs' + cur)
            .classList.remove('active');

        cur = nxt;

        if (cur === 3) buildReview();

        document.getElementById('fs' + cur)
            .classList.add('active');

        updateSidebar();

        const pb = document.getElementById('prevBtn');

        const nb = document.getElementById('nextBtn');

        if (cur === 0) {

            pb.classList.add(
                'opacity-40',
                'cursor-not-allowed'
            );

            pb.classList.remove(
                'hover:bg-gray-50',
                'cursor-pointer',
                'opacity-100'
            );

        } else {

            pb.classList.remove(
                'opacity-40',
                'cursor-not-allowed'
            );

            pb.classList.add(
                'hover:bg-gray-50',
                'cursor-pointer',
                'opacity-100'
            );
        }

        if (cur === 3) {

            nb.innerHTML =
                '<i class="ri-check-line"></i> Create Task';

            nb.classList.remove(
                'bg-violet-500',
                'hover:bg-violet-600',
                'shadow-violet-200'
            );

            nb.classList.add(
                'bg-green-600',
                'hover:bg-green-700',
                'shadow-green-200'
            );

        } else {

            nb.innerHTML =
                'Next <i class="ri-arrow-right-line"></i>';

            nb.classList.add(
                'bg-violet-500',
                'hover:bg-violet-600',
                'shadow-violet-200'
            );

            nb.classList.remove(
                'bg-green-600',
                'hover:bg-green-700',
                'shadow-green-200'
            );
        }
    }

    /* =========================
       RESET FORM
    ========================== */

    function resetForm() {

        cur = 0;

        selPri = '';

        selMembers.clear();

        selTags.clear();

        document.querySelectorAll('input,textarea')
            .forEach(el => el.value = '');

        document.querySelectorAll('select')
            .forEach(el => {

                el.selectedIndex = 0;

                if (el.tomselect) {

                    el.tomselect.clear();

                    el.tomselect.refreshOptions(false);
                }
            });

        document.querySelectorAll('.tag')
            .forEach(el => {

                el.classList.remove(
                    '!border-violet-400',
                    '!bg-violet-100',
                    '!text-violet-700'
                );
            });

        document.querySelectorAll('.member')
            .forEach(el => {

                el.classList.remove(
                    '!border-violet-300',
                    '!bg-violet-100',
                    '!text-violet-700'
                );

                el.querySelector('.av')
                    .classList.remove(
                        '!bg-violet-500',
                        '!text-white'
                    );
            });

        document.querySelectorAll('.pri')
            .forEach(el => {

                Object.values(priMap)
                    .flat()
                    .forEach(c => el.classList.remove(c));
            });

        document.querySelectorAll('.form-step')
            .forEach(s => s.classList.remove('active'));

        document.getElementById('fs0')
            .classList.add('active');

        document.getElementById('successMsg')
            .classList.add('hidden');

        document.getElementById('btnRow').style.display = 'flex';

        updateSidebar();

        const pb = document.getElementById('prevBtn');

        pb.classList.add(
            'opacity-40',
            'cursor-not-allowed'
        );

        pb.classList.remove(
            'hover:bg-gray-50',
            'cursor-pointer',
            'opacity-100'
        );

        const nb = document.getElementById('nextBtn');

        nb.innerHTML =
            'Next <i class="ri-arrow-right-line"></i>';

        nb.classList.add(
            'bg-violet-500',
            'hover:bg-violet-600',
            'shadow-violet-200'
        );

        nb.classList.remove(
            'bg-green-600',
            'hover:bg-green-700',
            'shadow-green-200'
        );
    }

</script>

</body>
</html>

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