<?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>Expense Entry - Multi Step Form</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,.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,.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}.ts-dropdown .selected{background:#ede9fe!important;color:#6d28d9!important}@media(max-width:640px){.ts-control{min-height:52px!important;height:52px!important;border-radius:14px!important}.ts-dropdown-content{max-height:180px!important}}.fi{position:relative}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:.75rem;padding:0 1rem;outline:none;font-size:.9375rem;color:#1f2937;background:#fff;transition:border-color .25s,box-shadow .25s;box-sizing:border-box;font-family:inherit}.fi textarea{height:110px;resize:none;padding-top:1rem;padding-bottom:.5rem}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.10)}.fi label{position:absolute;left:1rem;top:50%;transform:translateY(-50%);background:#fff;padding:0 4px;color:#000;font-size:.9375rem;pointer-events:none;transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease;white-space:nowrap}.fi textarea+label{top:1.1rem;transform:none}.fi input:focus+label,.fi input:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:.6875rem;color:#8b5cf6}.fi textarea:focus+label,.fi textarea:not(:placeholder-shown)+label{top:-.55rem;transform:none;font-size:.6875rem;color:#8b5cf6}.si{position:relative}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:.75rem;padding:0 2.5rem 0 1rem;outline:none;font-size:.9375rem;color:#000;background:#fff;appearance:none;cursor:pointer;transition:border-color .25s,box-shadow .25s;box-sizing:border-box;font-family:inherit}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.10);color:#1f2937}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#000;pointer-events:none;font-size:1.1rem}.form-step{display:none}.form-step.active{display:block}
    /* Radio toggle */
    .radio-toggle{display:flex;align-items:center;gap:8px;height:56px;border:1px solid #d1d5db;border-radius:.75rem;padding:0 1rem;background:#fff;font-size:.9375rem}
    .radio-toggle span{color:#6b7280;font-size:.9375rem;margin-right:4px}
    .radio-toggle label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.9375rem;color:#374151;font-weight:500}
    .radio-toggle input[type=radio]{accent-color:#8b5cf6;width:16px;height:16px;cursor:pointer}
    /* File upload */
    .file-upload-box{border:2px dashed #d1d5db;border-radius:.75rem;padding:2rem 1rem;text-align:center;transition:border-color .25s,background .25s;cursor:pointer;background:#fafafa}
    .file-upload-box:hover{border-color:#8b5cf6;background:#faf5ff}
    .file-upload-box input[type=file]{display:none}
    </style>
</head>
<body class="bg-gray-100 min-h-screen">

<!-- PAGE 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">
        <h1 class="text-3xl font-bold text-gray-900">Expense Entry</h1>
        <a href="puresaas_account_expense_entry.php"
           class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>
    </div>
</div>

<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 dots -->
        <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 — Expense Details</span>
            <div class="flex gap-1.5">
                <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500 transition-all"></div>
                <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                <div id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                <div id="mdot3" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
            </div>
        </div>

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

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd0" class="w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                    <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                </div>
                <div class="pt-0.5">
                    <div class="text-[11px] font-semibold text-gray-400">01</div>
                    <div id="st0" class="text-[15px] font-bold text-gray-900">Expense Details</div>
                    <div class="text-xs text-gray-400">Category, amount &amp; GST</div>
                </div>
            </div>

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd1" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                    <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                </div>
                <div class="pt-0.5">
                    <div class="text-[11px] font-semibold text-gray-400">02</div>
                    <div id="st1" class="text-[15px] font-bold text-gray-400">Payment Info</div>
                    <div class="text-xs text-gray-400">Mode &amp; reference</div>
                </div>
            </div>

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd2" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                    <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                </div>
                <div class="pt-0.5">
                    <div class="text-[11px] font-semibold text-gray-400">03</div>
                    <div id="st2" class="text-[15px] font-bold text-gray-400">Attachment</div>
                    <div class="text-xs text-gray-400">Upload bill / document</div>
                </div>
            </div>

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd3" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center flex-shrink-0 transition-all duration-300"></div>
                </div>
                <div class="pt-0.5">
                    <div class="text-[11px] font-semibold text-gray-400">04</div>
                    <div id="st3" class="text-[15px] font-bold text-gray-400">Review &amp; Save</div>
                    <div class="text-xs text-gray-400">Confirm &amp; save</div>
                </div>
            </div>

        </div>
    </div>
    <!-- end sidebar -->

    <!-- RIGHT FORM -->
    <div class="flex-1 min-w-0 lg:border-l lg:border-gray-100 lg:pl-10 xl:pl-12">

        <!-- STEP 1 — Expense Details -->
        <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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Expense Details</h1>
                <p class="text-sm text-gray-500 mt-1.5">Enter expense category, amount and GST details.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                <div class="fi">
                    <input type="date" placeholder=" " id="expenseDate" />
                    <label>Expense Date</label>
                </div>

                <div class="si">
                    <select id="expenseCategory">
                        <option value="" disabled selected>Expense Category</option>
                        <option>Travel</option>
                        <option>Office Supplies</option>
                        <option>Utilities</option>
                        <option>Meals & Entertainment</option>
                        <option>Software & Subscriptions</option>
                        <option>Marketing</option>
                        <option>Other</option>
                    </select>
                </div>

                <div class="fi sm:col-span-2">
                    <input type="text" placeholder=" " id="expenseTitle" />
                    <label>Expense Title</label>
                </div>

                <div class="fi">
                    <input type="number" placeholder=" " id="amount" />
                    <label>Amount</label>
                </div>

                <!-- GST Applicable Radio -->
                <div class="radio-toggle">
                    <span>GST Applicable</span>
                    <label>
                        <input type="radio" name="gstApplicable" id="gstYes" value="Yes" onchange="toggleGST()" />
                        Yes
                    </label>
                    <label>
                        <input type="radio" name="gstApplicable" id="gstNo" value="No" onchange="toggleGST()" checked />
                        No
                    </label>
                </div>

                <!-- GST fields — hidden by default -->
                <div class="fi" id="gstPercentWrap" style="display:none;">
                    <input type="number" placeholder=" " id="gstPercent" oninput="calcGST()" />
                    <label>GST %</label>
                </div>
                <div class="fi" id="gstAmountWrap" style="display:none;">
                    <input type="number" placeholder=" " id="gstAmount" readonly />
                    <label>GST Amount</label>
                </div>

                <div class="fi sm:col-span-2">
                    <input type="number" placeholder=" " id="totalAmount" readonly />
                    <label>Total Amount</label>
                </div>

                <div class="fi sm:col-span-2">
                    <textarea placeholder=" " id="description"></textarea>
                    <label>Description</label>
                </div>

            </div>
        </div>

        <!-- STEP 2 — Payment Info -->
        <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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Payment Info</h1>
                <p class="text-sm text-gray-500 mt-1.5">Enter payment mode and reference details.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div class="si">
                    <select id="paymentMode">
                        <option value="" disabled selected>Payment Mode</option>
                        <option>Cash</option>
                        <option>Cheque</option>
                        <option>Bank Transfer</option>
                        <option>UPI</option>
                        <option>Card</option>
                        <option>Petty Cash</option>
                    </select>
                </div>
                <div class="si">
                    <select id="paidFrom">
                        <option value="" disabled selected>Paid From</option>
                        <option>Petty Cash</option>
                        <option>HDFC Bank - xxxx1234</option>
                        <option>SBI - xxxx5678</option>
                        <option>ICICI Bank - xxxx9012</option>
                    </select>
                </div>
                <div class="fi">
                    <input type="text" placeholder=" " id="referenceNo" />
                    <label>Reference No.</label>
                </div>
                <div class="fi">
                    <input type="text" placeholder=" " id="remarks" />
                    <label>Remarks</label>
                </div>
            </div>
        </div>

        <!-- STEP 3 — Attachment -->
        <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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Attachment</h1>
                <p class="text-sm text-gray-500 mt-1.5">Upload a bill or supporting document.</p>
            </div>
            <div class="grid grid-cols-1 gap-5">
                <label class="file-upload-box" for="billUpload">
                    <input type="file" id="billUpload" accept=".pdf,.jpg,.jpeg,.png,.webp" onchange="handleFile(this)" />
                    <div id="uploadIcon" class="flex flex-col items-center gap-3">
                        <div class="w-14 h-14 rounded-2xl bg-violet-50 flex items-center justify-center">
                            <i class="ri-upload-cloud-2-line text-3xl text-violet-400"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-700">Upload Bill / Document</p>
                            <p class="text-xs text-gray-400 mt-1">PDF, JPG, PNG up to 10MB</p>
                        </div>
                        <span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-violet-500 text-white text-sm font-semibold hover:bg-violet-600 transition-all">
                            <i class="ri-folder-open-line"></i> Choose File
                        </span>
                    </div>
                    <div id="uploadPreview" class="hidden flex-col items-center gap-3">
                        <div class="w-14 h-14 rounded-2xl bg-green-50 flex items-center justify-center">
                            <i class="ri-file-check-line text-3xl text-green-500"></i>
                        </div>
                        <p id="uploadedFileName" class="text-sm font-semibold text-gray-700 break-all text-center"></p>
                        <p class="text-xs text-violet-500 font-medium">Click to change file</p>
                    </div>
                </label>
            </div>
        </div>

        <!-- STEP 4 — Review & Save -->
        <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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Review &amp; Save</h1>
                <p class="text-sm text-gray-500 mt-1.5">Confirm your expense entry before saving.</p>
            </div>
            <div id="reviewContent" class="rounded-xl border border-gray-100 divide-y divide-gray-100 overflow-y-auto max-h-[55vh] sm:max-h-[500px] pr-1"></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">Expense Saved!</h2>
            <p class="text-sm text-gray-500 mb-4">Your expense entry has been created successfully.</p>
            <button onclick="window.location.href='puresaas_account_expense_entry.php'" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">
                <i class="ri-list-check"></i> View Expenses
            </button>
        </div>

        <!-- NAV 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"
                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-gray-400 text-sm font-semibold opacity-40 cursor-not-allowed transition-all">
                <i class="ri-arrow-left-line"></i> Previous
            </button>
            <button id="nextBtn"
                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>
    <!-- end right -->

</div>
</div>
</div>

<script>
(function () {

    var cur   = 0;
    var TOTAL = 4;

    var mobileLabels = [
        'Step 1 of 4 \u2014 Expense Details',
        'Step 2 of 4 \u2014 Payment Info',
        'Step 3 of 4 \u2014 Attachment',
        'Step 4 of 4 \u2014 Review & Save'
    ];

    /* ── GST toggle ── */
    window.toggleGST = function() {
        var yes  = document.getElementById('gstYes').checked;
        var show = yes ? 'grid' : 'none';
        document.getElementById('gstPercentWrap').style.display = show;
        document.getElementById('gstAmountWrap').style.display  = show;
        if (!yes) {
            document.getElementById('gstPercent').value = '';
            document.getElementById('gstAmount').value  = '';
            syncTotal();
        }
    };

    window.calcGST = function() {
        var base = parseFloat(document.getElementById('amount').value) || 0;
        var pct  = parseFloat(document.getElementById('gstPercent').value) || 0;
        var gst  = (base * pct / 100);
        document.getElementById('gstAmount').value = gst ? gst.toFixed(2) : '';
        syncTotal();
    };

    function syncTotal() {
        var base = parseFloat(document.getElementById('amount').value) || 0;
        var gst  = parseFloat(document.getElementById('gstAmount').value) || 0;
        document.getElementById('totalAmount').value = base ? (base + gst).toFixed(2) : '';
    }

    /* auto-sync total when amount changes */
    document.getElementById('amount').addEventListener('input', function() {
        if (document.getElementById('gstYes').checked) calcGST();
        else syncTotal();
    });

    /* ── File upload preview ── */
    window.handleFile = function(input) {
        var file = input.files[0];
        if (!file) return;
        document.getElementById('uploadIcon').classList.add('hidden');
        document.getElementById('uploadPreview').classList.remove('hidden');
        document.getElementById('uploadPreview').classList.add('flex');
        document.getElementById('uploadedFileName').textContent = file.name;
    };

    /* ── TomSelect lazy init ── */
    var tsInited = {};

    function initTS(stepEl) {
        var selects = stepEl.querySelectorAll('select');
        for (var i = 0; i < selects.length; i++) {
            var sel = selects[i];
            if (sel.id && !tsInited[sel.id]) {
                try {
                    new TomSelect('#' + sel.id, {
                        create: false,
                        allowEmptyOption: true,
                        closeAfterSelect: true,
                        render: { no_results: function(){ return '<div class="p-3 text-sm text-gray-400">No results</div>'; } }
                    });
                    tsInited[sel.id] = true;
                } catch(e) {}
            }
        }
    }

    /* ── Review ── */
    function buildReview() {
        var gstApplicable = document.querySelector('input[name="gstApplicable"]:checked');
        var uploadedFile  = document.getElementById('billUpload').files[0];

        var data = [
            ['Expense Date',     document.getElementById('expenseDate').value     || '\u2014'],
            ['Expense Category', document.getElementById('expenseCategory').value || '\u2014'],
            ['Expense Title',    document.getElementById('expenseTitle').value     || '\u2014'],
            ['Amount',           document.getElementById('amount').value           || '\u2014'],
            ['GST Applicable',   gstApplicable ? gstApplicable.value              : '\u2014'],
            ['GST %',            document.getElementById('gstPercent').value       || '\u2014'],
            ['GST Amount',       document.getElementById('gstAmount').value        || '\u2014'],
            ['Total Amount',     document.getElementById('totalAmount').value      || '\u2014'],
            ['Description',      document.getElementById('description').value      || '\u2014'],
            ['Payment Mode',     document.getElementById('paymentMode').value      || '\u2014'],
            ['Paid From',        document.getElementById('paidFrom').value         || '\u2014'],
            ['Reference No.',    document.getElementById('referenceNo').value      || '\u2014'],
            ['Remarks',          document.getElementById('remarks').value          || '\u2014'],
            ['Attachment',       uploadedFile ? uploadedFile.name                  : '\u2014']
        ];

        document.getElementById('reviewContent').innerHTML = data.map(function(d) {
            return '<div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 px-4 sm:px-5 py-3.5 bg-white hover:bg-gray-50 transition-colors">'
                + '<span class="text-xs text-gray-500 sm:min-w-[140px] flex-shrink-0 font-semibold">' + d[0] + '</span>'
                + '<span class="text-sm text-gray-800 break-all flex-1 min-w-0">' + d[1] + '</span>'
                + '</div>';
        }).join('');
    }

    /* ── Sidebar ── */
    function updateSidebar() {
        for (var i = 0; i < TOTAL; i++) {
            var dot   = document.getElementById('sd' + i);
            var title = document.getElementById('st' + i);
            if (!dot) continue;
            if (i < cur) {
                dot.className = 'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center flex-shrink-0 transition-all duration-300';
                dot.innerHTML = '<i class="ri-check-line text-white text-xs"></i>';
                if (title) 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 flex-shrink-0 transition-all duration-300';
                dot.innerHTML = '';
                if (title) 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 flex-shrink-0 transition-all duration-300';
                dot.innerHTML = '';
                if (title) title.className = 'text-[15px] font-bold text-gray-400';
            }
        }
        document.getElementById('mobileLabel').textContent = mobileLabels[Math.min(cur, TOTAL-1)];
        for (var j = 0; j < TOTAL; j++) {
            document.getElementById('mdot' + j).className = j <= cur
                ? 'w-2.5 h-2.5 rounded-full bg-violet-500 transition-all'
                : 'w-2.5 h-2.5 rounded-full bg-violet-200 transition-all';
        }
    }

    /* ── Navigation ── */
    var prevBtn = document.getElementById('prevBtn');
    var nextBtn = document.getElementById('nextBtn');

    nextBtn.addEventListener('click', function() { goStep(1); });
    prevBtn.addEventListener('click', function() { goStep(-1); });

    function goStep(dir) {
        if (cur === TOTAL - 1 && dir === 1) {
            nextBtn.disabled = true;
            nextBtn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> Saving...';
            nextBtn.classList.replace('bg-green-600','bg-gray-400');
            nextBtn.classList.remove('hover:bg-green-700');
            setTimeout(function() {
                document.querySelectorAll('.form-step').forEach(function(s){ s.classList.remove('active'); });
                document.getElementById('btnRow').style.display = 'none';
                document.getElementById('successMsg').classList.remove('hidden');
                cur = TOTAL;
                updateSidebar();
            }, 1500);
            return;
        }
        var nxt = cur + dir;
        if (nxt < 0 || nxt >= TOTAL) return;

        document.getElementById('fs' + cur).classList.remove('active');
        cur = nxt;
        if (cur === TOTAL - 1) buildReview();
        document.getElementById('fs' + cur).classList.add('active');
        initTS(document.getElementById('fs' + cur));
        updateSidebar();

        if (cur === 0) {
            prevBtn.classList.add('opacity-40','cursor-not-allowed');
            prevBtn.classList.remove('hover:bg-gray-50','opacity-100');
        } else {
            prevBtn.classList.remove('opacity-40','cursor-not-allowed');
            prevBtn.classList.add('hover:bg-gray-50','opacity-100');
        }

        if (cur === TOTAL - 1) {
            nextBtn.innerHTML = '<i class="ri-check-line"></i> Save Expense';
            nextBtn.classList.remove('bg-violet-500','hover:bg-violet-600','shadow-violet-200');
            nextBtn.classList.add('bg-green-600','hover:bg-green-700','shadow-green-200');
        } else {
            nextBtn.innerHTML = 'Next <i class="ri-arrow-right-line"></i>';
            nextBtn.classList.add('bg-violet-500','hover:bg-violet-600','shadow-violet-200');
            nextBtn.classList.remove('bg-green-600','hover:bg-green-700','shadow-green-200');
        }
    }

    /* ── Init ── */
    initTS(document.getElementById('fs0'));
    updateSidebar();

})();
</script>

</body>
</html>
<?php include 'footer.php'; ?>