<?php
$page_title = 'Training & Learning';
require_once __DIR__ . '/header.php';
?>

<div class="grid-2">
  <!-- My Training Courses -->
  <div class="card">
    <h3 style="margin:0 0 20px;">My Training Courses</h3>
    <ul style="list-style:none;padding:0;margin:0;">
      <li style="padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #f1f5f9;display:flex;gap:16px;">
        <div style="width:100px;height:70px;background:#e2e8f0;border-radius:8px;overflow:hidden;flex-shrink:0;">
          <img src="<?= SITE_URL ?>/assets/images/about_factory.png" style="width:100%;height:100%;object-fit:cover;" alt="Safety">
        </div>
        <div style="flex:1;">
          <h4 style="margin:0 0 6px;color:#0f172a;">Workplace Safety</h4>
          <span style="background:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:600;margin-bottom:8px;display:inline-block;">Mandatory Course</span>
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
            <span style="font-size:0.8rem;color:#64748b;">Progress</span>
            <span style="font-size:0.8rem;color:#0f172a;font-weight:600;">75%</span>
          </div>
          <div style="width:100%;background:#e2e8f0;height:6px;border-radius:3px;overflow:hidden;">
            <div style="width:75%;background:#2563eb;height:100%;"></div>
          </div>
        </div>
      </li>

      <li style="padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #f1f5f9;display:flex;gap:16px;">
        <div style="width:100px;height:70px;background:#e2e8f0;border-radius:8px;overflow:hidden;flex-shrink:0;">
          <img src="<?= SITE_URL ?>/assets/images/hero_sink.png" style="width:100%;height:100%;object-fit:cover;" alt="Quality">
        </div>
        <div style="flex:1;">
          <h4 style="margin:0 0 6px;color:#0f172a;">Quality Management</h4>
          <span style="background:#e0f2fe;color:#0ea5e9;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:600;margin-bottom:8px;display:inline-block;">Technical Course</span>
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
            <span style="font-size:0.8rem;color:#64748b;">Progress</span>
            <span style="font-size:0.8rem;color:#0f172a;font-weight:600;">50%</span>
          </div>
          <div style="width:100%;background:#e2e8f0;height:6px;border-radius:3px;overflow:hidden;">
            <div style="width:50%;background:#2563eb;height:100%;"></div>
          </div>
        </div>
      </li>

      <li style="padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #f1f5f9;display:flex;gap:16px;">
        <div style="width:100px;height:70px;background:#e2e8f0;border-radius:8px;overflow:hidden;flex-shrink:0;">
          <img src="<?= SITE_URL ?>/assets/images/about_factory.png" style="width:100%;height:100%;object-fit:cover;" alt="Machine">
        </div>
        <div style="flex:1;">
          <h4 style="margin:0 0 6px;color:#0f172a;">Machine Handling</h4>
          <span style="background:#e0f2fe;color:#0ea5e9;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:600;margin-bottom:8px;display:inline-block;">Technical Course</span>
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
            <span style="font-size:0.8rem;color:#64748b;">Progress</span>
            <span style="font-size:0.8rem;color:#0f172a;font-weight:600;">25%</span>
          </div>
          <div style="width:100%;background:#e2e8f0;height:6px;border-radius:3px;overflow:hidden;">
            <div style="width:25%;background:#2563eb;height:100%;"></div>
          </div>
        </div>
      </li>

      <li style="display:flex;gap:16px;">
        <div style="width:100px;height:70px;background:#e2e8f0;border-radius:8px;overflow:hidden;flex-shrink:0;">
          <img src="<?= SITE_URL ?>/assets/images/about_factory.png" style="width:100%;height:100%;object-fit:cover;" alt="Fire">
        </div>
        <div style="flex:1;">
          <h4 style="margin:0 0 6px;color:#0f172a;">Fire Safety</h4>
          <span style="background:#dcfce7;color:#16a34a;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:600;margin-bottom:8px;display:inline-block;">Completed</span>
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
            <span style="font-size:0.8rem;color:#64748b;">Progress</span>
            <span style="font-size:0.8rem;color:#16a34a;font-weight:600;">100%</span>
          </div>
          <div style="width:100%;background:#e2e8f0;height:6px;border-radius:3px;overflow:hidden;">
            <div style="width:100%;background:#16a34a;height:100%;"></div>
          </div>
          <div style="margin-top:10px;">
            <button style="padding:6px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:4px;font-size:0.8rem;cursor:pointer;color:#0f172a;"><i class="fas fa-download"></i> Download Certificate</button>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <!-- Course Actions -->
  <div style="display:flex;flex-direction:column;gap:24px;">
    <div class="card" style="text-align:center;padding:40px 20px;">
      <i class="fas fa-play-circle" style="font-size:3rem;color:#2557d6;margin-bottom:16px;"></i>
      <h3 style="margin:0 0 8px;">Video Courses</h3>
      <p style="color:#64748b;font-size:0.9rem;margin-bottom:20px;">Watch detailed training videos specifically designed for your department.</p>
      <button style="padding:10px 20px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Browse Library</button>
    </div>

    <div class="card" style="text-align:center;padding:40px 20px;">
      <i class="fas fa-question-circle" style="font-size:3rem;color:#d97706;margin-bottom:16px;"></i>
      <h3 style="margin:0 0 8px;">Assessments & Quizzes</h3>
      <p style="color:#64748b;font-size:0.9rem;margin-bottom:20px;">Test your knowledge and get certified.</p>
      <button style="padding:10px 20px;background:#f59e0b;color:#fff;border:none;border-radius:6px;cursor:pointer;">Take a Quiz</button>
    </div>
  </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
