<?php ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PWD Training Academy</title>

<!-- CSS & External Libraries (Only these should be in the head) -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div id="loading-screen">
  <div style="width:60px;height:60px;background:var(--primary);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px">
    <i class="fas fa-university text-white text-2xl"></i>
  </div>
  <div class="loader"></div>
  <div class="text-sm text-gray-500" data-i18n="loading">Loading Academy Data...</div>
</div>

<div id="toast" class="toast"></div>

<div id="lightbox" class="lightbox" onclick="closeLightbox()">
  <img id="lightbox-img" src="" style="max-width:90%;max-height:90%;border-radius:8px">
</div>

<div id="public-site">
  <header style="background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90">
    <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16">
      <div class="flex items-center gap-3 cursor-pointer" onclick="navigate('home')">
        <img src="logo.png" alt="PWDTA" style="height:45px;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3))">
      </div>
      <div class="flex items-center gap-2">
        <button onclick="toggleLanguage()" class="lang-switch-btn" id="lang-switch-btn" title="Switch Language">
          <i class="fas fa-language"></i><span id="lang-label">EN</span>
        </button>
        <button onclick="toggleTheme()" class="p-2 rounded-full hover:bg-gray-200 transition" style="background:none;border:1px solid var(--border)">
          <i id="theme-icon" class="fas fa-moon text-gray-600"></i>
        </button>
      </div>
      <nav class="hidden lg:flex items-center gap-1" id="main-nav">
        <a class="nav-link active" onclick="navigate('home')" data-page="home" data-i18n="nav_home">Home</a>
        <div class="dropdown">
          <a class="nav-link" data-page="about" data-i18n="nav_about">About <i class="fas fa-chevron-down ml-1" style="font-size:10px"></i></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" onclick="navigate('vision')"><i class="fas fa-eye"></i><span data-i18n="nav_vision">Vision & Mission</span></a>
            <a class="dropdown-item" onclick="navigate('management')"><i class="fas fa-users"></i><span data-i18n="nav_management">Management</span></a>
            <a class="dropdown-item" onclick="navigate('organogram')"><i class="fas fa-sitemap"></i><span data-i18n="nav_organogram">Organogram</span></a>
            <a class="dropdown-item" onclick="navigate('campus')"><i class="fas fa-school"></i><span data-i18n="nav_campus">Campus</span></a>
            <a class="dropdown-item" onclick="navigate('employees')"><i class="fas fa-user-tie"></i><span data-i18n="nav_employees">Employees</span></a>
          </div>
        </div>
        <div class="dropdown">
          <a class="nav-link" data-page="facilities" data-i18n="nav_facilities">Facilities <i class="fas fa-chevron-down ml-1" style="font-size:10px"></i></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" onclick="navigate('classroom')"><i class="fas fa-chalkboard-teacher"></i><span data-i18n="nav_classroom">Classroom</span></a>
            <a class="dropdown-item" onclick="navigate('computerlab')"><i class="fas fa-desktop"></i><span data-i18n="nav_computerlab">Computer Lab</span></a>
            <a class="dropdown-item" onclick="navigate('library')"><i class="fas fa-book-reader"></i><span data-i18n="nav_library">Library</span></a>
            <a class="dropdown-item" onclick="navigate('residential')"><i class="fas fa-bed"></i><span data-i18n="nav_residential">Residential</span></a>
            <a class="dropdown-item" onclick="navigate('playground')"><i class="fas fa-futbol"></i><span data-i18n="nav_playground">Playground</span></a>
            <a class="dropdown-item" onclick="navigate('gymnasium')"><i class="fas fa-dumbbell"></i><span data-i18n="nav_gymnasium">Gymnasium</span></a>
            <a class="dropdown-item" onclick="navigate('swimmingpool')"><i class="fas fa-swimmer"></i><span data-i18n="nav_swimmingpool">Swimming Pool</span></a>
            <a class="dropdown-item" onclick="navigate('testinglab')"><i class="fas fa-flask"></i><span data-i18n="nav_testinglab">Testing Laboratory</span></a>
          </div>
        </div>
        <div class="dropdown">
          <a class="nav-link" data-page="media" data-i18n="nav_media">Media <i class="fas fa-chevron-down ml-1" style="font-size:10px"></i></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" onclick="navigate('photogallery')"><i class="fas fa-image"></i><span data-i18n="nav_photos">Photos</span></a>
            <a class="dropdown-item" onclick="navigate('videogallery')"><i class="fas fa-video"></i><span data-i18n="nav_videos">Videos</span></a>
          </div>
        </div>
        <div class="dropdown">
          <a class="nav-link" data-page="testinglab" data-i18n="nav_lab">Lab <i class="fas fa-chevron-down ml-1" style="font-size:10px"></i></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" onclick="navigate('materialtest')"><i class="fas fa-flask"></i><span data-i18n="nav_materialtest">Material Test</span></a>
            <a class="dropdown-item" onclick="navigate('equipment')"><i class="fas fa-tools"></i><span data-i18n="nav_equipment">Equipment</span></a>
            <a class="dropdown-item" onclick="navigate('testingreport')"><i class="fas fa-file-alt"></i><span data-i18n="nav_reports">Reports</span></a>
          </div>
        </div>
        <a class="nav-link" onclick="navigate('trainings')" data-page="trainings" data-i18n="nav_trainings">Trainings</a>
        <a class="nav-link" onclick="navigate('testing')" data-page="testing" data-i18n="nav_testing">Testing</a>
        <a class="nav-link" onclick="navigate('notices')" data-page="notices" data-i18n="nav_notices">Notices</a>
        <a class="nav-link" onclick="navigate('contact')" data-page="contact" data-i18n="nav_contact">Contact</a>
        <a class="nav-link" onclick="navigate('verify')" data-page="verify" data-i18n="nav_verify">Verify</a>
      </nav>
      <div class="flex items-center gap-3">
        <button class="btn-primary btn-sm hidden sm:block" onclick="navigate('login')" id="header-login-btn" data-i18n="nav_login">Login</button>
        <button class="lg:hidden" style="background:none;border:none;cursor:pointer;color:var(--text);font-size:20px" onclick="toggleMobileNav()"><i class="fas fa-bars"></i></button>
      </div>
    </div>
    <div id="mobile-nav" class="lg:hidden hidden" style="background:var(--card);border-top:1px solid var(--border);padding:16px">
      <div class="flex flex-col gap-1">
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('home');toggleMobileNav()" data-i18n="mobile_home">Home</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('vision');toggleMobileNav()" data-i18n="mobile_about">About Us</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('classroom');toggleMobileNav()" data-i18n="mobile_facilities">Facilities</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('photogallery');toggleMobileNav()" data-i18n="mobile_media">Media</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('materialtest');toggleMobileNav()" data-i18n="mobile_lab">Testing Lab</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('trainings');toggleMobileNav()" data-i18n="mobile_trainings">Trainings</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('testing');toggleMobileNav()" data-i18n="mobile_testing">Testing</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('notices');toggleMobileNav()" data-i18n="mobile_notices">Notices</a>
        <a class="py-2 px-3 rounded-lg text-sm cursor-pointer hover:bg-gray-50" onclick="navigate('contact');toggleMobileNav()" data-i18n="mobile_contact">Contact</a>
        <button class="btn-primary btn-sm mt-2" onclick="navigate('login');toggleMobileNav()" data-i18n="mobile_login">Login</button>
      </div>
    </div>
    
  </header>

  <div class="notice-ticker" id="notice-ticker">
  <div class="max-w-7xl mx-auto px-4 flex items-center gap-4">
    <span style="background:var(--accent);color:#fff;padding:2px 10px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.05em" data-i18n="notice_label">NOTICE</span>
    <div style="overflow:hidden;flex:1">
      <div class="ticker-wrap" id="notice-ticker-wrap">
        <span class="ticker-item" data-i18n="notice_loading">Loading notices...</span>
      </div>
    </div>
  </div>
</div>

  <main id="page-content" class="max-w-7xl mx-auto px-4"></main>

  <footer style="background:var(--primary-dark);color:#fff;margin-top:60px">
    <div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div>
        <div class="flex items-center gap-3 mb-4">
          <div style="width:36px;height:36px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center"><i class="fas fa-graduation-cap text-white"></i></div>
          <div class="font-bold" data-i18n="footer_title">PWD Training Academy</div>
        </div>
        <p class="text-sm opacity-60 leading-relaxed" data-i18n="footer_desc">Premier training institution under Public Works Department.</p>
      </div>
      <div>
        <h4 class="font-bold mb-4 text-sm" data-i18n="footer_quick_links">Quick Links</h4>
        <div class="flex flex-col gap-2">
          <a class="text-sm opacity-60 hover:opacity-100 hover:text-cyan-400 cursor-pointer" onclick="navigate('home')" data-i18n="footer_home">Home</a>
          <a class="text-sm opacity-60 hover:opacity-100 hover:text-cyan-400 cursor-pointer" onclick="navigate('trainings')" data-i18n="footer_trainings">Trainings</a>
          <a class="text-sm opacity-60 hover:opacity-100 hover:text-cyan-400 cursor-pointer" onclick="navigate('testing')" data-i18n="footer_testing">Testing</a>
          <a class="text-sm opacity-60 hover:opacity-100 hover:text-cyan-400 cursor-pointer" onclick="navigate('notices')" data-i18n="footer_notices">Notices</a>
        </div>
      </div>
      <div>
        <h4 class="font-bold mb-4 text-sm" data-i18n="footer_contact">Contact</h4>
        <div class="flex flex-col gap-3 text-sm opacity-60">
          <div class="flex items-start gap-3"><i class="fas fa-map-marker-alt mt-1 text-cyan-400"></i><span data-i18n="footer_address">PWD, Sher-e-Bangla Nagar, Dhaka-1207</span></div>
          <div class="flex items-center gap-3"><i class="fas fa-phone text-cyan-400"></i><span data-i18n="footer_phone">+880-2-8181234</span></div>
          <div class="flex items-center gap-3"><i class="fas fa-envelope text-cyan-400"></i><span data-i18n="footer_email">info@pwd.training.gov.bd</span></div>
        </div>
      </div>
      <div>
        <h4 class="font-bold mb-4 text-sm" data-i18n="footer_connect">Connect</h4>
        <div class="flex gap-2">
          <a class="w-9 h-9 rounded-lg bg-white/10 flex items-center justify-center hover:bg-cyan-500 transition cursor-pointer"><i class="fab fa-facebook-f text-sm"></i></a>
          <a class="w-9 h-9 rounded-lg bg-white/10 flex items-center justify-center hover:bg-cyan-500 transition cursor-pointer"><i class="fab fa-youtube text-sm"></i></a>
        </div>
      </div>
    </div>
    <div style="border-top:1px solid rgba(255,255,255,.1)" class="max-w-7xl mx-auto px-4 py-4 text-center text-xs opacity-40" data-i18n="footer_copyright">&copy; 2026 PWD Training Academy. All rights reserved.</div>
  </footer>
</div>

<div id="admin-panel" style="display:none">
  <aside class="admin-sidebar" id="admin-sidebar">
    <div class="p-4 border-b border-gray-200">
      <div class="flex items-center gap-3">
        <div style="width:32px;height:32px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center"><i class="fas fa-shield-alt text-white text-sm"></i></div>
        <div><div class="font-bold text-sm" style="color:var(--primary)" data-i18n="admin_panel_title">Admin Panel</div><div class="text-xs text-gray-400" data-i18n="admin_panel_subtitle">PWD Training</div></div>
      </div>
    </div>
    <nav class="py-2">
      <div class="px-4 pb-1 text-xs text-gray-400 uppercase tracking-wider font-semibold" data-i18n="admin_main">Main</div>
      <div class="admin-nav-item active" onclick="adminNav('dashboard',this)"><i class="fas fa-tachometer-alt"></i><span data-i18n="admin_dashboard">Dashboard</span></div>
      <div class="px-4 pb-1 pt-3 text-xs text-gray-400 uppercase tracking-wider font-semibold" data-i18n="admin_management">Management</div>
      <div class="admin-nav-item" onclick="adminNav('admin-trainings',this)"><i class="fas fa-chalkboard-teacher"></i><span data-i18n="admin_trainings">Trainings</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-testings',this)"><i class="fas fa-flask"></i><span data-i18n="admin_testings">Testing</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-notices',this)"><i class="fas fa-bullhorn"></i><span data-i18n="admin_notices">Notices</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-officers',this)"><i class="fas fa-users"></i><span data-i18n="admin_management">Management</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-employees',this)"><i class="fas fa-id-card"></i><span data-i18n="admin_employees">Employees</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-trainees',this)"><i class="fas fa-user-graduate"></i><span data-i18n="admin_trainees">Trainees</span></div>
      <div class="px-4 pb-1 pt-3 text-xs text-gray-400 uppercase tracking-wider font-semibold" data-i18n="admin_resources">Resources</div>
      <div class="admin-nav-item" onclick="adminNav('admin-equipment',this)"><i class="fas fa-tools"></i><span data-i18n="admin_equipment">Equipment</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-gallery',this)"><i class="fas fa-image"></i><span data-i18n="admin_gallery">Gallery</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-videos',this)"><i class="fas fa-video"></i><span data-i18n="admin_videos">Videos</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-facilities',this)"><i class="fas fa-school"></i><span data-i18n="admin_facilities">Facilities</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-sliders',this)"><i class="fas fa-images"></i><span data-i18n="admin_sliders">Sliders</span></div>
      <div class="px-4 pb-1 pt-3 text-xs text-gray-400 uppercase tracking-wider font-semibold" data-i18n="admin_system">System</div>
      <div class="admin-nav-item" onclick="adminNav('admin-settings',this)"><i class="fas fa-cog"></i><span data-i18n="admin_settings">Settings</span></div>
      <div class="admin-nav-item" onclick="adminNav('admin-reports',this)"><i class="fas fa-chart-bar"></i><span data-i18n="admin_reports">Reports</span></div>
    </nav>
    <div class="p-4 mt-auto border-t border-gray-200">
      <div class="flex items-center gap-3 mb-3">
        <div class="w-8 h-8 rounded-lg bg-cyan-500 flex items-center justify-center text-xs font-bold text-white">A</div>
        <div><div class="text-sm font-medium" id="admin-user-name">Admin</div><div class="text-xs text-gray-400" data-i18n="admin_role">Super Admin</div></div>
      </div>
      <button class="w-full text-left text-xs text-red-500 hover:text-red-600 flex items-center gap-2 cursor-pointer" onclick="logoutAdmin()"><i class="fas fa-sign-out-alt"></i><span data-i18n="admin_logout">Logout</span></button>
      <button class="w-full text-left text-xs text-gray-400 hover:text-gray-600 flex items-center gap-2 cursor-pointer mt-1" onclick="goToPublic()"><i class="fas fa-external-link-alt"></i><span data-i18n="admin_view_site">View Site</span></button>
    </div>
  </aside>
  <div class="admin-main">
    <header class="bg-white px-6 py-3 flex items-center justify-between sticky top-0 z-40" style="border-bottom:1px solid var(--border)">
      <div class="flex items-center gap-4">
        <button class="md:hidden" style="background:none;border:none;cursor:pointer;color:var(--text);font-size:18px" onclick="document.getElementById('admin-sidebar').classList.toggle('open')"><i class="fas fa-bars"></i></button>
        <h2 class="text-base font-semibold" id="admin-page-title">Dashboard</h2>
      </div>
      <div class="flex items-center gap-3">
        <button onclick="toggleLanguage()" class="lang-switch-btn" title="Switch Language"><i class="fas fa-language"></i><span id="admin-lang-label">EN</span></button>
        <button onclick="toggleTheme()" class="p-2 rounded-full hover:bg-gray-200 transition" style="background:none;border:1px solid var(--border)"><i class="fas fa-moon text-gray-600"></i></button>
        <span class="text-xs text-gray-400"><i class="far fa-clock mr-1"></i><span id="admin-time"></span></span>
      </div>
    </header>
    <div id="admin-content" class="p-6"></div>
  </div>
</div>

<div id="modal-overlay" class="modal-overlay" onclick="if(event.target===this)closeModal()">
  <div class="modal-content" id="modal-content"></div>
</div>

<!-- ========================================== -->
<!-- JAVASCRIPT FILES (Order is Crucial) -->
<!-- ========================================== -->

<!-- 1. Translations FIRST (Defines currentLang, t(), applyTranslations) -->
<script src="assets/js/translations.js"></script>

<!-- 2. App core SECOND (API, Data, Navigation, Init() depends on translations) -->
<script src="assets/js/app.js"></script>

<!-- 3. Admin module LAST (Depends on app.js variables and API) -->
<script src="admin/admin.js"></script>

</body>
</html>