<?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>Run Payroll</title>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>
    <style> .ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px !important;height:56px !important;border:1px solid #d1d5db !important;border-radius:16px !important;padding:0 16px !important;background:#fff !important;box-shadow:none !important;display:flex !important;align-items:center !important;overflow:hidden !important;}.ts-control input{font-size:14px !important;}.ts-wrapper.focus .ts-control{border-color:#8b5cf6 !important;box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;}.ts-dropdown{margin-top:8px !important;border-radius:16px !important;border:1px solid #e5e7eb !important;overflow:hidden !important;background:#fff !important;box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;z-index:9999 !important;}.ts-dropdown-content{max-height:220px !important;overflow-y:auto !important;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height: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;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}.earnings-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;}.earnings-table thead tr th{background:#f9fafb;padding:12px 16px;font-size:13px;font-weight:600;color:#6b7280;text-align:left;}.earnings-table tbody tr td{padding:10px 16px;border-top:1px solid #f3f4f6;font-size:14px;color:#1f2937;}.earnings-table tbody tr:hover td{background:#faf5ff;}.earnings-table .td-input input{height:40px;border:1px solid #e5e7eb;border-radius:10px;padding:0 12px;font-size:14px;outline:none;width:100%;transition:0.2s;}.earnings-table .td-input input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,0.10);}.review-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:20px 24px;}.review-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f3f4f6;font-size:15px;}.review-row:last-child{border-bottom:none;}.review-label{color:#6b7280;font-weight:500;}.review-value{font-weight:700;color:#1f2937;}.review-value.green{color:#16a34a;font-size:18px;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}</style>

</head>

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

<!-- HEADER -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

    <div class="flex items-start justify-between">

        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                Run Payroll
            </h1>
        </div>

        <button
            onclick="history.back()"
            class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

            <i class="ri-arrow-left-line"></i>
            Back

        </button>

    </div>

</div>

<!-- MAIN -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

    <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

        <div class="flex flex-col lg:flex-row gap-6 lg:gap-14">

            <!-- SIDEBAR -->
            <div class="w-full lg:w-64 xl:w-72 flex-shrink-0">

                <!-- MOBILE -->
                <div class="flex lg:hidden items-center justify-between mb-6">

                    <span id="mobileLabel" class="text-sm font-semibold text-gray-800">
                        Step 1 of 5 — Select Month
                    </span>

                    <div class="flex gap-1.5">

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

                    </div>

                </div>

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

                    <?php
                    $steps = [
                        ['01','Select Month','Choose payroll period'],
                        ['02','Earnings','Salary components'],
                        ['03','Deductions','PF, Tax & more'],
                        ['04','Review','Verify payroll summary'],
                        ['05','Generate','Generate payslips'],
                    ];

                    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 != 4): ?>
                            <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 — SELECT MONTH
                ========================= -->
                <div class="form-step active" id="fs0">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 1 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Select Payroll Month
                        </h1>
                    </div>

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

                        <!-- Payroll Month -->
                        <div class="si sm:col-span-2">
                            <select id="payrollMonth">
                                <option value="" disabled selected>Select Payroll Month</option>
                                <option>January 2026</option>
                                <option>February 2026</option>
                                <option>March 2026</option>
                                <option>April 2026</option>
                                <option>May 2026</option>
                                <option>June 2026</option>
                                <option>July 2026</option>
                                <option>August 2026</option>
                                <option>September 2026</option>
                                <option>October 2026</option>
                                <option>November 2026</option>
                                <option>December 2026</option>
                            </select>
                        </div>

                        <!-- Pay Period From -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="payPeriodFrom">
                            <label>Pay Period From <span class="text-red-500">*</span></label>
                        </div>

                        <!-- Pay Period To -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="payPeriodTo">
                            <label>Pay Period To <span class="text-red-500">*</span></label>
                        </div>

                        <!-- Employee Type -->
                        <div class="si">
                            <select id="employeeType">
                                <option value="" disabled selected>Employee Type </option>
                                <option value="all">All Employees</option>
                                <option value="full_time">Full Time</option>
                                <option value="part_time">Part Time</option>
                                <option value="contract">Contract</option>
                                <option value="intern">Intern</option>
                                <option value="freelancer">Freelancer</option>
                            </select>
                        </div>

                        <!-- Department -->
                        <div class="si">
                            <select id="department">
                                <option value="" disabled selected>Department</option>
                                <option value="all">All Departments</option>
                                <option value="hr">HR</option>
                                <option value="developer">Developer</option>
                                <option value="designer">Designer</option>
                                <option value="qa">QA</option>
                                <option value="finance">Finance</option>
                                <option value="marketing">Marketing</option>
                            </select>
                        </div>

                    </div>

                </div>

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

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

                    <table class="earnings-table">
                        <thead>
                            <tr>
                                <th>Particulars</th>
                                <th>Amount (₹)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Basic Salary</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="basicSalary">
                                </td>
                            </tr>
                            <tr>
                                <td>House Rent Allowance (HRA)</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="hra">
                                </td>
                            </tr>
                            <tr>
                                <td>Conveyance Allowance</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="conveyanceAllowance">
                                </td>
                            </tr>
                            <tr>
                                <td>Medical Allowance</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="medicalAllowance">
                                </td>
                            </tr>
                            <tr>
                                <td>Special Allowance</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="specialAllowance">
                                </td>
                            </tr>
                            <tr>
                                <td>Other Allowance</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="otherAllowance">
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>

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

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

                    <table class="earnings-table">
                        <thead>
                            <tr>
                                <th>Particulars</th>
                                <th>Amount (₹)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Provident Fund (PF)</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="providentFund">
                                </td>
                            </tr>
                            <tr>
                                <td>Professional Tax</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="professionalTax">
                                </td>
                            </tr>
                            <tr>
                                <td>ESI</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="esi">
                                </td>
                            </tr>
                            <tr>
                                <td>TDS</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="tds">
                                </td>
                            </tr>
                            <tr>
                                <td>Loan / Advance</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="loanAdvance">
                                </td>
                            </tr>
                            <tr>
                                <td>Other Deductions</td>
                                <td class="td-input">
                                    <input type="number" placeholder="Enter amount" id="otherDeductions">
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>

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

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

                    <div class="review-card">

                        <div class="review-row">
                            <span class="review-label">Total Employees</span>
                            <span class="review-value" id="reviewTotalEmployees">129</span>
                        </div>

                        <div class="review-row">
                            <span class="review-label">Total Earnings (₹)</span>
                            <span class="review-value" id="reviewTotalEarnings">—</span>
                        </div>

                        <div class="review-row">
                            <span class="review-label">Total Deductions (₹)</span>
                            <span class="review-value" id="reviewTotalDeductions">—</span>
                        </div>

                        <div class="review-row">
                            <span class="review-label">Net Payable (₹)</span>
                            <span class="review-value green" id="reviewNetPayable">—</span>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 5 — GENERATE
                ========================= -->
                <div class="form-step" id="fs4">

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

                    <div class="flex flex-col items-center justify-center py-8 gap-5 text-center">

                        <div class="w-20 h-20 flex items-center justify-center bg-violet-50 rounded-2xl border border-violet-100">
                            <i class="ri-file-list-3-line text-4xl text-violet-500"></i>
                        </div>

                        <div>
                            <h2 class="text-xl font-bold text-gray-900 mb-1">Payroll is ready to generate!</h2>
                            <p class="text-sm text-gray-500">Click the button below to generate payslips</p>
                        </div>

                    </div>

                </div>

                <!-- SUCCESS -->
                <div id="successMsg" class="hidden text-center py-8 sm:py-12">

                    <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-3">

                        <i class="ri-check-line text-3xl text-violet-600"></i>

                    </div>

                    <h2 class="text-xl font-bold text-gray-900 mb-2">
                        Payroll Generated!
                    </h2>

                    <p class="text-sm text-gray-500 mb-4">
                        Payslips have been generated successfully.
                    </p>

                </div>

                <!-- BUTTONS -->
                <div id="btnRow"
                    class="flex flex-col-reverse sm:flex-row gap-3 sm:gap-0 items-stretch sm:items-center justify-between mt-8 sm:mt-10 pt-6 border-t border-gray-100">

                    <button
                        id="prevBtn"
                        onclick="goStep(-1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-7 rounded-xl border border-gray-200 bg-white text-black text-sm font-semibold opacity-40 cursor-not-allowed transition-all">

                        <i class="ri-arrow-left-line"></i>
                        Previous

                    </button>

                    <button
                        id="nextBtn"
                        onclick="goStep(1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                        Next
                        <i class="ri-arrow-right-line"></i>

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    let cur = 0;

    const total = 5;

    const mobileLabels = [
        'Step 1 of 5 — Select Month',
        'Step 2 of 5 — Earnings',
        'Step 3 of 5 — Deductions',
        'Step 4 of 5 — Review',
        'Step 5 of 5 — Generate',
    ];

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

    const searchableSelects = [
        '#payrollMonth',
        '#employeeType',
        '#department',
    ];

    searchableSelects.forEach(id => {

        if(document.querySelector(id)){

            new TomSelect(id, {

                create:false,

                allowEmptyOption:true,

                placeholder:'Search...',

                closeAfterSelect:true,

                render:{
                    no_results:function(){
                        return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                    }
                }

            });

        }

    });

    /* =========================
       FORMAT CURRENCY
    ========================== */

    function formatINR(val){
        if(!val && val !== 0) return '—';
        return Number(val).toLocaleString('en-IN', {minimumFractionDigits:2, maximumFractionDigits:2});
    }

    /* =========================
       COMPUTE REVIEW TOTALS
    ========================== */

    function computeReview(){

        const earningIds = ['basicSalary','hra','conveyanceAllowance','medicalAllowance','specialAllowance','otherAllowance'];
        const deductionIds = ['providentFund','professionalTax','esi','tds','loanAdvance','otherDeductions'];

        let totalEarnings = 0;
        let totalDeductions = 0;

        earningIds.forEach(id => {
            const v = parseFloat(document.getElementById(id).value) || 0;
            totalEarnings += v;
        });

        deductionIds.forEach(id => {
            const v = parseFloat(document.getElementById(id).value) || 0;
            totalDeductions += v;
        });

        const netPayable = totalEarnings - totalDeductions;

        document.getElementById('reviewTotalEarnings').textContent = formatINR(totalEarnings);
        document.getElementById('reviewTotalDeductions').textContent = formatINR(totalDeductions);
        document.getElementById('reviewNetPayable').textContent = formatINR(netPayable);

        // Set generate label
        const monthEl = document.getElementById('payrollMonth');
        const monthLabel = monthEl.options[monthEl.selectedIndex]?.text || '—';
    }

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

    function updateSidebar(){

        for(let i=0; i<5; i++){

            const dot = document.getElementById('sd'+i);

            const title = document.getElementById('st'+i);

            if(i < cur){

                dot.className =
                    'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center transition-all duration-300';

                dot.innerHTML =
                    '<i class="ri-check-line text-white text-xs"></i>';

                title.className =
                    'text-[15px] font-bold text-gray-400';

            }

            else if(i === cur){

                dot.className =
                    'w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center transition-all duration-300';

                dot.innerHTML = '';

                title.className =
                    'text-[15px] font-bold text-gray-900';

            }

            else{

                dot.className =
                    'w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300';

                dot.innerHTML = '';

                title.className =
                    'text-[15px] font-bold text-gray-400';
            }
        }

        document.getElementById('mobileLabel').textContent =
            mobileLabels[Math.min(cur,4)];

        for(let i=0; i<5; i++){

            document.getElementById('mdot'+i).className =
                i <= cur
                ? 'w-2.5 h-2.5 rounded-full bg-violet-500'
                : 'w-2.5 h-2.5 rounded-full bg-violet-200';
        }
    }

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

    // function goStep(dir){

    //     if(cur === 4 && dir === 1){

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

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

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

    //         // Redirect after 2 seconds
    //         setTimeout(() => {
    //             window.location.href = 'payroll_list.php';
    //         }, 2000);

    //         return;
    //     }

    //     const nxt = cur + dir;

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

    //     // Compute review totals when moving to step 4 (index 3)
    //     if(nxt === 3 || nxt === 4){
    //         computeReview();
    //     }

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

    //     cur = nxt;

    //     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 === 4){

    //         nb.innerHTML =
    //             '<i class="ri-check-line"></i> Generate Payslips';

    //         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 goStep(dir){

    /* STEP 1 VALIDATION */
    if(cur === 0 && dir === 1){

        const payrollMonth =
            document.getElementById('payrollMonth').value;

        const payPeriodFrom =
            document.getElementById('payPeriodFrom').value;

        const payPeriodTo =
            document.getElementById('payPeriodTo').value;

        const employeeType =
            document.getElementById('employeeType').value;

        const department =
            document.getElementById('department').value;

        if(payrollMonth === ''){

            Swal.fire({
                icon:'warning',
                title:'Payroll Month Required',
                text:'Please select payroll month',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(payPeriodFrom === ''){

            Swal.fire({
                icon:'warning',
                title:'Pay Period From Required',
                text:'Please select pay period from date',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(payPeriodTo === ''){

            Swal.fire({
                icon:'warning',
                title:'Pay Period To Required',
                text:'Please select pay period to date',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(employeeType === ''){

            Swal.fire({
                icon:'warning',
                title:'Employee Type Required',
                text:'Please select employee type',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(department === ''){

            Swal.fire({
                icon:'warning',
                title:'Department Required',
                text:'Please select department',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

    /* STEP 2 VALIDATION */
    if(cur === 1 && dir === 1){

        const basicSalary =
            document.getElementById('basicSalary').value;

        if(basicSalary === ''){

            Swal.fire({
                icon:'warning',
                title:'Basic Salary Required',
                text:'Please enter basic salary',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

    /* STEP 3 VALIDATION */
    if(cur === 2 && dir === 1){

        const providentFund =
            document.getElementById('providentFund').value;

        if(providentFund === ''){

            Swal.fire({
                icon:'warning',
                title:'PF Amount Required',
                text:'Please enter provident fund amount',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

    /* FINAL GENERATE */
    if(cur === 4 && dir === 1){

        Swal.fire({
            icon:'success',
            title:'Payroll Generated!',
            text:'Payslips have been generated successfully',
            confirmButtonColor:'#16a34a'
        }).then(() => {

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

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

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

            setTimeout(() => {

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

            }, 2000);

        });

        return;
    }

    const nxt = cur + dir;

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

    if(nxt === 3 || nxt === 4){

        computeReview();

    }

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

    cur = nxt;

    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 === 4){

        nb.innerHTML =
            '<i class="ri-check-line"></i> Generate Payslips';

        nb.classList.remove(
            'bg-violet-500',
            'hover:bg-violet-600'
        );

        nb.classList.add(
            'bg-green-600',
            'hover:bg-green-700'
        );

    }else{

        nb.innerHTML =
            'Next <i class="ri-arrow-right-line"></i>';

        nb.classList.add(
            'bg-violet-500',
            'hover:bg-violet-600'
        );

        nb.classList.remove(
            'bg-green-600',
            'hover:bg-green-700'
        );
    }

}



</script>

</body>

</html>

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