<?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 Visit</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;}
        /* Tag input */
        .tag-wrap{min-height:56px;border:1px solid #d1d5db;border-radius:16px;padding:8px 12px;background:#fff;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text;transition:0.25s;}.tag-wrap:focus-within{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.tag-item{display:inline-flex;align-items:center;gap:5px;background:#ede9fe;color:#7c3aed;font-size:13px;font-weight:600;border-radius:8px;padding:4px 10px;}.tag-item button{background:none;border:none;cursor:pointer;color:#7c3aed;font-size:12px;line-height:1;padding:0;}.tag-wrap input{border:none;outline:none;font-size:14px;color:#1f2937;flex:1;min-width:80px;background:transparent;}
        /* Star rating */
        .star-rating{display:flex;gap:6px;}.star-rating i{font-size:28px;color:#d1d5db;cursor:pointer;transition:color 0.15s;}.star-rating i.active,.star-rating i.hover{color:#f59e0b;}
        /* File upload row */
        .doc-row{display:flex;align-items:stretch;gap:14px;border:1px solid #e5e7eb;border-radius:18px;padding:14px 16px;background:#fff;transition:0.25s;}.doc-row:hover{border-color:#c4b5fd;box-shadow:0 2px 12px rgba(139,92,246,0.07);}.doc-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}.doc-icon{width:42px;height:42px;border-radius:12px;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.doc-icon i{font-size:20px;color:#8b5cf6;}.doc-info{flex:1;min-width:0;}.doc-label{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:4px;}.doc-label .req{color:#ef4444;font-size:13px;}.doc-filename{font-size:12px;color:#9ca3af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.doc-filename.has-file{color:#7c3aed;font-weight:500;}.doc-upload-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:32px;padding:0 14px;border-radius:8px;border:1.5px dashed #c4b5fd;background:#faf5ff;color:#7c3aed;font-size:12px;font-weight:600;cursor:pointer;transition:0.2s;white-space:nowrap;}.doc-upload-btn:hover{background:#ede9fe;border-color:#8b5cf6;}.doc-preview{width:90px;flex-shrink:0;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;min-height:80px;}.doc-preview img{width:100%;height:100%;object-fit:cover;display:none;}.doc-preview img.visible{display:block;}.doc-preview .prev-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;}.doc-preview .prev-placeholder i{font-size:22px;color:#d1d5db;}.doc-preview .prev-placeholder span{font-size:10px;color:#d1d5db;text-align:center;}.doc-preview .prev-file{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;}.doc-preview .prev-file.visible{display:flex;}.doc-preview .prev-file i{font-size:26px;color:#8b5cf6;}.doc-preview .prev-file span{font-size:10px;color:#7c3aed;font-weight:600;word-break:break-all;}.doc-preview .prev-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:5;}.doc-preview .prev-remove.visible{display:flex;}
        .form-step{display:none;}.form-step.active{display:block;}
        /* Review section */
        .review-section{margin-bottom:20px;}.review-section h3{font-size:13px;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #ede9fe;}.review-row{display:flex;gap:8px;margin-bottom:6px;}.review-label{font-size:13px;color:#6b7280;min-width:140px;font-weight:500;}.review-value{font-size:13px;color:#1f2937;font-weight:600;}
        @media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}
    </style>
</head>

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

<!-- HEADER -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">
    <div class="flex items-start justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Add Visit</h1>
        </div>
        <a href="daily_visit_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 — Visit 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','Visit Details','Date, time & location'],
                        ['02','Contact / Company','Who you visited'],
                        ['03','Visit Purpose','Agenda & products'],
                        ['04','Outcome','Result & interest level'],
                        ['05','Next Action','Follow-up planning'],
                        ['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 — VISIT 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">Visit Details</h1>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                        <!-- Visit Date -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="visitDate">
                            <label>Visit Date *</label>
                        </div>

                        <!-- Sales Person -->
                        <div class="si">
                            <select id="salesPerson">
                                <option value="" disabled selected>Sales Person *</option>
                                <option>Rohit Sharma</option>
                                <option>Amit Kumar</option>
                                <option>Priya Singh</option>
                                <option>Neha Verma</option>
                            </select>
                        </div>

                        <!-- Visit Time -->
                        <div class="fi">
                            <input type="time" placeholder=" " id="visitTime">
                            <label>Visit Time *</label>
                        </div>

                        <!-- Visit Type -->
                        <div class="si">
                            <select id="visitType">
                                <option value="" disabled selected>Visit Type *</option>
                                <option>New Visit</option>
                                <option>Follow Up</option>
                                <option>Demo</option>
                                <option>Support</option>
                                <option>Closure</option>
                            </select>
                        </div>

                        <!-- Place / Location -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="placeLocation">
                            <label>Place / Location *</label>
                        </div>

                        <!-- Travel Mode -->
                        <div class="si">
                            <select id="travelMode">
                                <option value="" disabled selected>Travel Mode</option>
                                <option>Car</option>
                                <option>Bike</option>
                                <option>Public Transport</option>
                                <option>Walk</option>
                                <option>Flight</option>
                                <option>Train</option>
                            </select>
                        </div>

                        <!-- Distance Travelled -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="distanceTravelled" min="0">
                            <label>Distance Travelled (kms)</label>
                        </div>

                        <!-- Duration -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="duration" min="0">
                            <label>Duration (mins)</label>
                        </div>

                    </div>
                </div>

                <!-- ========================
                     STEP 2 — CONTACT / COMPANY
                ========================= -->
                <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 / Company</h1>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

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

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

                        <!-- Mobile Number -->
                        <div class="fi">
                            <input type="tel" placeholder=" " id="mobileNumber">
                            <label>Mobile Number *</label>
                        </div>

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

                        <!-- Designation -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="contactDesignation">
                            <label>Designation</label>
                        </div>

                        <!-- Company Size -->
                        <div class="si">
                            <select id="companySize">
                                <option value="" disabled selected>Company Size (Employee count)</option>
                                <option>1-10</option>
                                <option>11-50</option>
                                <option>50-100</option>
                                <option>101-500</option>
                                <option>500+</option>
                            </select>
                        </div>

                        <!-- Industry -->
                        <div class="si sm:col-span-2">
                            <select id="industry">
                                <option value="" disabled selected>Industry</option>
                                <option>IT Services</option>
                                <option>Manufacturing</option>
                                <option>Healthcare</option>
                                <option>Finance</option>
                                <option>Retail</option>
                                <option>Education</option>
                                <option>Real Estate</option>
                                <option>Logistics</option>
                            </select>
                        </div>

                        <!-- Address -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="contactAddress" maxlength="300"></textarea>
                            <label>Address</label>
                        </div>

                    </div>
                </div>

                <!-- ========================
                     STEP 3 — VISIT PURPOSE
                ========================= -->
                <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">Visit Purpose</h1>
                    </div>
                    <div class="grid grid-cols-1 gap-4">

                        <!-- Purpose of Visit -->
                        <div class="si">
                            <select id="purposeOfVisit">
                                <option value="" disabled selected>Purpose of Visit *</option>
                                <option>Introduction</option>
                                <option>Demo</option>
                                <option>Follow Up</option>
                                <option>Negotiation</option>
                                <option>Closure</option>
                                <option>Support</option>
                                <option>Relationship Building</option>
                            </select>
                        </div>

                        <!-- Purpose Details -->
                        <div class="fi">
                            <textarea placeholder=" " id="purposeDetails" maxlength="500"></textarea>
                            <label>Purpose Details</label>
                        </div>

                        <!-- Products / Services Discussed -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Products / Services Discussed</label>
                            <div class="tag-wrap" id="productsTagWrap" onclick="document.getElementById('productsTagInput').focus()">
                                <input type="text" id="productsTagInput" placeholder="Type and press Enter…" onkeydown="handleTagInput(event,'productsTagWrap','productsTags')">
                            </div>
                            <input type="hidden" id="productsTags" value="">
                        </div>

                        <!-- Competitors Discussed -->
                        <div class="fi">
                            <textarea placeholder=" " id="competitorsDiscussed" maxlength="300"></textarea>
                            <label>Competitors Discussed (if any)</label>
                        </div>

                    </div>
                </div>

                <!-- ========================
                     STEP 4 — OUTCOME
                ========================= -->
                <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">Outcome</h1>
                    </div>
                    <div class="grid grid-cols-1 gap-4">

                        <!-- Outcome -->
                        <div class="si">
                            <select id="outcome">
                                <option value="" disabled selected>Outcome *</option>
                                <option>Interested</option>
                                <option>Not Interested</option>
                                <option>Call Back Later</option>
                                <option>Demo Scheduled</option>
                                <option>Proposal Sent</option>
                                <option>Deal Closed</option>
                                <option>Lost</option>
                            </select>
                        </div>

                        <!-- Interest Level (Star Rating) -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-3">Interest Level</label>
                            <div class="star-rating" id="starRating">
                                <i class="ri-star-line" data-val="1" onclick="setStars(1)" onmouseover="hoverStars(1)" onmouseout="resetStarHover()"></i>
                                <i class="ri-star-line" data-val="2" onclick="setStars(2)" onmouseover="hoverStars(2)" onmouseout="resetStarHover()"></i>
                                <i class="ri-star-line" data-val="3" onclick="setStars(3)" onmouseover="hoverStars(3)" onmouseout="resetStarHover()"></i>
                                <i class="ri-star-line" data-val="4" onclick="setStars(4)" onmouseover="hoverStars(4)" onmouseout="resetStarHover()"></i>
                                <i class="ri-star-line" data-val="5" onclick="setStars(5)" onmouseover="hoverStars(5)" onmouseout="resetStarHover()"></i>
                            </div>
                            <input type="hidden" id="interestLevel" value="0">
                        </div>

                        <!-- Comments -->
                        <div class="fi">
                            <textarea placeholder=" " id="outcomeComments" maxlength="500"></textarea>
                            <label>Comments</label>
                        </div>

                        <!-- Attachments -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-3">Attachments (if any)</label>
                            <div class="flex flex-col gap-3">

                                <!-- Attachment 1 -->
                                <div class="doc-row">
                                    <div class="doc-left">
                                        <div class="doc-icon"><i class="ri-file-line"></i></div>
                                        <div class="doc-info">
                                            <div class="doc-label">Brochure / Proposal</div>
                                            <div id="attach1Name" class="doc-filename">No file chosen</div>
                                            <label for="attach1" class="doc-upload-btn"><i class="ri-upload-2-line"></i> Upload</label>
                                            <input type="file" id="attach1" class="hidden" accept=".pdf,.doc,.docx,image/*"
                                                onchange="handleDocUpload(this,'attach1Name','attach1Preview','attach1File','attach1Placeholder')">
                                        </div>
                                    </div>
                                    <div class="doc-preview">
                                        <div class="prev-placeholder" id="attach1Placeholder"><i class="ri-file-line"></i><span>Preview</span></div>
                                        <img id="attach1Preview" alt="preview">
                                        <div class="prev-file" id="attach1File"></div>
                                        <button class="prev-remove" id="attach1Remove"
                                            onclick="removeDoc('attach1','attach1Name','attach1Preview','attach1File','attach1Placeholder','attach1Remove')" title="Remove">&#x2715;</button>
                                    </div>
                                </div>

                                <!-- Attachment 2 -->
                                <div class="doc-row">
                                    <div class="doc-left">
                                        <div class="doc-icon"><i class="ri-file-text-line"></i></div>
                                        <div class="doc-info">
                                            <div class="doc-label">Presentation / Other</div>
                                            <div id="attach2Name" class="doc-filename">No file chosen</div>
                                            <label for="attach2" class="doc-upload-btn"><i class="ri-upload-2-line"></i> Upload</label>
                                            <input type="file" id="attach2" class="hidden" accept=".pdf,.doc,.docx,image/*,.pptx,.ppt"
                                                onchange="handleDocUpload(this,'attach2Name','attach2Preview','attach2File','attach2Placeholder')">
                                        </div>
                                    </div>
                                    <div class="doc-preview">
                                        <div class="prev-placeholder" id="attach2Placeholder"><i class="ri-file-line"></i><span>Preview</span></div>
                                        <img id="attach2Preview" alt="preview">
                                        <div class="prev-file" id="attach2File"></div>
                                        <button class="prev-remove" id="attach2Remove"
                                            onclick="removeDoc('attach2','attach2Name','attach2Preview','attach2File','attach2Placeholder','attach2Remove')" title="Remove">&#x2715;</button>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>

                <!-- ========================
                     STEP 5 — NEXT ACTION
                ========================= -->
                <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">Next Action</h1>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                        <!-- Next Action -->
                        <div class="si sm:col-span-2">
                            <select id="nextAction">
                                <option value="" disabled selected>Next Action *</option>
                                <option>Follow Up</option>
                                <option>Send Proposal</option>
                                <option>Schedule Demo</option>
                                <option>Negotiate</option>
                                <option>Close Deal</option>
                                <option>No Action Required</option>
                            </select>
                        </div>

                        <!-- Next Action Date -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="nextActionDate">
                            <label>Next Action Date *</label>
                        </div>

                        <!-- Follow Up By -->
                        <div class="si">
                            <select id="followUpBy">
                                <option value="" disabled selected>Follow Up By *</option>
                                <option>Rohit Sharma</option>
                                <option>Amit Kumar</option>
                                <option>Priya Singh</option>
                                <option>Neha Verma</option>
                            </select>
                        </div>

                        <!-- Remarks -->
                        <div class="fi sm:col-span-2">
                            <textarea placeholder=" " id="remarks" maxlength="500"></textarea>
                            <label>Remarks</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>
                    </div>

                    <div id="reviewContent" class="bg-gray-50 rounded-2xl p-5 sm:p-6">

                        <div class="review-section">
                            <h3>Visit Details</h3>
                            <div class="review-row"><span class="review-label">Date &amp; Time</span><span class="review-value" id="rv_datetime">—</span></div>
                            <div class="review-row"><span class="review-label">Visit Type</span><span class="review-value" id="rv_visitType">—</span></div>
                            <div class="review-row"><span class="review-label">Place</span><span class="review-value" id="rv_place">—</span></div>
                            <div class="review-row"><span class="review-label">Sales Person</span><span class="review-value" id="rv_salesPerson">—</span></div>
                            <div class="review-row"><span class="review-label">Travel Mode</span><span class="review-value" id="rv_travelMode">—</span></div>
                            <div class="review-row"><span class="review-label">Distance / Duration</span><span class="review-value" id="rv_distDur">—</span></div>
                        </div>

                        <div class="review-section">
                            <h3>Contact / Company</h3>
                            <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">Company</span><span class="review-value" id="rv_company">—</span></div>
                            <div class="review-row"><span class="review-label">Mobile / Email</span><span class="review-value" id="rv_contactInfo">—</span></div>
                            <div class="review-row"><span class="review-label">Designation</span><span class="review-value" id="rv_designation">—</span></div>
                            <div class="review-row"><span class="review-label">Industry</span><span class="review-value" id="rv_industry">—</span></div>
                        </div>

                        <div class="review-section">
                            <h3>Purpose</h3>
                            <div class="review-row"><span class="review-label">Purpose of Visit</span><span class="review-value" id="rv_purpose">—</span></div>
                            <div class="review-row"><span class="review-label">Products Discussed</span><span class="review-value" id="rv_products">—</span></div>
                        </div>

                        <div class="review-section">
                            <h3>Outcome</h3>
                            <div class="review-row"><span class="review-label">Outcome</span><span class="review-value" id="rv_outcome">—</span></div>
                            <div class="review-row"><span class="review-label">Interest Level</span><span class="review-value" id="rv_interest">—</span></div>
                            <div class="review-row"><span class="review-label">Comments</span><span class="review-value" id="rv_comments">—</span></div>
                        </div>

                        <div class="review-section">
                            <h3>Next Action</h3>
                            <div class="review-row"><span class="review-label">Next Action</span><span class="review-value" id="rv_nextAction">—</span></div>
                            <div class="review-row"><span class="review-label">Next Action Date</span><span class="review-value" id="rv_nextDate">—</span></div>
                            <div class="review-row"><span class="review-label">Follow Up By</span><span class="review-value" id="rv_followUpBy">—</span></div>
                            <div class="review-row"><span class="review-label">Remarks</span><span class="review-value" id="rv_remarks">—</span></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">Visit Submitted!</h2>
                    <p class="text-sm text-gray-500 mb-4">Visit has been recorded 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 = 6;
    let selectedStars = 0;
    const productTagsList = [];

    const mobileLabels = [
        'Step 1 of 6 — Visit Details',
        'Step 2 of 6 — Contact / Company',
        'Step 3 of 6 — Visit Purpose',
        'Step 4 of 6 — Outcome',
        'Step 5 of 6 — Next Action',
        'Step 6 of 6 — Review & Submit',
    ];

    /* =========================
       SEARCHABLE SELECT
    ========================== */
    const searchableSelects = [
        '#salesPerson',
        '#visitType',
        '#travelMode',
        '#companySize',
        '#industry',
        '#purposeOfVisit',
        '#outcome',
        '#nextAction',
        '#followUpBy',
    ];

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

    /* =========================
       TAG INPUT
    ========================== */
    function handleTagInput(event, wrapId, hiddenId){
        if(event.key === 'Enter' || event.key === ','){
            event.preventDefault();
            const input = event.target;
            const val = input.value.trim().replace(/,$/, '');
            if(!val) return;
            productTagsList.push(val);
            renderTags(wrapId, hiddenId, input);
            input.value = '';
        }
    }

    function renderTags(wrapId, hiddenId, inputEl){
        const wrap = document.getElementById(wrapId);
        // Remove existing tags (not the input)
        wrap.querySelectorAll('.tag-item').forEach(t => t.remove());
        productTagsList.forEach((tag, idx) => {
            const el = document.createElement('span');
            el.className = 'tag-item';
            el.innerHTML = tag + '<button onclick="removeTag(' + idx + ',\'' + wrapId + '\',\'' + hiddenId + '\')">&#x2715;</button>';
            wrap.insertBefore(el, inputEl);
        });
        document.getElementById(hiddenId).value = productTagsList.join(',');
    }

    function removeTag(idx, wrapId, hiddenId){
        productTagsList.splice(idx, 1);
        const wrap = document.getElementById(wrapId);
        const inputEl = document.getElementById('productsTagInput');
        renderTags(wrapId, hiddenId, inputEl);
    }

    /* =========================
       STAR RATING
    ========================== */
    function setStars(val){
        selectedStars = val;
        document.getElementById('interestLevel').value = val;
        updateStarDisplay(val);
    }

    function hoverStars(val){
        updateStarDisplay(val, true);
    }

    function resetStarHover(){
        updateStarDisplay(selectedStars);
    }

    function updateStarDisplay(val, isHover){
        const stars = document.querySelectorAll('#starRating i');
        stars.forEach((s, i) => {
            s.classList.remove('active','hover','ri-star-fill','ri-star-line');
            if(i < val){
                s.classList.add(isHover ? 'hover' : 'active', 'ri-star-fill');
            } else {
                s.classList.add('ri-star-line');
            }
        });
    }

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

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

    /* =========================
       REVIEW POPULATE
    ========================== */
    function populateReview(){
        const v = id => (document.getElementById(id) || {}).value || '—';
        const sel = id => {
            const el = document.getElementById(id);
            return el && el.value ? el.options[el.selectedIndex].text : '—';
        };

        // Visit Details
        const dateVal = v('visitDate');
        const timeVal = v('visitTime');
        document.getElementById('rv_datetime').textContent =
            (dateVal !== '—' ? dateVal : '') + (timeVal !== '—' ? ', ' + timeVal : '') || '—';
        document.getElementById('rv_visitType').textContent = sel('visitType');
        document.getElementById('rv_place').textContent = v('placeLocation');
        document.getElementById('rv_salesPerson').textContent = sel('salesPerson');
        document.getElementById('rv_travelMode').textContent = sel('travelMode');
        const dist = v('distanceTravelled');
        const dur  = v('duration');
        document.getElementById('rv_distDur').textContent =
            (dist !== '—' ? dist + ' kms' : '') + (dur !== '—' ? ' / ' + dur + ' mins' : '') || '—';

        // Contact / Company
        document.getElementById('rv_contactPerson').textContent = v('contactPerson');
        document.getElementById('rv_company').textContent = v('companyName');
        const mob   = v('mobileNumber');
        const email = v('contactEmail');
        document.getElementById('rv_contactInfo').textContent =
            [mob !== '—' ? mob : '', email !== '—' ? email : ''].filter(Boolean).join(' | ') || '—';
        document.getElementById('rv_designation').textContent = v('contactDesignation');
        document.getElementById('rv_industry').textContent = sel('industry');

        // Purpose
        document.getElementById('rv_purpose').textContent = sel('purposeOfVisit');
        const tags = document.getElementById('productsTags').value;
        document.getElementById('rv_products').textContent = tags || '—';

        // Outcome
        document.getElementById('rv_outcome').textContent = sel('outcome');
        document.getElementById('rv_interest').textContent = selectedStars ? '★'.repeat(selectedStars) + '☆'.repeat(5-selectedStars) : '—';
        document.getElementById('rv_comments').textContent = v('outcomeComments');

        // Next Action
        document.getElementById('rv_nextAction').textContent = sel('nextAction');
        document.getElementById('rv_nextDate').textContent = v('nextActionDate');
        document.getElementById('rv_followUpBy').textContent = sel('followUpBy');
        document.getElementById('rv_remarks').textContent = v('remarks');
    }

    /* =========================
       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';
        }
    }

/* =========================
   MOBILE NUMBER VALIDATION
========================== */

function onlyTenDigits(input){

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

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

    });

}

onlyTenDigits(document.getElementById('mobileNumber'));


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

function isValidEmail(email){

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

}

    /* =========================
       NAVIGATION
    ========================== */
    function goStep(dir){
        if(cur === 5 && dir === 1){
            // Submit
            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 = 'daily_visit_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');

        // Populate review when reaching step 6
        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 Visit';
            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'; ?>