@extends('layouts/contentNavbarLayout')

@section('title', 'KPI Achievement - Type 6')

@section('content')
<br>
<div class="container my-4">
  <div class="card">
    <div class="card-header">
      <h4 class="mb-0">Achievement Details (Type 6)</h4>
    </div>

    <div class="card-body">
      <table class="table table-bordered">
        <tbody>
          <tr><th class="w-50 fw-bold">Year :</th><td>2025</td></tr>
          <tr><th class="fw-bold">Quarter :</th><td>2</td></tr>
          <tr><th class="fw-bold">Division :</th><td>EXPORT PROMOTION & MARKET ACCESS DIVISION</td></tr>
          <tr><th class="fw-bold">Section :</th><td>EUROPE & AMERICAS SECTION</td></tr>
          <tr><th class="fw-bold">Unit/Office :</th><td>N/A</td></tr>
          <tr><th class="fw-bold">Indicator :</th><td>Success Stories</td></tr>
          <tr><th class="fw-bold">Indicator Type :</th><td>Type 6</td></tr>
          <tr><th class="fw-bold">Annual Target :</th><td>2</td></tr>
          <tr><th class="fw-bold">Metric :</th><td>Story</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></td></tr>
        </tbody>
      </table>

      <br><br>

      <div class="table-responsive">
  <table class="table table-bordered table-sm text-nowrap">
    <thead>
      <tr>
        <th><input type="checkbox" id="checkAllType6"></th>
        <th>No.</th>
        <th>Year</th>
        <th>Quarter</th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Type</span>
            <input type="radio" name="type6_radio" value="type">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Activity Name</span>
            <input type="radio" name="type6_radio" value="activity">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Officer Incharge</span>
            <input type="radio" name="type6_radio" value="officer">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Actual Sales (MYR)</span>
            <input type="radio" name="type6_radio" value="actual_sales">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>24 Months (MYR)</span>
            <input type="radio" name="type6_radio" value="24months">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Actual + Total Realised Sales</span>
            <input type="radio" name="type6_radio" value="actual_realised">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Generated Sales (RM)</span>
            <input type="radio" name="type6_radio" value="generated_sales">
          </label>
        </th>
        <th>
          <label style="display: flex; align-items: center; gap: 8px;">
            <span>Total Realised (cumulative)</span>
            <input type="radio" name="type6_radio" value="total_realised">
          </label>
        </th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="rowCheckboxType6"></td>
        <td>1</td>
        <td>2025</td>
        <td>Q2</td>
        <td><input type="text" class="form-control" value="SG"style="background-color: #e0f0ff; border: 
        1px solid #66afe9; display: flex; align-items: center; gap: 8px;">
        </td>
        <td><input type="text" class="form-control" value="0.00" style="background-color: #e0f0ff; border: 
        1px solid #66afe9; display: flex; align-items: center; gap: 8px;">
        </td>
        <td>
          <input type="text" class="form-control" value="0.00" style="background-color: #e0f0ff; border: 
          1px solid #66afe9; display: flex; align-items: center; gap: 8px;">
        </td>
        <td><input type="text" class="form-control"></td>
        <td><input type="text" class="form-control"></td>
        <td><input type="text" class="form-control"></td>
        <td><input type="text" class="form-control"></td>
        <td><input type="text" class="form-control"></td>
        <td>
            <input type="file" name="supporting_doc[]" style="display: none;" class="fileInputType4">
                <div class="d-flex flex-column mt-2 gap-2">
                  <button class="btn btn-danger btn-sm resetBtnType4" style="display: none;">Reset</button>
                  <button class="btn btn-danger btn-sm deleteBtnType4" style="display: none;">Delete</button>
                </div>
              </td>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>


      <div class="d-flex justify-content-end mt-2">
        <button type="button" class="btn btn-info btn-sm" id="addRowBtn">+ Add Row</button>
      </div>
    </div>

    <div class="card-footer d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-primary ms-2" id="saveBtn">Save</button>
      <a href="{{ url()->previous() }}" class="btn btn-secondary">Back</a>
    </div>
  </div>
</div>
@endsection