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

require_once __DIR__ . '/db.php';
require_once __DIR__ . '/includes/poi_module.php';

ensure_poi_schema($conn);
$orgContext = poi_org_context($conn);
$orgName = $orgContext['org_name'];
$orgId = $orgContext['org_id'];
poi_ensure_settings_row($conn, $orgId);
$settings = poi_get_settings($conn, $orgId);
$fiscalYears = poi_fiscal_years();
$selectedFiscalYear = $_GET['fiscal_year'] ?? $fiscalYears[0];
$employees = poi_unsubmitted_employees($conn, $orgId, $selectedFiscalYear);
$employeeCount = count($employees);
?>
<!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 | POI Unsubmitted Employees</title>
  <link rel="stylesheet" href="dashboard.css">
  <link rel="stylesheet" href="poi.css">
  <link rel="stylesheet" href="assets/font-inter.css">
  <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
</head>
<body class="dash-page poi-page">
<div class="dash-layout">
  <aside class="dash-sidebar poi-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 active" href="proof_of_investments.php">Proof Of Investments</a>
            <a class="nav-sub-item" 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="loans.php"><i class="fa-solid fa-indian-rupee-sign"></i><span>Loans</span></a>
        <a class="nav-item" href="giving.php"><i class="fa-regular fa-heart"></i><span>Giving</span></a>
        <a class="nav-item" href="documents.php"><i class="fa-regular fa-folder-open"></i><span>Documents</span></a>
        <a class="nav-item" href="reports.php"><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>
  </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="poi-list-toolbar">
        <div class="poi-list-title">
          <a class="poi-back-btn" href="proof_of_investments.php"><i class="fa-solid fa-chevron-left"></i></a>
          <h1>Employees Yet to Submit POI (<?php echo $employeeCount; ?>)</h1>
        </div>
        <div class="poi-table-actions">
          <?php if (!(int) $settings['release_enabled']): ?>
            <div class="poi-release-note">
              <i class="fa-solid fa-circle-info"></i>
              <span>POI is locked.</span>
              <a href="poi_settings.php">Release</a>
            </div>
          <?php endif; ?>
          <button class="poi-icon-btn" type="button" data-modal-open="exportPoiModal"><i class="fa-solid fa-arrow-up-from-bracket"></i></button>
          <?php if (!(int) $settings['release_enabled']): ?>
            <button class="poi-primary-btn" type="button" data-modal-open="releasePoiAlert">Send Reminder</button>
          <?php else: ?>
            <button class="poi-primary-btn" type="button">Send Reminder</button>
          <?php endif; ?>
        </div>
      </div>

      <div class="poi-table-wrap poi-list-table-wrap">
        <table class="poi-table">
          <thead>
            <tr>
              <th style="width:48px;"><input type="checkbox" aria-label="Select all"></th>
              <th>EMPLOYEE NAME</th>
              <th>EMAIL ID</th>
              <th>PORTAL STATUS</th>
              <th>POI RELEASE STATUS</th>
            </tr>
          </thead>
          <tbody>
            <?php if ($employees): ?>
              <?php foreach ($employees as $employee): ?>
                <tr>
                  <td><input type="checkbox" aria-label="Select employee"></td>
                  <td><?php echo htmlspecialchars(poi_employee_label($employee)); ?></td>
                  <td><?php echo htmlspecialchars((string) ($employee['email'] ?? $employee['email_id'] ?? '-')); ?></td>
                  <td><span class="poi-status-pill enabled">Enabled</span></td>
                  <td><span class="poi-status-pill locked"><?php echo !(int) $settings['release_enabled'] ? 'Locked' : 'Released'; ?></span></td>
                </tr>
              <?php endforeach; ?>
            <?php else: ?>
              <tr>
                <td colspan="5" class="poi-empty-row">All employees have already submitted their POI for this fiscal year.</td>
              </tr>
            <?php endif; ?>
          </tbody>
        </table>
      </div>
    </section>
  </main>
</div>

<div class="poi-modal" id="exportPoiModal" aria-hidden="true">
  <div class="poi-modal-backdrop" data-modal-close></div>
  <div class="poi-modal-card">
    <div class="poi-modal-head">
      <h3>Export POI Unsubmitted Employees List</h3>
      <button class="poi-modal-close" type="button" data-modal-close><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div class="poi-modal-body">
      <div class="poi-form-group">
        <label for="poi_export_as">Export as</label>
        <select id="poi_export_as" class="poi-modal-select">
          <option>XLS (Microsoft Excel 1997-2004 Compatible)</option>
          <option>XLSX (Microsoft Excel)</option>
          <option>CSV</option>
        </select>
      </div>
      <label class="poi-check-inline"><input type="checkbox"> Protect this file with a password</label>
    </div>
    <div class="poi-modal-actions">
      <button class="poi-primary-btn" type="button" data-modal-close>Export</button>
      <button class="poi-outline-btn" type="button" data-modal-close>Cancel</button>
    </div>
  </div>
</div>

<div class="poi-modal" id="releasePoiAlert" aria-hidden="true">
  <div class="poi-modal-backdrop" data-modal-close></div>
  <div class="poi-modal-card small">
    <div class="poi-modal-body">
      <div class="poi-alert-modal">
        <div class="poi-alert-icon"><i class="fa-solid fa-circle-info"></i></div>
        <div>
          <h3>Release Proof Of Investments</h3>
          <p>You'll have to release the POI Submission for these employees before sending the reminder.</p>
          <div class="poi-inline-actions">
            <button class="poi-primary-btn" type="button" data-modal-close>Ok, got it!</button>
            <a class="poi-text-link" href="poi_settings.php">Release POI</a>
          </div>
        </div>
      </div>
    </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');
      });
    });

    function setModalState(id, open) {
      const modal = document.getElementById(id);
      if (!modal) return;
      modal.setAttribute('aria-hidden', open ? 'false' : 'true');
    }

    document.querySelectorAll('[data-modal-open]').forEach(function(button){
      button.addEventListener('click', function(){
        const id = button.getAttribute('data-modal-open');
        if (!id) return;
        setModalState(id, true);
      });
    });

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

