@extends('layouts/contentNavbarLayout')

@section('title', 'KPI Achievement')

@section('content')
<br>
<div class="container my-4">

  <div class="card">
    <div class="card-header">
      <h4 class="mb-0">Achievement Details (Type 1)</h4>
    </div>

    <div class="card-body">

      <!-- KPI Details -->
      <table class="table table-bordered mt-4">
        <tbody>
          <tr>
            <th class="fw-bold">Indicator :</th>
            <td>No. of Trade Enquiries</td>
          </tr>
          <tr>
            <th class="fw-bold">Submission :</th>
            <td>As per quarterly</td>
          </tr>
          <tr>
            <th class="fw-bold">Annual Target :</th>
            <td>50</td>
          </tr>
          <tr>
            <th class="fw-bold">Metric :</th>
            <td>Enquiries</td>
          </tr>
          <tr>
            <th class="fw-bold">Achievement Count :</th>
            <td>100</td>
          </tr>
          <tr>
            <th class="fw-bold">Remarks by PMU Admin :</th>
            <td>
              <input type="text" class="form-control mb-2" placeholder="Enter your remark...">
              <button type="button" class="btn btn-info btn-sm">+ Add Remark</button>
            </td>
          </tr>
        </tbody>
      </table>

      <br>

      <!-- History Button -->
      <div class="d-flex justify-content-end mb-2">
        <button type="button" class="btn btn-outline-secondary">
          <i class="bx bx-history"></i> History
        </button>
      </div>

      <!-- Achievement Summary Update -->
      <h6 class="mb-3"><strong>ACHIEVEMENT SUMMARY UPDATE</strong></h6>
      <table class="table table-bordered">
        <thead class="table-light">
          <tr>
            <th>Staff Name</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Nor Bazira Mohd Rosdi</td>
            <td>2023-09-25 10:28:37</td>
          </tr>
          <tr>
            <td>Nor Bazira Mohd Rosdi</td>
            <td>2023-09-29 12:16:52</td>
          </tr>
        </tbody>
      </table>

      <!-- Sub Component Section -->
      <div class="mt-4">
        <h6><strong>SUB COMPONENT</strong></h6>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sub_component" id="companies" value="companies">
          <label class="form-check-label" for="companies">No. of companies assisted</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sub_component" id="programmes" value="programmes">
          <label class="form-check-label" for="programmes">No. of programmes</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sub_component" id="sales" value="sales">
          <label class="form-check-label" for="sales">No. of export sales</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sub_component" id="none" value="none">
          <label class="form-check-label" for="none">None</label>
        </div>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div class="card-footer d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-primary">Accept</button>
      <button type="button" class="btn btn-danger">Reject</button>
      <a href="{{ url()->previous() }}" class="btn btn-secondary">Back</a>
    </div>
  </div>
</div>
@endsection