@extends('layoutstudent.layouts')
@section('title', 'Training Record')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<style>
    body {
      background-color: #f9fdff;
      /* font-family: Arial, sans-serif; */
    }
    .container-box {
      background: #fff;
      border-radius: 10px;
      padding: 30px;
      margin: 50px auto;
      max-width: 900px;
      box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    }
    .table th, .table td {
      vertical-align: middle;
    }
    .status-green {
      color: green;
      font-weight: bold;
    }
    .status-blue {
      color: #00b0ff;
      font-weight: bold;
    }
    .status-gray {
      color: gray;
      font-weight: bold;
    }
  </style>

<div class="container-box">
  <h4 class="text-center fw-bold mb-4">Training record</h4>

  <div class="d-flex justify-content-end mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button">Filter</button>
  </div>

  <table class="table table-bordered">
    <thead class="table-light">
      <tr>
        <th>ชื่อหมวดหมู่</th>
        <th>ชื่อคอร์ส</th>
        <th>ลงทะเบียนเมื่อ</th>
        <th>เข้าเรียนล่าสุด</th>
        <th>สถานะการเรียน</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-primary">เทคโนโลยี</td>
        <td>การใช้ Data</td>
        <td>27/08/2568</td>
        <td>27/08/2568</td>
        <td class="status-green">100%</td>
      </tr>
      <tr>
        <td class="text-primary">การตลาด</td>
        <td>Marketting Online</td>
        <td>27/08/2568</td>
        <td>27/08/2568</td>
        <td class="status-blue">80%</td>
      </tr>
      <tr>
        <td class="text-primary">การบัญชี</td>
        <td>การคำนวณรายรับ รายจ่าย</td>
        <td>27/08/2568</td>
        <td>27/08/2568</td>
        <td class="status-blue">20%</td>
      </tr>
      <tr>
        <td class="text-primary">คู่มือการใช้งาน</td>
        <td>คู่มือการใช้งานระบบ</td>
        <td>27/08/2568</td>
        <td>27/08/2568</td>
        <td class="status-gray">0%</td>
      </tr>
      <tr>
        <td class="text-primary">Canva</td>
        <td>วิธีใช้งาน Canva เบื้องต้น</td>
        <td>27/08/2568</td>
        <td>27/08/2568</td>
        <td class="status-gray">0%</td>
      </tr>
    </tbody>
  </table>
</div>

@endsection