<script src="{{ asset('js/kpiAchievement.js') }}"></script>

<!-- SweetAlert2 CDN --> 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 


<!-- Bootstrap Bundle with Popper.js (for modal functionality) --> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 

<!-- Feather Icons -->
<script src="https://unpkg.com/feather-icons"></script> 

<script>
    feather.replace(); // untuk aktifkan feather icons
</script>

<!-- Updated Tab Content -->

    <form id="formAccountSettings" method="POST" onsubmit="return false">
      <div class="row g-6">
        <h5>MANAGE ACHIEVEMENT</h5>

        <div class="col-md-4">
          <label class="form-label" for="division">Division</label>
          <select id="division" class="select2 form-select">
            <option value="">Please select</option>
            <option value="division1">CEO's Office</option>
            <option value="division2">Export Promotion & Market Access</option>
            <option value="division3">Management Services</option>
            <option value="division4">Strategic Planning</option>
            <option value="division5">Transformation and Digital Trade Division</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="section">Section</label>
          <select id="section" class="select2 form-select">
            <option value="">Please select</option>
            <option value="section1">ASEAN & Oceania</option>
            <option value="section2">Central, West, South Asia & Africa Section</option>
            <option value="section3">China & Northeast Asia</option>
            <option value="section4">Construction & Business Services</option>
            <option value="section5">Coordination & Monitoring</option>
            <option value="section6">Corporate Management</option>
            <option value="section7">Customised Programme</option>
            <option value="section8">Development Assistance</option>
            <option value="section9">Digital Trade</option>
            <option value="section10">Electrical & Electronics, ICT, Machinery & Equipment</option>
            <option value="section11">Europe & Americas</option>
            <option value="section12">Export Academy</option>
            <option value="section13">Facility Management</option>
            <option value="section14">Finance Management</option>
            <option value="section15">Halal, Food & Beverages & Agro-based</option>
            <option value="section16">Human Resource</option>
            <option value="section17">Information Technology</option>
            <option value="section18">Lifestyle & Life Sciences</option>
            <option value="section19">N/A</option>
            <option value="section20">Oil & Gas, Chemical & Energy</option>
            <option value="section21">Research</option>
            <option value="section22">Strategic Communication</option>
            <option value="section23">Strategic Development</option>
            <option value="section24">Transport & Logistic</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="unit_office">Unit/Office</label>
          <select id="unit_office" class="select2 form-select">
            <option value="">Please select</option>
            <option value="unit1">Account</option>
            <option value="unit2">Administration</option>
            <option value="unit3">Application System Management Unit</option>
            <option value="unit4">Asset Management</option>
            <option value="unit5">Business Information Centre (BIC)</option>
            <option value="unit6">Competency & Talent Development</option>
            <option value="unit7">Corporate Communication</option>
            <option value="unit8">Digital Services</option>
            <option value="unit9">eCommerce Ecosystem</option>
            <option value="unit10">Exporters Advisory & Training (EATU)</option>
            <option value="unit11">Facility Management</option>
            <option value="unit12">Finance</option>
            <option value="unit13">Human Resource Management</option>
            <option value="unit14">ICT Operation & Support</option>
            <option value="unit15">Integrity</option>
            <option value="unit16">Internal Audit</option>
            <option value="unit19">International Collaboration</option>
            <option value="unit20">Johor</option>
            <option value="unit21">Market Development</option>
            <option value="unit22">Micro, Small and Medium Enterprises (MSME)</option>
            <option value="unit23">Mid Tier</option>
            <option value="unit24">MO - BUDAPEST</option>
            <option value="unit25">MO - BUENOS AIRES</option>
            <option value="unit26">MO - DOHA</option>
            <option value="unit27">MO - HANOI</option>
            <option value="unit28">MO - KARACHI</option>
            <option value="unit29">MO - KIEV</option>
            <option value="unit30">MO - MEDAN</option>
            <option value="unit31">MO - NAIROBI</option>
            <option value="unit32">MO - OSAKA</option>
            <option value="unit33">MO - PHNOM PENH</option>
            <option value="unit34">MO - TASHKENT</option>
            <option value="unit35">MyTRADE Digital</option>
            <option value="unit36">N/A</option>
            <option value="unit37">Network & ICT Security Unit</option>
            <option value="unit38">Organisational Planning & Transformation</option>
            <option value="unit39">Penang</option>
            <option value="unit40">Perfomance Monitoring</option>
            <option value="unit41">Procurement</option>
            <option value="unit42">Revenue Generation</option>
            <option value="unit43">Sabah</option>
            <option value="unit44">Sarawak</option>
            <option value="unit45">Strategic Coordination</option>
            <option value="unit46">Strategic Development</option>
            <option value="unit47">TC - ALMATY</option>
            <option value="unit48">TC - BANGKOK</option>
            <option value="unit49">TC - BEIJING</option>
            <option value="unit50">TC - CAIRO</option>
            <option value="unit51">TC - CHENGDU</option>
            <option value="unit52">TC - CHENNAI</option>
            <option value="unit53">TC - DUBAI</option>
            <option value="unit54">TC - FRANKFURT</option>
            <option value="unit55">TC - GUANGZHOU</option>
            <option value="unit56">TC - HO CHI MINH CITY</option>
            <option value="unit57">TC - HONG KONG</option>
            <option value="unit58">TC - ISTANBUL</option>
            <option value="unit59">TC - JAKARTA</option>
            <option value="unit60">TC - JEDDAH</option>
            <option value="unit61">TC - JOHANNESBURG</option>
            <option value="unit62">TC - LAGOS</option>
            <option value="unit63">TC - LONDON</option>
            <option value="unit64">TC - LOS ANGELES</option>
            <option value="unit65">TC - MANILA</option>
            <option value="unit66">TC - MELBOURNE</option>
            <option value="unit67">TC - MEXICO CITY</option>
            <option value="unit68">TC - MIAMI</option>
            <option value="unit69">TC - MILAN</option>
            <option value="unit70">TC - MOSCOW</option>
            <option value="unit71">TC - MUMBAI</option>
            <option value="unit72">TC - NEW YORK</option>
            <option value="unit73">TC - PARIS</option>
            <option value="unit74">TC - ROTTERDAM</option>
            <option value="unit75">TC - SANTIAGO</option>
            <option value="unit76">TC - SAO PAULO</option>
            <option value="unit77">TC - SEOUL</option>
            <option value="unit78">TC - SHANGHAI</option>
            <option value="unit79">TC - SINGAPORE</option>
            <option value="unit80">TC - TAIPEI</option>
            <option value="unit81">TC - TOKYO</option>
            <option value="unit82">TC - WARSAW</option>
            <option value="unit83">TC - YANGON</option>
            <option value="unit84">Terengganu</option>
            <option value="unit85">Trade Ananlysis</option>
            <option value="unit86">Trade Publication</option>
            <option value="unit87">Trade Statistic</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="year">Year</label>
          <select id="year" class="select2 form-select">
            <option value="">Please select</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="quarter_month_group">Quarter/Month Group</label>
          <select id="quarter_month_group" class="select2 form-select">
            <option value="">Please select</option>
            <option value="Q1">Q1</option>
            <option value="Q2">Q2</option>
            <option value="Q3">Q3</option>
            <option value="Q4">Q4</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="indicator_type">Indicator Type</label>
          <select id="indicator_type" class="select2 form-select">
            <option value="">Please select</option>
            <option value="type1">Type 1</option>
            <option value="type2">Type 2</option>
            <option value="type3">Type 3</option>
            <option value="type4">Type 4</option>
            <option value="type5">Type 5</option>
            <option value="type6">Type 6</option>
          </select>
        </div>

        <div class="col-md-4">
          <label class="form-label" for="category">Category</label>
          <select id="category" class="select2 form-select">
            <option value="">Please select</option>
            <option value="category1">Customer</option>
            <option value="category2">Finance</option>
            <option value="category3">People</option>
            <option value="category4">Process</option>
          </select>
        </div>

        <div class="col-md-4">
          <label for="indicator" class="form-label">Indicator</label>
          <input class="form-control" type="text" id="indicator" name="indicator" value="" autofocus />
        </div>

        <div class="col-md-4">
          <label for="achievement" class="form-label">Achievement</label>
          <input class="form-control" type="text" id="achievement" name="achievement" value="" autofocus />
        </div>

        <div class="col-md-4">
          <label class="form-label" for="status">Status</label>
          <select id="status" class="select2 form-select">
            <option value="">Draft</option>
            <option value="Published">Published</option>
          </select>
        </div>
      </div>

      <div class="mt-6 d-flex justify-content-end">
        <button type="submit" class="btn btn-primary me-3">Search</button>
        <button type="reset" class="btn btn-outline-secondary">Reset</button>
      </div>
    </form>

    <br>

    <div class="d-flex justify-content-end align-items-center gap-2 mb-3">
      <a href="/export/print" class="btn btn-light">
        <i data-feather="printer" class="me-1"></i> Print
      </a>
      <div class="dropdown">
        <button class="btn btn-light dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
          <i data-feather="upload" class="me-1"></i> Export
        </button>
        <ul class="dropdown-menu shadow" aria-labelledby="exportDropdown">
          <li><a class="dropdown-item" href="/export/csv"><i data-feather="file-text" class="me-2"></i>Csv</a></li>
          <li><a class="dropdown-item" href="/export/excel"><i data-feather="file" class="me-2"></i>Excel</a></li>
          <li><a class="dropdown-item" href="/export/pdf"><i data-feather="file-minus" class="me-2"></i>Pdf</a></li>
          <li><a class="dropdown-item" href="/export/copy"><i data-feather="copy" class="me-2"></i>Copy</a></li>
        </ul>
      </div>
    </div>

    <script>feather.replace();</script>

    <form method="GET" action="{{ url()->current() }}" class="d-flex align-items-center gap-2 mb-3">
      <label for="perPage" class="form-label mb-0">Show</label>
      <select name="perPage" id="perPage" class="form-select w-auto" onchange="this.form.submit()">
        @php
          $options = [10, 25, 50, 100, 'all'];
          $selectedPerPage = request('perPage', 10);
        @endphp
        @foreach ($options as $option)
          <option value="{{ $option }}" {{ (string)$selectedPerPage === (string)$option ? 'selected' : '' }}>{{ ucfirst($option) }}</option>
        @endforeach
      </select>
      <span>entries</span>
    </form>

    <div class="table-responsive text-nowrap">
      <table id="indicatorTable" class="table">
        <thead>
          <tr class="text-nowrap">
            <th><input type="checkbox" id="checkAll"></th>
            <th>NO</th>
            <th>YEAR</th>
            <th>QUARTER/MONTH GROUP</th>
            <th>DIVISION</th>
            <th>SECTION</th>
            <th>UNIT/OFFICE</th>
            <th>INDICATOR</th>
            <th>DESCRIPTION</th>
            <th>ANNUAL TARGET</th>
            <th>METRIC</th>
            <th>TYPE</th>
            <th>ACHIEVEMENT</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody class="table-border-bottom-0">
          <tr>
            <!-- type 1 -->
            <td><input type="checkbox" name="selected[]" value="1" class="row-checkbox"></td>
            <td scope="row">1</td>
            <td>2024</td>
            <td>Q1</td>
            <td>Planning Division</td>
            <td>Development Section</td>
            <td>HQ</td>
            <td>No of Trade Enquiries</td>
            <td>N/A</td>
            <td>50</td>
            <td>Enquiries</td>
            <td>Customer</td>
            <td>0</td>
            <td>
                <!-- Butang Details -->
                <button type="button" class="btn btn-info btn-sm" id="openDetailsModal1">
                  <i class="bx bx-show"></i> Details
                </button>

                <!-- Indicator Types Page -->
                @include('content.indicator-types.type-1')
                @include('content.indicator-types.type-2')
                @include('content.indicator-types.type-3')
                @include('content.indicator-types.type-4')
                @include('content.indicator-types.type-5')
                @include('content.indicator-types.type-6')
                
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Footer Table -->
    <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
      <div>Showing 1 to 1 of 1 entries</div>
      <nav aria-label="Page navigation">
        <ul class="pagination mb-0">
          <li class="page-item first">
            <a class="page-link" href="#"><i class="tf-icon bx bx-chevrons-left bx-sm"></i></a>
          </li>
          <li class="page-item prev">
            <a class="page-link" href="#"><i class="tf-icon bx bx-chevron-left bx-sm"></i></a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">2</a>
          </li>
          <li class="page-item next">
            <a class="page-link" href="#"><i class="tf-icon bx bx-chevron-right bx-sm"></i></a>
          </li>
          <li class="page-item last">
            <a class="page-link" href="#"><i class="tf-icon bx bx-chevrons-right bx-sm"></i></a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Submit Button -->
    <button type="button" class="btn btn-primary" id="saveCompaniesBtn">Submit</button>

    <!-- Verify Button -->
    <button type="button" class="btn btn-primary" id="verifyCompaniesBtn">Verify</button>
