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

<style>
/* TomSelect overrides */
.ts-wrapper.single .ts-control {min-height: 50px !important; border: 1px solid rgb(203 213 225); border-radius: 15px !important; padding: 0 16px !important; box-shadow: none; background: #fff; font-size: 16px; display: flex; align-items: center;}
.ts-wrapper.focus .ts-control { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;}
.ts-control input {font-size: 16px !important;}
.ts-dropdown { border-radius: 12px; border: 1px solid rgb(203 213 225); overflow: hidden;}
.ts-dropdown .option {padding: 12px 16px;}
.ts-dropdown-content {max-height: 125px !important;}
.ts-dropdown .active {background: #eef2ff; color: #4338ca;}

/* Wizard layout */
.wizard-outer { padding: 1.5rem 1.5rem 2.5rem; }
.wizard-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.wizard-topbar h1 { font-size:1.75rem; font-weight:700; color:#0f172a; }
.wizard-topbar a { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); font-size:14px; color:#475569; text-decoration:none; transition:box-shadow .2s; }
.wizard-topbar a:hover { box-shadow:0 4px 10px rgba(0,0,0,.1); }

.wizard-card { background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,.07); display:flex; overflow:hidden; }

/* Sidebar */
.wz-sidebar { width:320px; flex-shrink:0; border-right:1px solid #f1f5f9; padding:2rem 1.25rem; background:#fafafa; }
.wz-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:1.75rem; position:relative; }
.wz-step:not(:last-child)::after { content:''; position:absolute; left:13px; top:30px; width:1.5px; height:calc(100% + .25rem); background:#e2e8f0; }
.wz-dot { width:28px; height:28px; border-radius:50%; border:2px solid #cbd5e1; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#94a3b8; background:#fff; position:relative; z-index:1; flex-shrink:0; transition:.2s; }
.wz-dot.active { border-color:#7c3aed; background:#ede9fe; color:#7c3aed; }
.wz-dot.done { border-color:#059669; background:#d1fae5; color:#059669; }
.wz-info { padding-top:2px; }
.wz-num { font-size:10px; color:#94a3b8; letter-spacing:.5px; margin-bottom:1px; }
.wz-name { font-size:13px; font-weight:600; color:#94a3b8; line-height:1.2; }
.wz-name.active { color:#1e293b; }
.wz-sub { font-size:11px; color:#b0bec5; margin-top:2px; }

/* Content */
.wz-content { flex:1; display:flex; flex-direction:column; min-height:520px; }
.wz-content-body { flex:1; padding:2rem 2.5rem 1.5rem 2.5rem; }
/* Footer - always pinned to bottom of right panel */
.wz-footer { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 2.5rem; border-top:1px solid #f1f5f9; background:#fff; margin-top:auto; }
.wz-step-label { font-size:11px; font-weight:700; letter-spacing:1px; color:#7c3aed; margin-bottom:6px; }
.wz-step-title { font-size:1.5rem; font-weight:700; color:#0f172a; margin-bottom:1.75rem; }

/* Steps */
.wz-pane { display:none; }
.wz-pane.active { display:block; }

/* Form fields inside wizard — use same classes as original */
.wz-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.wz-grid .span3 { grid-column: 1 / -1; }
.wz-grid .span2 { grid-column: span 2; }

.wf label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:#475569; }
.wf input[type=text],.wf input[type=tel],.wf input[type=email],.wf input[type=password] {
    width:100%; height:44px; padding:0 14px; border-radius:12px; border:1px solid #e2e8f0;
    font-size:14px; color:#0f172a; outline:none; transition:.2s;
}
.wf input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.wf input[readonly] { background:#f8fafc; }
.req { color:#ef4444; }
.opt { font-size:11px; color:#94a3b8; }

/* Footer button styles */
.btn-wz-back { padding:10px 22px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; font-size:14px; color:#64748b; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.2s; }
.btn-wz-back:hover { background:#f8fafc; }
.btn-wz-next { padding:10px 26px; border-radius:12px; background:linear-gradient(135deg,#7c3aed,#6366f1); border:none; color:#fff; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(99,102,241,.3); transition:.2s; }
.btn-wz-next:hover { box-shadow:0 6px 18px rgba(99,102,241,.4); transform:translateY(-1px); }
.btn-wz-save { padding:10px 28px; border-radius:12px; background:linear-gradient(135deg,#059669,#10b981); border:none; color:#fff; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 4px 12px rgba(16,185,129,.3); transition:.2s; }
.btn-wz-save:hover { box-shadow:0 6px 18px rgba(16,185,129,.4); transform:translateY(-1px); }

/* Review section */
.review-section { margin-bottom:1.25rem; }
.review-section h3 { font-size:13px; font-weight:700; color:#7c3aed; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #f1f5f9; }
.review-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 16px; }
.review-row { display:flex; flex-direction:column; padding:6px 0; }
.review-row .rv-label { font-size:11px; color:#94a3b8; }
.review-row .rv-value { font-size:13px; color:#1e293b; font-weight:500; }
</style>

<div class="wizard-outer">
    <div class="wizard-topbar">
        <h1>Add Sales Partner</h1>
        <a href="puresaas_sales_partner.php"><i class="ri-arrow-left-line"></i> Back</a>
    </div>

    <div class="wizard-card">

        <!-- Sidebar -->
        <div class="wz-sidebar">
            <div class="wz-step" id="sb1">
                <div class="wz-dot active" id="dot1">01</div>
                <div class="wz-info">
                    <div class="wz-num">01</div>
                    <div class="wz-name active" id="sn1">Basic Info</div>
                    <div class="wz-sub">Name & contact</div>
                </div>
            </div>
            <div class="wz-step" id="sb2">
                <div class="wz-dot" id="dot2">02</div>
                <div class="wz-info">
                    <div class="wz-num">02</div>
                    <div class="wz-name" id="sn2">Business Segment</div>
                    <div class="wz-sub">Type & details</div>
                </div>
            </div>
            <div class="wz-step" id="sb3">
                <div class="wz-dot" id="dot3">03</div>
                <div class="wz-info">
                    <div class="wz-num">03</div>
                    <div class="wz-name" id="sn3">Address</div>
                    <div class="wz-sub">Location details</div>
                </div>
            </div>
            <div class="wz-step" id="sb4">
                <div class="wz-dot" id="dot4">04</div>
                <div class="wz-info">
                    <div class="wz-num">04</div>
                    <div class="wz-name" id="sn4">GST & Docs</div>
                    <div class="wz-sub">Upload files</div>
                </div>
            </div>
            <div class="wz-step" id="sb5">
                <div class="wz-dot" id="dot5">05</div>
                <div class="wz-info">
                    <div class="wz-num">05</div>
                    <div class="wz-name" id="sn5">Review & Save</div>
                    <div class="wz-sub">Confirm all details</div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="wz-content">
          <div class="wz-content-body">
            <div class="wz-step-label" id="stepLabel">STEP 1 OF 5</div>
            <div class="wz-step-title" id="stepTitle">Basic Info</div>

            <form id="dealerForm" method="POST" enctype="multipart/form-data">

                <!-- STEP 1: Basic Info -->
                <div class="wz-pane active" id="pane1">
                    <div class="wz-grid">
                        <div class="wf">
                            <label>Full Name <span class="req">*</span></label>
                            <input type="text" name="full_name" placeholder="Enter Full Name">
                        </div>
                        <div class="wf">
                            <label>Mobile Number <span class="req">*</span></label>
                            <input type="tel" name="mobile" maxlength="10" placeholder="Enter Mobile Number" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                        </div>
                        <div class="wf">
                            <label>WhatsApp Number <span class="opt">(Optional)</span></label>
                            <input type="tel" name="whatsapp" maxlength="10" placeholder="Enter WhatsApp Number" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                        </div>
                        <div class="wf">
                            <label>Email Address</label>
                            <input type="email" name="email" placeholder="Enter Email Address">
                        </div>
                        <div class="wf">
                            <label>Create Password <span class="opt">(Auto generate)</span></label>
                            <div style="position:relative">
                                <input type="password" id="password" name="password" placeholder="Enter password" style="padding-right:44px">
                                <button type="button" onclick="togglePassword()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;cursor:pointer;padding:0;font-size:16px"><i id="passwordIcon" class="ri-eye-line"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 2: Business Info -->
                <div class="wz-pane" id="pane2">
                    <div class="wz-grid">
                        <div class="wf">
                            <label>Business Name <span class="req">*</span></label>
                            <input type="text" name="business_name" placeholder="Enter Business Name">
                        </div>
                        <div class="wf">
                            <label>Business Segment <span class="req">*</span></label>
                            <select id="business_type" name="business_type">
                                <option value="">Search Business Type</option>
                                <option value="Dealer">Dealer</option>
                                <option value="Distributor">Distributor</option>
                                <option value="Retailer">Retailer</option>
                                <option value="Wholesaler">Wholesaler</option>
                                <option value="Contractor">Contractor</option>
                                <option value="Builder">Builder</option>
                                <option value="Electrician">Electrician</option>
                                <option value="Interior Designer">Interior Designer</option>
                            </select>
                        </div>
                        <div class="wf">
                            <label>Experience <span class="opt">(Optional)</span></label>
                            <input type="text" name="experience" placeholder="e.g. 5 years">
                        </div>
                    </div>
                </div>

                <!-- STEP 3: Address -->
                <div class="wz-pane" id="pane3">
                    <div class="wz-grid">
                        <div class="wf">
                            <label>Shop / House No <span class="req">*</span></label>
                            <input type="text" name="house_no" placeholder="Enter Shop / House No">
                        </div>
                        <div class="wf">
                            <label>Society / Complex Name <span class="req">*</span></label>
                            <input type="text" name="society" placeholder="Enter Society / Complex Name">
                        </div>
                        <div class="wf">
                            <label>Landmark <span class="opt">(Optional)</span></label>
                            <input type="text" name="landmark" placeholder="Enter Landmark">
                        </div>
                        <div class="wf">
                            <label>City <span class="req">*</span></label>
                            <input type="text" name="city" placeholder="Enter City">
                        </div>
                        <div class="wf">
                            <label>State <span class="req">*</span></label>
                            <input type="text" name="state" placeholder="Enter State">
                        </div>
                        <div class="wf">
                            <label>Pincode <span class="req">*</span></label>
                            <input type="text" name="pincode" maxlength="6" placeholder="Enter Pincode" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                        </div>
                        <div class="wf">
                            <label>Country <span class="req">*</span></label>
                            <input type="text" name="country" value="India" readonly>
                        </div>
                    </div>
                </div>

                <!-- STEP 4: GST & Docs -->
                <div class="wz-pane" id="pane4">
                    <div class="wz-grid">

                        <!-- GST row -->
                        <div class="wf span3">
                            <label>Do you have GST? <span class="req">*</span></label>
                            <div style="display:flex;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap">
                                <label style="display:flex;align-items:center;gap:6px;font-size:14px;color:#475569;cursor:pointer">
                                    <input type="radio" name="has_gst" value="yes" onclick="toggleGst(true)"> Yes
                                </label>
                                <label style="display:flex;align-items:center;gap:6px;font-size:14px;color:#475569;cursor:pointer">
                                    <input type="radio" name="has_gst" value="no" onclick="toggleGst(false)" checked> No
                                </label>
                                <input type="text" id="gst_input" name="gst_number" maxlength="15" placeholder="Enter GST Number" class="hidden" style="flex:1;min-width:200px;height:44px;padding:0 14px;border-radius:12px;border:1px solid #e2e8f0;font-size:14px;outline:none">
                            </div>
                        </div>

                        <!-- GST Certificate (hidden initially) -->
                        <div class="wf span3 hidden" id="gstCertificateWrapper">
                            <label>GST Certificate <span class="req">*</span></label>
                            <input type="file" id="gst_certificate" name="gst_certificate" accept=".pdf,.jpg,.jpeg,.png"
                                class="block w-full text-sm text-slate-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:bg-blue-600 file:text-white border border-gray-300 rounded-xl p-2">
                            <div id="gstPreview" class="mt-3"></div>
                        </div>

                        <!-- Visiting Card -->
                        <div class="wf">
                            <label>Visiting Card Front Side(optional)</label>
                            <input type="file" id="visiting_front" name="visiting_front" accept=".jpg,.jpeg,.png,.pdf"
                                class="block w-full text-sm text-slate-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:bg-blue-600 file:text-white border border-gray-300 rounded-xl p-2">
                            <div id="frontPreview" class="mt-3"></div>
                        </div>
                        <div class="wf">
                            <label>Visiting Card Back Side(optional)</label>
                            <input type="file" id="visiting_back" name="visiting_back" accept=".jpg,.jpeg,.png,.pdf"
                                class="block w-full text-sm text-slate-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:bg-blue-600 file:text-white border border-gray-300 rounded-xl p-2">
                            <div id="backPreview" class="mt-3"></div>
                        </div>

                    </div>
                </div>

                <!-- STEP 5: Review & Save -->
                <div class="wz-pane" id="pane5">
                    <div style="background:#fafafa;border-radius:14px;border:1px solid #f1f5f9;padding:1.25rem">
                        <div class="review-section">
                            <h3>Basic Info</h3>
                            <div class="review-grid">
                                <div class="review-row"><span class="rv-label">Full Name</span><span class="rv-value" id="rv_name">—</span></div>
                                <div class="review-row"><span class="rv-label">Mobile</span><span class="rv-value" id="rv_mobile">—</span></div>
                                <div class="review-row"><span class="rv-label">WhatsApp</span><span class="rv-value" id="rv_whatsapp">—</span></div>
                                <div class="review-row"><span class="rv-label">Email</span><span class="rv-value" id="rv_email">—</span></div>
                            </div>
                        </div>
                        <div class="review-section">
                            <h3>Business Info</h3>
                            <div class="review-grid">
                                <div class="review-row"><span class="rv-label">Business Name</span><span class="rv-value" id="rv_business">—</span></div>
                                <div class="review-row"><span class="rv-label">Business Type</span><span class="rv-value" id="rv_btype">—</span></div>
                                <div class="review-row"><span class="rv-label">Experience</span><span class="rv-value" id="rv_exp">—</span></div>
                            </div>
                        </div>
                        <div class="review-section">
                            <h3>Address</h3>
                            <div class="review-grid">
                                <div class="review-row"><span class="rv-label">Shop / House No</span><span class="rv-value" id="rv_house">—</span></div>
                                <div class="review-row"><span class="rv-label">Society</span><span class="rv-value" id="rv_society">—</span></div>
                                <div class="review-row"><span class="rv-label">Landmark</span><span class="rv-value" id="rv_landmark">—</span></div>
                                <div class="review-row"><span class="rv-label">City</span><span class="rv-value" id="rv_city">—</span></div>
                                <div class="review-row"><span class="rv-label">State</span><span class="rv-value" id="rv_state">—</span></div>
                                <div class="review-row"><span class="rv-label">Pincode</span><span class="rv-value" id="rv_pincode">—</span></div>
                                <div class="review-row"><span class="rv-label">Country</span><span class="rv-value" id="rv_country">—</span></div>
                            </div>
                        </div>
                        <div class="review-section">
                            <h3>GST</h3>
                            <div class="review-grid">
                                <div class="review-row"><span class="rv-label">Has GST?</span><span class="rv-value" id="rv_hasgst">—</span></div>
                                <div class="review-row"><span class="rv-label">GST Number</span><span class="rv-value" id="rv_gst">—</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer buttons (outside panes, inside form) -->
                <div style="display:none">
                    <button type="submit" id="btnSubmitHidden"></button>
                </div>

            </form>
          </div><!-- end wz-content-body -->

          <!-- Footer always at bottom -->
          <div class="wz-footer">
              <button type="button" class="btn-wz-back" id="btnBack" onclick="goBack()">← Back</button>
              <div style="display:flex;gap:12px">
                  <button type="button" class="btn-wz-next" id="btnNext" onclick="goNext()">Next →</button>
                  <button type="button" class="btn-wz-save" id="btnSave" style="display:none" onclick="document.getElementById('dealerForm').requestSubmit()">✓ Save Partner</button>
              </div>
          </div>

        </div><!-- end wz-content -->
    </div><!-- end wizard-card -->
</div><!-- end wizard-outer -->

<!-- ======================== SCRIPTS ======================== -->

<!-- File preview scripts (same as original) -->
<script>
document.getElementById('visiting_front').addEventListener('change', function(e) {
    const preview = document.getElementById('frontPreview');
    preview.innerHTML = '';
    const file = e.target.files[0];
    if (!file) return;
    preview.innerHTML = `<div class="relative inline-block"><img src="${URL.createObjectURL(file)}" class="w-40 h-24 object-cover rounded-xl border border-slate-200"><button type="button" id="removeFront" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs"><i class="ri-delete-bin-6-line text-sm"></i></button></div>`;
    document.getElementById('removeFront').onclick = function () {
        document.getElementById('visiting_front').value = '';
        preview.innerHTML = '';
    };
});

document.getElementById('visiting_back').addEventListener('change', function(e) {
    const preview = document.getElementById('backPreview');
    preview.innerHTML = '';
    const file = e.target.files[0];
    if (!file) return;
    preview.innerHTML = `<div class="relative inline-block"><img src="${URL.createObjectURL(file)}" class="w-40 h-24 object-cover rounded-xl border border-slate-200"><button type="button" id="removeBack" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs"><i class="ri-delete-bin-6-line text-sm"></i></button></div>`;
    document.getElementById('removeBack').onclick = function () {
        document.getElementById('visiting_back').value = '';
        preview.innerHTML = '';
    };
});

function toggleGst(show) {
    const gstInput = document.getElementById('gst_input');
    const gstCertificate = document.getElementById('gstCertificateWrapper');
    if (show) {
        gstInput.classList.remove('hidden');
        gstCertificate.classList.remove('hidden');
    } else {
        gstInput.classList.add('hidden');
        gstInput.value = '';
        gstCertificate.classList.add('hidden');
        document.getElementById('gst_certificate').value = '';
        document.getElementById('gstPreview').innerHTML = '';
    }
}

document.getElementById('gst_certificate').addEventListener('change', function(e){
    const preview = document.getElementById('gstPreview');
    preview.innerHTML = '';
    const file = e.target.files[0];
    if (!file) return;
    if (file.type.startsWith('image/')) {
        preview.innerHTML = `<div class="relative inline-block"><img src="${URL.createObjectURL(file)}" class="w-40 h-24 object-cover rounded-xl border border-slate-200"><button type="button" id="removeGst" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs"><i class="ri-delete-bin-6-line text-sm"></i></button></div>`;
    } else {
        preview.innerHTML = `<div class="relative inline-block p-3 border rounded-xl bg-white">📄 ${file.name}<button type="button" id="removeGst" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs"><i class="ri-delete-bin-6-line text-sm"></i></button></div>`;
    }
    document.getElementById('removeGst').onclick = function () {
        document.getElementById('gst_certificate').value = '';
        preview.innerHTML = '';
    };
});

function togglePassword() {
    const p = document.getElementById('password');
    const i = document.getElementById('passwordIcon');
    p.type = (p.type === 'password') ? 'text' : 'password';
    i.className = (p.type === 'text') ? 'ri-eye-off-line' : 'ri-eye-line';
}
</script>

<!-- TomSelect (same as original) -->
<script>
new TomSelect("#business_type", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Business Type",

    onItemAdd: function() {
        this.blur(); // cursor remove
    }
});
</script>

<!-- Wizard logic + validation (same validation as original, split by step) -->
<script>
let currentStep = 1;
const totalSteps = 5;

const stepTitles = ['Basic Info', 'Business Info', 'Address', 'GST & Documents', 'Review & Save'];

function showAlert(message) {
    Swal.fire({
        icon: 'warning', title: 'Validation', text: message, width: '350px', padding: '1rem',
        confirmButtonText: 'OK', buttonsStyling: false,
        customClass: {
            popup: '!rounded-xl !p-3', icon: '!scale-75', title: '!text-md !font-semibold',
            htmlContainer: '!text-md',
            confirmButton: '!bg-indigo-600 !text-white !px-6 !py-3 !rounded-lg !text-xs hover:!bg-indigo-700'
        }
    });
}

function validateStep(step) {
    if (step === 1) {
        const fullName = document.querySelector('input[name="full_name"]').value.trim();
        const mobile   = document.querySelector('input[name="mobile"]').value.trim();
        const email    = document.querySelector('input[name="email"]').value.trim();

        if (!fullName)              { showAlert('Please enter Full Name'); return false; }
        if (!mobile)                { showAlert('Please enter Mobile Number'); return false; }
        if (mobile.length !== 10)   { showAlert('Enter valid 10 digit mobile number'); return false; }
        if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showAlert('Please enter valid Email Address'); return false; }
    }

    if (step === 2) {
        const businessName = document.querySelector('input[name="business_name"]').value.trim();
        const businessType = document.getElementById('business_type').value;
        if (!businessName) { showAlert('Please enter Business Name'); return false; }
        if (!businessType) { showAlert('Please select Business Type'); return false; }
    }

    if (step === 3) {
        const houseNo = document.querySelector('input[name="house_no"]').value.trim();
        const society = document.querySelector('input[name="society"]').value.trim();
        const city    = document.querySelector('input[name="city"]').value.trim();
        const state   = document.querySelector('input[name="state"]').value.trim();
        const pincode = document.querySelector('input[name="pincode"]').value.trim();
        const country = document.querySelector('input[name="country"]').value.trim();

        if (!houseNo)              { showAlert('Please enter Shop / House No'); return false; }
        if (!society)              { showAlert('Please enter Society / Complex Name'); return false; }
        if (!city)                 { showAlert('Please enter City'); return false; }
        if (!state)                { showAlert('Please enter State'); return false; }
        if (!pincode)              { showAlert('Please enter Pincode'); return false; }
        if (pincode.length !== 6)  { showAlert('Please enter valid 6 digit Pincode'); return false; }
        if (!country)              { showAlert('Please enter Country'); return false; }
    }

    if (step === 4) {
        const hasGst   = document.querySelector('input[name="has_gst"]:checked').value;
        const gst      = document.getElementById('gst_input').value.trim();
        const gstCert  = document.getElementById('gst_certificate');
        const vFront   = document.getElementById('visiting_front').files;
        const vBack    = document.getElementById('visiting_back').files;

        if (hasGst === 'yes' && !gst)              { showAlert('Please enter GST Number'); return false; }
        if (hasGst === 'yes' && gst.length !== 15) { showAlert('GST Number must be 15 characters'); return false; }
        if (hasGst === 'yes' && gstCert.files.length === 0) { showAlert('Please upload GST Certificate'); return false; }
        
    }

    return true;
}

function populateReview() {
    const v = (sel) => { const el = document.querySelector(sel); return el ? el.value.trim() || '—' : '—'; };
    document.getElementById('rv_name').textContent    = v('input[name="full_name"]');
    document.getElementById('rv_mobile').textContent  = v('input[name="mobile"]');
    document.getElementById('rv_whatsapp').textContent= v('input[name="whatsapp"]');
    document.getElementById('rv_email').textContent   = v('input[name="email"]');
    document.getElementById('rv_business').textContent= v('input[name="business_name"]');
    document.getElementById('rv_btype').textContent   = document.getElementById('business_type').value || '—';
    document.getElementById('rv_exp').textContent     = v('input[name="experience"]');
    document.getElementById('rv_house').textContent   = v('input[name="house_no"]');
    document.getElementById('rv_society').textContent = v('input[name="society"]');
    document.getElementById('rv_landmark').textContent= v('input[name="landmark"]');
    document.getElementById('rv_city').textContent    = v('input[name="city"]');
    document.getElementById('rv_state').textContent   = v('input[name="state"]');
    document.getElementById('rv_pincode').textContent = v('input[name="pincode"]');
    document.getElementById('rv_country').textContent = v('input[name="country"]');
    const hasGst = document.querySelector('input[name="has_gst"]:checked');
    document.getElementById('rv_hasgst').textContent  = hasGst ? (hasGst.value === 'yes' ? 'Yes' : 'No') : '—';
    document.getElementById('rv_gst').textContent     = document.getElementById('gst_input').value.trim() || '—';
}

function updateUI() {
    for (let i = 1; i <= totalSteps; i++) {
        const pane = document.getElementById('pane' + i);
        const dot  = document.getElementById('dot' + i);
        const name = document.getElementById('sn' + i);

        pane.classList.toggle('active', i === currentStep);
        dot.classList.toggle('active', i === currentStep);
        dot.classList.toggle('done',   i < currentStep);
        name.classList.toggle('active', i === currentStep);
    }

    document.getElementById('stepLabel').textContent = `STEP ${currentStep} OF ${totalSteps}`;
    document.getElementById('stepTitle').textContent = stepTitles[currentStep - 1];
    document.getElementById('btnBack').style.visibility = currentStep === 1 ? 'hidden' : 'visible';
    document.getElementById('btnNext').style.display = currentStep === totalSteps ? 'none' : 'inline-flex';
    document.getElementById('btnSave').style.display = currentStep === totalSteps ? 'inline-flex' : 'none';
}

function goNext() {
    if (!validateStep(currentStep)) return;
    if (currentStep < totalSteps) {
        currentStep++;
        if (currentStep === totalSteps) populateReview();
        updateUI();
        window.scrollTo(0, 0);
    }
}

function goBack() {
    if (currentStep > 1) { currentStep--; updateUI(); window.scrollTo(0, 0); }
}

updateUI();

/* Final submit validation (same as original) */
document.getElementById('dealerForm').addEventListener('submit', function(e) {
    for (let s = 1; s <= 4; s++) {
        if (!validateStep(s)) { e.preventDefault(); return; }
    }
});
</script>

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