<?php
require_once 'includes/config.php';
require_once 'includes/functions.php';

session_start();
if (empty($_SESSION['authenticated'])) {
    header("Location: signin.php");
    exit();
}

require_once __DIR__ . '/db.php';

$result = $conn->query("SELECT * FROM organizations ORDER BY id DESC LIMIT 1");
$row = $result ? $result->fetch_assoc() : null;
$orgName = $_SESSION['org_name'] ?? ($row['organisation_name'] ?? 'demo');
?>
<!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>Approvals | Salary Revision</title>
  <link rel="stylesheet" href="dashboard.css">
  <link rel="stylesheet" href="salary_revision.css">
  <link rel="stylesheet" href="assets/font-inter.css">
  <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
</head>
<body class="dash-page sr-page">
<div class="dash-layout">
  <aside class="dash-sidebar sr-sidebar">
    <div class="sidebar-brand">
      <img src="images/zoho-payroll-logo.svg" class="logo" alt="Zoho Payroll">
    </div>
    <div class="sidebar-scroll">
      <div class="sidebar-section">
        <div class="getting-started">
          <div class="gs-top"><i class="fa-solid fa-sparkles"></i><span>Getting Started</span></div>
          <div class="progress-bar"><div class="progress-fill"></div></div>
        </div>
      </div>
      <nav class="sidebar-nav">
        <a class="nav-item" href="dashboard.php"><i class="fa-regular fa-circle-dot"></i><span>Dashboard</span></a>
        <a class="nav-item" href="employees.php"><i class="fa-regular fa-user"></i><span>Employees</span></a>
        <a class="nav-item" href="payruns.php"><i class="fa-regular fa-calendar-check"></i><span>Pay Runs</span></a>
        <div class="nav-group open">
          <button class="nav-item btn active" type="button" data-nav-toggle><i class="fa-regular fa-square-check"></i><span>Approvals</span></button>
          <div class="nav-sub">
            <a class="nav-sub-item" href="reimbursements.php">Reimbursements</a>
            <a class="nav-sub-item" href="proof_of_investments.php">Proof Of Investments</a>
            <a class="nav-sub-item active" href="salary_revision.php">Salary Revision</a>
          </div>
        </div>
        <a class="nav-item" href="form16.php"><i class="fa-regular fa-file-lines"></i><span>Form 16</span></a>
        <a class="nav-item" href="#"><i class="fa-solid fa-indian-rupee-sign"></i><span>Loans</span></a>
        <a class="nav-item" href="#"><i class="fa-regular fa-heart"></i><span>Giving</span></a>
        <a class="nav-item" href="#"><i class="fa-regular fa-folder-open"></i><span>Documents</span></a>
        <a class="nav-item" href="#"><i class="fa-regular fa-chart-bar"></i><span>Reports</span></a>
        <a class="nav-item" href="settings.php"><i class="fa-solid fa-gear"></i><span>Settings</span></a>
      </nav>
    </div>
    <div class="sidebar-footer"><a class="support-link" href="#">Contact Support</a></div>
    <div class="support-tile">
      <div class="support-title">Track TDS Liabilities and Generate Form 24Q</div>
    </div>
  </aside>

  <main class="dash-main">
    <header class="dash-topbar">
      <div class="search-box">
        <i class="fa-solid fa-magnifying-glass search-icon"></i>
        <input type="text" placeholder="Search in Employee">
      </div>
      <div class="topbar-actions">
        <span class="trial">Your trial expires in 1 day(s). <a href="dashboard.php?modal=upgrade">Upgrade</a></span>
        <a class="pill ghost org-toggle" href="#"><span class="pill-label"><?php echo htmlspecialchars($orgName); ?></span><i class="fa-solid fa-angle-down"></i></a>
        <a class="top-icon icon-btn" href="#"><i class="fa-regular fa-user-group"></i></a>
        <a class="top-icon icon-btn" href="#"><i class="fa-regular fa-bell"></i></a>
        <a class="top-icon top-link" href="settings.php"><i class="fa-solid fa-gear"></i></a>
        <span class="avatar"><?php echo strtoupper(substr($orgName, 0, 1)); ?></span>
        <a class="top-icon icon-btn" href="#"><i class="fa-solid fa-table-cells-large"></i></a>
      </div>
    </header>

    <section class="dash-content">
      <div class="sr-toolbar">
        <div class="sr-title-wrap">
          <button class="sr-title-btn" type="button">All Revisions <i class="fa-solid fa-angle-down"></i></button>
        </div>
        <div class="sr-actions">
          <button class="sr-outline-btn" type="button" data-modal-open="revisionTemplateModal"><i class="fa-regular fa-envelope"></i>Send Revision Letters</button>
          <div class="sr-menu-anchor">
            <button class="sr-icon-btn" type="button" data-toggle="srMoreMenu"><i class="fa-solid fa-ellipsis"></i></button>
            <div class="sr-dropdown right" id="srMoreMenu" aria-hidden="true">
              <button type="button" data-modal-open="salaryExportModal"><i class="fa-solid fa-arrow-up-from-bracket"></i>Export</button>
            </div>
          </div>
          <button class="sr-icon-btn" type="button"><i class="fa-solid fa-filter"></i></button>
          <button class="sr-icon-btn" type="button">?</button>
        </div>
      </div>

      <div class="sr-filter-row">
        <div class="sr-chip">
          <span>Payout Month:</span>
          <span class="sr-chip-value">Mar 2026</span>
          <i class="fa-solid fa-xmark"></i>
        </div>
        <div class="sr-chip">
          <span>Employees:</span>
          <span class="sr-chip-muted">Select an Employee</span>
          <i class="fa-solid fa-angle-down"></i>
        </div>
        <div class="sr-clear-filter"><i class="fa-solid fa-xmark"></i>Clear Filter</div>
      </div>

      <div class="sr-empty">
        <div class="sr-empty-card">
          <div class="sr-empty-figure" aria-hidden="true">
            <div class="sr-empty-box"></div>
            <div class="sr-empty-person"></div>
          </div>
          <h2>No results found</h2>
          <p>Looks like you don't have any results for the filter applied</p>
        </div>
      </div>
    </section>
  </main>
</div>

<div class="sr-modal" id="revisionTemplateModal" aria-hidden="true">
  <div class="sr-modal-backdrop" data-modal-close></div>
  <div class="sr-modal-card small">
    <div class="sr-modal-body">
      <div class="sr-alert">
        <div class="sr-alert-icon"><i class="fa-solid fa-exclamation"></i></div>
        <div>
          <p>You need to configure the Salary Revision Letter template in order to be able to send the Salary Revision Letter.</p>
          <div class="sr-inline-actions">
            <a class="sr-primary-btn" href="salary_revision_template.php">Enable Now</a>
            <button class="sr-outline-btn" type="button" data-modal-close>Maybe Later</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sr-modal" id="salaryExportModal" aria-hidden="true">
  <div class="sr-modal-backdrop" data-modal-close></div>
  <div class="sr-modal-card">
    <div class="sr-modal-head">
      <h3>Export Salary Revisions</h3>
      <button class="sr-modal-close" type="button" data-modal-close><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div class="sr-modal-body">
      <div class="sr-form-group">
        <label>Payout Month</label>
        <div class="sr-static-field">Mar 2026</div>
      </div>
      <div class="sr-form-group">
        <label>Filter By</label>
        <select class="sr-select">
          <option>All Revisions</option>
          <option>Pending Revisions</option>
          <option>Approved Revisions</option>
        </select>
      </div>
      <div class="sr-form-group">
        <label>Export as</label>
        <select class="sr-select">
          <option>XLS (Microsoft Excel 1997-2004 Compatible)</option>
          <option>XLSX (Microsoft Excel)</option>
          <option>CSV</option>
        </select>
      </div>
      <label class="sr-check-inline"><input type="checkbox"> Protect this file with a password</label>
    </div>
    <div class="sr-modal-actions">
      <button class="sr-primary-btn" type="button" data-modal-close>Export</button>
      <button class="sr-outline-btn" type="button" data-modal-close>Cancel</button>
    </div>
  </div>
</div>

<script>
  (function(){
    document.querySelectorAll('[data-nav-toggle]').forEach(function(button){
      button.addEventListener('click', function(){
        const group = button.closest('.nav-group');
        if (group) group.classList.toggle('open');
      });
    });

    document.querySelectorAll('[data-toggle]').forEach(function(button){
      button.addEventListener('click', function(event){
        const menu = document.getElementById(button.getAttribute('data-toggle'));
        if (!menu) return;
        const nextState = menu.getAttribute('aria-hidden') === 'true';
        document.querySelectorAll('.sr-dropdown').forEach(function(item){ item.setAttribute('aria-hidden', 'true'); });
        menu.setAttribute('aria-hidden', nextState ? 'false' : 'true');
        event.stopPropagation();
      });
    });

    document.addEventListener('click', function(){
      document.querySelectorAll('.sr-dropdown').forEach(function(item){ item.setAttribute('aria-hidden', 'true'); });
    });

    document.querySelectorAll('[data-modal-open]').forEach(function(button){
      button.addEventListener('click', function(){
        const id = button.getAttribute('data-modal-open');
        const modal = document.getElementById(id);
        if (modal) modal.setAttribute('aria-hidden', 'false');
      });
    });

    document.querySelectorAll('[data-modal-close]').forEach(function(button){
      button.addEventListener('click', function(){
        const modal = button.closest('.sr-modal');
        if (modal) modal.setAttribute('aria-hidden', 'true');
      });
    });
  })();
</script>
</body>
</html>

