<?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>Add Project</title>
    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>
    <style> .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;}.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;}.ts-dropdown-content{max-height:220px !important;overflow-y:auto !important;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height:100px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea + label{top:22px;transform:none;}.fi input:focus + label,.fi input:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus + label,.fi textarea:not(:placeholder-shown) + label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.doc-row{display:flex;align-items:stretch;gap:14px;border:1px solid #e5e7eb;border-radius:18px;padding:14px 16px;background:#fff;transition:0.25s;}.doc-row:hover{border-color:#c4b5fd;box-shadow:0 2px 12px rgba(139,92,246,0.07);}.doc-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}.doc-icon{width:42px;height:42px;border-radius:12px;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.doc-icon i{font-size:20px;color:#8b5cf6;}.doc-info{flex:1;min-width:0;}.doc-label{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:4px;}.doc-label .req{color:#ef4444;font-size:13px;}.doc-filename{font-size:12px;color:#9ca3af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.doc-filename.has-file{color:#7c3aed;font-weight:500;}.doc-upload-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:32px;padding:0 14px;border-radius:8px;border:1.5px dashed #c4b5fd;background:#faf5ff;color:#7c3aed;font-size:12px;font-weight:600;cursor:pointer;transition:0.2s;white-space:nowrap;}.doc-upload-btn:hover{background:#ede9fe;border-color:#8b5cf6;}.doc-preview{width:90px;flex-shrink:0;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;min-height:80px;}.doc-preview img{width:100%;height:100%;object-fit:cover;display:none;}.doc-preview img.visible{display:block;}.doc-preview .prev-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;}.doc-preview .prev-placeholder i{font-size:22px;color:#d1d5db;}.doc-preview .prev-placeholder span{font-size:10px;color:#d1d5db;text-align:center;}.doc-preview .prev-file{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;}.doc-preview .prev-file.visible{display:flex;}.doc-preview .prev-file i{font-size:26px;color:#8b5cf6;}.doc-preview .prev-file span{font-size:10px;color:#7c3aed;font-weight:600;word-break:break-all;}.doc-preview .prev-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:5;}.doc-preview .prev-remove.visible{display:flex;}.form-step{display:none;}.form-step.active{display:block;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

<!-- 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">

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

        <a href="project_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>

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

    <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">

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

                <!-- MOBILE -->
                <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 5 — Basic Info
                    </span>

                    <div class="flex gap-1.5">
                        <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500"></div>
                        <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot3" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot4" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                    </div>

                </div>

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

                    <?php
                    $steps = [
                        ['01','Basic Info','Project name & details'],
                        ['02','Team','Assign team members'],
                        ['03','Modules','Project modules & tasks'],
                        ['04','Workflow','Status & milestones'],
                        ['05','Files','Upload project files'],
                    ];
                    foreach($steps as $index => $step):
                    ?>

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

                        <div class="flex flex-col items-center">
                            <div id="sd<?= $index ?>"
                                class="w-7 h-7 rounded-full <?= $index == 0 ? 'border-[3px] border-violet-500' : 'border-2 border-violet-200' ?> bg-white flex items-center justify-center transition-all duration-300"></div>
                            <?php if($index != 4): ?>
                            <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                            <?php endif; ?>
                        </div>

                        <div class="pt-0.5">
                            <div class="text-[11px] font-semibold text-gray-400"><?= $step[0] ?></div>
                            <div id="st<?= $index ?>" class="text-[15px] font-bold <?= $index == 0 ? 'text-gray-900' : 'text-gray-400' ?>"><?= $step[1] ?></div>
                            <div class="text-xs text-gray-400"><?= $step[2] ?></div>
                        </div>

                    </div>

                    <?php endforeach; ?>

                </div>

            </div>

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

                <!-- ========================
                     STEP 1 — BASIC INFO
                ========================= -->
                <div class="form-step active" id="fs0">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 1 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Basic Information</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="projectName">
                            <label>Project Name *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="clientName">
                            <label>Client Name *</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="projectType">
                                <option value="" disabled selected>Project Type *</option>
                                <option>Web Application</option>
                                <option>Mobile Application</option>
                                <option>Desktop Application</option>
                                <option>API Development</option>
                                <option>UI/UX Design</option>
                                <option>E-commerce</option>
                                <option>CRM / ERP</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="priority">
                                <option value="" disabled selected>Priority *</option>
                                <option>Low</option>
                                <option>Medium</option>
                                <option>High</option>
                                <option>Critical</option>
                            </select>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="startDate">
                            <label>Start Date *</label>
                        </div>

                        <div class="fi">
                            <input type="date" placeholder=" " id="deadline">
                            <label>Deadline *</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="budget">
                            <label>Budget</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="estimatedHours">
                            <label>Estimated Hours</label>
                        </div>

                        <!-- Row 5 — Project Manager full width -->
                        <div class="si sm:col-span-2">
                            <select id="projectManager">
                                <option value="" disabled selected>Project Manager *</option>
                                <option>Amit Kumar</option>
                                <option>Priya Verma</option>
                                <option>Neha Singh</option>
                                <option>Vikram Patel</option>
                                <option>Rahul Sharma</option>
                            </select>
                        </div>

                        <!-- Row 6 — Description full width -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="description" style="height:110px;"></textarea>
                            <label>Description</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 2 — TEAM
                ========================= -->
                <div class="form-step" id="fs1">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 2 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Team</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="teamLead">
                                <option value="" disabled selected>Team Lead *</option>
                                <option>Amit Kumar</option>
                                <option>Priya Verma</option>
                                <option>Vikram Patel</option>
                                <option>Rahul Sharma</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="developer1">
                                <option value="" disabled selected>Developer 1</option>
                                <option>Rahul Sharma</option>
                                <option>Amit Kumar</option>
                                <option>Vikram Patel</option>
                                <option>Neha Singh</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="developer2">
                                <option value="" disabled selected>Developer 2</option>
                                <option>Rahul Sharma</option>
                                <option>Amit Kumar</option>
                                <option>Vikram Patel</option>
                                <option>Neha Singh</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="designer">
                                <option value="" disabled selected>Designer</option>
                                <option>Priya Verma</option>
                                <option>Neha Singh</option>
                                <option>Amit Kumar</option>
                            </select>
                        </div>

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="qaEngineer">
                                <option value="" disabled selected>QA Engineer</option>
                                <option>Neha Singh</option>
                                <option>Rahul Sharma</option>
                                <option>Vikram Patel</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="devopsEngineer">
                                <option value="" disabled selected>DevOps Engineer</option>
                                <option>Vikram Patel</option>
                                <option>Amit Kumar</option>
                                <option>Rahul Sharma</option>
                            </select>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="totalMembers">
                            <label>Total Team Members</label>
                        </div>

                        <div class="si">
                            <select id="clientContact">
                                <option value="" disabled selected>Client Contact *</option>
                                <option>Direct Client</option>
                                <option>Via Account Manager</option>
                                <option>Via Project Manager</option>
                            </select>
                        </div>

                        <!-- Row 5 — Team Notes full width -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="teamNotes" style="height:100px;"></textarea>
                            <label>Team Notes</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 3 — MODULES
                ========================= -->
                <div class="form-step" id="fs2">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 3 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Modules</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="module1">
                            <label>Module 1 Name *</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="module1Hours">
                            <label>Estimated Hours</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="module2">
                            <label>Module 2 Name</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="module2Hours">
                            <label>Estimated Hours</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="module3">
                            <label>Module 3 Name</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="module3Hours">
                            <label>Estimated Hours</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="module4">
                            <label>Module 4 Name</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="module4Hours">
                            <label>Estimated Hours</label>
                        </div>

                        <!-- Row 5 -->
                        <div class="si sm:col-span-2">
                            <select id="techStack">
                                <option value="" disabled selected>Tech Stack *</option>
                                <option>PHP / Laravel</option>
                                <option>Node.js / Express</option>
                                <option>React / Next.js</option>
                                <option>Vue.js / Nuxt.js</option>
                                <option>Python / Django</option>
                                <option>Flutter</option>
                                <option>React Native</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <!-- Row 6 — Module notes full width -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="moduleNotes" style="height:100px;"></textarea>
                            <label>Module Notes</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 4 — WORKFLOW
                ========================= -->
                <div class="form-step" id="fs3">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 4 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Workflow</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="projectStatus">
                                <option value="" disabled selected>Project Status *</option>
                                <option>Not Started</option>
                                <option>In Progress</option>
                                <option>On Hold</option>
                                <option>Completed</option>
                                <option>Cancelled</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="billingType">
                                <option value="" disabled selected>Billing Type *</option>
                                <option>Fixed Price</option>
                                <option>Hourly</option>
                                <option>Monthly Retainer</option>
                                <option>Milestone Based</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="milestone1Date">
                            <label>Milestone 1 Date</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="milestone1Title">
                            <label>Milestone 1 Title</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="milestone2Date">
                            <label>Milestone 2 Date</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="milestone2Title">
                            <label>Milestone 2 Title</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="si">
                            <select id="meetingFrequency">
                                <option value="" disabled selected>Meeting Frequency</option>
                                <option>Daily Standup</option>
                                <option>Weekly</option>
                                <option>Bi-weekly</option>
                                <option>Monthly</option>
                                <option>As Needed</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="communicationChannel">
                                <option value="" disabled selected>Communication Channel</option>
                                <option>Slack</option>
                                <option>Email</option>
                                <option>WhatsApp</option>
                                <option>Microsoft Teams</option>
                                <option>Zoom</option>
                            </select>
                        </div>

                        <!-- Row 5 — Workflow Notes full width -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="workflowNotes" style="height:100px;"></textarea>
                            <label>Workflow Notes</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 5 — FILES
                ========================= -->
                <div class="form-step" id="fs4">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 5 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Files</h1>
                    </div>

                    <div class="flex flex-col gap-4">

                        <!-- Project Brief -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon"><i class="ri-file-text-line"></i></div>
                                <div class="doc-info">
                                    <div class="doc-label">Project Brief <span class="req">*</span></div>
                                    <div id="briefName" class="doc-filename">No file chosen</div>
                                    <label for="brief" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="brief" class="hidden" accept=".pdf,.doc,.docx"
                                        onchange="handleDocUpload(this,'briefName','briefPreview','briefFile','briefPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="briefPreviewWrap">
                                <div class="prev-placeholder" id="briefPlaceholder">
                                    <i class="ri-file-line"></i><span>Preview</span>
                                </div>
                                <img id="briefPreview" alt="preview">
                                <div class="prev-file" id="briefFile"></div>
                                <button class="prev-remove" id="briefRemove"
                                    onclick="removeDoc('brief','briefName','briefPreview','briefFile','briefPlaceholder','briefRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Proposal / Quotation -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon"><i class="ri-money-dollar-circle-line"></i></div>
                                <div class="doc-info">
                                    <div class="doc-label">Proposal / Quotation <span class="req">*</span></div>
                                    <div id="proposalName" class="doc-filename">No file chosen</div>
                                    <label for="proposal" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="proposal" class="hidden" accept=".pdf,.doc,.docx"
                                        onchange="handleDocUpload(this,'proposalName','proposalPreview','proposalFile','proposalPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="proposalPreviewWrap">
                                <div class="prev-placeholder" id="proposalPlaceholder">
                                    <i class="ri-file-line"></i><span>Preview</span>
                                </div>
                                <img id="proposalPreview" alt="preview">
                                <div class="prev-file" id="proposalFile"></div>
                                <button class="prev-remove" id="proposalRemove"
                                    onclick="removeDoc('proposal','proposalName','proposalPreview','proposalFile','proposalPlaceholder','proposalRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- NDA / Agreement -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon"><i class="ri-file-shield-2-line"></i></div>
                                <div class="doc-info">
                                    <div class="doc-label">NDA / Agreement</div>
                                    <div id="ndaName" class="doc-filename">No file chosen</div>
                                    <label for="nda" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="nda" class="hidden" accept=".pdf,.doc,.docx"
                                        onchange="handleDocUpload(this,'ndaName','ndaPreview','ndaFile','ndaPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="ndaPreviewWrap">
                                <div class="prev-placeholder" id="ndaPlaceholder">
                                    <i class="ri-file-line"></i><span>Preview</span>
                                </div>
                                <img id="ndaPreview" alt="preview">
                                <div class="prev-file" id="ndaFile"></div>
                                <button class="prev-remove" id="ndaRemove"
                                    onclick="removeDoc('nda','ndaName','ndaPreview','ndaFile','ndaPlaceholder','ndaRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Wireframes / Mockups -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon"><i class="ri-layout-line"></i></div>
                                <div class="doc-info">
                                    <div class="doc-label">Wireframes / Mockups</div>
                                    <div id="wireName" class="doc-filename">No file chosen</div>
                                    <label for="wire" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="wire" class="hidden" accept=".pdf,image/*,.zip"
                                        onchange="handleDocUpload(this,'wireName','wirePreview','wireFile','wirePlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="wirePreviewWrap">
                                <div class="prev-placeholder" id="wirePlaceholder">
                                    <i class="ri-image-line"></i><span>Preview</span>
                                </div>
                                <img id="wirePreview" alt="preview">
                                <div class="prev-file" id="wireFile"></div>
                                <button class="prev-remove" id="wireRemove"
                                    onclick="removeDoc('wire','wireName','wirePreview','wireFile','wirePlaceholder','wireRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Additional Files -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon"><i class="ri-folder-line"></i></div>
                                <div class="doc-info">
                                    <div class="doc-label">Additional Files</div>
                                    <div id="extraName" class="doc-filename">No file chosen</div>
                                    <label for="extra" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="extra" class="hidden" accept="*"
                                        onchange="handleDocUpload(this,'extraName','extraPreview','extraFile','extraPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="extraPreviewWrap">
                                <div class="prev-placeholder" id="extraPlaceholder">
                                    <i class="ri-file-line"></i><span>Preview</span>
                                </div>
                                <img id="extraPreview" alt="preview">
                                <div class="prev-file" id="extraFile"></div>
                                <button class="prev-remove" id="extraRemove"
                                    onclick="removeDoc('extra','extraName','extraPreview','extraFile','extraPlaceholder','extraRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                    </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">Project Created!</h2>
                    <p class="text-sm text-gray-500 mb-4">Project has been added successfully.</p>
                </div>

                <!-- 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 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>

        </div>

    </div>

</div>

<script>

    let cur = 0;
    const total = 5;

    const mobileLabels = [
        'Step 1 of 5 — Basic Info',
        'Step 2 of 5 — Team',
        'Step 3 of 5 — Modules',
        'Step 4 of 5 — Workflow',
        'Step 5 of 5 — Files',
    ];

    /* =========================
       SEARCHABLE SELECT
    ========================== */
    const searchableSelects = [
        '#projectType',
        '#priority',
        '#projectManager',
        '#teamLead',
        '#developer1',
        '#developer2',
        '#designer',
        '#qaEngineer',
        '#devopsEngineer',
        '#clientContact',
        '#techStack',
        '#projectStatus',
        '#billingType',
        '#meetingFrequency',
        '#communicationChannel',
    ];

    searchableSelects.forEach(id => {
        if(document.querySelector(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>';
                    }
                }
            });
        }
    });

    /* =========================
       DOCUMENT UPLOAD + PREVIEW
    ========================== */
    function handleDocUpload(input, nameId, imgId, fileId, placeholderId){
        const file = input.files[0];
        if(!file) return;
        const nameEl      = document.getElementById(nameId);
        const imgEl       = document.getElementById(imgId);
        const fileEl      = document.getElementById(fileId);
        const placeholder = document.getElementById(placeholderId);
        const removeId    = imgId.replace('Preview','Remove');
        const removeEl    = document.getElementById(removeId);
        nameEl.textContent = file.name;
        nameEl.classList.add('has-file');
        if(removeEl) removeEl.classList.add('visible');
        placeholder.style.display = 'none';
        if(file.type.startsWith('image/')){
            const reader = new FileReader();
            reader.onload = function(e){
                imgEl.src = e.target.result;
                imgEl.classList.add('visible');
                fileEl.classList.remove('visible');
            };
            reader.readAsDataURL(file);
        } else {
            imgEl.classList.remove('visible');
            imgEl.src = '';
            fileEl.innerHTML =
                '<i class="ri-file-pdf-2-line"></i>' +
                '<span>' + file.name.substring(0,12) + (file.name.length>12?'…':'') + '</span>';
            fileEl.classList.add('visible');
        }
    }

    function removeDoc(inputId, nameId, imgId, fileId, placeholderId, removeId){
        const input = document.getElementById(inputId);
        if(input) input.value = '';
        const nameEl = document.getElementById(nameId);
        if(nameEl){ nameEl.textContent = 'No file chosen'; nameEl.classList.remove('has-file'); }
        const imgEl = document.getElementById(imgId);
        if(imgEl){ imgEl.src=''; imgEl.classList.remove('visible'); }
        const fileEl = document.getElementById(fileId);
        if(fileEl){ fileEl.innerHTML=''; fileEl.classList.remove('visible'); }
        const placeholder = document.getElementById(placeholderId);
        if(placeholder) placeholder.style.display = '';
        const removeEl = document.getElementById(removeId);
        if(removeEl) removeEl.classList.remove('visible');
    }

    /* =========================
       SIDEBAR
    ========================== */
    function updateSidebar(){
        for(let i=0; i<5; 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 transition-all duration-300';
                dot.innerHTML = '<i class="ri-check-line text-white text-xs"></i>';
                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 transition-all duration-300';
                dot.innerHTML = '';
                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 transition-all duration-300';
                dot.innerHTML = '';
                title.className = 'text-[15px] font-bold text-gray-400';
            }
        }
        document.getElementById('mobileLabel').textContent = mobileLabels[Math.min(cur,4)];
        for(let i=0; i<5; i++){
            document.getElementById('mdot'+i).className =
                i <= cur ? 'w-2.5 h-2.5 rounded-full bg-violet-500' : 'w-2.5 h-2.5 rounded-full bg-violet-200';
        }
    }
function validateStep(step){

    /* STEP 1 */
    if(step === 0){

        if(document.getElementById('projectName').value.trim() === ''){
            Swal.fire({
                icon:'warning',
                title:'Project Name Required',
                text:'Please enter project name',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('clientName').value.trim() === ''){
            Swal.fire({
                icon:'warning',
                title:'Client Name Required',
                text:'Please enter client name',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('projectType').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Project Type Required',
                text:'Please select project type',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('priority').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Priority Required',
                text:'Please select priority',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('startDate').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Start Date Required',
                text:'Please select start date',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('deadline').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Deadline Required',
                text:'Please select deadline',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('projectManager').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Project Manager Required',
                text:'Please select project manager',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

    }

    /* STEP 2 */
    if(step === 1){

        if(document.getElementById('teamLead').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Team Lead Required',
                text:'Please select team lead',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('clientContact').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Client Contact Required',
                text:'Please select client contact',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

    }

    /* STEP 3 */
    if(step === 2){

        if(document.getElementById('module1').value.trim() === ''){
            Swal.fire({
                icon:'warning',
                title:'Module Required',
                text:'Please enter module 1 name',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('techStack').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Tech Stack Required',
                text:'Please select tech stack',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

    }

    /* STEP 4 */
    if(step === 3){

        if(document.getElementById('projectStatus').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Project Status Required',
                text:'Please select project status',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('billingType').value === ''){
            Swal.fire({
                icon:'warning',
                title:'Billing Type Required',
                text:'Please select billing type',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

    }

    /* STEP 5 */
    if(step === 4){

        if(document.getElementById('brief').files.length === 0){
            Swal.fire({
                icon:'warning',
                title:'Project Brief Required',
                text:'Please upload project brief',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

        if(document.getElementById('proposal').files.length === 0){
            Swal.fire({
                icon:'warning',
                title:'Proposal Required',
                text:'Please upload proposal / quotation',
                confirmButtonColor:'#8b5cf6'
            });
            return false;
        }

    }

    return true;
}
    /* =========================
       NAVIGATION
    ========================== */
 function goStep(dir){

    /* VALIDATION */
    if(dir === 1){

        const valid = validateStep(cur);

        if(!valid){
            return;
        }

    }

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

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

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

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

        setTimeout(() => {

            window.location.href = 'project_list.php';

        }, 2000);

        return;
    }

    const nxt = cur + dir;

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

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

    cur = nxt;

    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');

    } else {

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

    }

    if(cur === 4){

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

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

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

    } else {

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

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

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

    }

}

</script>

</body>
</html>

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