<?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>Payment Entry - Multi Step Form</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

    <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}</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">
                Payment Entry
            </h1>

            <a href="account_payment_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 -->
                    <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 — Select Vendor / Party
                        </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 -->
                    <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">Select Vendor / Party</div>
                                <div class="text-xs text-gray-400">Choose vendor & invoice</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 Details</div>
                                <div class="text-xs text-gray-400">Payment information</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">Payment Info</div>
                                <div class="text-xs text-gray-400">Payment information</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 & Save</div>
                                <div class="text-xs text-gray-400">Confirm & save</div>
                            </div>
                        </div>

                    </div>
                </div>

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

                    <!-- STEP 1 -->
                    <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">
                                Select Vendor / Party
                            </h1>

                            <p class="text-sm text-gray-500 mt-1.5">
                                Select Vendor / Party and invoice details.
                            </p>
                        </div>

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

    <div class="si">
        <select id="vendorParty">
            <option value="" disabled selected>Vendor / Party</option>
            <option>ABC Traders</option>
            <option>XYZ Pvt Ltd</option>
            <option>John Enterprise</option>
        </select>
    </div>

    <div class="si">
        <select id="againstBill">
            <option value="" disabled selected>Against Bill / Invoice</option>
            <option>BILL-1001</option>
            <option>BILL-1002</option>
            <option>BILL-1003</option>
        </select>
    </div>

</div>
                    </div>

                    <!-- STEP 2 -->
                    <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 Details
                            </h1>

                            <p class="text-sm text-gray-500 mt-1.5">
                                Enter Payment Details.
                            </p>
                        </div>

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


    <div class="fi">
        <input type="date" placeholder=" " id="paymentDate" />
        <label>Payment Date</label>
    </div>

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

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

</div>
                    </div>

                    <!-- STEP 3 -->
                    <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">
                                Payment Info
                            </h1>

                            <p class="text-sm text-gray-500 mt-1.5">
                                Enter payment information.
                            </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>
        </select>
    </div>

    <div class="si">
        <select id="bankAccount">
            <option value="" disabled selected>Bank Account</option>
            <option>HDFC Bank</option>
            <option>ICICI Bank</option>
            <option>SBI Bank</option>
        </select>
    </div>

    <div class="fi">
        <input type="text" placeholder=" " id="chequeRefNo" />
        <label>Cheque / Ref No.</label>
    </div>

    <div class="fi">
        <input type="date" placeholder=" " id="transactionDate" />
        <label>Transaction Date</label>
    </div>

</div>
                    </div>

                    <!-- STEP 4 -->
                    <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 & Save
                            </h1>

                            <p class="text-sm text-gray-500 mt-1.5">
                                Confirm your payment 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">
                            Payment Saved!
                        </h2>

                        <p class="text-sm text-gray-500 mb-4">
                            Your payment entry has been created successfully.
                        </p>

                        <button onclick="window.location.href='account_payment_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 Payments
                        </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>
            </div>
        </div>
    </div>

    <script>
        (function() {

            var cur = 0;
            var TOTAL = 4;

            var mobileLabels = [
                'Step 1 of 4 — Select Vendor / Party',
                'Step 2 of 4 — Payment Details',
                'Step 3 of 4 — Payment Info',
                'Step 4 of 4 — Review & Save'
            ];

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

                            tsInited[sel.id] = true;

                        } catch (e) {}

                    }

                }

            }

            function buildReview() {

var data = [
    ['Vendor / Party', document.getElementById('vendorParty').value || '—'],
    ['Against Bill / Invoice', document.getElementById('againstBill').value || '—'],
    ['Payment Date', document.getElementById('paymentDate').value || '—'],
    ['Payment Amount', document.getElementById('paymentAmount').value || '—'],
    ['Remarks', document.getElementById('remarks').value || '—'],
    ['Payment Mode', document.getElementById('paymentMode').value || '—'],
    ['Bank Account', document.getElementById('bankAccount').value || '—'],
    ['Cheque / Ref No.', document.getElementById('chequeRefNo').value || '—'],
    ['Transaction Date', document.getElementById('transactionDate').value || '—']
];

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

            }

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

                }

            }

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

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

                }

            }

            initTS(document.getElementById('fs0'));
            updateSidebar();

        })();
    </script>

</body>

</html>

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