<?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 SMM Client</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;}
    /* Package Cards */
    .pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
    .pkg-card{border:2px solid #e5e7eb;border-radius:20px;padding:20px 16px;cursor:pointer;transition:0.25s;background:#fff;position:relative;}
    .pkg-card:hover{border-color:#c4b5fd;box-shadow:0 4px 20px rgba(139,92,246,0.10);}
    .pkg-card.selected{border-color:#8b5cf6;background:#faf5ff;box-shadow:0 4px 24px rgba(139,92,246,0.18);}
    .pkg-card.selected .pkg-badge{display:flex;}
    .pkg-badge{display:none;position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:#8b5cf6;color:#fff;align-items:center;justify-content:center;font-size:12px;}
    .pkg-name{font-size:15px;font-weight:700;color:#1f2937;margin-bottom:4px;}
    .pkg-price{font-size:22px;font-weight:800;color:#7c3aed;}
    .pkg-period{font-size:12px;color:#9ca3af;font-weight:400;}
    .pkg-features{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
    .pkg-feat{font-size:12px;color:#6b7280;display:flex;align-items:center;gap:6px;}
    .pkg-feat i{color:#8b5cf6;font-size:13px;}
    .pkg-card.custom-pkg{border-style:dashed;}
    .pkg-card.custom-pkg .pkg-price{font-size:16px;color:#6b7280;}
    /* Platform checkboxes */
    .platform-grid{display:flex;flex-wrap:wrap;gap:10px;}
    .platform-chip{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:0.2s;background:#fff;font-size:13px;font-weight:600;color:#6b7280;}
    .platform-chip:has(input:checked){border-color:#8b5cf6;background:#f3e8ff;color:#7c3aed;}
    .platform-chip input[type="checkbox"]{display:none;}
    .platform-chip i{font-size:17px;}
    /* Review table */
    .review-section{margin-bottom:20px;}
    .review-title{font-size:13px;font-weight:700;color:#8b5cf6;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f3e8ff;}
    .review-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid #f9fafb;}
    .review-row:last-child{border-bottom:none;}
    .review-label{font-size:13px;color:#9ca3af;font-weight:500;flex:0 0 45%;}
    .review-value{font-size:13px;color:#1f2937;font-weight:600;text-align:right;}
    @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;}.pkg-grid{grid-template-columns:1fr 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 SMM Client
            </h1>
        </div>
        
        <a href="smm_client_list.php"
            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
        
        </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 — Client 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>

                </div>

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

                    <?php
                    $steps = [
                        ['01','Client Details','Basic company info'],
                        ['02','Package','Select SMM package'],
                        ['03','Deliverables','Monthly deliverables'],
                        ['04','Access & Platforms','Social media access'],
                        ['05','Review','Review & confirm'],
                    ];

                    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 — CLIENT DETAILS
                ========================= -->
                <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">Client Details</h1>
                    </div>

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

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

                        <div class="si">
                            <select id="industry">
                                <option value="" disabled selected>Select Industry *</option>
                                <option>Retail</option>
                                <option>Healthcare</option>
                                <option>Education</option>
                                <option>Real Estate</option>
                                <option>Technology</option>
                                <option>Food & Beverage</option>
                                <option>Fashion & Apparel</option>
                                <option>Automotive</option>
                                <option>Finance & Banking</option>
                                <option>Travel & Tourism</option>
                                <option>Fitness & Wellness</option>
                                <option>Entertainment</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="contactPerson">
                            <label>Contact Person *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="gstNumber">
                            <label>GST Number</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="email" placeholder=" " id="email">
                            <label>Email *</label>
                        </div>

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

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

                        <!-- Row 5 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="city">
                            <label>City</label>
                        </div>

                        <div class="si">
                            <select id="state">
                                <option value="" disabled selected>Select State</option>
                                <option>Gujarat</option>
                                <option>Maharashtra</option>
                                <option>Rajasthan</option>
                                <option>Delhi</option>
                                <option>Karnataka</option>
                                <option>Tamil Nadu</option>
                                <option>Uttar Pradesh</option>
                                <option>West Bengal</option>
                                <option>Madhya Pradesh</option>
                                <option>Punjab</option>
                            </select>
                        </div>

                        <!-- Row 6 -->
                        <div class="fi">
                            <input type="url" placeholder=" " id="website">
                            <label>Website</label>
                        </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 2 — PACKAGE
                ========================= -->
                <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">Select SMM Package</h1>
                    </div>

                    <div class="pkg-grid">

                        <!-- Basic -->
                        <div class="pkg-card" onclick="selectPackage(this,'Basic SMM','10000')">
                            <div class="pkg-badge"><i class="ri-check-line"></i></div>
                            <div class="pkg-name">Basic SMM</div>
                            <div class="pkg-price">₹10,000 <span class="pkg-period">/month</span></div>
                            <div class="pkg-features">
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 15 Graphics</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 8 Reels</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 12 Posts</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 1 Ad Campaign</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> Basic Report</div>
                            </div>
                        </div>

                        <!-- Standard -->
                        <div class="pkg-card selected" onclick="selectPackage(this,'Standard SMM','20000')">
                            <div class="pkg-badge" style="display:flex;"><i class="ri-check-line"></i></div>
                            <div class="pkg-name">Standard SMM</div>
                            <div class="pkg-price">₹20,000 <span class="pkg-period">/month</span></div>
                            <div class="pkg-features">
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 30 Graphics</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 15 Reels</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 20 Posts</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 2 Ad Campaigns</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> Detailed Report</div>
                            </div>
                        </div>

                        <!-- Premium -->
                        <div class="pkg-card" onclick="selectPackage(this,'Premium SMM','35000')">
                            <div class="pkg-badge"><i class="ri-check-line"></i></div>
                            <div class="pkg-name">Premium SMM</div>
                            <div class="pkg-price">₹35,000 <span class="pkg-period">/month</span></div>
                            <div class="pkg-features">
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 30 Graphics</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 25 Reels</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 30 Posts</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> 4 Ad Campaigns</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> Tailored Package</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> Advance Report</div>
                            </div>
                        </div>

                        <!-- Custom -->
                        <div class="pkg-card custom-pkg" onclick="selectPackage(this,'Custom SMM','')">
                            <div class="pkg-badge"><i class="ri-check-line"></i></div>
                            <div class="pkg-name">Custom SMM</div>
                            <div class="pkg-price" style="font-size:15px;color:#6b7280;">Custom Price</div>
                            <div class="pkg-features" style="margin-top:16px;">
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> As per requirement</div>
                                <div class="pkg-feat"><i class="ri-checkbox-circle-line"></i> Custom Report</div>
                            </div>
                            <div style="margin-top:14px;">
                                <a href="#" class="text-xs font-semibold text-violet-600 underline">Contact Us</a>
                            </div>
                        </div>

                    </div>

                    <!-- Hidden fields to store selected package -->
                    <input type="hidden" id="selectedPackageName" value="Standard SMM">
                    <input type="hidden" id="selectedPackagePrice" value="20000">

                    <!-- Custom price input (shown when Custom selected) -->
                    <div id="customPriceWrap" class="mt-5" style="display:none;">
                        <div class="fi" style="max-width:300px;">
                            <input type="number" placeholder=" " id="customPrice">
                            <label>Custom Price (₹/month) *</label>
                        </div>
                    </div>

                </div>

                <!-- ========================
                     STEP 3 — DELIVERABLES
                ========================= -->
                <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">Monthly Deliverables</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="totalGraphics" min="0">
                            <label>Total Graphics *</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="totalReels" min="0">
                            <label>Total Reels *</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="totalPosts" min="0">
                            <label>Total Posts *</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="stories" min="0">
                            <label>Stories (Optional)</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="adCampaigns" min="0">
                            <label>Ad Campaigns</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="videoEditing" min="0">
                            <label>Video Editing (Optional)</label>
                        </div>

                    </div>

                    <!-- Platforms -->
                    <div class="mt-6">
                        <p class="text-sm font-semibold text-gray-700 mb-3">Platforms *</p>
                        <div class="platform-grid">
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="Facebook" checked>
                                <i class="ri-facebook-fill" style="color:#1877f2;"></i> Facebook
                            </label>
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="Instagram">
                                <i class="ri-instagram-line" style="color:#e1306c;"></i> Instagram
                            </label>
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="LinkedIn">
                                <i class="ri-linkedin-fill" style="color:#0a66c2;"></i> LinkedIn
                            </label>
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="YouTube">
                                <i class="ri-youtube-fill" style="color:#ff0000;"></i> YouTube
                            </label>
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="Twitter">
                                <i class="ri-twitter-x-fill" style="color:#000;"></i> Twitter
                            </label>
                            <label class="platform-chip">
                                <input type="checkbox" name="platforms" value="Pinterest">
                                <i class="ri-pinterest-fill" style="color:#e60023;"></i> Pinterest
                            </label>
                        </div>
                    </div>

                    <!-- Other Platforms -->
                    <div class="mt-4">
                        <div class="fi">
                            <input type="text" placeholder=" " id="otherPlatforms">
                            <label>Other Platforms</label>
                        </div>
                    </div>

                </div>

                <!-- ========================
                     STEP 4 — ACCESS & PLATFORMS
                ========================= -->
                <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">Social Media Access</h1>
                    </div>

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

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="url" placeholder=" " id="facebookPageLink">
                            <label>Facebook Page Link / Access</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="adAccountAccess">
                            <label>Ad Account Access (Optional)</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="instagramUsername">
                            <label>Instagram Username / Access</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="canvaDriveAccess">
                            <label>Canva / Drive Access (Optional)</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="url" placeholder=" " id="linkedinPageLink">
                            <label>LinkedIn Page Link / Access</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="googleAnalyticsAccess">
                            <label>Google Analytics Access</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="url" placeholder=" " id="youtubeChannelLink">
                            <label>YouTube Channel Link / Access</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="notes">
                            <label>Notes (Optional)</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 5 — REVIEW & CONFIRM
                ========================= -->
                <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">Review &amp; Confirm</h1>
                    </div>

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

                        <!-- Client Info -->
                        <div class="review-section">
                            <div class="review-title">Client Details</div>
                            <div class="review-row">
                                <span class="review-label">Company Name</span>
                                <span class="review-value" id="rv-companyName">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Industry</span>
                                <span class="review-value" id="rv-industry">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Contact Person</span>
                                <span class="review-value" id="rv-contactPerson">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Email</span>
                                <span class="review-value" id="rv-email">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Phone</span>
                                <span class="review-value" id="rv-phone">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">GST Number</span>
                                <span class="review-value" id="rv-gst">—</span>
                            </div>
                        </div>

                        <!-- Package -->
                        <div class="review-section">
                            <div class="review-title">Package</div>
                            <div class="review-row">
                                <span class="review-label">Package</span>
                                <span class="review-value" id="rv-package">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Monthly Price</span>
                                <span class="review-value" id="rv-price">—</span>
                            </div>
                            <div class="review-title" style="margin-top:18px;">Deliverables</div>
                            <div class="review-row">
                                <span class="review-label">Total Graphics</span>
                                <span class="review-value" id="rv-graphics">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Total Reels</span>
                                <span class="review-value" id="rv-reels">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-label">Total Posts</span>
                                <span class="review-value" id="rv-posts">—</span>
                            </div>
                        </div>

                    </div>

                    <!-- Platforms row -->
                    <div class="review-section mt-2">
                        <div class="review-title">Platforms</div>
                        <div id="rv-platforms" class="platform-grid mt-2"></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">Client Created!</h2>

                    <p class="text-sm text-gray-500 mb-4">
                        SMM Client 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 — Client Details',
        'Step 2 of 5 — Package',
        'Step 3 of 5 — Deliverables',
        'Step 4 of 5 — Access & Platforms',
        'Step 5 of 5 — Review',
    ];

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

    const searchableSelects = [
        '#industry',
        '#state',
    ];

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

    /* =========================
       PACKAGE SELECTION
    ========================== */

    function selectPackage(card, name, price) {
        document.querySelectorAll('.pkg-card').forEach(c => c.classList.remove('selected'));
        card.classList.add('selected');
        document.getElementById('selectedPackageName').value = name;
        document.getElementById('selectedPackagePrice').value = price;

        const customWrap = document.getElementById('customPriceWrap');
        if(name === 'Custom SMM'){
            customWrap.style.display = 'block';
        } else {
            customWrap.style.display = 'none';
        }
    }

    /* =========================
       POPULATE REVIEW
    ========================== */

    function populateReview() {
        document.getElementById('rv-companyName').textContent  = val('companyName') || '—';
        document.getElementById('rv-industry').textContent     = selVal('industry') || '—';
        document.getElementById('rv-contactPerson').textContent= val('contactPerson') || '—';
        document.getElementById('rv-email').textContent        = val('email') || '—';
        document.getElementById('rv-phone').textContent        = val('phoneNumber') || '—';
        document.getElementById('rv-gst').textContent          = val('gstNumber') || '—';

        const pkgName  = document.getElementById('selectedPackageName').value;
        const pkgPrice = document.getElementById('selectedPackagePrice').value;
        document.getElementById('rv-package').textContent = pkgName || '—';
        document.getElementById('rv-price').textContent   = pkgPrice ? '₹' + Number(pkgPrice).toLocaleString('en-IN') + '/month' : 'Custom';

        document.getElementById('rv-graphics').textContent = val('totalGraphics') || '—';
        document.getElementById('rv-reels').textContent    = val('totalReels') || '—';
        document.getElementById('rv-posts').textContent    = val('totalPosts') || '—';

        // Platforms
        const checks = document.querySelectorAll('input[name="platforms"]:checked');
        const container = document.getElementById('rv-platforms');
        container.innerHTML = '';
        checks.forEach(cb => {
            const chip = document.createElement('span');
            chip.className = 'platform-chip';
            chip.style.pointerEvents = 'none';
            chip.style.borderColor = '#8b5cf6';
            chip.style.background = '#f3e8ff';
            chip.style.color = '#7c3aed';
            chip.textContent = cb.value;
            container.appendChild(chip);
        });
        if(!checks.length) container.innerHTML = '<span class="text-sm text-gray-400">None selected</span>';
    }

    function val(id) {
        const el = document.getElementById(id);
        return el ? el.value.trim() : '';
    }

    function selVal(id) {
        const el = document.getElementById(id);
        if(!el) return '';
        if(el.tomselect) return el.tomselect.getValue();
        return el.options[el.selectedIndex]?.text || '';
    }

    /* =========================
       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 1 */
    if(cur === 0){

        const companyName   = val('companyName');
        const industry      = selVal('industry');
        const contactPerson = val('contactPerson');
        const email         = val('email');
        const phoneNumber   = val('phoneNumber');

        if(companyName === ''){

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

            return false;
        }

        if(industry === ''){

            Swal.fire({
                icon:'warning',
                title:'Industry Required',
                text:'Please select industry'
            });

            return false;
        }

        if(contactPerson === ''){

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

            return false;
        }

        if(email === ''){

            Swal.fire({
                icon:'warning',
                title:'Email Required',
                text:'Please enter email address'
            });

            return false;
        }

        const emailPattern =
            /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if(!emailPattern.test(email)){

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

            return false;
        }

        if(phoneNumber === ''){

            Swal.fire({
                icon:'warning',
                title:'Phone Number Required',
                text:'Please enter phone number'
            });

            return false;
        }

        const phonePattern = /^[0-9]{10}$/;

        if(!phonePattern.test(phoneNumber)){

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

            return false;
        }

    }


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

        const packageName =
            document.getElementById(
                'selectedPackageName'
            ).value;

        if(packageName === ''){

            Swal.fire({
                icon:'warning',
                title:'Package Required',
                text:'Please select package'
            });

            return false;
        }

        if(packageName === 'Custom SMM'){

            const customPrice =
                val('customPrice');

            if(customPrice === ''){

                Swal.fire({
                    icon:'warning',
                    title:'Custom Price Required',
                    text:'Please enter custom package price'
                });

                return false;
            }

        }

    }


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

        const graphics = val('totalGraphics');
        const reels    = val('totalReels');
        const posts    = val('totalPosts');

        if(graphics === ''){

            Swal.fire({
                icon:'warning',
                title:'Graphics Required',
                text:'Please enter total graphics'
            });

            return false;
        }

        if(reels === ''){

            Swal.fire({
                icon:'warning',
                title:'Reels Required',
                text:'Please enter total reels'
            });

            return false;
        }

        if(posts === ''){

            Swal.fire({
                icon:'warning',
                title:'Posts Required',
                text:'Please enter total posts'
            });

            return false;
        }

        const platforms =
            document.querySelectorAll(
                'input[name="platforms"]:checked'
            );

        if(platforms.length === 0){

            Swal.fire({
                icon:'warning',
                title:'Platform Required',
                text:'Please select at least one platform'
            });

            return false;
        }

    }

    return true;

}


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

    function goStep(dir){

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

            // Redirect after 2 seconds
            setTimeout(() => {
                window.location.href = 'smm_client_list.php';
            }, 2000);

            return;
        }

if(dir === 1){

    if(!validateStep()){

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

        // Populate review when reaching step 5
        if(cur === 4) 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 === 4){
            nb.innerHTML = '<i class="ri-check-line"></i> Submit';
            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'; ?>