@extends('layouts/contentNavbarLayout')

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

@section('content')
<br>
<div class="container my-4">
  <div class="card">
    <div class="card-header">
      <h4 class="mb-0">Achievement Details (Type 3)</h4>
    </div>
    <div class="card-body">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <th class="w-50 fw-bold">Indicator :</th>
            <td>Companies Assisted</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">Template :</th>
            <td>
              Strategic-Coordination(6)_2025<br>
              <button class="btn btn-success btn-sm mt-2" id="downloadBtn">Download</button>
            </td>
          </tr>
          <tr>
            <th class="fw-bold">Remarks by PMU Admin :</th>
            <td></td>
          </tr>
        </tbody>
      </table>
      <br>

      <!-- File Upload Section -->
      <div class="mt-4">
        <h5>Upload Template File</h5>
        <table class="table">
          <thead>
            <tr>
              <th>No</th>
              <th>File/Attachment</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="fileTableBody">
            <tr>
              <td>1</td>
              <td id="fileName">No file uploaded</td>
              <td>
                <input type="file" id="fileInput" style="display: none;">
                <button class="btn btn-primary btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                  Upload
                </button>


                <!-- Modal -->
                <div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="addDocumentModalLabel">Add Document</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <label>Title:</label>
                        <input type="text" class="form-control mb-2" id="docTitle">
                        <label>Attach Document:</label>
                        <input type="file" class="form-control" id="docFile">
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-primary" id="saveDocBtn">Save</button>
                      </div>
                    </div>
                  </div>
                </div>


                <button class="btn btn-danger btn-sm mt-2" id="deleteBtn" style="display: none;">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Responsive Table Section -->
      <div class="container-fluid my-4">
        <div class="table-responsive">
          <table class="table table-bordered table-sm text-nowrap">
            <thead>
              <tr>
                <th><input type="checkbox" id="checkAll"></th>
                <th>No.</th>
                <th>Year</th>
                <th>Quarter</th>
                <th>Programme <input type="radio" name="programme" value="1"></th>
                <th>Name of Importer <input type="radio" name="programme" value="2"></th>
                <th>Name of Malaysian Exporter <input type="radio" name="programme" value="3"></th>
                <th>Product/Service <input type="radio" name="programme" value="4"></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>
                <td>1</td>
                <td>2022</td>
                <td>2</td>
                <td>Mentor Program</td>
                <td>ABC Sdn Bhd</td>
                <td>ABC123-Z</td>
                <td>Mentor Program</td>
              </tr>
            </tbody>
          </table>
        </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