<?php
session_start();

$plans = [
  ['name' => 'Free', 'price' => 'â‚¹0', 'subtext' => 'Free forever upto 10 employees'],
  ['name' => 'Standard', 'price' => 'â‚¹1000', 'subtext' => '/organization/month<br>Billed Annually<br><strong>Includes 25 employees</strong>'],
  ['name' => 'Professional', 'price' => 'â‚¹3000', 'subtext' => '/organization/month<br>Billed Annually<br><strong>Includes 50 employees</strong>'],
  ['name' => 'Premium', 'price' => 'â‚¹4000', 'subtext' => '/organization/month<br>Billed Annually<br><strong>Includes 50 employees</strong>'],
];

$groups = [
  [
    'title' => 'Core payroll - processing and administration',
    'rows' => [
      ['label' => 'Automatic payroll calculation', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Statutory deduction calculations', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Online salary payment through partner banks', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Online payslip, TDS worksheets', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Pay schedule', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Salary revision', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Salary revision letter', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Bonus pay run', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Off-cycle pay run', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Salary hold', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
    ],
  ],
  [
    'title' => 'Core payroll - statutory compliance',
    'rows' => [
      ['label' => 'Income Tax, PT, ESI', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'ESI', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'ESIC return', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'State-based LWF', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'PT return statements', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Form-16 generation with signer tool', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'TDS challan recording', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Statutory bonus', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
    ],
  ],
  [
    'title' => 'Core payroll - salary configuration',
    'rows' => [
      ['label' => 'Pre-defined salary components', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Salary arrears', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Flexible benefit plans', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Formula-based salary components', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Scheduled salary components', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Salary templates', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Loans/salary advance', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
    ],
  ],
  [
    'title' => 'Leave and Attendance management',
    'rows' => [
      ['label' => 'Custom leave types', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Employee check-in and check-out', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Attendance regularisation', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Overtime calculation', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Approve leave (Reporting managers)', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'View Leave and Attendance details', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Contact payroll admin from the portal', 'free' => true, 'standard' => true, 'professional' => true, 'premium' => true],
    ],
  ],
  [
    'title' => 'Customisations, approvals, workflows and automation',
    'rows' => [
      ['label' => 'Custom salary components', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Custom alerts', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Custom roles and permissions', 'free' => false, 'standard' => true, 'professional' => true, 'premium' => true],
      ['label' => 'Custom functions', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Webhooks- Incoming and Outgoing', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Custom Schedulers', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Pay run approval', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Salary revision approval', 'free' => false, 'standard' => false, 'professional' => true, 'premium' => true],
      ['label' => 'Advanced approvals', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Custom modules', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Validation rules', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
      ['label' => 'Record locking', 'free' => false, 'standard' => false, 'professional' => false, 'premium' => true],
    ],
  ],
];

function mark(bool $value): string {
  return $value
    ? '<span class="cell-icon yes"><i class="fa-solid fa-check"></i></span>'
    : '<span class="cell-icon no"><i class="fa-solid fa-xmark"></i></span>';
}

function allSame(array $row): bool {
  return $row['free'] === $row['standard'] && $row['standard'] === $row['professional'] && $row['professional'] === $row['premium'];
}
?>
<!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>Pricing Comparison | Zoho Payroll</title>
  <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">
  <link rel="stylesheet" href="pricing_comparison.css">
</head>
<body>
<header class="topbar"><div class="topbar-inner"><a class="zoho-mark" href="index.php" aria-label="Zoho Payroll home"><span class="zoho-box red"></span><span class="zoho-box green"></span><span class="zoho-box blue"></span><span class="zoho-box yellow"></span><span class="zoho-word">ZOHO</span></a><nav class="top-nav"><a href="#">People</a><a href="#">Recruit</a><a href="#">Practice</a><a href="#">Books</a><a href="#">Mail</a><a href="#">Expense</a><a href="#">All Products <span class="inline-caret">âŒ„</span></a></nav><div class="top-actions"><a class="icon-link" href="#" aria-label="Search"><i class="fa-solid fa-magnifying-glass"></i></a><a class="signin-link" href="signin.php">Sign In</a><a class="signup-link" href="signup.php">Sign up now</a></div></div></header>
<section class="product-bar"><div class="product-bar-inner"><img src="images/zoho-payroll-logo.svg" alt="Zoho Payroll" class="product-logo"><nav class="product-nav"><a href="feature.php">Features</a><a class="active" href="price.php">Pricing</a><a href="features.php#integration">Integrations</a><a href="features.php#customers">Customers</a><a href="features.php#resources">Resources <span class="inline-caret">âŒ„</span></a><a href="features.php#support">Support</a></nav></div></section>

<main class="page">
  <section class="hero">
    <div class="hero-art" aria-hidden="true"><div class="hero-person"><span class="tile tile-1"></span><span class="tile tile-2"></span><span class="tile tile-3"></span><span class="tile tile-4"></span></div></div>
    <h1>Pricing Plans</h1>
  </section>

  <section class="comparison-shell">
    <aside class="controls">
      <h2>All Plans</h2>
      <div class="billing-row"><span>Monthly</span><button class="toggle" type="button" aria-label="Billing period toggle"><span></span></button><span>Yearly <em>(Save more)</em></span></div>
      <div class="filter-row"><label><input type="checkbox" id="hideCommon" checked> Hide Common features</label><label><input type="checkbox" id="expandAll"> Expand All</label></div>
    </aside>

    <div class="plan-grid">
      <?php foreach ($plans as $plan): ?>
        <article class="plan-card">
          <div class="plan-head">
            <h3><?php echo htmlspecialchars($plan['name'], ENT_QUOTES, 'UTF-8'); ?></h3>
            <strong><?php echo htmlspecialchars($plan['price'], ENT_QUOTES, 'UTF-8'); ?></strong>
            <p><?php echo $plan['subtext']; ?></p>
          </div>
        </article>
      <?php endforeach; ?>
    </div>

    <div class="feature-table" id="comparisonTable">
      <?php foreach ($groups as $group): ?>
        <section class="feature-group" data-group>
          <button class="group-head" type="button" aria-expanded="true"><span class="group-icon"><i class="fa-solid fa-minus"></i></span><span><?php echo htmlspecialchars($group['title'], ENT_QUOTES, 'UTF-8'); ?></span></button>
          <div class="group-body">
            <?php foreach ($group['rows'] as $row): ?>
              <div class="feature-row<?php echo allSame($row) ? ' common-row' : ''; ?>">
                <div class="feature-name"><?php echo htmlspecialchars($row['label'], ENT_QUOTES, 'UTF-8'); ?></div>
                <div class="cell"><?php echo mark($row['free']); ?></div>
                <div class="cell"><?php echo mark($row['standard']); ?></div>
                <div class="cell"><?php echo mark($row['professional']); ?></div>
                <div class="cell"><?php echo mark($row['premium']); ?></div>
              </div>
            <?php endforeach; ?>
          </div>
        </section>
      <?php endforeach; ?>
    </div>
  </section>

  <footer class="site-footer" id="resources">
    <div class="footer-grid" id="support">
      <div>
        <h3>Help &amp; Resources</h3>
        <a href="price.php">Pricing</a><a href="feature.php">Features</a><a href="features.php#integration">Integrations</a><a href="features.php#customers">Customers</a><a href="features.php#overview">Employee Onboarding</a><a href="features.php#processing">Payroll Management</a><a href="features.php#employee-self-service-portal">Employee Self-service Portal</a><a href="features.php#statutory-compliance">Statutory compliance and Reporting</a>
      </div>
      <div>
        <h3>Resources</h3>
        <a href="#">Help</a><a href="#">Frequently Asked Questions</a><a href="#">Webinars</a><a href="#">Academy</a><a href="#">What's New</a>
      </div>
      <div>
        <h3>Quick Links</h3>
        <a href="#">What is Payroll?</a><a href="#">Payroll Software</a><a href="#">Payroll Software vs Spreadsheets</a><a href="#">Free Payroll Software</a><a href="#">Payroll Service Provider</a>
      </div>
      <div>
        <h3>Contact Us</h3>
        <a href="#">Monday to Friday (9:00 AM to 7:00 PM)</a><a href="#">Toll-Free 1800 572 6672</a><a href="#">support@zohopayroll.com</a><a href="#">partner-support@zohopayroll.com</a>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="edition"><span>Select Edition:</span><button type="button">India <i class="fa-solid fa-chevron-down"></i></button></div>
      <div class="socials"><span>Find us on our socials:</span><a href="#" aria-label="X"><i class="fa-brands fa-x-twitter"></i></a><a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a><a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a><a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a></div>
    </div>
  </footer>
</main>

<div class="floating-demo">Request a demo</div>
<div class="floating-chat"><i class="fa-solid fa-comment-dots"></i></div>

<script>
(() => {
  const hideCommon = document.getElementById('hideCommon');
  const expandAll = document.getElementById('expandAll');
  const groups = [...document.querySelectorAll('[data-group]')];
  const groupButtons = [...document.querySelectorAll('.group-head')];

  const refresh = () => {
    groups.forEach((group) => {
      group.querySelectorAll('.common-row').forEach((row) => {
        row.style.display = hideCommon.checked ? 'none' : 'grid';
      });
    });
  };

  hideCommon.addEventListener('change', refresh);
  expandAll.addEventListener('change', () => {
    const open = expandAll.checked;
    groupButtons.forEach((button) => {
      const body = button.nextElementSibling;
      const icon = button.querySelector('.group-icon i');
      body.style.display = open ? 'grid' : 'none';
      icon.className = open ? 'fa-solid fa-plus' : 'fa-solid fa-minus';
      button.setAttribute('aria-expanded', String(open));
    });
  });
  groupButtons.forEach((button) => {
    button.addEventListener('click', () => {
      const body = button.nextElementSibling;
      const icon = button.querySelector('.group-icon i');
      const hidden = body.style.display === 'none';
      body.style.display = hidden ? 'grid' : 'none';
      icon.className = hidden ? 'fa-solid fa-minus' : 'fa-solid fa-plus';
      button.setAttribute('aria-expanded', String(hidden));
    });
  });
  refresh();
})();
</script>
</body>
</html>

