<?php
require_once __DIR__ . '/includes/settings_helpers.php';
settings_require_auth();
settings_ensure_tables($conn);
settings_get_current_org($conn);
$tab = trim((string) ($_GET['tab'] ?? 'preferences'));
if (!in_array($tab, ['preferences', 'webtabs'], true)) {
    $tab = 'preferences';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Employee Portal | Settings</title>
  <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="assets/font-inter.css">
  <link rel="stylesheet" href="orgprofile.css">
  <style>
    .portal-tabs{display:flex;gap:34px;border-bottom:1px solid var(--border);margin-bottom:26px;}
    .portal-tabs a{padding:0 0 14px;color:#2563eb;text-decoration:none;font-size:16px;}
    .portal-tabs a.active{color:#111827;border-bottom:3px solid #3b82f6;font-weight:600;}
    .toggle-line{display:grid;grid-template-columns:1fr auto 220px;gap:18px;align-items:start;padding:4px 0 24px;border-bottom:1px solid var(--border);}
    .toggle-line h2{margin:0 0 8px;font-size:20px;}
    .badge{display:inline-block;background:#16a34a;color:#fff;font-size:13px;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:6px;}
    .switch{width:52px;height:28px;background:#3b82f6;border-radius:999px;position:relative;margin-top:8px;}
    .switch::after{content:"";position:absolute;right:3px;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;}
    .quick-links{padding-top:8px;}
    .quick-links h3{margin:0 0 14px;font-size:13px;color:#6b7280;text-transform:uppercase;letter-spacing:.02em;}
    .quick-links a{display:block;color:#2563eb;text-decoration:none;margin-bottom:16px;font-size:15px;}
    .section-title{font-size:18px;font-weight:700;margin:28px 0 8px;}
    .section-copy{font-size:15px;color:#374151;line-height:1.6;max-width:900px;}
    .section-copy a{color:#2563eb;text-decoration:none;}
    textarea,input[type="text"]{width:100%;max-width:790px;border:1px solid #d7dce7;border-radius:10px;padding:14px;font-size:15px;background:#fff;}
    textarea{height:78px;resize:vertical;margin-top:12px;}
    input[type="text"]{height:50px;margin-top:12px;}
    .contact-card{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;max-width:900px;border:1px solid var(--border);border-radius:16px;padding:28px 26px;background:#fff;margin-top:16px;}
    .contact-meta{display:flex;align-items:center;gap:14px;}
    .mail-ico{width:64px;height:64px;border-radius:50%;background:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:28px;}
    .contact-name{font-size:17px;font-weight:600;}
    .contact-email{font-size:15px;color:#111827;margin-top:6px;}
    .contact-link{color:#2563eb;text-decoration:none;font-size:15px;font-weight:500;}
    .doc-rule{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin-top:18px;max-width:900px;}
    .doc-rule input{width:20px;height:20px;accent-color:#3b82f6;margin-top:2px;}
    .doc-rule label{font-size:15px;line-height:1.55;}
    .empty-card{display:flex;align-items:center;justify-content:center;min-height:420px;border:1px solid var(--border);border-radius:18px;background:#fff;text-align:center;padding:30px;}
  </style>
</head>
<body class="orgprofile-page">
  <?php settings_render_header($_SESSION['org_name'] ?? 'demo', 'dashboard.php', 'fa-desktop'); ?>
  <main class="profile-layout">
    <?php settings_render_sidebar('employee_portal'); ?>
    <section class="profile-main">
      <div class="profile-head"><h1>Employee Portal</h1></div>
      <div class="profile-card">
        <div class="portal-tabs">
          <a class="<?php echo $tab === 'preferences' ? 'active' : ''; ?>" href="employee_portal.php?tab=preferences">Preferences</a>
          <a class="<?php echo $tab === 'webtabs' ? 'active' : ''; ?>" href="employee_portal.php?tab=webtabs">Web Tabs</a>
        </div>
        <?php if ($tab === 'preferences'): ?>
          <div class="toggle-line">
            <div>
              <h2>Enable Portal Access<span class="badge">ACTIVE</span></h2>
              <div class="section-copy">The employee portal allows your employees to access their salary information and perform payroll related activities like declaring their Flexible Benefit Plan (FBP) and submitting investment proofs for approval.</div>
            </div>
            <div class="switch" aria-hidden="true"></div>
            <div class="quick-links">
              <h3><i class="fa-regular fa-bolt"></i> Quick Links</h3>
              <a href="claims_declarations.php?tab=fbp">Flexible Benefit Plan</a>
              <a href="claims_declarations.php?tab=reimbursement">Reimbursement Claims</a>
              <a href="claims_declarations.php?tab=it_declaration">Income Tax Declaration</a>
              <a href="claims_declarations.php?tab=poi">Proof Of Investments</a>
            </div>
          </div>
          <div class="section-title">Banner Message</div>
          <div class="section-copy">Send important notifications or announcements to your employees using this space. The message you enter here will be displayed at the top of the Home page in the Employee Self-service Portal. <a href="#">View Sample Preview</a></div>
          <textarea placeholder="Enter Banner Message"></textarea>
          <div class="section-title" style="font-size:16px;margin-top:18px;font-weight:500;">Select till when this message must be displayed in the portal</div>
          <input type="text" placeholder="dd/MM/yyyy">
          <div class="section-title">Portal Contact Information</div>
          <div class="section-copy">This is the email address to which your employees can send queries through the portal.</div>
          <div class="contact-card">
            <div class="contact-meta">
              <div class="mail-ico"><i class="fa-regular fa-envelope"></i></div>
              <div><div class="contact-name">balachandar k</div><div class="contact-email">balachandarkathir@gmail.com</div></div>
            </div>
            <a class="contact-link" href="#"><i class="fa-solid fa-gear"></i> Manage Contacts</a>
          </div>
          <div class="section-title">Document Management</div>
          <div class="doc-rule">
            <input type="checkbox" id="show_documents">
            <label for="show_documents"><strong>Show documents in employee portal</strong><br><span style="color:#6b7280;">Enable this option to make documents visible for employees to access in the employee portal.</span></label>
          </div>
          <div class="page-actions" style="border-top:1px solid var(--border);margin-top:28px;padding-top:18px;"><a class="save-btn" href="employee_portal.php?tab=preferences">Save</a></div>
        <?php else: ?>
          <div class="empty-card">
            <div>
              <div style="font-size:76px;color:#c7d2fe;margin-bottom:18px;"><i class="fa-regular fa-window-maximize"></i></div>
              <h2 style="margin:0 0 10px;font-size:30px;">No Web Tabs Yet</h2>
              <div class="section-copy" style="max-width:640px;">Create custom web tabs for your employees when you are ready to publish internal tools, support pages, or policy links inside the employee portal.</div>
            </div>
          </div>
        <?php endif; ?>
      </div>
    </section>
  </main>
</body>
</html>
