<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
<title>Payslip - <?php echo htmlspecialchars($orgName ?? 'Your Company'); ?></title>
<link rel="stylesheet" href="payslip.css">
<link rel="stylesheet" href="assets/font-inter.css">
<link rel="stylesheet" href="assets/font-manrope.css">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
</head>
<body>
<div class="payslip-container">
    <!-- Header Branding -->
    <header class="payslip-header">
        <div class="company-logo">
            <img src="images/zoho-payroll-logo.svg" alt="Zoho Payroll" class="logo">
        </div>
        <div class="company-details">
            <h2><?php echo htmlspecialchars($orgName ?? 'Demo Organisation'); ?></h2>
            <p>Pay Slip for the month of March 2024</p>
        </div>
    </header>

    <!-- Employee Info -->
    <div class="employee-info">
        <div class="info-left">
            <p><strong>Employee Name:</strong> John Doe</p>
            <p><strong>Employee ID:</strong> EMP001</p>
            <p><strong>Department:</strong> Engineering</p>
            <p><strong>Designation:</strong> Software Engineer</p>
        </div>
        <div class="info-right">
            <p><strong>Employee Code:</strong> JD001</p>
            <p><strong>Date of Joining:</strong> 15 Jan 2023</p>
            <p><strong>Pay Period:</strong> 01 Mar 2024 - 31 Mar 2024</p>
        </div>
    </div>

    <!-- Earnings Table -->
    <div class="earnings-section">
        <h3>Earnings</h3>
        <table class="payslip-table">
            <thead>
                <tr>
                    <th>Particulars</th>
                    <th>Amount</th>
                    <th>YTD</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Basic Salary</td>
                    <td>â‚¹30,000</td>
                    <td>â‚¹90,000</td>
                </tr>
                <tr>
                    <td>HRA</td>
                    <td>â‚¹12,000</td>
                    <td>â‚¹36,000</td>
                </tr>
                <tr>
                    <td>Special Allowance</td>
                    <td>â‚¹8,000</td>
                    <td>â‚¹24,000</td>
                </tr>
                <tr class="total-row">
                    <td><strong>Gross Earnings</strong></td>
                    <td><strong>â‚¹50,000</strong></td>
                    <td><strong>â‚¹150,000</strong></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Deductions Table -->
    <div class="deductions-section">
        <h3>Deductions</h3>
        <table class="payslip-table">
            <thead>
                <tr>
                    <th>Particulars</th>
                    <th>Amount</th>
                    <th>YTD</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Provident Fund</td>
                    <td>â‚¹1,800</td>
                    <td>â‚¹5,400</td>
                </tr>
                <tr>
                    <td>Professional Tax</td>
                    <td>â‚¹200</td>
                    <td>â‚¹600</td>
                </tr>
                <tr>
                    <td>Income Tax (TDS)</td>
                    <td>â‚¹2,500</td>
                    <td>â‚¹7,500</td>
                </tr>
                <tr class="total-row">
                    <td><strong>Total Deductions</strong></td>
                    <td><strong>â‚¹4,500</strong></td>
                    <td><strong>â‚¹13,500</strong></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Net Pay Summary -->
    <div class="net-pay-section">
        <table class="summary-table">
            <tr>
                <td>Gross Earnings</td>
                <td>â‚¹50,000</td>
            </tr>
            <tr>
                <td>Total Deductions</td>
                <td>â‚¹4,500</td>
            </tr>
            <tr class="net-row">
                <td><strong>Net Pay</strong></td>
                <td><strong>â‚¹45,500</strong></td>
            </tr>
        </table>
    </div>

    <!-- Footer -->
    <footer class="payslip-footer">
        <div class="left-footer">
            <p><strong>This is a computer generated payslip and does not require signature.</strong></p>
            <p>Payroll processed on 05 Apr 2024 | Payroll ID: PAY-2024-001</p>
        </div>
        <div class="right-footer">
            <div class="signature">
                <p>Authorized Signatory</p>
                <div class="signature-line"></div>
            </div>
        </div>
    </footer>

    <!-- Print Button -->
    <div class="print-actions">
        <button onclick="window.print()" class="print-btn">
            <i class="fa-solid fa-print"></i> Print Payslip
        </button>
        <button onclick="window.close()" class="close-btn">
            Close
        </button>
    </div>
</div>

<?php if (isset($conn)) $conn->close(); ?>
</body>
</html>

