<?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 New Lead</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;}.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;}
    /* Review step styles */
    .review-section{background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:18px 20px;margin-bottom:16px;}.review-section-title{font-size:13px;font-weight:700;color:#8b5cf6;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}.review-item{}.review-label{font-size:11px;color:#9ca3af;font-weight:500;}.review-value{font-size:14px;color:#1f2937;font-weight:600;word-break:break-word;}
    @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;}.review-grid{grid-template-columns:1fr;}}</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 New Lead
            </h1>
        </div>

        <a href="puresaas_lead_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 6 — Lead Details
                    </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 id="mdot5" 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','Lead Details','Source, name & status'],
                        ['02','Contact Info','Person & communication'],
                        ['03','Company Info','Business details'],
                        ['04','Requirement','Budget & timeline'],
                        ['05','Additional Info','Notes & preferences'],
                        ['06','Review & Submit','Confirm all details'],
                    ];

                    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 != 5): ?>
                            <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 — LEAD DETAILS
                ========================= -->
                <div class="form-step active" id="fs0">

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

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="si">
    <select id="product">
        <option value="" disabled selected>Select Product</option>
        <option>PureEstate</option>
        <option>BuilderPro</option>
        <option>SocietyPro</option>
    </select>
</div>
                        <!-- Row 1 -->
                        <div class="si">
                            <select id="leadSource">
                                <option value="" disabled selected>Lead Source</option>
                                <option>Website</option>
                                <option>Referral</option>
                                <option>Social Media</option>
                                <option>Cold Call</option>
                                <option>Email Campaign</option>
                                <option>Trade Show</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="leadName">
                            <label>Lead Name </label>
                        </div>

                        
                        <div class="si">
                            <select id="leadStatus">
                                <option value="" disabled selected>Lead Status (Make this in Edit)</option>
                                <option>Fresh</option>
                                <option>Contacted</option>
                                <option>Followup</option>
                                <option>Meeting</option>
                                <option>On Hold</option>
                                <option>Won</option>
                                <option>Lost</option>
                                <option>Quotation</option>
                                <option>Not Interested</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="leadOwner">
                                <option value="" disabled selected>Lead Owner</option>
                                <option>Rahul Sharma</option>
                                <option>Anjali Verma</option>
                                <option>Priya Singh</option>
                                <option>Amit Patel</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>Urgent</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="leadType">
                                <option value="" disabled selected>Lead Type</option>
                                <option>New Business</option>
                                <option>Existing Business</option>
                                <option>Renewal</option>
                                <option>Upsell</option>
                            </select>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="estimatedValue">
                            <label>Estimated Value (₹)</label>
                        </div>

                        <div class="fi">
                            <input type="date" placeholder=" " id="expectedClosingDate">
                            <label>Expected Closing Date</label>
                        </div>

                        <!-- Description — full width -->
                        <div class="fi sm:col-span-3">
                            <textarea placeholder=" " id="description" maxlength="500"></textarea>
                            <label>Description</label>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="contactPersonName">
                            <label>Contact Person Name </label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="designation">
                            <label>Designation</label>
                        </div>

                        <div class="fi">
                            <input type="email" placeholder=" " id="email">
                            <label>Email</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input 
    type="tel"
    placeholder=" "
    id="phoneNumber"
    maxlength="10"
    oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
>
                            <label>Phone Number</label>
                        </div>

                        <div class="fi">
                            <input 
    type="tel"
    placeholder=" "
    id="alternateNumber"
    maxlength="10"
    oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
>
                            <label>Alternate Number</label>
                        </div>

                        <div class="fi">
                            <input 
    type="tel"
    placeholder=" "
    id="whatsappNumber"
    maxlength="10"
    oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
>
                            <label>WhatsApp Number</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="preferredContactMode">
                                <option value="" disabled selected>Preferred Contact Mode</option>
                                <option>Phone</option>
                                <option>Email</option>
                                <option>WhatsApp</option>
                                <option>In-Person</option>
                                <option>Video Call</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="bestTimeToContact">
                                <option value="" disabled selected>Best Time To Contact</option>
                                <option>Morning (9am–12pm)</option>
                                <option>Afternoon (12pm–3pm)</option>
                                <option>Evening (3pm–6pm)</option>
                                <option>Anytime</option>
                            </select>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="companyName">
                            <label>Company Name </label>
                        </div>

                        <div class="fi">
                            <input type="url" placeholder=" " id="website">
                            <label>Website</label>
                        </div>

                        <div class="si">
                            <select id="industry">
                                <option value="" disabled selected>Industry</option>
                                <option>Information Technology</option>
                                <option>Finance & Banking</option>
                                <option>Healthcare</option>
                                <option>Manufacturing</option>
                                <option>Retail & E-commerce</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="companySize">
                                <option value="" disabled selected>Company Size (Employee Count)</option>
                                <option>1–10</option>
                                <option>11–50</option>
                                <option>51–200</option>
                                <option>201–500</option>
                                <option>500+</option>
                            </select>
                        </div>

                        <!-- Address full width -->
                        <div class="fi sm:col-span-2">
                            <input type="text" placeholder=" " id="address">
                            <label>Address</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="city">
                                <option value="" disabled selected>City</option>
                                <option>Surat</option>
                                <option>Mumbai</option>
                                <option>Delhi</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="state">
                                <option value="" disabled selected>State</option>
                                <option>Gujarat</option>
                                <option>Maharashtra</option>
                                <option>Rajasthan</option>
                            </select>
                        </div>

                        <div class="fi">
                           <input 
                            type="text"
                            placeholder=" "
                            id="pinCode"
                            maxlength="6"
                            oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,6)">
                            <label>Pincode </label>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Requirement / Description — full width -->
                        <div class="fi sm:col-span-3">
                            <textarea placeholder=" " id="requirementDescription" maxlength="1000"></textarea>
                            <label>Requirement / Description </label>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="budgetRange">
                                <option value="" disabled selected>Budget Range</option>
                                <option>Under ₹50,000</option>
                                <option>₹50,000 – ₹1,00,000</option>
                                <option>₹1,00,000 – ₹5,00,000</option>
                                <option>₹5,00,000 – ₹10,00,000</option>
                                <option>₹10,00,000 – ₹50,00,000</option>
                                <option>Above ₹50,00,000</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="expectedTimeline">
                                <option value="" disabled selected>Expected Timeline</option>
                                <option>Immediate (within 1 month)</option>
                                <option>1–3 Months</option>
                                <option>3–6 Months</option>
                                <option>6–12 Months</option>
                                <option>More than 1 Year</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="decisionMaker">
                                <option value="" disabled selected>Decision Maker</option>
                                <option>CEO / Director</option>
                                <option>Manager</option>
                                <option>Team Lead</option>
                                <option>HR</option>
                                <option>IT Head</option>
                                <option>Procurement</option>
                            </select>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="hearAboutUs">
                                <option value="" disabled selected>How did you hear about us?</option>
                                <option>Google Search</option>
                                <option>Social Media</option>
                                <option>Friend / Referral</option>
                                <option>Advertisement</option>
                                <option>Trade Show / Event</option>
                                <option>Cold Call / Email</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="workedBefore">
                                <option value="" disabled selected>Have you worked with us before?</option>
                                <option>Yes</option>
                                <option>No</option>
                            </select>
                        </div>

                        <!-- Notes — full width -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="additionalNotes" maxlength="500"></textarea>
                            <label>Any Additional Notes</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 6 — REVIEW & SUBMIT
                ========================= -->
                <div class="form-step" id="fs5">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 6 of 6</p>
                        <h1 class="text-3xl font-bold text-gray-900">Review & Submit</h1>
                        <p class="text-sm text-gray-400 mt-1">Please review all information before submitting.</p>
                    </div>

                    <div id="reviewContent">

                        <!-- Lead Details -->
                        <div class="review-section">
                            <div class="review-section-title">Lead Details</div>
                            <div class="review-grid">
                                <div class="review-item">
                                    <div class="review-label">Lead Name</div>
                                    <div class="review-value" id="rv-leadName">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Product</div>
                                    <div class="review-value" id="rv-product">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Lead Source</div>
                                    <div class="review-value" id="rv-leadSource">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Lead Status</div>
                                    <div class="review-value" id="rv-leadStatus">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Lead Owner</div>
                                    <div class="review-value" id="rv-leadOwner">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Priority</div>
                                    <div class="review-value" id="rv-priority">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Lead Type</div>
                                    <div class="review-value" id="rv-leadType">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Estimated Value</div>
                                    <div class="review-value" id="rv-estimatedValue">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Expected Closing Date</div>
                                    <div class="review-value" id="rv-expectedClosingDate">—</div>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Info -->
                        <div class="review-section">
                            <div class="review-section-title">Contact Information</div>
                            <div class="review-grid">
                                <div class="review-item">
                                    <div class="review-label">Contact Person</div>
                                    <div class="review-value" id="rv-contactPersonName">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Designation</div>
                                    <div class="review-value" id="rv-designation">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Email</div>
                                    <div class="review-value" id="rv-email">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Phone Number</div>
                                    <div class="review-value" id="rv-phoneNumber">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">WhatsApp Number</div>
                                    <div class="review-value" id="rv-whatsappNumber">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Preferred Contact Mode</div>
                                    <div class="review-value" id="rv-preferredContactMode">—</div>
                                </div>
                            </div>
                        </div>

                        <!-- Company Info -->
                        <div class="review-section">
                            <div class="review-section-title">Company Information</div>
                            <div class="review-grid">
                                <div class="review-item">
                                    <div class="review-label">Company Name</div>
                                    <div class="review-value" id="rv-companyName">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Website</div>
                                    <div class="review-value" id="rv-website">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Industry</div>
                                    <div class="review-value" id="rv-industry">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Company Size</div>
                                    <div class="review-value" id="rv-companySize">—</div>
                                </div>
                                <div class="review-item sm:col-span-2">
                                    <div class="review-label">Address</div>
                                    <div class="review-value" id="rv-address">—</div>
                                </div>
                            </div>
                        </div>

                        <!-- Requirement -->
                        <div class="review-section">
                            <div class="review-section-title">Requirement</div>
                            <div class="review-grid">
                                <div class="review-item">
                                    <div class="review-label">Budget Range</div>
                                    <div class="review-value" id="rv-budgetRange">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Expected Timeline</div>
                                    <div class="review-value" id="rv-expectedTimeline">—</div>
                                </div>
                                <div class="review-item">
                                    <div class="review-label">Decision Maker</div>
                                    <div class="review-value" id="rv-decisionMaker">—</div>
                                </div>
                            </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">Lead Created!</h2>

                    <p class="text-sm text-gray-500 mb-4">
                        The lead 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>
                        Back
                    </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 = 6;

    const mobileLabels = [
        'Step 1 of 6 — Lead Details',
        'Step 2 of 6 — Contact Info',
        'Step 3 of 6 — Company Info',
        'Step 4 of 6 — Requirement',
        'Step 5 of 6 — Additional Info',
        'Step 6 of 6 — Review & Submit',
    ];

    /* =========================
       SEARCHABLE SELECT
    ========================== */

    const searchableSelects = [
         '#product',
        '#leadSource',
        '#leadStatus',
        '#leadOwner',
        '#priority',
        '#leadType',
        '#preferredContactMode',
        '#bestTimeToContact',
        '#industry',
        '#companySize',
        '#state',
        '#city',
        '#budgetRange',
        '#expectedTimeline',
        '#decisionMaker',
        '#hearAboutUs',
        '#workedBefore',
    ];

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

    /* =========================
       REVIEW STEP POPULATION
    ========================== */

    function getVal(id) {
        const el = document.getElementById(id);
        if (!el) return '—';
        return el.value.trim() || '—';
    }

    function getSelectVal(id) {
        const el = document.getElementById(id);
        if (!el) return '—';
        const v = el.value;
        return (v && v !== '') ? v : '—';
    }

    function populateReview() {
        const map = {
            'rv-product' : getSelectVal('product'),
            'rv-leadName'           : getVal('leadName'),
            'rv-leadSource'         : getSelectVal('leadSource'),
            'rv-leadStatus'         : getSelectVal('leadStatus'),
            'rv-leadOwner'          : getSelectVal('leadOwner'),
            'rv-priority'           : getSelectVal('priority'),
            'rv-leadType'           : getSelectVal('leadType'),
            'rv-estimatedValue'     : getVal('estimatedValue') !== '—' ? '₹' + getVal('estimatedValue') : '—',
            'rv-expectedClosingDate': getVal('expectedClosingDate'),
            'rv-contactPersonName'  : getVal('contactPersonName'),
            'rv-designation'        : getVal('designation'),
            'rv-email'              : getVal('email'),
            'rv-phoneNumber'        : getVal('phoneNumber'),
            'rv-whatsappNumber'     : getVal('whatsappNumber'),
            'rv-preferredContactMode': getSelectVal('preferredContactMode'),
            'rv-companyName'        : getVal('companyName'),
            'rv-website'            : getVal('website'),
            'rv-industry'           : getSelectVal('industry'),
            'rv-companySize'        : getSelectVal('companySize'),
            'rv-address'            : (() => {
                const addr = getVal('address');
                const city = getVal('city');
                const st   = getSelectVal('state');
                const pin  = getVal('pincode');
                const parts = [addr, city, st, pin].filter(v => v !== '—');
                return parts.length ? parts.join(', ') : '—';
            })(),
            'rv-budgetRange'        : getSelectVal('budgetRange'),
            'rv-expectedTimeline'   : getSelectVal('expectedTimeline'),
            'rv-decisionMaker'      : getSelectVal('decisionMaker'),
        };

        for (const [id, val] of Object.entries(map)) {
            const el = document.getElementById(id);
            if (el) el.textContent = val;
        }
    }

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

    function updateSidebar(){
        for(let i = 0; i < 6; 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, 5)];

        for(let i = 0; i < 6; 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';
        }
    }


/* =========================
   PINCODE VALIDATION
========================== */

function onlySixDigits(input){

    input.addEventListener('input', function(){

        this.value = this.value
            .replace(/\D/g,'')
            .slice(0,6);

    });

}

onlySixDigits(document.getElementById('pinCode'));

/* =========================
   NUMBER & EMAIL VALIDATION
========================== */

function onlyTenDigits(input){

    input.addEventListener('input', function(){

        this.value = this.value
            .replace(/\D/g,'')
            .slice(0,10);

    });

}

onlyTenDigits(document.getElementById('phoneNumber'));
onlyTenDigits(document.getElementById('alternateNumber'));
onlyTenDigits(document.getElementById('whatsappNumber'));


/* =========================
   EMAIL VALIDATION
========================== */

function isValidEmail(email){

    return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/
        .test(email);

}



function goStep(dir){

    /* =========================
       STEP 1 VALIDATION
    ========================== */

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

        const leadSource =
            document.getElementById('leadSource').value;

        const leadName =
            document.getElementById('leadName').value.trim();

        const leadStatus =
            document.getElementById('leadStatus').value;

        const leadOwner =
            document.getElementById('leadOwner').value;
            
            const product =
    document.getElementById('product').value;

if(product === ''){

    Swal.fire({
        icon:'warning',
        title:'Product Required',
        text:'Please select product',
        confirmButtonColor:'#8b5cf6'
    });

    return;
}

        if(leadSource === ''){

            Swal.fire({
                icon:'warning',
                title:'Lead Source Required',
                text:'Please select lead source',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(leadName === ''){

            Swal.fire({
                icon:'warning',
                title:'Lead Name Required',
                text:'Please enter lead name',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(leadStatus === ''){

            Swal.fire({
                icon:'warning',
                title:'Lead Status Required',
                text:'Please select lead status',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(leadOwner === ''){

            Swal.fire({
                icon:'warning',
                title:'Lead Owner Required',
                text:'Please select lead owner',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

    /* =========================
       STEP 2 VALIDATION
    ========================== */
/* =========================
   STEP 2 VALIDATION
========================== */

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

    const contactPersonName =
        document.getElementById('contactPersonName').value.trim();

    const email =
        document.getElementById('email').value.trim();

    const phoneNumber =
        document.getElementById('phoneNumber').value.trim();

    const alternateNumber =
        document.getElementById('alternateNumber').value.trim();

    const whatsappNumber =
        document.getElementById('whatsappNumber').value.trim();

    if(contactPersonName === ''){

        Swal.fire({
            icon:'warning',
            title:'Contact Person Required',
            text:'Please enter contact person name',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(email !== '' && !isValidEmail(email)){

        Swal.fire({
            icon:'warning',
            title:'Invalid Email',
            text:'Please enter valid email address',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(phoneNumber !== '' && phoneNumber.length !== 10){

        Swal.fire({
            icon:'warning',
            title:'Invalid Phone Number',
            text:'Phone number must be exactly 10 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(alternateNumber !== '' && alternateNumber.length !== 10){

        Swal.fire({
            icon:'warning',
            title:'Invalid Alternate Number',
            text:'Alternate number must be exactly 10 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(whatsappNumber !== '' && whatsappNumber.length !== 10){

        Swal.fire({
            icon:'warning',
            title:'Invalid WhatsApp Number',
            text:'WhatsApp number must be exactly 10 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

}

    /* =========================
       STEP 3 VALIDATION
    ========================== */

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

        const companyName =
            document.getElementById('companyName').value.trim();

        const city =
            document.getElementById('city').value.trim();

        const state =
            document.getElementById('state').value;

        const pincode =
            document.getElementById('pinCode').value.trim();

        if(companyName === ''){

            Swal.fire({
                icon:'warning',
                title:'Company Name Required',
                text:'Please enter company name',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(city === ''){

            Swal.fire({
                icon:'warning',
                title:'City Required',
                text:'Please Select city',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(state === ''){

            Swal.fire({
                icon:'warning',
                title:'State Required',
                text:'Please select state',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

if(pincode === ''){

    Swal.fire({
        icon:'warning',
        title:'Pincode Required',
        text:'Please enter pincode',
        confirmButtonColor:'#8b5cf6'
    });

    return;
}

if(pincode.length !== 6){

    Swal.fire({
        icon:'warning',
        title:'Invalid Pincode',
        text:'Pincode must be exactly 6 digits',
        confirmButtonColor:'#8b5cf6'
    });

    return;
}
    }

    /* =========================
       STEP 4 VALIDATION
    ========================== */

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

        const requirementDescription =
            document.getElementById('requirementDescription').value.trim();

        if(requirementDescription === ''){

            Swal.fire({
                icon:'warning',
                title:'Requirement Required',
                text:'Please enter requirement description',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

    /* =========================
       FINAL SUBMIT
    ========================== */

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

        Swal.fire({
            icon:'success',
            title:'Lead Created!',
            text:'Lead has been created successfully',
            confirmButtonColor:'#16a34a'
        }).then(() => {

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

    if(cur === 5){

        populateReview();

    }

    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 === 5){

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

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

}


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

    function resetForm(){
        cur = 0;

        document.querySelectorAll('input,textarea').forEach(el => {
            if(el.type !== 'checkbox') el.value = '';
            else el.checked = false;
        });

        document.querySelectorAll('select').forEach(el => {
            el.selectedIndex = 0;
            if(el.tomselect){
                el.tomselect.clear();
                el.tomselect.refreshOptions(false);
            }
        });

        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 nb = document.getElementById('nextBtn');
        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');

        const pb = document.getElementById('prevBtn');
        pb.classList.add('opacity-40','cursor-not-allowed');
    }

</script>

</body>

</html>

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