<?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" />
    <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:100px;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}.item-table input{height:40px;box-sizing:border-box}</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">Add Purchase Return</h1>
        <a href="lockora_account_purchase_bill.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 6 — Select Vendor</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 id="mdot4" class="w-2.5 h-2.5 rounded-full bg-violet-200 transition-all"></div>
                <div id="mdot5" 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">Select Vendor</div>
                    <div class="text-xs text-gray-400">Choose your vendor</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">Bill Details</div>
                    <div class="text-xs text-gray-400">Dates &amp; bill info</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">Add Items / Services</div>
                    <div class="text-xs text-gray-400">Line items &amp; pricing</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 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">04</div>
                    <div id="st3" class="text-[15px] font-bold text-gray-400">Tax Details</div>
                    <div class="text-xs text-gray-400">GST &amp; total amount</div>
                </div>
            </div>

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd4" 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">05</div>
                    <div id="st4" class="text-[15px] font-bold text-gray-400">Payment Info</div>
                    <div class="text-xs text-gray-400">Mode, bank &amp; TDS</div>
                </div>
            </div>

            <div class="flex gap-4 items-start">
                <div class="flex flex-col items-center">
                    <div id="sd5" 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">06</div>
                    <div id="st5" class="text-[15px] font-bold text-gray-400">Preview &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 — Select Vendor -->
        <!-- STEP 1 — Select Vendor & Purchase Bill -->
<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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Select Vendor & Purchase Bill</h1>
        <p class="text-sm text-gray-500 mt-1.5">Choose vendor and original purchase bill details.</p>
    </div>

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

        <div class="si">
            <select id="vendorName">
                <option value="" disabled selected>Vendor Name</option>
                <option>Rajesh Traders</option>
                <option>Sumit Enterprise</option>
                <option>Mukesh Suppliers</option>
            </select>
        </div>

        <div class="si">
            <select id="purchaseBillNo">
                <option value="" disabled selected>Original Purchase Bill No</option>
                <option>PB-1001</option>
                <option>PB-1002</option>
                <option>PB-1003</option>
            </select>
        </div>

        <div class="fi">
            <input type="date" placeholder=" " id="purchaseBillDate" />
            <label>Purchase Bill Date</label>
        </div>

        <div class="fi">
            <input type="date" placeholder=" " id="returnDate" />
            <label>Return Date</label>
        </div>

        <div class="si">
            <select id="returnType">
                <option value="" disabled selected>Return Type</option>
                <option>Full Return</option>
                <option>Partial Return</option>
            </select>
        </div>

        <div class="si">
            <select id="returnReason">
                <option value="" disabled selected>Reason for Return</option>
                <option>Damaged</option>
                <option>Wrong Item</option>
                <option>Excess Quantity</option>
                <option>Quality Issue</option>
                <option>Expired</option>
                <option>Other</option>
            </select>
        </div>

    </div>
</div>

        <!-- STEP 2 — Bill Details -->
<!-- STEP 2 — Return Item Details -->
<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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Return Item Details</h1>
        <p class="text-sm text-gray-500 mt-1.5">Select returned items and quantities.</p>
    </div>

    <div class="overflow-x-auto rounded-2xl border border-gray-200">

        <table class="item-table w-full min-w-[900px]">

            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">#</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Item Name</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Purchased Qty</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Return Qty</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Rate</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Tax %</th>
                    <th class="px-4 py-4 text-left text-xs font-semibold text-gray-500 uppercase">Return Amount</th>
                </tr>
            </thead>

            <tbody id="itemRows">

                <tr class="border-t border-gray-100">

                    <td class="px-4 py-3 text-sm text-gray-400">1</td>

                    <td class="px-4 py-3">
                        <input type="text" value="Laptop" readonly
                            class="w-full rounded-xl border border-gray-100 bg-gray-50 px-3 text-sm" />
                    </td>

                    <td class="px-4 py-3">
                        <input type="number" value="10" readonly
                            class="w-full rounded-xl border border-gray-100 bg-gray-50 px-3 text-sm" />
                    </td>

                    <td class="px-4 py-3">
                        <input type="number" min="0" max="10"
                            oninput="calcReturnRow(this)"
                            placeholder="0"
                            class="w-full rounded-xl border border-gray-200 px-3 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100 transition-all" />
                    </td>

                    <td class="px-4 py-3">
                        <input type="number" value="45000" readonly
                            class="w-full rounded-xl border border-gray-100 bg-gray-50 px-3 text-sm" />
                    </td>

                    <td class="px-4 py-3">
                        <input type="number" value="18" readonly
                            class="w-full rounded-xl border border-gray-100 bg-gray-50 px-3 text-sm" />
                    </td>

                    <td class="px-4 py-3">
                        <input type="number" readonly
                            placeholder="0.00"
                            class="w-full rounded-xl border border-gray-100 bg-gray-50 px-3 text-sm text-gray-500" />
                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>


        <!-- STEP 3 — Tax Adjustment -->
<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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Tax Adjustment</h1>
        <p class="text-sm text-gray-500 mt-1.5">Adjust GST and total return amount.</p>
    </div>

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

        <div class="fi"><input type="number" placeholder=" " id="cgstPercent" /><label>CGST %</label></div>
        <div class="fi"><input type="number" placeholder=" " id="cgstAmount" /><label>CGST Amount</label></div>

        <div class="fi"><input type="number" placeholder=" " id="sgstPercent" /><label>SGST %</label></div>
        <div class="fi"><input type="number" placeholder=" " id="sgstAmount" /><label>SGST Amount</label></div>

        <div class="fi"><input type="number" placeholder=" " id="igstPercent" /><label>IGST %</label></div>
        <div class="fi"><input type="number" placeholder=" " id="igstAmount" /><label>IGST Amount</label></div>

        <div class="fi"><input type="number" placeholder=" " id="roundOff" /><label>Round Off</label></div>
        <div class="fi"><input type="number" placeholder=" " id="totalReturnAmount" /><label>Total Return Amount</label></div>

    </div>

</div>

        <!-- STEP 4 — Tax Details -->
        <!-- STEP 4 — Refund / Adjustment Details -->
<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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Refund / Adjustment Details</h1>
        <p class="text-sm text-gray-500 mt-1.5">Manage refund or adjustment information.</p>
    </div>

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

        <div class="si">
            <select id="settlementType">
                <option value="" disabled selected>Return Settlement Type</option>
                <option>Refund</option>
                <option>Credit Note</option>
                <option>Adjustment in Next Bill</option>
            </select>
        </div>

        <div class="si">
            <select id="refundMode">
                <option value="" disabled selected>Refund Mode</option>
                <option>Cash</option>
                <option>Bank Transfer</option>
                <option>UPI</option>
                <option>Credit Note</option>
            </select>
        </div>

        <div class="si">
            <select id="bankAccount">
                <option value="" disabled selected>Bank Account</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="date" placeholder=" " id="refundDate" />
            <label>Refund Date</label>
        </div>

    </div>

</div>

        <!-- STEP 5 — Payment Info -->
        <!-- STEP 5 — Additional Details -->
<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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Additional Details</h1>
        <p class="text-sm text-gray-500 mt-1.5">Warehouse, remarks and supporting documents.</p>
    </div>

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

        <div class="si">
            <select id="warehouse">
                <option value="" disabled selected>Warehouse / Store</option>
                <option>Main Warehouse</option>
                <option>Store Room A</option>
                <option>Store Room B</option>
            </select>
        </div>

        <div class="fi">
            <input type="text" placeholder=" " id="grnNo" />
            <label>Return Against GRN</label>
        </div>

        <div class="fi">
            <input type="number" placeholder=" " id="transportDeduction" />
            <label>Transport Charges Deduction</label>
        </div>

        <div class="fi sm:col-span-2">
            <textarea placeholder=" " id="remarks"></textarea>
            <label>Remarks / Notes</label>
        </div>

<div class="relative">
    <label class="block text-xs font-medium text-violet-600 mb-2 px-1">
        Damaged Image
    </label>

    <input type="file" id="damagedImage"
        class="w-full h-14 border border-gray-300 rounded-xl px-4 text-sm text-gray-700 bg-white flex items-center cursor-pointer file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-700" />
</div>

<div class="relative">
    <label class="block text-xs font-medium text-violet-600 mb-2 px-1">
        Vendor Note
    </label>

    <input type="file" id="vendorNote"
        class="w-full h-14 border border-gray-300 rounded-xl px-4 text-sm text-gray-700 bg-white flex items-center cursor-pointer file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-700" />
</div>

<div class="relative sm:col-span-2">
    <label class="block text-xs font-medium text-violet-600 mb-2 px-1">
        Return Challan
    </label>

    <input type="file" id="returnChallan"
        class="w-full h-14 border border-gray-300 rounded-xl px-4 text-sm text-gray-700 bg-white flex items-center cursor-pointer file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-700" />
</div>

    </div>

</div>

        <!-- STEP 6 — Preview & Save -->
        <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-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Preview &amp; Save</h1>
                <p class="text-sm text-gray-500 mt-1.5">Confirm your purchase bill details 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">Purchase Return Saved!</h2>
            <p class="text-sm text-gray-500 mb-4">Your purchase bill has been created successfully.</p>
            <button onclick="window.location.href='account_purchase_return.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 Purchase Returns
            </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 = 6;

    var mobileLabels = [
        'Step 1 of 6 \u2014 Select Vendor',
        'Step 2 of 6 \u2014 Bill Details',
        'Step 3 of 6 \u2014 Add Items / Services',
        'Step 4 of 6 \u2014 Tax Details',
        'Step 5 of 6 \u2014 Payment Info',
        'Step 6 of 6 \u2014 Preview & 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,
                        render: { no_results: function(){ return '<div class="p-3 text-sm text-gray-400">No results</div>'; } }
                    });
                    tsInited[sel.id] = true;
                } catch(e) {}
            }
        }
    }


    function renumber() {
        var rows = document.querySelectorAll('#itemRows tr');
        for (var i = 0; i < rows.length; i++) {
            rows[i].querySelector('td:first-child').textContent = i + 1;
        }
    }

    window._calcRow = function(input) {
        var tr     = input.closest('tr');
        var inputs = tr.querySelectorAll('input');
        var qty    = parseFloat(inputs[1].value) || 0;
        var rate   = parseFloat(inputs[2].value) || 0;
        inputs[3].value = (qty && rate) ? (qty * rate).toFixed(2) : '';
    };




function buildReview() {

    var rows = [];

    document.querySelectorAll('#itemRows tr').forEach(function(tr, i) {

        var inp = tr.querySelectorAll('input');

        rows.push([
            'Returned Item ' + (i + 1),
            'Item: ' + (inp[0].value || '-') +
            ' | Purchased Qty: ' + (inp[1].value || '-') +
            ' | Return Qty: ' + (inp[2].value || '-') +
            ' | Rate: ' + (inp[3].value || '-') +
            ' | Tax %: ' + (inp[4].value || '-') +
            ' | Return Amount: ' + (inp[5].value || '-')
        ]);

    });

    var data = [

        ['Vendor Name', document.getElementById('vendorName').value || '-'],
        ['Purchase Bill No', document.getElementById('purchaseBillNo').value || '-'],
        ['Purchase Bill Date', document.getElementById('purchaseBillDate').value || '-'],
        ['Return Date', document.getElementById('returnDate').value || '-'],
        ['Return Type', document.getElementById('returnType').value || '-'],
        ['Reason For Return', document.getElementById('returnReason').value || '-']

    ].concat(rows).concat([

        ['CGST %', document.getElementById('cgstPercent').value || '-'],
        ['CGST Amount', document.getElementById('cgstAmount').value || '-'],
        ['SGST %', document.getElementById('sgstPercent').value || '-'],
        ['SGST Amount', document.getElementById('sgstAmount').value || '-'],
        ['IGST %', document.getElementById('igstPercent').value || '-'],
        ['IGST Amount', document.getElementById('igstAmount').value || '-'],
        ['Round Off', document.getElementById('roundOff').value || '-'],
        ['Total Return Amount', document.getElementById('totalReturnAmount').value || '-'],

        ['Settlement Type', document.getElementById('settlementType').value || '-'],
        ['Refund Mode', document.getElementById('refundMode').value || '-'],
        ['Bank Account', document.getElementById('bankAccount').value || '-'],
        ['Reference No', document.getElementById('referenceNo').value || '-'],
        ['Refund Date', document.getElementById('refundDate').value || '-'],

        ['Warehouse', document.getElementById('warehouse').value || '-'],
        ['GRN No', document.getElementById('grnNo').value || '-'],
        ['Transport Deduction', document.getElementById('transportDeduction').value || '-'],
        ['Remarks', document.getElementById('remarks').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-[170px] 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 Purchase Return';
            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();

})();


window.calcReturnRow = function(input) {

    var tr = input.closest('tr');
    var inputs = tr.querySelectorAll('input');

    var purchasedQty = parseFloat(inputs[1].value) || 0;
    var returnQty = parseFloat(inputs[2].value) || 0;
    var rate = parseFloat(inputs[3].value) || 0;
    var tax = parseFloat(inputs[4].value) || 0;

    if (returnQty > purchasedQty) {

        alert('Return quantity cannot exceed purchased quantity');

        inputs[2].value = purchasedQty;

        returnQty = purchasedQty;
    }

    var subtotal = returnQty * rate;
    var taxAmount = subtotal * tax / 100;

    inputs[5].value = (subtotal + taxAmount).toFixed(2);
};
</script>

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