<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Staff Management Dashboard | Hospital</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root {
    --primary:#006400;
    --primary-light:#2a9d8f;
    --accent:#ff6b6b;
    --accent2:#f0a500;
    --bg:#f5f7fa;
    --card:#fff;
    --border:#d0d8e4;
    --text:#222;
}
body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);}
.page-wrapper{margin:0 auto;padding:24px;max-width:1400px;}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.page-title{font-size:28px;font-weight:700;color:var(--primary);}
.header-right a{padding:10px 18px;border-radius:8px;font-weight:700;color:#fff;text-decoration:none;transition:0.3s;}
.header-right a.system{background:#e63946;}
.header-right a:hover{opacity:0.85;}
.widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;}
.widget-card{background:linear-gradient(135deg,#2a9d8f,#006400);padding:20px;border-radius:12px;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,0.1);}
.widget-card h3{margin:0;font-size:16px;font-weight:600;}
.widget-card p{margin:6px 0 0;font-size:20px;font-weight:700;}
.widget-sub{font-size:14px;font-weight:500;margin-top:4px;}
.shortcuts{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.shortcut{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#ff6b6b,#f0a500);color:#fff;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700;transition:0.3s;cursor:pointer;}
.shortcut:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.tab-nav{display:flex;gap:10px;margin-bottom:16px;border-bottom:2px solid var(--border);}
.tab-btn{padding:10px 16px;border-radius:8px 8px 0 0;background:#f0f0f0;cursor:pointer;font-weight:700;transition:0.2s;}
.tab-btn.active{background:linear-gradient(135deg,#2a9d8f,#006400);color:#fff;}
.tab-content{display:none;background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.06);min-height:500px;}
.tab-content.active{display:block;}
iframe.content-frame{width:100%;height:600px;border:none;border-radius:12px;}
</style>
</head>
<body>
<div class="page-wrapper">

<!-- Header -->
<div class="header">
<h1 class="page-title"><i class="fa-solid fa-users"></i> Staff Management Dashboard</h1>
<div class="header-right">
<a href="../system_setup/system_setup.php" class="system"><i class="fa-solid fa-gear"></i> System Setup</a>
</div>
</div>

<!-- Summary Widgets -->
<div class="widgets">
<div class="widget-card">
<h3>Total Staff</h3>
<p>45</p>
<div class="widget-sub">Male: 28 | Female: 17</div>
</div>
<div class="widget-card">
<h3>Total Doctors</h3>
<p>18</p>
<div class="widget-sub">Male: 12 | Female: 6</div>
</div>
<div class="widget-card">
<h3>Departments</h3>
<p>6</p>
</div>
<div class="widget-card">
<h3>Active Staff</h3>
<p>42</p>
</div>
</div>

<!-- Shortcuts -->
<div class="shortcuts">
<div class="shortcut" data-file="add_staff.php"><i class="fa-solid fa-user-plus"></i> Add / Edit Staff</div>
<div class="shortcut" data-file="manage_departments.php"><i class="fa-solid fa-building"></i> Departments</div>
<div class="shortcut" data-file="manage_roles.php"><i class="fa-solid fa-user-shield"></i> Roles</div>
<div class="shortcut" data-file="manage_specializations.php"><i class="fa-solid fa-stethoscope"></i> Specializations</div>
<div class="shortcut" data-file="managePassword.php"><i class="fa-solid fa-key"></i> Manage Password</div>
<div class="shortcut" data-file="report.php"><i class="fa-solid fa-file-alt"></i> Report</div>
</div>

<!-- Tabs -->
<div class="tab-nav">
<div class="tab-btn active" data-file="add_staff.php">Staff Form</div>
<div class="tab-btn" data-file="manage_departments.php">Departments</div>
<div class="tab-btn" data-file="manage_roles.php">Roles</div>
<div class="tab-btn" data-file="manage_specializations.php">Specializations</div>
</div>

<!-- Tab Content -->
<div class="tab-content active">
<iframe src="add_staff.php" class="content-frame" id="dashboardFrame"></iframe>
</div>

</div>

<script>
// Load selected file into iframe
const tabs = document.querySelectorAll('.tab-btn, .shortcut');
const iframe = document.getElementById('dashboardFrame');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        const file = tab.dataset.file;
        if(file){
            iframe.src = file;
        }
        // Tab active state for nav buttons only
        if(tab.classList.contains('tab-btn')){
            document.querySelectorAll('.tab-btn').forEach(t=>t.classList.remove('active'));
            tab.classList.add('active');
        }
    });
});
</script>

</body>
</html>
