<?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>Ledger</title>

    <script src="https://cdn.tailwindcss.com"></script>

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

    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

    <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;}.ts-dropdown .option{padding:14px 16px!important;font-size:14px!important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff!important;color:#7c3aed!important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height:100px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea+label{top:22px;transform:none;}.fi input:focus+label,.fi input:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus+label,.fi textarea:not(:placeholder-shown)+label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.form-step{display:none;}.form-step.active{display:block;}</style>

</head>

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

    <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">
                    Ledger
                </h1>
            </div>

            <a href="puresaas_account_ledger.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">

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

                        <?php

                        $steps = [

                            ['01', 'Select Ledger', 'Select Ledger'],
                            ['02', 'Filter Options', 'Filter Options'],
                            ['03', 'View Statement', 'View Statement'],
                            ['04', 'Export / Print', 'Export / Print'],

                        ];

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

                    <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">
                                Select Ledger
                            </h1>
                        </div>

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

                            <div class="si sm:col-span-2">
                                <select id="ledger_name">
                                    <option value="" disabled selected>Ledger Name</option>
                                    <option>Cash Account</option>
                                    <option>Bank Account</option>
                                    <option>Sales Account</option>
                                </select>
                            </div>

                            <!-- Ledger Type -->
                            <div class="si">
                                <select id="ledger_type">
                                    <option value="" disabled selected>Ledger Type</option>
                                    <option>Assets</option>
                                    <option>Bank Account</option>
                                    <option>Cash</option>
                                    <option>Client</option>
                                    <option>Expense</option>
                                    <option>Liabilities</option>
                                    <option>Salary Payable</option>
                                </select>
                            </div>

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

                            <!-- Mobile Number -->
                            <div class="fi">
                                <input
                                    type="text"
                                    id="mobile_number"
                                    placeholder=" "
                                    maxlength="10"
                                    oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)">
                                <label>Mobile Number</label>
                            </div>

                            <!-- Balance Type -->
                            <div class="si">
                                <select id="balance_type">
                                    <option value="" disabled selected>Balance Type</option>
                                    <option>Both</option>
                                    <option>Credit</option>
                                    <option>Debit</option>
                                </select>
                            </div>

                            <!-- Opening Balance -->
                            <div class="fi">
                                <input type="text" id="ledger_opening_balance" placeholder=" ">
                                <label>Opening Balance</label>
                            </div>

                            <!-- GST Toggle -->
                            <div class="flex items-center justify-between border border-gray-300 rounded-2xl px-5 h-14 bg-white">

                                <span class="text-sm font-medium text-gray-700">
                                    Do You Have GST?
                                </span>

                                <label class="relative inline-block w-[50px] h-[28px] cursor-pointer">

                                    <!-- Checkbox -->
                                    <input
                                        type="checkbox"
                                        id="gst_toggle"
                                        class="sr-only peer"
                                        onchange="toggleGSTField()">

                                    <!-- Switch Background -->
                                    <div class="w-full h-full rounded-full bg-gray-300 peer-checked:bg-violet-500 transition-all duration-300"></div>

                                    <!-- Circle -->
                                    <div class="absolute top-[3px] left-[3px] w-[22px] h-[22px] bg-white rounded-full shadow-md transition-all duration-300 peer-checked:left-[25px]"></div>

                                </label>

                            </div>

                            <!-- GST Number -->
                            <div class="fi hidden" id="gstField">
                                <input type="text" id="gst_number" placeholder=" ">
                                <label>GST Number</label>
                            </div>

                            <!-- PAN Card Number -->
                            <div class="fi sm:col-span-2">
                                <input type="text" id="pan_card_number" placeholder=" ">
                                <label>PAN Card Number</label>
                            </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-3xl font-bold text-gray-900">
                                Filter Options
                            </h1>
                        </div>

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

                            <div class="fi">
                                <input type="date" id="from_date" placeholder=" ">
                                <label>From Date</label>
                            </div>

                            <div class="fi">
                                <input type="date" id="to_date" placeholder=" ">
                                <label>To Date</label>
                            </div>

                            <div class="si sm:col-span-2">
                                <select id="voucher_type">
                                    <option value="" disabled selected>Voucher Type</option>
                                    <option>Journal</option>
                                    <option>Payment</option>
                                    <option>Receipt</option>
                                </select>
                            </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-3xl font-bold text-gray-900">
                                View Statement
                            </h1>
                        </div>

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

                            <div class="fi">
                                <input type="text" id="opening_balance" placeholder=" ">
                                <label>Opening Balance</label>
                            </div>

                            <div class="fi">
                                <input type="text" id="closing_balance" placeholder=" ">
                                <label>Closing Balance</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 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 bg-white">
                        </div>

                    </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 searchableSelects = [

            '#ledger_name',
            '#voucher_type',
            '#ledger_type',
            '#balance_type'

        ];

        searchableSelects.forEach(id => {

            if (document.querySelector(id)) {

                new TomSelect(id, {

                    create: false,
                    allowEmptyOption: true,
                    placeholder: 'Search...',
                    closeAfterSelect: true,

                });

            }

        });

        function buildReview() {

            const rows = [

                ['Ledger Name', document.getElementById('ledger_name').value || '-'],
                ['Ledger Type', document.getElementById('ledger_type').value || '-'],
                ['Company Ledger Name', document.getElementById('company_ledger_name').value || '-'],
                ['Mobile Number', document.getElementById('mobile_number').value || '-'],
                ['Balance Type', document.getElementById('balance_type').value || '-'],
                ['Ledger Opening Balance', document.getElementById('ledger_opening_balance').value || '-'],
                ['GST Available', document.getElementById('gst_toggle').checked ? 'Yes' : 'No'],
                ['GST Number', document.getElementById('gst_toggle').checked ? (document.getElementById('gst_number').value || '-') : 'N/A'],
                ['PAN Card Number', document.getElementById('pan_card_number').value || '-'],
                ['From Date', document.getElementById('from_date').value || '-'],
                ['To Date', document.getElementById('to_date').value || '-'],
                ['Voucher Type', document.getElementById('voucher_type').value || '-'],
                ['Opening Balance', document.getElementById('opening_balance').value || '-'],
                ['Closing Balance', document.getElementById('closing_balance').value || '-'],

            ];

            document.getElementById('reviewContent').innerHTML = rows.map(([k, v]) => `

            <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">
                    ${k}
                </span>

                <span class="text-sm text-gray-800 break-all whitespace-pre-wrap flex-1 min-w-0">
                    ${v}
                </span>

            </div>

        `).join('');
        }

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

        function goStep(dir) {

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

    Swal.fire({

        icon: 'success',
        title: 'Ledger Saved Successfully',
        text: 'Redirecting to Account Ledger...',
        confirmButtonColor: '#8b5cf6',
        timer: 2000,
        showConfirmButton: false

    }).then(() => {

        window.location.href = 'puresaas_account_ledger.php';

    });

    return;
}

            /* Mobile Validation */

            const mobile = document.getElementById('mobile_number');

            if (cur === 0) {

                if (mobile.value !== '' && mobile.value.length !== 10) {

                    alert('Mobile Number must be 10 digits');

                    mobile.focus();

                    return;
                }
            }

            /* GST Validation */

            const gstToggle = document.getElementById('gst_toggle');

            const gstNumber = document.getElementById('gst_number');

            if (cur === 0) {

                if (gstToggle.checked && gstNumber.value.trim() === '') {

                    alert('Please Enter GST Number');

                    gstNumber.focus();

                    return;
                }
            }

            const nxt = cur + dir;

            if (nxt < 0 || nxt >= total) return;

            document.getElementById('fs' + cur)
                .classList.remove('active');

            cur = nxt;

            if (cur === 3) {
                buildReview();
            }

            document.getElementById('fs' + cur)
                .classList.add('active');

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

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

        function toggleGSTField() {

            const gstToggle = document.getElementById('gst_toggle');

            const gstField = document.getElementById('gstField');

            if (gstToggle.checked) {

                gstField.classList.remove('hidden');

            } else {

                gstField.classList.add('hidden');

                document.getElementById('gst_number').value = '';
            }
        }
    </script>

</body>

</html>

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