<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HRMS — My Company HRMS HR Management System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
:root {
  --ul-navy:   #003366;
  --ul-blue:   #0055b3;
  --ul-red:    #C0392B;
  --ul-gold:   #D4AF37;
  --ul-dark:   #0a1628;
  --sb-w:      240px;
  --tb-h:      60px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f0f4f8;color:#1a2332;overflow-x:hidden;}

/* ── Hero / Landing ────────────────────────────────────── */
#landing{
  min-height:100vh;
  background: linear-gradient(135deg,#001122 0%,#003366 50%,#001a40 100%);
  position:relative;overflow:hidden;
}
#landing::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,rgba(212,175,55,.18) 0%,transparent 50%),
             radial-gradient(ellipse at 10% 80%,rgba(0,85,179,.25) 0%,transparent 50%);
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-content{position:relative;z-index:1;}

.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.3);
  color:#D4AF37;border-radius:50px;padding:.4rem 1rem;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.5rem;
}
.hero-title{
  font-size:clamp(2.2rem,6vw,4.5rem);font-weight:900;color:#fff;line-height:1.05;
  letter-spacing:-.03em;margin-bottom:1.25rem;
}
.hero-title .accent{color:#D4AF37;}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.65);line-height:1.7;max-width:560px;margin-bottom:2rem;}

.btn-demo{
  background:linear-gradient(135deg,#D4AF37,#b8860b);color:#0a1628;border:none;
  border-radius:14px;padding:.85rem 2rem;font-size:.95rem;font-weight:800;
  cursor:pointer;transition:all .2s;letter-spacing:.01em;
  box-shadow:0 8px 32px rgba(212,175,55,.4);
}
.btn-demo:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(212,175,55,.5);}
.btn-outline-demo{
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:14px;padding:.85rem 2rem;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.btn-outline-demo:hover{background:rgba(255,255,255,.15);}

.ul-logo{
  width:80px;height:80px;background:linear-gradient(135deg,#D4AF37,#b8860b);
  border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;color:#0a1628;
  box-shadow:0 12px 40px rgba(212,175,55,.5);margin-bottom:1.5rem;
}

/* Feature cards */
.feature-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:1.5rem;transition:all .3s;
}
.feature-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);}
.feature-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  margin-bottom:1rem;
}

/* Stats strip */
.stats-strip{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:1.5rem 2rem;margin-top:2.5rem;
}
.stat-item .num{font-size:2rem;font-weight:900;color:#D4AF37;}
.stat-item .lbl{font-size:.75rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em;}

/* ── App Shell ─────────────────────────────────────────── */
#appShell{display:none;}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);
  background:#0a1628;z-index:1040;display:flex;flex-direction:column;
  overflow-y:auto;transition:transform .3s;
}
.sb-brand{
  padding:1.1rem 1.25rem .85rem;
  background:linear-gradient(135deg,#001122,#003366);
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.sb-logo{
  width:38px;height:38px;background:linear-gradient(135deg,#D4AF37,#b8860b);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.95rem;color:#0a1628;flex-shrink:0;
}
.sb-name{color:#fff;font-weight:700;font-size:.82rem;line-height:1.2;}
.sb-sub{color:rgba(255,255,255,.4);font-size:.6rem;letter-spacing:.08em;}

.sb-nav{padding:.5rem .6rem 1rem;flex:1;}
.nav-label{text-transform:uppercase;font-size:.58rem;letter-spacing:.12em;color:rgba(255,255,255,.3);padding:.9rem .75rem .3rem;font-weight:700;}
.nav-link-item{
  display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;
  border-radius:9px;color:rgba(255,255,255,.6);text-decoration:none;
  font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s;margin-bottom:1px;
}
.nav-link-item:hover{color:#fff;background:rgba(255,255,255,.07);}
.nav-link-item.active{background:linear-gradient(135deg,#0055b3,#003d80);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(0,85,179,.3);}
.nav-link-item i{width:18px;font-size:.9rem;flex-shrink:0;}

.sb-user{
  padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.sb-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#0055b3,#003366);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
}

.topbar{
  position:fixed;top:0;left:var(--sb-w);right:0;height:var(--tb-h);
  background:#fff;border-bottom:1px solid #e8ecf0;z-index:1030;
  display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.topbar-title{font-weight:700;font-size:.92rem;color:var(--ul-navy);flex:1;}
.topbar-av{
  width:33px;height:33px;border-radius:50%;
  background:linear-gradient(135deg,var(--ul-navy),var(--ul-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.72rem;cursor:pointer;border:2px solid #e2e8f0;
}
.main{margin-left:var(--sb-w);margin-top:var(--tb-h);padding:1.5rem;min-height:calc(100vh - var(--tb-h));}

/* Cards */
.card{background:#fff;border-radius:16px;border:none;box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.06);}
.card-header{background:transparent;border-bottom:1px solid #f0f4f8;padding:1rem 1.25rem;font-weight:700;font-size:.88rem;color:#1a2332;}

/* Stat cards */
.sc{border-radius:16px;padding:1.1rem 1.25rem;border:none;box-shadow:0 2px 12px rgba(0,0,0,.1);position:relative;overflow:hidden;}
.sc-ico{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:.6rem;}
.sc-val{font-size:1.9rem;font-weight:900;line-height:1;color:#fff;}
.sc-lbl{font-size:.7rem;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.04em;margin-top:.2rem;color:#fff;}
.sc-navy {background:linear-gradient(135deg,#003366,#0055b3);}
.sc-green{background:linear-gradient(135deg,#065f46,#059669);}
.sc-amber{background:linear-gradient(135deg,#92400e,#f59e0b);}
.sc-rose {background:linear-gradient(135deg,#7f1d1d,#ef4444);}
.sc-cyan {background:linear-gradient(135deg,#164e63,#06b6d4);}
.sc-gold {background:linear-gradient(135deg,#78350f,#d97706);}
.sc-viol {background:linear-gradient(135deg,#4c1d95,#7c3aed);}
.sc-teal {background:linear-gradient(135deg,#134e4a,#0d9488);}

/* Table */
.tbl thead th{background:#f8fafc;border-bottom:2px solid #e8ecf0;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-weight:700;padding:.75rem 1rem;white-space:nowrap;}
.tbl tbody td{padding:.75rem 1rem;vertical-align:middle;font-size:.82rem;border-bottom:1px solid #f1f5f9;color:#334155;}
.tbl tbody tr:hover td{background:#f8fafc;}
.tbl tbody tr:last-child td{border-bottom:none;}

/* Badge */
.badge{font-weight:600;border-radius:6px;padding:.3em .65em;font-size:.73rem;}

/* Screens */
.screen{display:none;}
.screen.active{display:block;}

/* Progress */
.prog{background:#e8ecf0;border-radius:6px;height:8px;overflow:hidden;}
.prog-bar{border-radius:6px;height:100%;transition:width .6s ease;}

/* Avatar */
.av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.av-sm{width:28px;height:28px;font-size:.65rem;}
.av-md{width:38px;height:38px;font-size:.82rem;}
.av-lg{width:56px;height:56px;font-size:1.2rem;}

/* Timeline */
.tl{position:relative;}
.tl::before{content:'';position:absolute;left:15px;top:4px;bottom:0;width:2px;background:#e8ecf0;}
.tl-item{display:flex;gap:.85rem;margin-bottom:1rem;position:relative;}
.tl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;z-index:1;box-shadow:0 0 0 3px #f0f4f8;}
.tl-body{flex:1;background:#f8fafc;border-radius:10px;padding:.75rem;font-size:.82rem;}

/* Mobile sidebar */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1039;}
@media(max-width:991px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw rgba(0,0,0,.4);}
  .topbar{left:0;}
  .main{margin-left:0;padding:1rem;}
  .sb-overlay.show{display:block;}
}

/* Notification dot */
.notif-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;position:absolute;top:-2px;right:-2px;}

/* Form */
.form-control,.form-select{border-radius:9px;border-color:#dde3ea;font-size:.83rem;padding:.5rem .85rem;}
.form-control:focus,.form-select:focus{border-color:var(--ul-navy);box-shadow:0 0 0 3px rgba(0,51,102,.1);}
.form-label{font-weight:600;font-size:.78rem;color:#374151;margin-bottom:.3rem;}
.btn{font-weight:600;font-size:.82rem;border-radius:9px;padding:.45rem 1rem;}
.btn-primary{background:var(--ul-navy);border-color:var(--ul-navy);}
.btn-primary:hover{background:#002244;border-color:#002244;}

/* Leave type radio */
.lt-card{border:2px solid #e8ecf0;border-radius:12px;padding:.85rem;cursor:pointer;transition:all .15s;}
.lt-card:hover,.lt-card.sel{border-color:var(--ul-navy);background:#eff6ff;}

/* Score slider */
.score-range{accent-color:var(--ul-navy);}

/* Announcement */
.ann-card{border-radius:14px;border:1px solid #e8ecf0;padding:1rem;height:100%;}
.ann-urgent{border-left:4px solid #ef4444;}
.ann-high  {border-left:4px solid #f59e0b;}
.ann-normal{border-left:4px solid #0055b3;}

/* Payslip */
.payslip{max-width:640px;margin:0 auto;}
.payslip-header{background:linear-gradient(135deg,#001122,#003366);color:#fff;border-radius:16px 16px 0 0;padding:2rem;}
.payslip-body{border:1px solid #e8ecf0;border-top:none;border-radius:0 0 16px 16px;padding:1.5rem;}

/* Discipline severity */
.sev-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.3em .7em;border-radius:6px;}
</style>
</head>
<body>

<!-- ══════════════════════════════════════════════════════════
     LANDING PAGE
══════════════════════════════════════════════════════════ -->
<div id="landing">
  <div class="grid-overlay"></div>
  <div class="container-lg py-5">
    <div class="hero-content">
      <!-- Nav -->
      <div class="d-flex justify-content-between align-items-center mb-5">
        <div class="d-flex align-items-center gap-3">
          <div class="ul-logo" style="width:44px;height:44px;border-radius:12px;font-size:1rem;margin:0;">HR</div>
          <div>
            <div style="color:#fff;font-weight:700;font-size:.9rem;">My Company HRMS</div>
            <div style="color:rgba(255,255,255,.45);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;"></div>
          </div>
        </div>
        <button class="btn-demo py-2 px-4" style="font-size:.82rem;" onclick="launchApp()">
          Launch Demo <i class="bi bi-arrow-right ms-1"></i>
        </button>
      </div>

      <div class="row align-items-center g-5">
        <div class="col-12 col-lg-6">
          <div class="hero-badge"><i class="bi bi-shield-check"></i> Enterprise HR Platform</div>
          <h1 class="hero-title">Human Resource<br>Management <span class="accent">System</span></h1>
          <p class="hero-sub">A comprehensive, mobile-first HR platform purpose-built for the My Company HRMS — managing every stage of the employee lifecycle with precision and clarity.</p>
          <div class="d-flex flex-wrap gap-3">
            <button class="btn-demo" onclick="launchApp()"><i class="bi bi-play-circle me-2"></i>Launch Live Demo</button>
            <button class="btn-outline-demo" onclick="scrollFeatures()"><i class="bi bi-grid me-2"></i>See Features</button>
          </div>

          <div class="stats-strip">
            <div class="row g-3 text-center">
              <div class="col-4 stat-item"><div class="num">12+</div><div class="lbl">Modules</div></div>
              <div class="col-4 stat-item"><div class="num">5</div><div class="lbl">User Roles</div></div>
              <div class="col-4 stat-item"><div class="num">100%</div><div class="lbl">Mobile-First</div></div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <!-- Mock dashboard preview -->
          <div style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:1.5rem;backdrop-filter:blur(10px);">
            <div style="color:rgba(255,255,255,.5);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;">📊 Executive Dashboard Preview</div>
            <div class="row g-2 mb-3">
              <div class="col-6"><div style="background:linear-gradient(135deg,#003366,#0055b3);border-radius:12px;padding:.9rem;color:#fff;"><div style="font-size:1.6rem;font-weight:900;">284</div><div style="font-size:.65rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em;">Active Staff</div></div></div>
              <div class="col-6"><div style="background:linear-gradient(135deg,#065f46,#059669);border-radius:12px;padding:.9rem;color:#fff;"><div style="font-size:1.6rem;font-weight:900;">$142K</div><div style="font-size:.65rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em;">Monthly Payroll</div></div></div>
              <div class="col-6"><div style="background:linear-gradient(135deg,#92400e,#f59e0b);border-radius:12px;padding:.9rem;color:#fff;"><div style="font-size:1.6rem;font-weight:900;">18</div><div style="font-size:.65rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em;">Pending Leaves</div></div></div>
              <div class="col-6"><div style="background:linear-gradient(135deg,#4c1d95,#7c3aed);border-radius:12px;padding:.9rem;color:#fff;"><div style="font-size:1.6rem;font-weight:900;">94%</div><div style="font-size:.65rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em;">Attendance Rate</div></div></div>
            </div>
            <!-- Mini bar chart -->
            <div style="color:rgba(255,255,255,.4);font-size:.68rem;margin-bottom:.5rem;">Leave Trend (6 months)</div>
            <div class="d-flex align-items-end gap-2" style="height:60px;">
              @foreach([35,42,28,55,38,47] as $h)
              <div style="flex:1;background:rgba(0,85,179,.5);border-radius:4px 4px 0 0;height:{{ $h }}px;transition:height .3s;"></div>
              @endforeach
            </div>
            <div class="d-flex gap-2 mt-1" style="font-size:.62rem;color:rgba(255,255,255,.3);">
              <span style="flex:1;text-align:center;">Oct</span><span style="flex:1;text-align:center;">Nov</span><span style="flex:1;text-align:center;">Dec</span>
              <span style="flex:1;text-align:center;">Jan</span><span style="flex:1;text-align:center;">Feb</span><span style="flex:1;text-align:center;">Mar</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Features Section -->
      <div id="features" class="mt-6 pt-5">
        <div class="text-center mb-4">
          <div class="hero-badge mx-auto" style="width:fit-content;"><i class="bi bi-grid"></i> Platform Features</div>
          <h2 style="color:#fff;font-weight:800;font-size:2rem;margin-top:.75rem;">Everything HR Needs, Nothing It Doesn't</h2>
          <p style="color:rgba(255,255,255,.55);font-size:.95rem;margin-top:.5rem;">Built specifically for the My Company HRMS's structure and workflows</p>
        </div>
        <div class="row g-3">
          @php
          $features = [
            ['bi bi-people','#0055b3','Employee Records','Full personnel data form — education, employment history, references, documents, dual-currency salary'],
            ['bi bi-calendar-check','#059669','Leave Management','8 leave types with 4-step approval chain: Employee → Dept Head → HR → President/VPAA'],
            ['bi bi-bar-chart-steps','#7c3aed','Performance Evaluation','Weighted scoring across 10 criteria with automatic rating, development goals & training needs'],
            ['bi bi-shield-exclamation','#ef4444','Discipline Management','Case tracking, hearing scheduling, action recording — verbal warnings through termination'],
            ['bi bi-clock-history','#06b6d4','Attendance Tracking','Clock in/out, bulk entry, monthly summaries, late & absence tracking'],
            ['bi bi-currency-dollar','#d97706','Payroll Processing','Salary computation, USD/LRD, tax & pension deductions, payslip generation'],
            ['bi bi-mortarboard','#0d9488','Training & Development','Program management, enrollment, completion tracking, certificate issuance'],
            ['bi bi-speedometer2','#003366','Executive Dashboard','Real-time KPIs, department headcount, leave trends, payroll summary for the President'],
          ];
          @endphp
          @foreach($features as $f)
          <div class="col-12 col-sm-6 col-xl-3">
            <div class="feature-card">
              <div class="feature-icon" style="background:rgba(255,255,255,.08);">
                <i class="{{ $f[0] }}" style="color:{{ $f[1] }};font-size:1.25rem;"></i>
              </div>
              <div style="color:#fff;font-weight:700;font-size:.88rem;margin-bottom:.4rem;">{{ $f[2] }}</div>
              <div style="color:rgba(255,255,255,.5);font-size:.77rem;line-height:1.6;">{{ $f[3] }}</div>
            </div>
          </div>
          @endforeach
        </div>

        <div class="text-center mt-5">
          <button class="btn-demo me-3" onclick="launchApp()"><i class="bi bi-play-circle me-2"></i>Launch Interactive Demo</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════
     APP SHELL
══════════════════════════════════════════════════════════ -->
<div id="appShell">

<!-- Overlay -->
<div class="sb-overlay" id="sbOverlay" onclick="closeSb()"></div>

<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
  <div class="sb-brand">
    <div class="d-flex align-items-center gap-2">
      <div class="sb-logo">HR</div>
      <div><div class="sb-name">HRMS</div><div class="sb-sub">UNIVERSITY OF LIBERIA</div></div>
    </div>
  </div>
  <nav class="sb-nav">
    <div class="nav-label">Main</div>
    <div class="nav-link-item active" onclick="showScreen('execDash')"><i class="bi bi-speedometer2"></i> Dashboard</div>

    <div class="nav-label">Workforce</div>
    <div class="nav-link-item" onclick="showScreen('employees')"><i class="bi bi-people"></i> Employees</div>

    <div class="nav-label">My Work</div>
    <div class="nav-link-item" onclick="showScreen('myProfile')"><i class="bi bi-person-circle"></i> My Profile</div>
    <div class="nav-link-item" onclick="showScreen('leaveList')"><i class="bi bi-calendar-check"></i> Leave Management</div>
    <div class="nav-link-item" onclick="showScreen('attendance')"><i class="bi bi-clock-history"></i> Attendance</div>

    <div class="nav-label">Performance</div>
    <div class="nav-link-item" onclick="showScreen('perfEval')"><i class="bi bi-bar-chart-steps"></i> Performance Eval.</div>
    <div class="nav-link-item" onclick="showScreen('discipline')"><i class="bi bi-shield-exclamation"></i> Discipline</div>

    <div class="nav-label">Development</div>
    <div class="nav-link-item" onclick="showScreen('training')"><i class="bi bi-mortarboard"></i> Training</div>

    <div class="nav-label">Finance</div>
    <div class="nav-link-item" onclick="showScreen('payroll')"><i class="bi bi-currency-dollar"></i> Payroll</div>
  </nav>
  <div class="sb-user">
    <div class="d-flex align-items-center gap-2 mb-2">
      <div class="sb-av">JW</div>
      <div class="overflow-hidden">
        <div style="color:#fff;font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">President Wreh</div>
        <div style="color:rgba(255,255,255,.4);font-size:.62rem;">President / CEO</div>
      </div>
    </div>
    <button onclick="exitApp()" style="width:100%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);border:none;border-radius:7px;padding:.4rem;font-size:.75rem;cursor:pointer;font-family:inherit;font-weight:600;">
      <i class="bi bi-box-arrow-right me-1"></i>Back to Home
    </button>
  </div>
</aside>

<!-- Topbar -->
<header class="topbar">
  <button onclick="toggleSb()" style="background:none;border:none;font-size:1.2rem;color:#64748b;cursor:pointer;padding:.2rem .4rem;border-radius:6px;display:none;" id="sbBtn"><i class="bi bi-list"></i></button>
  <div class="topbar-title" id="topbarTitle">Executive Dashboard</div>
  <div class="d-flex align-items-center gap-2 ms-auto">
    <div class="position-relative">
      <button style="background:#f0f4f8;border:none;width:33px;height:33px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;color:#64748b;" onclick="alert('3 pending leave approvals')">
        <i class="bi bi-bell"></i><span class="notif-dot"></span>
      </button>
    </div>
    <div class="topbar-av" onclick="showScreen('myProfile')">JW</div>
  </div>
</header>

<!-- Main content -->
<main class="main" id="mainContent">

  <!-- Role switcher pill -->
  <div class="d-flex flex-wrap gap-2 mb-4 align-items-center">
    <span style="font-size:.75rem;color:#64748b;font-weight:600;">Viewing as:</span>
    <button class="btn btn-sm btn-primary active-role" onclick="setRole('president')" id="rolePresident">🏛️ President</button>
    <button class="btn btn-sm btn-outline-secondary" onclick="setRole('hr')" id="roleHR">👤 HR Admin</button>
    <button class="btn btn-sm btn-outline-secondary" onclick="setRole('employee')" id="roleEmployee">📋 Employee</button>
  </div>

<!-- ─── EXECUTIVE DASHBOARD ─────────────────────────────── -->
<div id="screen-execDash" class="screen active">
  <div class="d-flex align-items-start justify-content-between flex-wrap gap-2 mb-4">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Executive Dashboard</h5><div style="font-size:.78rem;color:#94a3b8;">Real-time institutional overview · {{ date('F j, Y') }}</div></div>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-6 col-md-3"><div class="sc sc-navy"><div class="sc-ico"><i class="bi bi-people-fill"></i></div><div class="sc-val">284</div><div class="sc-lbl">Active Staff</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-teal"><div class="sc-ico"><i class="bi bi-building"></i></div><div class="sc-val">10</div><div class="sc-lbl">Departments</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-amber"><div class="sc-ico"><i class="bi bi-hourglass-split"></i></div><div class="sc-val">18</div><div class="sc-lbl">Pending Leaves</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-gold"><div class="sc-ico"><i class="bi bi-currency-dollar"></i></div><div class="sc-val">$142K</div><div class="sc-lbl">Monthly Payroll</div></div></div>
  </div>
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3"><div class="sc sc-rose"><div class="sc-ico"><i class="bi bi-shield-exclamation"></i></div><div class="sc-val">3</div><div class="sc-lbl">Open Cases</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-green"><div class="sc-ico"><i class="bi bi-calendar-check"></i></div><div class="sc-val">42</div><div class="sc-lbl">Leaves This Month</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-cyan"><div class="sc-ico"><i class="bi bi-mortarboard"></i></div><div class="sc-val">6</div><div class="sc-lbl">Active Trainings</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-viol"><div class="sc-ico"><i class="bi bi-bar-chart-steps"></i></div><div class="sc-val">24</div><div class="sc-lbl">Evals Pending</div></div></div>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-12 col-lg-7">
      <div class="card"><div class="card-header"><i class="bi bi-graph-up-arrow me-2" style="color:var(--ul-navy);"></i>Leave Trend — Last 6 Months</div>
      <div class="p-3"><canvas id="leaveTrendChart" height="130"></canvas></div></div>
    </div>
    <div class="col-12 col-lg-5">
      <div class="card h-100"><div class="card-header"><i class="bi bi-pie-chart me-2" style="color:var(--ul-navy);"></i>Staff by Employment Type</div>
      <div class="p-3 d-flex align-items-center justify-content-center"><canvas id="empTypeChart" height="160"></canvas></div></div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-12 col-lg-6">
      <div class="card"><div class="card-header"><i class="bi bi-building me-2" style="color:var(--ul-navy);"></i>Headcount by Department</div>
      <div style="overflow-x:auto;"><table class="tbl table mb-0"><thead><tr><th>Department</th><th>Type</th><th class="text-end">Staff</th></tr></thead><tbody>
        <tr><td class="fw-semibold">HR Department</td><td><span class="badge bg-secondary">Division</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">12</td></tr>
        <tr><td class="fw-semibold">College of Science & Tech.</td><td><span class="badge bg-primary">College</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">68</td></tr>
        <tr><td class="fw-semibold">College of Liberal Arts</td><td><span class="badge bg-primary">College</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">54</td></tr>
        <tr><td class="fw-semibold">Business & Public Admin</td><td><span class="badge bg-primary">College</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">47</td></tr>
        <tr><td class="fw-semibold">Finance Division</td><td><span class="badge bg-secondary">Division</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">22</td></tr>
        <tr><td class="fw-semibold">Information Technology</td><td><span class="badge" style="background:#0d9488;">Unit</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">18</td></tr>
        <tr><td class="fw-semibold">Security & Facilities</td><td><span class="badge bg-secondary">Division</span></td><td class="text-end fw-bold" style="color:var(--ul-navy);">63</td></tr>
      </tbody></table></div></div>
    </div>

    <div class="col-12 col-lg-6">
      <div class="card"><div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-hourglass-split me-2" style="color:#f59e0b;"></i>Awaiting President Approval</span>
        <button class="btn btn-sm btn-outline-primary" onclick="showScreen('leaveList')">View All</button>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom">
          <div class="av av-sm" style="background:linear-gradient(135deg,#003366,#0055b3);color:#fff;">JK</div>
          <div class="flex-1"><div class="fw-semibold" style="font-size:.82rem;">Kollie, James K.</div><div style="font-size:.72rem;color:#94a3b8;">Vacation · Mar 15 – Mar 29, 2025</div></div>
          <div class="d-flex gap-1">
            <button class="btn btn-success btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="alert('Leave approved!')"><i class="bi bi-check-lg"></i></button>
            <button class="btn btn-outline-secondary btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button>
          </div>
        </div>
        <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom">
          <div class="av av-sm" style="background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;">AB</div>
          <div class="flex-1"><div class="fw-semibold" style="font-size:.82rem;">Brown, Abigail T.</div><div style="font-size:.72rem;color:#94a3b8;">Study Leave · Apr 1 – Apr 30, 2025</div></div>
          <div class="d-flex gap-1">
            <button class="btn btn-success btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="alert('Leave approved!')"><i class="bi bi-check-lg"></i></button>
            <button class="btn btn-outline-secondary btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button>
          </div>
        </div>
        <div class="d-flex align-items-center gap-3 px-3 py-2">
          <div class="av av-sm" style="background:linear-gradient(135deg,#059669,#065f46);color:#fff;">MP</div>
          <div class="flex-1"><div class="fw-semibold" style="font-size:.82rem;">Pewee, Martha S.</div><div style="font-size:.72rem;color:#94a3b8;">Maternity · May 1 – Jul 29, 2025</div></div>
          <div class="d-flex gap-1">
            <button class="btn btn-success btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="alert('Leave approved!')"><i class="bi bi-check-lg"></i></button>
            <button class="btn btn-outline-secondary btn-sm" style="padding:.25rem .6rem;font-size:.72rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button>
          </div>
        </div>
      </div></div>
    </div>
  </div>
</div>

<!-- ─── EMPLOYEES ────────────────────────────────────────── -->
<div id="screen-employees" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Employees</h5><div style="font-size:.78rem;color:#94a3b8;">284 active employees</div></div>
    <button class="btn btn-primary btn-sm" onclick="showScreen('addEmployee')"><i class="bi bi-person-plus me-1"></i>Add Employee</button>
  </div>
  <div class="card mb-3 p-3">
    <div class="row g-2">
      <div class="col-12 col-sm-4"><input type="text" class="form-control form-control-sm" placeholder="Search by name, ID, position…"></div>
      <div class="col-6 col-sm-3"><select class="form-select form-select-sm"><option>All Departments</option><option>CST</option><option>Finance</option><option>HR</option></select></div>
      <div class="col-6 col-sm-3"><select class="form-select form-select-sm"><option>All Status</option><option>Active</option><option>On Leave</option></select></div>
      <div class="col-12 col-sm-2"><button class="btn btn-primary btn-sm w-100"><i class="bi bi-search me-1"></i>Filter</button></div>
    </div>
  </div>
  <div class="card"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Employee</th><th>ID</th><th class="d-none d-md-table-cell">Department</th><th class="d-none d-sm-table-cell">Position</th><th>Status</th><th class="text-end">Actions</th></tr></thead>
    <tbody>
    @php $emps=[
      ['JK','#003366','#0055b3','Kollie, James K.','j.kollie@hrms.demo','EMP-0012','HR Dept.','HR Officer','active'],
      ['MF','#7c3aed','#4c1d95','Flomo, Mary B.','m.flomo@hrms.demo','EMP-0034','CST','Associate Professor','active'],
      ['TP','#059669','#065f46','Pewee, Thomas G.','t.pewee@hrms.demo','EMP-0056','IT Unit','Systems Admin','active'],
      ['AV','#d97706','#78350f','Varney, Aaron S.','a.varney@hrms.demo','EMP-0078','Finance','Finance Officer','active'],
      ['RS','#ef4444','#7f1d1d','Sumo, Rebecca Z.','r.sumo@hrms.demo','EMP-0091','CLA','Lecturer I','on_leave'],
    ]; @endphp
    @foreach($emps as $e)
    <tr>
      <td><div class="d-flex align-items-center gap-2"><div class="av av-sm" style="background:linear-gradient(135deg,{{ $e[1] }},{{ $e[2] }});color:#fff;flex-shrink:0;">{{ $e[0] }}</div><div><div class="fw-semibold" style="font-size:.82rem;">{{ $e[3] }}</div><div style="font-size:.7rem;color:#94a3b8;">{{ $e[4] }}</div></div></div></td>
      <td style="font-size:.8rem;font-weight:700;color:var(--ul-navy);">{{ $e[5] }}</td>
      <td class="d-none d-md-table-cell" style="font-size:.8rem;">{{ $e[6] }}</td>
      <td class="d-none d-sm-table-cell" style="font-size:.8rem;">{{ $e[7] }}</td>
      <td><span class="badge {{ $e[8]=='active' ? 'bg-success' : 'bg-warning text-dark' }}">{{ ucfirst(str_replace('_',' ',$e[8])) }}</span></td>
      <td class="text-end"><div class="d-flex gap-1 justify-content-end">
        <button class="btn btn-sm btn-outline-primary" style="padding:.2rem .5rem;" onclick="showScreen('empDetail')"><i class="bi bi-eye"></i></button>
        <button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;"><i class="bi bi-pencil"></i></button>
      </div></td>
    </tr>
    @endforeach
    </tbody>
  </table></div></div>
</div>

<!-- ─── LEAVE LIST ────────────────────────────────────────── -->
<div id="screen-leaveList" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Leave Management</h5></div>
    <button class="btn btn-primary btn-sm" onclick="showScreen('leaveRequest')"><i class="bi bi-plus-lg me-1"></i>Request Leave</button>
  </div>
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#f59e0b;">18</div><div style="font-size:.7rem;color:#94a3b8;">Pending</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#0055b3;">7</div><div style="font-size:.7rem;color:#94a3b8;">HR Approved</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#059669;">42</div><div style="font-size:.7rem;color:#94a3b8;">Approved</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#ef4444;">5</div><div style="font-size:.7rem;color:#94a3b8;">Rejected</div></div></div>
  </div>
  <div class="card"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Leave #</th><th>Employee</th><th>Type</th><th class="d-none d-md-table-cell">Duration</th><th>Status</th><th class="text-end">Actions</th></tr></thead>
    <tbody>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">LV-2025-0018</td><td>Kollie, James K.</td><td><span class="badge" style="background:#0055b3;">Vacation</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Mar 15 – Mar 29 · 10 days</td><td><span class="badge bg-warning text-dark">Pending</span></td><td class="text-end"><div class="d-flex gap-1 justify-content-end"><button class="btn btn-success btn-sm" style="padding:.2rem .5rem;" onclick="alert('Approved!')"><i class="bi bi-check-lg"></i></button><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button></div></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">LV-2025-0017</td><td>Flomo, Mary B.</td><td><span class="badge" style="background:#198754;">Study</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Apr 1 – Apr 30 · 22 days</td><td><span class="badge bg-primary">HR Approved</span></td><td class="text-end"><div class="d-flex gap-1 justify-content-end"><button class="btn btn-success btn-sm" style="padding:.2rem .5rem;" onclick="alert('Approved!')"><i class="bi bi-check-lg"></i></button><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button></div></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">LV-2025-0015</td><td>Pewee, Thomas G.</td><td><span class="badge" style="background:#e91e8c;">Maternity</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">May 1 – Jul 29 · 63 days</td><td><span class="badge bg-success">Approved</span></td><td class="text-end"><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">LV-2025-0013</td><td>Varney, Aaron S.</td><td><span class="badge bg-secondary">Sick</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Mar 3 – Mar 5 · 3 days</td><td><span class="badge bg-success">Approved</span></td><td class="text-end"><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('leaveDetail')"><i class="bi bi-eye"></i></button></td></tr>
    </tbody>
  </table></div></div>
</div>

<!-- ─── LEAVE REQUEST FORM ─────────────────────────────── -->
<div id="screen-leaveRequest" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('leaveList')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">Request Leave</h5>
  </div>
  <div class="row g-3">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header"><i class="bi bi-calendar-plus me-2" style="color:var(--ul-navy);"></i>Leave Application</div>
        <div class="p-3">
          <div class="mb-3">
            <label class="form-label">Leave Type *</label>
            <div class="row g-2">
              @foreach([['Vacation','#0055b3',21],['Sick','#ef4444',15],['Maternity','#e91e8c',90],['Study','#059669',30],['Bereavement','#6c757d',5],['Emergency','#f59e0b',3]] as $lt)
              <div class="col-6 col-sm-4">
                <label class="lt-card d-flex align-items-center gap-2 {{ $loop->first ? 'sel' : '' }}" onclick="selectLT(this)">
                  <input type="radio" name="leave_type" style="display:none;">
                  <div style="width:12px;height:12px;background:{{ $lt[1] }};border-radius:3px;flex-shrink:0;"></div>
                  <div><div style="font-size:.78rem;font-weight:600;">{{ $lt[0] }}</div><div style="font-size:.65rem;color:#94a3b8;">{{ $lt[2] }} days/yr</div></div>
                </label>
              </div>
              @endforeach
            </div>
          </div>
          <div class="row g-2 mb-3">
            <div class="col-6"><label class="form-label">From *</label><input type="date" class="form-control form-control-sm" id="dFrom" onchange="calcDays()"></div>
            <div class="col-6"><label class="form-label">To *</label><input type="date" class="form-control form-control-sm" id="dTo" onchange="calcDays()"></div>
          </div>
          <div class="alert alert-info py-2 px-3 mb-3 d-none" id="daysInfo" style="font-size:.82rem;"></div>
          <div class="mb-3"><label class="form-label">Forwarding Address</label><input type="text" class="form-control form-control-sm" placeholder="Where can you be reached?"></div>
          <div class="mb-3"><label class="form-label">Duty Arrangement While Away</label><textarea class="form-control form-control-sm" rows="2" placeholder="How will your duties be handled?"></textarea></div>
          <div class="mb-3"><label class="form-label">Reason / Remarks</label><textarea class="form-control form-control-sm" rows="2" placeholder="Optional…"></textarea></div>
          <div class="d-flex gap-2">
            <button class="btn btn-primary btn-sm" onclick="submitLeave()"><i class="bi bi-send me-1"></i>Submit Request</button>
            <button class="btn btn-outline-secondary btn-sm" onclick="showScreen('leaveList')">Cancel</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card mb-3"><div class="card-header"><i class="bi bi-info-circle me-2" style="color:var(--ul-navy);"></i>Approval Process</div>
      <div class="p-3"><div class="tl">
        <div class="tl-item"><div class="tl-dot bg-warning text-white"><i class="bi bi-person"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">You Submit</div><div style="font-size:.72rem;color:#94a3b8;">Leave request created</div></div></div>
        <div class="tl-item"><div class="tl-dot bg-info text-white"><i class="bi bi-person-workspace"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">Dept. Head Reviews</div><div style="font-size:.72rem;color:#94a3b8;">College/Division Head</div></div></div>
        <div class="tl-item"><div class="tl-dot bg-primary text-white"><i class="bi bi-people"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">HR Review</div><div style="font-size:.72rem;color:#94a3b8;">Associate VP / HR</div></div></div>
        <div class="tl-item" style="margin-bottom:0;"><div class="tl-dot bg-success text-white"><i class="bi bi-award"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">Final Approval</div><div style="font-size:.72rem;color:#94a3b8;">VPAA / President UL</div></div></div>
      </div></div></div>
    </div>
  </div>
</div>

<!-- ─── LEAVE DETAIL ─────────────────────────────────────── -->
<div id="screen-leaveDetail" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('leaveList')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">LV-2025-0018 — Vacation Leave</h5>
    <span class="badge bg-primary ms-1">HR Approved</span>
  </div>
  <div class="row g-3">
    <div class="col-12 col-lg-8">
      <div class="card mb-3"><div class="card-header">Leave Information</div><div class="p-3">
        <div class="row g-3">
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Employee</div><div class="fw-semibold mt-1">Kollie, James K.</div></div>
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Department</div><div class="fw-semibold mt-1">HR Department</div></div>
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Leave Type</div><div class="fw-semibold mt-1"><span class="badge" style="background:#0055b3;">Vacation Leave</span></div></div>
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Duration</div><div class="fw-semibold mt-1">10 working days</div></div>
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">From</div><div class="fw-semibold mt-1">March 15, 2025</div></div>
          <div class="col-6"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">To</div><div class="fw-semibold mt-1">March 29, 2025</div></div>
          <div class="col-12"><div style="font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Duty Arrangement</div><div class="mt-1" style="font-size:.85rem;">Mr. Aaron Varney will cover routine HR duties. Urgent matters to be escalated to the HR Director.</div></div>
        </div>
      </div></div>
      <div class="card"><div class="card-header">Approval Actions</div><div class="p-3">
        <div class="mb-3"><label class="form-label">Comments</label><textarea class="form-control form-control-sm" rows="2" placeholder="Optional approval comments…"></textarea></div>
        <div class="d-flex gap-2">
          <button class="btn btn-success btn-sm" onclick="alert('Leave fully approved! Employee notified.')"><i class="bi bi-check-circle me-1"></i>Approve</button>
          <button class="btn btn-danger btn-sm" onclick="alert('Leave rejected.')"><i class="bi bi-x-circle me-1"></i>Reject</button>
        </div>
      </div></div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card"><div class="card-header">Approval Trail</div><div class="p-3"><div class="tl">
        <div class="tl-item"><div class="tl-dot bg-success text-white"><i class="bi bi-check-lg"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">Submitted</div><div style="font-size:.72rem;color:#94a3b8;">Mar 1, 2025 — by Employee</div></div></div>
        <div class="tl-item"><div class="tl-dot bg-success text-white"><i class="bi bi-check-lg"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">Dept. Approved</div><div style="font-size:.72rem;color:#94a3b8;">Mar 3, 2025 — Dean J. Sumo</div></div></div>
        <div class="tl-item"><div class="tl-dot bg-success text-white"><i class="bi bi-check-lg"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">HR Approved</div><div style="font-size:.72rem;color:#94a3b8;">Mar 5, 2025 — AVP Kollie</div></div></div>
        <div class="tl-item" style="margin-bottom:0;"><div class="tl-dot bg-warning text-white"><i class="bi bi-hourglass-split"></i></div><div class="tl-body"><div class="fw-semibold" style="font-size:.8rem;">Awaiting President</div><div style="font-size:.72rem;color:#94a3b8;">Pending final approval</div></div></div>
      </div></div></div>
    </div>
  </div>
</div>

<!-- ─── PERFORMANCE EVALUATION ───────────────────────────── -->
<div id="screen-perfEval" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Performance Evaluation</h5></div>
    <button class="btn btn-primary btn-sm" onclick="showScreen('newEval')"><i class="bi bi-plus-lg me-1"></i>New Evaluation</button>
  </div>
  <div class="card mb-3"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Eval #</th><th>Employee</th><th class="d-none d-md-table-cell">Period</th><th>Score</th><th>Rating</th><th>Status</th><th></th></tr></thead>
    <tbody>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">PE-2024-0012</td><td>Flomo, Mary B.</td><td class="d-none d-md-table-cell">Annual 2024</td><td><span class="fw-bold">88%</span></td><td><span class="badge bg-primary">Very Good</span></td><td><span class="badge bg-success">Completed</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('evalDetail')"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">PE-2024-0011</td><td>Pewee, Thomas G.</td><td class="d-none d-md-table-cell">Annual 2024</td><td><span class="fw-bold">74%</span></td><td><span class="badge bg-info text-dark">Satisfactory</span></td><td><span class="badge bg-warning text-dark">Pending Ack.</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('evalDetail')"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">PE-2024-0010</td><td>Kollie, James K.</td><td class="d-none d-md-table-cell">Annual 2024</td><td><span class="fw-bold">95%</span></td><td><span class="badge bg-success">Excellent</span></td><td><span class="badge bg-success">Completed</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('evalDetail')"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">PE-2024-0009</td><td>Varney, Aaron S.</td><td class="d-none d-md-table-cell">Annual 2024</td><td><span class="fw-bold">41%</span></td><td><span class="badge bg-danger">Unsatisfactory</span></td><td><span class="badge bg-secondary">HR Review</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;" onclick="showScreen('evalDetail')"><i class="bi bi-eye"></i></button></td></tr>
    </tbody>
  </table></div></div>
</div>

<!-- ─── NEW EVALUATION ────────────────────────────────────── -->
<div id="screen-newEval" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('perfEval')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">New Performance Evaluation</h5>
  </div>
  <div class="row g-3">
    <div class="col-12 col-lg-8">
      <div class="card mb-3"><div class="card-header">Employee & Period</div><div class="p-3 row g-2">
        <div class="col-6"><label class="form-label">Employee</label><select class="form-select form-select-sm"><option>Kollie, James K.</option><option>Flomo, Mary B.</option><option>Pewee, Thomas G.</option></select></div>
        <div class="col-6"><label class="form-label">Period</label><select class="form-select form-select-sm"><option>Annual Evaluation 2024</option></select></div>
      </div></div>
      <div class="card mb-3"><div class="card-header d-flex justify-content-between"><span>Scoring Criteria</span><span class="badge bg-primary" id="evalScore">Score: 0%</span></div>
      <div class="p-3">
        @php $crit=[['Job Knowledge',20,'Core'],['Quality of Work',20,'Core'],['Productivity',20,'Core'],['Attendance & Punctuality',10,'Conduct'],['Teamwork & Collaboration',15,'Conduct'],['Initiative & Innovation',15,'Leadership'],['Communication Skills',10,'Conduct'],['Leadership',15,'Leadership']]; @endphp
        @foreach($crit as $i=>$c)
        <div class="mb-3">
          <div class="d-flex justify-content-between mb-1"><label class="form-label mb-0" style="font-size:.8rem;">{{ $c[0] }} <span class="badge bg-light text-dark" style="font-size:.65rem;">{{ $c[2] }}</span></label><span class="badge bg-light text-dark" id="s{{ $i }}">0/{{ $c[1] }}</span></div>
          <input type="range" class="form-range score-range" min="0" max="{{ $c[1] }}" value="0" oninput="updateEvalScore(this,{{ $i }},{{ $c[1] }})">
        </div>
        @endforeach
        <div class="mb-3"><label class="form-label">Evaluator Comments</label><textarea class="form-control form-control-sm" rows="2"></textarea></div>
        <div class="mb-3"><label class="form-label">Development Goals</label><textarea class="form-control form-control-sm" rows="2"></textarea></div>
        <button class="btn btn-primary btn-sm" onclick="submitEval()"><i class="bi bi-send me-1"></i>Submit Evaluation</button>
      </div></div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card sticky-top" style="top:70px;"><div class="card-header">Score Preview</div><div class="p-3 text-center">
        <div style="font-size:3rem;font-weight:900;color:var(--ul-navy);" id="evalPct">0%</div>
        <div class="badge fs-6 mb-3" id="evalRating" style="background:#6c757d;">—</div>
        <hr>
        @foreach([['Excellent','≥ 90%','#059669'],['Very Good','75–89%','#0055b3'],['Satisfactory','60–74%','#06b6d4'],['Needs Improvement','45–59%','#f59e0b'],['Unsatisfactory','< 45%','#ef4444']] as $r)
        <div class="d-flex justify-content-between py-1 border-bottom" style="font-size:.78rem;"><span>{{ $r[0] }}</span><span class="fw-semibold" style="color:{{ $r[2] }};">{{ $r[1] }}</span></div>
        @endforeach
      </div></div>
    </div>
  </div>
</div>

<!-- ─── DISCIPLINE ────────────────────────────────────────── -->
<div id="screen-discipline" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Discipline Management</h5></div>
    <button class="btn btn-primary btn-sm" onclick="showScreen('newCase')"><i class="bi bi-plus-lg me-1"></i>New Case</button>
  </div>
  <div class="card"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Case #</th><th>Employee</th><th>Infraction</th><th class="d-none d-md-table-cell">Date</th><th>Action</th><th>Status</th><th></th></tr></thead>
    <tbody>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">DC-2025-0003</td><td>Sumo, Rebecca Z.</td><td><span class="sev-badge" style="background:#fef3c7;color:#92400e;"><i class="bi bi-exclamation-triangle"></i>Attendance</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Feb 20, 2025</td><td><span class="badge bg-warning text-dark">Written Warning</span></td><td><span class="badge bg-warning text-dark">Open</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">DC-2025-0002</td><td>Pewee, Thomas G.</td><td><span class="sev-badge" style="background:#fee2e2;color:#991b1b;"><i class="bi bi-shield-x"></i>Policy Violation</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Jan 15, 2025</td><td><span class="badge bg-danger">Suspension (3 days)</span></td><td><span class="badge bg-secondary">Resolved</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;"><i class="bi bi-eye"></i></button></td></tr>
      <tr><td class="fw-semibold" style="color:var(--ul-navy);">DC-2025-0001</td><td>Varney, Aaron S.</td><td><span class="sev-badge" style="background:#fef3c7;color:#92400e;"><i class="bi bi-exclamation-circle"></i>Misconduct</span></td><td class="d-none d-md-table-cell" style="font-size:.79rem;">Jan 5, 2025</td><td><span class="badge" style="background:#6c757d;">Verbal Warning</span></td><td><span class="badge bg-secondary">Closed</span></td><td><button class="btn btn-sm btn-outline-secondary" style="padding:.2rem .5rem;"><i class="bi bi-eye"></i></button></td></tr>
    </tbody>
  </table></div></div>
</div>

<!-- ─── PAYROLL ────────────────────────────────────────────── -->
<div id="screen-payroll" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Payroll</h5></div>
    <button class="btn btn-primary btn-sm" onclick="showScreen('payslip')"><i class="bi bi-receipt me-1"></i>View Payslip</button>
  </div>
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3"><div class="sc sc-navy p-3"><div class="sc-val" style="font-size:1.4rem;">$142K</div><div class="sc-lbl">Total Gross</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-green p-3"><div class="sc-val" style="font-size:1.4rem;">$118K</div><div class="sc-lbl">Total Net</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-amber p-3"><div class="sc-val" style="font-size:1.4rem;">$17K</div><div class="sc-lbl">Tax Deducted</div></div></div>
    <div class="col-6 col-md-3"><div class="sc sc-rose p-3"><div class="sc-val" style="font-size:1.4rem;">284</div><div class="sc-lbl">Employees Paid</div></div></div>
  </div>
  <div class="card"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Employee</th><th>Basic Salary</th><th>Allowances</th><th>Gross Pay</th><th>Deductions</th><th>Net Pay</th><th></th></tr></thead>
    <tbody>
      <tr><td class="fw-semibold">Kollie, James K.</td><td>$1,500</td><td>$200</td><td>$1,700</td><td>$255</td><td class="fw-bold text-success">$1,445</td><td><button class="btn btn-sm btn-outline-primary" style="padding:.2rem .5rem;" onclick="showScreen('payslip')"><i class="bi bi-receipt"></i></button></td></tr>
      <tr><td class="fw-semibold">Flomo, Mary B.</td><td>$3,500</td><td>$500</td><td>$4,000</td><td>$600</td><td class="fw-bold text-success">$3,400</td><td><button class="btn btn-sm btn-outline-primary" style="padding:.2rem .5rem;" onclick="showScreen('payslip')"><i class="bi bi-receipt"></i></button></td></tr>
      <tr><td class="fw-semibold">Pewee, Thomas G.</td><td>$1,200</td><td>$150</td><td>$1,350</td><td>$202</td><td class="fw-bold text-success">$1,148</td><td><button class="btn btn-sm btn-outline-primary" style="padding:.2rem .5rem;" onclick="showScreen('payslip')"><i class="bi bi-receipt"></i></button></td></tr>
    </tbody>
  </table></div></div>
</div>

<!-- ─── PAYSLIP ────────────────────────────────────────────── -->
<div id="screen-payslip" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('payroll')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">Payslip</h5>
    <button class="btn btn-sm btn-outline-primary ms-auto" onclick="window.print()"><i class="bi bi-printer me-1"></i>Print</button>
  </div>
  <div class="payslip">
    <div class="payslip-header">
      <div class="d-flex justify-content-between align-items-start mb-3">
        <div><div class="fw-bold" style="font-size:1.1rem;color:#D4AF37;">My Company HRMS</div><div style="color:rgba(255,255,255,.6);font-size:.78rem;">Human Resource Department · </div></div>
        <div class="text-end"><div style="font-size:.75rem;color:rgba(255,255,255,.5);">PAYSLIP</div><div style="font-size:.8rem;color:#D4AF37;font-weight:700;">March 2025</div></div>
      </div>
      <div class="row g-2">
        <div class="col-6"><div style="font-size:.7rem;color:rgba(255,255,255,.45);">EMPLOYEE</div><div style="font-weight:700;color:#fff;">Kollie, James K.</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:rgba(255,255,255,.45);">EMPLOYEE NO.</div><div style="font-weight:700;color:#fff;">EMP-0012</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:rgba(255,255,255,.45);">POSITION</div><div style="font-weight:600;color:rgba(255,255,255,.8);font-size:.85rem;">HR Officer</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:rgba(255,255,255,.45);">DEPARTMENT</div><div style="font-weight:600;color:rgba(255,255,255,.8);font-size:.85rem;">HR Department</div></div>
      </div>
    </div>
    <div class="payslip-body">
      <div class="row g-3">
        <div class="col-12 col-sm-6">
          <div class="fw-bold mb-2" style="font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;">Earnings</div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Basic Salary</span><span class="fw-semibold">$1,500.00</span></div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Housing Allowance</span><span class="fw-semibold">$100.00</span></div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Transport Allowance</span><span class="fw-semibold">$100.00</span></div>
          <div class="d-flex justify-content-between py-2 bg-success bg-opacity-10 px-2 rounded-2 mt-1 fw-bold"><span>Gross Pay</span><span>$1,700.00</span></div>
        </div>
        <div class="col-12 col-sm-6">
          <div class="fw-bold mb-2" style="font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;">Deductions</div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Income Tax (15%)</span><span class="fw-semibold text-danger">-$210.00</span></div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Pension (5%)</span><span class="fw-semibold text-danger">-$70.00</span></div>
          <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Other</span><span class="fw-semibold text-danger">-$0.00</span></div>
          <div class="d-flex justify-content-between py-2 bg-danger bg-opacity-10 px-2 rounded-2 mt-1 fw-bold"><span>Total Deductions</span><span class="text-danger">-$280.00</span></div>
        </div>
      </div>
      <div class="d-flex justify-content-between align-items-center mt-3 p-3 rounded-3" style="background:linear-gradient(135deg,#003366,#0055b3);">
        <div style="color:rgba(255,255,255,.7);font-size:.85rem;font-weight:600;">NET PAY (USD)</div>
        <div style="font-size:1.6rem;font-weight:900;color:#D4AF37;">$1,420.00</div>
      </div>
      <div class="text-center mt-3" style="font-size:.72rem;color:#94a3b8;">This is a computer-generated payslip. No signature required.</div>
    </div>
  </div>
</div>

<!-- ─── TRAINING ───────────────────────────────────────────── -->
<div id="screen-training" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Training & Development</h5></div>
    <button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Program</button>
  </div>
  <div class="row g-3">
    @foreach([
      ['Data Analysis with Excel','Workshop','IT Unit','Mar 20–22, 2025','12 enrolled','bg-success','Ongoing'],
      ['Leadership Development Program','External','Management','Apr 5–9, 2025','8 enrolled','bg-primary','Scheduled'],
      ['HR Compliance & Ethics','Internal','All Staff','May 12, 2025','0 enrolled','bg-info','Scheduled'],
      ['Grant Writing Workshop','Conference','Research','Jun 3–4, 2025','5 enrolled','bg-warning text-dark','Scheduled'],
    ] as $t)
    <div class="col-12 col-sm-6 col-xl-3">
      <div class="card p-3 h-100">
        <div class="d-flex justify-content-between mb-2">
          <span class="badge {{ $t[4] }}">{{ $t[6] }}</span>
          <span class="badge bg-light text-dark" style="font-size:.68rem;">{{ $t[1] }}</span>
        </div>
        <div class="fw-bold mb-1" style="font-size:.88rem;">{{ $t[0] }}</div>
        <div style="font-size:.75rem;color:#94a3b8;margin-bottom:.75rem;">{{ $t[3] }} · {{ $t[2] }}</div>
        <div class="d-flex justify-content-between align-items-center mt-auto">
          <span style="font-size:.75rem;color:#64748b;"><i class="bi bi-people me-1"></i>{{ $t[4] }}</span>
          <button class="btn btn-sm btn-outline-primary" style="font-size:.72rem;padding:.2rem .6rem;" onclick="alert('Enrolled in training!')">Enroll</button>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</div>

<!-- ─── ATTENDANCE ─────────────────────────────────────────── -->
<div id="screen-attendance" class="screen">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h5 class="fw-black mb-0" style="color:var(--ul-navy);">Attendance</h5></div>
    <button class="btn btn-primary btn-sm" onclick="clockInOut()"><i class="bi bi-fingerprint me-1"></i>Clock In / Out</button>
  </div>
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#059669;">18</div><div style="font-size:.7rem;color:#94a3b8;">Present Days</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#ef4444;">2</div><div style="font-size:.7rem;color:#94a3b8;">Absent Days</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#f59e0b;">1</div><div style="font-size:.7rem;color:#94a3b8;">Late Days</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-2 text-center"><div class="fw-bold" style="font-size:1.3rem;color:#0055b3;">3</div><div style="font-size:.7rem;color:#94a3b8;">Leave Days</div></div></div>
  </div>
  <div class="card"><div style="overflow-x:auto;"><table class="tbl table mb-0">
    <thead><tr><th>Date</th><th>Time In</th><th>Time Out</th><th>Hours</th><th>Status</th></tr></thead>
    <tbody>
      @foreach([['Mar 28','08:02 AM','05:05 PM','9.05h','Present'],['Mar 27','08:15 AM','05:00 PM','8.75h','Present'],['Mar 26','—','—','—','Absent'],['Mar 25','07:58 AM','05:10 PM','9.2h','Present'],['Mar 24','08:45 AM','05:00 PM','8.25h','Late']] as $a)
      <tr>
        <td class="fw-semibold" style="font-size:.82rem;">{{ $a[0] }}, 2025</td>
        <td style="color:{{ $a[4]=='Absent'?'#94a3b8':'#1a2332' }};">{{ $a[1] }}</td>
        <td style="color:{{ $a[4]=='Absent'?'#94a3b8':'#1a2332' }};">{{ $a[2] }}</td>
        <td>{{ $a[3] }}</td>
        <td><span class="badge {{ $a[4]=='Present'?'bg-success':($a[4]=='Late'?'bg-warning text-dark':($a[4]=='Absent'?'bg-danger':'bg-info')) }}">{{ $a[4] }}</span></td>
      </tr>
      @endforeach
    </tbody>
  </table></div></div>
</div>

<!-- ─── MY PROFILE ────────────────────────────────────────── -->
<div id="screen-myProfile" class="screen">
  <h5 class="fw-black mb-3" style="color:var(--ul-navy);">My Profile</h5>
  <div class="row g-3">
    <div class="col-12 col-lg-4">
      <div class="card p-3 text-center mb-3">
        <div class="av av-lg mx-auto mb-2" style="background:linear-gradient(135deg,#003366,#0055b3);color:#fff;width:80px;height:80px;border-radius:20px;font-size:1.8rem;">JW</div>
        <div class="fw-bold" style="font-size:1.05rem;">Wreh, John K.</div>
        <div style="font-size:.8rem;color:#64748b;">President</div>
        <span class="badge bg-success mt-1">Active</span>
        <div class="row g-2 mt-2 text-center">
          <div class="col-4"><div class="fw-bold" style="color:var(--ul-navy);">22</div><div style="font-size:.68rem;color:#94a3b8;">Yrs Service</div></div>
          <div class="col-4"><div class="fw-bold" style="color:var(--ul-navy);">0</div><div style="font-size:.68rem;color:#94a3b8;">Open Cases</div></div>
          <div class="col-4"><div class="fw-bold" style="color:var(--ul-navy);">95%</div><div style="font-size:.68rem;color:#94a3b8;">Performance</div></div>
        </div>
      </div>
      <div class="card p-3">
        <div class="fw-bold mb-2" style="font-size:.82rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Leave Balances</div>
        @foreach([['Vacation','#0055b3',21,5],['Sick','#ef4444',15,2],['Study','#059669',30,10]] as $lb)
        <div class="mb-2">
          <div class="d-flex justify-content-between mb-1"><span style="font-size:.79rem;font-weight:600;"><span style="width:8px;height:8px;background:{{ $lb[1] }};border-radius:2px;display:inline-block;margin-right:5px;"></span>{{ $lb[0] }}</span><span style="font-size:.75rem;color:#64748b;">{{ $lb[3] }}/{{ $lb[2] }}</span></div>
          <div class="prog"><div class="prog-bar" style="width:{{ ($lb[3]/$lb[2])*100 }}%;background:{{ $lb[1] }};"></div></div>
        </div>
        @endforeach
      </div>
    </div>
    <div class="col-12 col-lg-8">
      <div class="card"><div class="card-header"><i class="bi bi-person me-2" style="color:var(--ul-navy);"></i>Personal Information</div>
      <div class="p-3"><div class="row g-3">
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Full Name</div><div class="fw-semibold mt-1">Wreh, John Kpan</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Employee No.</div><div class="fw-semibold mt-1">EMP-0001</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Date of Birth</div><div class="fw-semibold mt-1">May 12, 1968</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Date of Employment</div><div class="fw-semibold mt-1">January 1, 2002</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Citizenship</div><div class="fw-semibold mt-1">Liberian</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Marital Status</div><div class="fw-semibold mt-1">Married</div></div>
        <div class="col-12"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Present Address</div><div class="fw-semibold mt-1">Mamba Point, </div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Email</div><div class="fw-semibold mt-1">president@hrms.demo</div></div>
        <div class="col-6"><div style="font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Phone</div><div class="fw-semibold mt-1">+231 880 123 456</div></div>
      </div></div></div>
    </div>
  </div>
</div>

<!-- ─── ADD EMPLOYEE ──────────────────────────────────────── -->
<div id="screen-addEmployee" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('employees')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">Personnel Data Form</h5>
  </div>
  <div class="card"><div class="card-header">Personal Information</div>
  <div class="p-3"><div class="row g-3">
    <div class="col-6 col-md-4"><label class="form-label">Last Name *</label><input type="text" class="form-control form-control-sm" placeholder="e.g. Kollie"></div>
    <div class="col-6 col-md-4"><label class="form-label">First Name *</label><input type="text" class="form-control form-control-sm" placeholder="e.g. James"></div>
    <div class="col-6 col-md-4"><label class="form-label">Middle Name</label><input type="text" class="form-control form-control-sm"></div>
    <div class="col-12"><label class="form-label">Present Address</label><input type="text" class="form-control form-control-sm" placeholder="Street, Community, City, County"></div>
    <div class="col-6"><label class="form-label">Date of Birth</label><input type="date" class="form-control form-control-sm"></div>
    <div class="col-6"><label class="form-label">Place of Birth</label><input type="text" class="form-control form-control-sm"></div>
    <div class="col-6 col-md-4"><label class="form-label">Gender</label><select class="form-select form-select-sm"><option>Male</option><option>Female</option></select></div>
    <div class="col-6 col-md-4"><label class="form-label">Citizenship</label><input type="text" class="form-control form-control-sm" value="Liberian"></div>
    <div class="col-6 col-md-4"><label class="form-label">Marital Status</label><select class="form-select form-select-sm"><option>Single</option><option>Married</option><option>Divorced</option><option>Widowed</option></select></div>
    <div class="col-12"><div class="fw-bold mt-1 mb-1" style="font-size:.78rem;color:#374151;text-transform:uppercase;letter-spacing:.05em;">Employment Details</div></div>
    <div class="col-12 col-md-6"><label class="form-label">Position / Title *</label><input type="text" class="form-control form-control-sm"></div>
    <div class="col-12 col-md-6"><label class="form-label">Department *</label><select class="form-select form-select-sm"><option>HR Department</option><option>CST</option><option>Finance</option><option>IT Unit</option></select></div>
    <div class="col-6"><label class="form-label">Date of Employment *</label><input type="date" class="form-control form-control-sm"></div>
    <div class="col-6"><label class="form-label">Salary (USD)</label><input type="number" class="form-control form-control-sm" placeholder="0.00"></div>
    <div class="col-6"><label class="form-label">Email Address *</label><input type="email" class="form-control form-control-sm" placeholder="name@hrms.demo"></div>
    <div class="col-6"><label class="form-label">Employment Type</label><select class="form-select form-select-sm"><option>Full Time</option><option>Part Time</option><option>Contract</option></select></div>
    <div class="col-12 d-flex gap-2 mt-2">
      <button class="btn btn-primary btn-sm" onclick="alert('Employee record created! Login credentials sent to email.')"><i class="bi bi-person-plus me-1"></i>Create Employee</button>
      <button class="btn btn-outline-secondary btn-sm" onclick="showScreen('employees')">Cancel</button>
    </div>
  </div></div></div>
</div>

<!-- ─── NEW DISCIPLINE CASE ───────────────────────────────── -->
<div id="screen-newCase" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('discipline')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">New Discipline Case</h5>
  </div>
  <div class="card"><div class="card-header">Case Information</div>
  <div class="p-3"><div class="row g-3">
    <div class="col-12 col-md-6"><label class="form-label">Employee *</label><select class="form-select form-select-sm"><option>— Select —</option><option>Kollie, James K.</option><option>Flomo, Mary B.</option><option>Pewee, Thomas G.</option></select></div>
    <div class="col-12 col-md-6"><label class="form-label">Infraction Type *</label><select class="form-select form-select-sm"><option>Attendance</option><option>Insubordination</option><option>Misconduct</option><option>Policy Violation</option><option>Harassment</option><option>Other</option></select></div>
    <div class="col-6"><label class="form-label">Incident Date *</label><input type="date" class="form-control form-control-sm"></div>
    <div class="col-6"><label class="form-label">Location</label><input type="text" class="form-control form-control-sm" placeholder="e.g. Admin Building"></div>
    <div class="col-12"><label class="form-label">Description *</label><textarea class="form-control form-control-sm" rows="3" placeholder="Describe the incident in detail…"></textarea></div>
    <div class="col-12"><label class="form-label">Evidence / Supporting Documents</label><textarea class="form-control form-control-sm" rows="2" placeholder="List any witnesses, documents, or other evidence…"></textarea></div>
    <div class="col-6"><label class="form-label d-flex align-items-center gap-2"><input type="checkbox" class="form-check-input m-0"> Requires Hearing</label></div>
    <div class="col-12 d-flex gap-2">
      <button class="btn btn-primary btn-sm" onclick="alert('Discipline case DC-2025-0004 created and assigned to HR.')"><i class="bi bi-shield-exclamation me-1"></i>Create Case</button>
      <button class="btn btn-outline-secondary btn-sm" onclick="showScreen('discipline')">Cancel</button>
    </div>
  </div></div></div>
</div>

<!-- ─── EVAL DETAIL ───────────────────────────────────────── -->
<div id="screen-evalDetail" class="screen">
  <div class="d-flex align-items-center gap-2 mb-4">
    <button class="btn btn-sm btn-outline-secondary" onclick="showScreen('perfEval')"><i class="bi bi-arrow-left"></i></button>
    <h5 class="fw-black mb-0" style="color:var(--ul-navy);">PE-2024-0010 — Annual Evaluation 2024</h5>
    <span class="badge bg-success">Excellent</span>
  </div>
  <div class="row g-3">
    <div class="col-12 col-md-7">
      <div class="card mb-3"><div class="card-header">Evaluation Summary</div>
      <div class="p-3">
        <div class="text-center mb-3">
          <div style="font-size:3rem;font-weight:900;color:var(--ul-navy);">95%</div>
          <span class="badge bg-success fs-6">Excellent</span>
        </div>
        <div class="mb-2" style="font-size:.8rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Criteria Breakdown</div>
        @foreach([['Job Knowledge',19,20],['Quality of Work',20,20],['Productivity',18,20],['Attendance',10,10],['Teamwork',14,15],['Initiative',14,15],['Communication',9,10]] as $sc)
        <div class="mb-2">
          <div class="d-flex justify-content-between mb-1"><span style="font-size:.78rem;font-weight:600;">{{ $sc[0] }}</span><span style="font-size:.73rem;color:#64748b;">{{ $sc[1] }}/{{ $sc[2] }}</span></div>
          <div class="prog"><div class="prog-bar" style="width:{{ ($sc[1]/$sc[2])*100 }}%;background:{{ ($sc[1]/$sc[2])>=0.8?'#059669':(($sc[1]/$sc[2])>=0.6?'#f59e0b':'#ef4444') }};"></div></div>
        </div>
        @endforeach
      </div></div>
    </div>
    <div class="col-12 col-md-5">
      <div class="card"><div class="card-header">Evaluator Comments</div>
      <div class="p-3" style="font-size:.83rem;line-height:1.7;color:#374151;">
        <p>James consistently demonstrates exceptional professionalism and deep knowledge of HR processes. His contribution to staff welfare programs this year has been outstanding.</p>
        <div class="mt-2 fw-bold" style="font-size:.75rem;text-transform:uppercase;color:#94a3b8;">Development Goals</div>
        <p class="mt-1">Pursue certification in Strategic HR Management. Lead the onboarding process redesign initiative.</p>
        <div class="mt-2 fw-bold" style="font-size:.75rem;text-transform:uppercase;color:#94a3b8;">Training Recommended</div>
        <p class="mt-1">SHRM-CP Certification Program · Data Analytics for HR</p>
        <button class="btn btn-success btn-sm mt-2" onclick="alert('Evaluation acknowledged!')"><i class="bi bi-check2-circle me-1"></i>Acknowledge</button>
      </div></div>
    </div>
  </div>
</div>

</main>
</div><!-- end appShell -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// ── Navigation ─────────────────────────────────────────────
const screenTitles = {
  execDash:'Executive Dashboard',employees:'Employees',myProfile:'My Profile',
  leaveList:'Leave Management',leaveRequest:'Request Leave',leaveDetail:'Leave Detail',
  perfEval:'Performance Evaluation',newEval:'New Evaluation',evalDetail:'Evaluation Detail',
  discipline:'Discipline Management',newCase:'New Discipline Case',
  payroll:'Payroll',payslip:'Payslip',training:'Training & Development',
  attendance:'Attendance',addEmployee:'Add Employee',empDetail:'Employee Detail',
};

function showScreen(id) {
  document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
  const el = document.getElementById('screen-'+id);
  if (el) { el.classList.add('active'); window.scrollTo(0,0); }
  document.getElementById('topbarTitle').textContent = screenTitles[id] || id;
  // Update sidebar active state
  document.querySelectorAll('.nav-link-item').forEach(n=>{
    n.classList.remove('active');
    if (n.getAttribute('onclick') && n.getAttribute('onclick').includes(id)) n.classList.add('active');
  });
  closeSb();
  // Init charts if needed
  if (id==='execDash') setTimeout(initCharts, 100);
}

// ── App Launch ─────────────────────────────────────────────
function launchApp() {
  document.getElementById('landing').style.display = 'none';
  document.getElementById('appShell').style.display = 'block';
  document.body.style.background = '#f0f4f8';
  document.getElementById('sbBtn').style.display = 'flex';
  setTimeout(initCharts, 200);
}
function exitApp() {
  document.getElementById('appShell').style.display = 'none';
  document.getElementById('landing').style.display = 'block';
}
function scrollFeatures() { document.getElementById('features')?.scrollIntoView({behavior:'smooth'}); }

// ── Sidebar ────────────────────────────────────────────────
function toggleSb(){document.getElementById('sidebar').classList.toggle('open');document.getElementById('sbOverlay').classList.toggle('show');}
function closeSb(){document.getElementById('sidebar').classList.remove('open');document.getElementById('sbOverlay').classList.remove('show');}

// ── Role Switcher ──────────────────────────────────────────
function setRole(r) {
  ['president','hr','employee'].forEach(id=>{
    const btn = document.getElementById('role'+id.charAt(0).toUpperCase()+id.slice(1));
    btn.className = 'btn btn-sm btn-outline-secondary';
  });
  const active = document.getElementById('role'+r.charAt(0).toUpperCase()+r.slice(1));
  active.className = 'btn btn-sm btn-primary active-role';
  if(r==='president') { document.querySelector('.sb-av').textContent='JW'; document.querySelectorAll('.sb-name, .sb-sub')[0]&&(document.querySelector('.sb-name').textContent='President Wreh'); showScreen('execDash'); }
  else if(r==='hr')   { document.querySelector('.sb-av').textContent='SK'; showScreen('employees'); }
  else                { document.querySelector('.sb-av').textContent='JP'; showScreen('myProfile'); }
}

// ── Leave Calculator ───────────────────────────────────────
function calcDays() {
  const f=document.getElementById('dFrom')?.value, t=document.getElementById('dTo')?.value;
  if (!f||!t) return;
  const d1=new Date(f), d2=new Date(t); if(d2<d1) return;
  let days=0,cur=new Date(d1);
  while(cur<=d2){const d=cur.getDay();if(d&&d!==6)days++;cur.setDate(cur.getDate()+1);}
  const el=document.getElementById('daysInfo');
  if(el){el.innerHTML='<i class="bi bi-calendar-range me-1"></i>Duration: <strong>'+days+' working day(s)</strong>';el.classList.remove('d-none');}
}

// ── Leave type select ──────────────────────────────────────
function selectLT(el){document.querySelectorAll('.lt-card').forEach(c=>c.classList.remove('sel'));el.classList.add('sel');}

// ── Evaluation scoring ─────────────────────────────────────
const cMaxes=[20,20,20,10,15,15,10,15];
function updateEvalScore(el,i,max){
  document.getElementById('s'+i).textContent=el.value+'/'+max;
  let total=0,totalMax=0;
  cMaxes.forEach((m,idx)=>{const s=document.querySelector(`input.score-range:nth-of-type(${idx+1})`);total+=parseFloat(s?.value||0);totalMax+=m;});
  // simpler: recalc all
  let sum=0,smax=0;
  document.querySelectorAll('input.score-range').forEach((s,idx)=>{sum+=parseFloat(s.value);smax+=cMaxes[idx]||20;});
  const pct=smax>0?Math.round((sum/smax)*100):0;
  document.getElementById('evalPct').textContent=pct+'%';
  document.getElementById('evalScore').textContent='Score: '+pct+'%';
  let rating='Unsatisfactory',col='#ef4444';
  if(pct>=90){rating='Excellent';col='#059669';}
  else if(pct>=75){rating='Very Good';col='#0055b3';}
  else if(pct>=60){rating='Satisfactory';col='#06b6d4';}
  else if(pct>=45){rating='Needs Improvement';col='#f59e0b';}
  const rb=document.getElementById('evalRating');rb.textContent=rating;rb.style.background=col;
}

// ── Submissions ────────────────────────────────────────────
function submitLeave(){if(!document.getElementById('dFrom')?.value){alert('Please fill in all required fields.');return;}alert('Leave request LV-2025-0019 submitted successfully!\n\nApproval chain has been notified.');}
function submitEval(){alert('Performance evaluation PE-2024-0013 submitted!\n\nEmployee has been notified for acknowledgement.');}
function clockInOut(){const t=new Date().toLocaleTimeString();alert('Clock-in recorded at '+t+'\n\nHave a productive day!');}

// ── Charts ─────────────────────────────────────────────────
let chartsInit=false;
function initCharts(){
  if(chartsInit)return;chartsInit=true;
  try{
  new Chart(document.getElementById('leaveTrendChart'),{type:'bar',data:{labels:['Oct','Nov','Dec','Jan','Feb','Mar'],datasets:[{label:'Total',data:[35,42,28,55,38,47],backgroundColor:'rgba(0,51,102,.15)',borderColor:'#003366',borderWidth:2,borderRadius:6},{label:'Approved',data:[30,38,22,48,33,42],backgroundColor:'rgba(5,150,105,.12)',borderColor:'#059669',borderWidth:2,borderRadius:6}]},options:{responsive:true,plugins:{legend:{position:'top',labels:{font:{size:11}}}},scales:{y:{beginAtZero:true}}}});
  new Chart(document.getElementById('empTypeChart'),{type:'doughnut',data:{labels:['Full Time','Part Time','Contract','Temporary'],datasets:[{data:[210,40,24,10],backgroundColor:['#003366','#0055b3','#059669','#d97706'],borderWidth:0}]},options:{responsive:true,cutout:'72%',plugins:{legend:{position:'bottom',labels:{font:{size:11}}}}}});
  }catch(e){}
}

// Responsive sidebar button
function checkWidth(){
  const btn=document.getElementById('sbBtn');
  if(btn)btn.style.display=window.innerWidth<992?'flex':'none';
}
window.addEventListener('resize',checkWidth);checkWidth();
</script>
</body>
</html>
