<?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 Follow Up</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:120px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea + label{top:22px;transform:none;}.fi input:focus + label,.fi input:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus + label,.fi textarea:not(:placeholder-shown) + label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.doc-row{display:flex;align-items:stretch;gap:14px;border:1px solid #e5e7eb;border-radius:18px;padding:14px 16px;background:#fff;transition:0.25s;}.doc-row:hover{border-color:#c4b5fd;box-shadow:0 2px 12px rgba(139,92,246,0.07);}.doc-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}.doc-icon{width:42px;height:42px;border-radius:12px;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.doc-icon i{font-size:20px;color:#8b5cf6;}.doc-info{flex:1;min-width:0;}.doc-label{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:4px;}.doc-label .req{color:#ef4444;font-size:13px;}.doc-filename{font-size:12px;color:#9ca3af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.doc-filename.has-file{color:#7c3aed;font-weight:500;}.doc-upload-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:32px;padding:0 14px;border-radius:8px;border:1.5px dashed #c4b5fd;background:#faf5ff;color:#7c3aed;font-size:12px;font-weight:600;cursor:pointer;transition:0.2s;white-space:nowrap;}.doc-upload-btn:hover{background:#ede9fe;border-color:#8b5cf6;}.doc-preview{width:90px;flex-shrink:0;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;min-height:80px;}.doc-preview img{width:100%;height:100%;object-fit:cover;display:none;}.doc-preview img.visible{display:block;}.doc-preview .prev-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;}.doc-preview .prev-placeholder i{font-size:22px;color:#d1d5db;}.doc-preview .prev-placeholder span{font-size:10px;color:#d1d5db;text-align:center;}.doc-preview .prev-file{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;}.doc-preview .prev-file.visible{display:flex;}.doc-preview .prev-file i{font-size:26px;color:#8b5cf6;}.doc-preview .prev-file span{font-size:10px;color:#7c3aed;font-weight:600;word-break:break-all;}.doc-preview .prev-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:5;}.doc-preview .prev-remove.visible{display:flex;}.form-step{display:none;}.form-step.active{display:block;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}.notes-wrap{position:relative;}.notes-counter{position:absolute;bottom:10px;right:14px;font-size:11px;color:#9ca3af;pointer-events:none;z-index:3;}.attach-box{border:1.5px dashed #c4b5fd;border-radius:16px;padding:16px 18px;background:#faf5ff;display:flex;align-items:center;gap:14px;transition:0.25s;}.attach-box:hover{border-color:#8b5cf6;background:#f3e8ff;}.attach-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border-radius:10px;background:#7c3aed;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:0.2s;white-space:nowrap;border:none;}.attach-btn:hover{background:#6d28d9;}.attach-info{flex:1;min-width:0;}.attach-filename{font-size:13px;font-weight:500;color:#7c3aed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.attach-hint{font-size:11px;color:#9ca3af;margin-top:2px;}.review-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:18px;padding:18px 20px;}.review-card-title{font-size:13px;font-weight:700;color:#8b5cf6;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;}.review-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid #f3f4f6;}.review-row:last-child{border-bottom:none;}.review-key{font-size:13px;color:#6b7280;flex-shrink:0;min-width:120px;}.review-val{font-size:13px;font-weight:600;color:#1f2937;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:100px;}}</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 Follow Up
            </h1>
        </div>

        <button
            onclick="history.back()"
            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>

    </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 4 — Follow Up Info
                    </span>

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

                </div>

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

                    <?php
                    $steps = [
                        ['01','Follow Up Info','Lead & schedule details'],
                        ['02','Activity','Activity type & outcome'],
                        ['03','Next Action','Upcoming follow-up plan'],
                        ['04','Review','Confirm & submit'],
                    ];

                    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 != 3): ?>
                            <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 — FOLLOW UP INFO
                ========================= -->
                <div class="form-step active" id="fs0">

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

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

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="leadName">
                                <option value="" disabled selected>Select lead *</option>
                                <option>Lead 1</option>
                                <option>Lead 2</option>
                                <option>Lead 3</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="date" placeholder=" " id="followUpDate">
                            <label>Follow Up Date *</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="time" placeholder=" " id="followUpTime">
                            <label>Follow Up Time *</label>
                        </div>

                        <div class="si">
                            <select id="followUpType">
                                <option value="" disabled selected>Follow Up Type *</option>
                                <option>Call</option>
                                <option>Email</option>
                                <option>Meeting</option>
                                <option>Demo</option>
                                <option>Proposal</option>
                            </select>
                        </div>

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

                        <div class="fi">
                            <input type="text" placeholder=" " id="spokeWith">
                            <label>Spoke With</label>
                        </div>

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

                        <!-- Row 5 — Notes full width with counter -->
                        <div class="sm:col-span-2 notes-wrap">
                            <div class="fi">
                                <textarea placeholder=" " id="notes" maxlength="1000"
                                    oninput="updateCounter(this,'notesCounter')"></textarea>
                                <label>Notes</label>
                            </div>
                            <span class="notes-counter" id="notesCounter">0/1000</span>
                        </div>

                        <!-- Row 6 — Attach File full width -->
                        <div class="sm:col-span-2">
                            <p class="text-sm font-semibold text-gray-700 mb-2">Attach File</p>
                            <div class="attach-box">
                                <label for="attachFile" class="attach-btn">
                                    <i class="ri-upload-2-line"></i> Choose file
                                </label>
                                <input type="file" id="attachFile" class="hidden"
                                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                    onchange="handleAttach(this)">
                                <div class="attach-info">
                                    <div id="attachFileName" class="attach-filename">No file chosen</div>
                                    <div class="attach-hint">PDF, DOC, DOCX, JPG, PNG (Max. 5MB)</div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="activityType">
                                <option value="" disabled selected>Activity Type *</option>
                                <option>Call</option>
                                <option>Email</option>
                                <option>Meeting</option>
                                <option>Demo</option>
                                <option>Site Visit</option>
                                <option>Presentation</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="activityOutcome">
                                <option value="" disabled selected>Outcome *</option>
                                <option>Interested</option>
                                <option>Not Interested</option>
                                <option>Callback Requested</option>
                                <option>Converted</option>
                                <option>No Response</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="activityDuration">
                            <label>Duration (Minutes)</label>
                        </div>

                        <div class="si">
                            <select id="activityStatus">
                                <option value="" disabled selected>Activity Status *</option>
                                <option>Completed</option>
                                <option>Pending</option>
                                <option>Cancelled</option>
                                <option>Rescheduled</option>
                            </select>
                        </div>

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

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

                        <!-- Row 4 — Activity Description full width -->
                        <div class="sm:col-span-2 notes-wrap">
                            <div class="fi">
                                <textarea placeholder=" " id="activityDescription" maxlength="1000"
                                    oninput="updateCounter(this,'activityCounter')"></textarea>
                                <label>Activity Description</label>
                            </div>
                            <span class="notes-counter" id="activityCounter">0/1000</span>
                        </div>

                    </div>

                </div>

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

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 3 of 4</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">

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

                        <div class="fi">
                            <input type="time" placeholder=" " id="nextActionTime">
                            <label>Next Action Time</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="si">
                            <select id="nextActionType">
                                <option value="" disabled selected>Next Action Type *</option>
                                <option>Call</option>
                                <option>Email</option>
                                <option>Meeting</option>
                                <option>Demo</option>
                                <option>Send Proposal</option>
                                <option>Site Visit</option>
                            </select>
                        </div>

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

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="assignedTo">
                                <option value="" disabled selected>Assigned To</option>
                                <option>Self</option>
                                <option>Team Member 1</option>
                                <option>Team Member 2</option>
                                <option>Manager</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="reminderBefore">
                                <option value="" disabled selected>Reminder Before</option>
                                <option>15 Minutes</option>
                                <option>30 Minutes</option>
                                <option>1 Hour</option>
                                <option>1 Day</option>
                                <option>2 Days</option>
                            </select>
                        </div>

                        <!-- Row 4 — Remarks full width -->
                        <div class="sm:col-span-2 notes-wrap">
                            <div class="fi">
                                <textarea placeholder=" " id="nextActionRemarks" maxlength="500"
                                    oninput="updateCounter(this,'remarksCounter')"></textarea>
                                <label>Remarks / Instructions</label>
                            </div>
                            <span class="notes-counter" id="remarksCounter">0/500</span>
                        </div>

                        <!-- Row 5 — Checkbox -->
                        <div class="sm:col-span-2">
                            <div class="checkbox-wrap">
                                <input type="checkbox" id="sendReminder">
                                <label for="sendReminder">Send reminder notification</label>
                            </div>
                        </div>

                    </div>

                </div>

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

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

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

                        <!-- Follow Up Info Summary -->
                        <div class="review-card">
                            <div class="review-card-title">Follow Up Info</div>
                            <div class="review-row">
                                <span class="review-key">Lead Name</span>
                                <span class="review-val" id="rv-leadName">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Follow Up Date</span>
                                <span class="review-val" id="rv-followUpDate">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Follow Up Time</span>
                                <span class="review-val" id="rv-followUpTime">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Follow Up Type</span>
                                <span class="review-val" id="rv-followUpType">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Mode</span>
                                <span class="review-val" id="rv-mode">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Spoke With</span>
                                <span class="review-val" id="rv-spokeWith">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Subject</span>
                                <span class="review-val" id="rv-subject">—</span>
                            </div>
                        </div>

                        <!-- Activity Summary -->
                        <div class="review-card">
                            <div class="review-card-title">Activity</div>
                            <div class="review-row">
                                <span class="review-key">Activity Type</span>
                                <span class="review-val" id="rv-activityType">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Outcome</span>
                                <span class="review-val" id="rv-activityOutcome">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Duration</span>
                                <span class="review-val" id="rv-activityDuration">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Status</span>
                                <span class="review-val" id="rv-activityStatus">—</span>
                            </div>
                        </div>

                        <!-- Next Action Summary -->
                        <div class="review-card">
                            <div class="review-card-title">Next Action</div>
                            <div class="review-row">
                                <span class="review-key">Next Action Date</span>
                                <span class="review-val" id="rv-nextActionDate">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Action Type</span>
                                <span class="review-val" id="rv-nextActionType">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Priority</span>
                                <span class="review-val" id="rv-priority">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Assigned To</span>
                                <span class="review-val" id="rv-assignedTo">—</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">
                        Follow Up Created!
                    </h2>

                    <p class="text-sm text-gray-500 mb-4">
                        Follow up 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 = 4;

    const mobileLabels = [
        'Step 1 of 4 — Follow Up Info',
        'Step 2 of 4 — Activity',
        'Step 3 of 4 — Next Action',
        'Step 4 of 4 — Review',
    ];

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

    const searchableSelects = [
        '#leadName',
        '#followUpType',
        '#mode',
        '#activityType',
        '#activityOutcome',
        '#activityStatus',
        '#nextActionType',
        '#priority',
        '#assignedTo',
        '#reminderBefore',
    ];

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

    /* =========================
       NOTES COUNTER
    ========================== */

    function updateCounter(textarea, counterId){
        const counter = document.getElementById(counterId);
        if(counter) counter.textContent = textarea.value.length + '/' + textarea.maxLength;
    }

    /* =========================
       ATTACH FILE
    ========================== */

    function handleAttach(input){
        const file = input.files[0];
        const nameEl = document.getElementById('attachFileName');
        if(file){
            nameEl.textContent = file.name;
            nameEl.style.color = '#7c3aed';
        } else {
            nameEl.textContent = 'No file chosen';
            nameEl.style.color = '';
        }
    }

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

    function getVal(id){
        const el = document.getElementById(id);
        if(!el) return '—';
        if(el.tagName === 'SELECT'){
            return el.options[el.selectedIndex]?.text || '—';
        }
        return el.value.trim() || '—';
    }

    function populateReview(){
        const map = {
            'rv-leadName'        : 'leadName',
            'rv-followUpDate'    : 'followUpDate',
            'rv-followUpTime'    : 'followUpTime',
            'rv-followUpType'    : 'followUpType',
            'rv-mode'            : 'mode',
            'rv-spokeWith'       : 'spokeWith',
            'rv-subject'         : 'subject',
            'rv-activityType'    : 'activityType',
            'rv-activityOutcome' : 'activityOutcome',
            'rv-activityDuration': 'activityDuration',
            'rv-activityStatus'  : 'activityStatus',
            'rv-nextActionDate'  : 'nextActionDate',
            'rv-nextActionType'  : 'nextActionType',
            'rv-priority'        : 'priority',
            'rv-assignedTo'      : 'assignedTo',
        };
        Object.entries(map).forEach(([rvId, srcId]) => {
            const el = document.getElementById(rvId);
            if(el) el.textContent = getVal(srcId);
        });
    }

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

    function updateSidebar(){

        for(let i=0; i<4; 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,3)];

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

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

    function goStep(dir){

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

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

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

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

            setTimeout(() => {
                window.location.href = 'followup_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 4
        if(cur === 3) 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 === 3){
            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'; ?>