
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet"> 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

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

<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script> 

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

 

    <div class="row"> 

    <div class="col-md-12"> 

      <div class="nav-align-top"> 

        <ul class="nav nav-pills flex-column flex-md-row mb-6"> 

        
        </ul> 

      </div> 

 

      <div class="card mb-6"> 

      <!-- Account --> 

      <div class="card-body"> 

        <div class="d-flex align-items-start align-items-sm-center gap-6 pb-4 border-bottom"> 

          <!-- <img src="{{asset('assets/img/avatars/1.png')}}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" /> --> 

          <div class="button-wrapper"> 

       

          </div> 

        </div> 

      </div> 

      <div class="card-body pt-4"> 

        <form id="formAccountSettings" method="POST" onsubmit="return false"> 

          <div class="row g-6"> 

            <!-- Division --> 

            <div class="col-md-4"> 

              <label for="division" class="block text-sm font-medium text-gray-700 mb-1">Division</label> 

              <select id="division" name="division[]" multiple autocomplete="off"> 

                <option value="Management Services Division" selected>MANAGEMENT SERVICES DIVISION</option> 

                <option value="Finance Division">FINANCE DIVISION</option> 

                <option value="HR Division">HR DIVISION</option> 

              </select> 

            </div> 

 

            <!-- Section --> 

            <div class="col-md-4"> 

              <label for="section" class="block text-sm font-medium text-gray-700 mb-1">Section</label> 

              <select id="section" name="section[]" multiple autocomplete="off"> 

                <option value="Facility Management Section" selected>FACILITY MANAGEMENT SECTION</option> 

                <option value="Procurement Section">PROCUREMENT SECTION</option> 

              </select> 

            </div> 

 

            <!-- Unit/Office --> 

            <div class="col-md-4"> 

              <label for="unit" class="block text-sm font-medium text-gray-700 mb-1">Unit/Office</label> 

              <select id="unit" name="unit[]" multiple autocomplete="off"> 

                <option value="Asset Management Unit" selected>ASSET MANAGEMENT UNIT</option> 

                <option value="Logistics Unit">LOGISTICS UNIT</option> 

              </select> 

            </div> 

          </div> 

 

          <!-- Buttons --> 

          <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> 

      </div> 

 

      <!-- /Account --> 

    </div> 

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

 

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

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

     

 

    <div class="card"> 

      <!-- Card Body --> 

      <div class="card-body"> 

 

      <div class="d-flex flex-column gap-2 mb-3"> 

       

      <!-- Previous Year Indicator --> 

      <button class="btn btn-outline-primary w-100 d-flex justify-content-between align-items-center" id="toggleTableBtn"> 

        <span>Previous Year Indicator List</span> 

        <i class="tf-icon bx bx-chevron-right bx-sm"></i> 

      </button> 

    </div> 

 

    <!-- Responsive Table --> 

    <div id="tableContainer" style="display: none;"> 

              Choose :  

              <div class="btn-group"> 

                <button type="button" class="btn btn-outline-primary"> 

                  <script> 

                  document.write(new Date().getFullYear() - 1) 

 

                  </script> 

                </button> 

                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> 

                  <span class="visually-hidden">Toggle Dropdown</span> 

                </button> 

                <ul class="dropdown-menu"> 

                  <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li> 

                  <li><a class="dropdown-item" href="javascript:void(0);">2020</a></li> 

                  <li><a class="dropdown-item" href="javascript:void(0);">2019</a></li> 

                </ul> 

              </div> 

        <br><br> 

 

        <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); // default to 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"> 

              <!-- Checkbox untuk "Select All" --> 

              <th> 

                <input type="checkbox" id="checkAll"> 

              </th> 

              <th>Division</th> 

              <th>Section</th> 

              <th>Unit/Office</th> 

              <th>Indicator</th> 

              <th>Description</th> 

              <th>Submission</th> 

              <th>Annual Target</th> 

            </tr> 

          </thead> 

          <tbody class="table-border-bottom-0"> 

            <tr> 

              <!-- Checkbox untuk row --> 

              <td> 

                <input type="checkbox" name="selected[]" value="1" class="row-checkbox"> 

              </td> 

              <!-- <td scope="row">1</td> --> 

              <td>MANAGEMENT SERVICES DIVISION</td> 

              <td>FINANCE MANAGEMENT SECTION</td> 

              <td>ACCOUNTS UNIT</td> 

              <td>Payment to Supplier Within 14 Working Days</td> 

              <td>Payment voucher issued</td> 

              <td>As per quarterly/group of months</td> 

              <td>100.0</td> 

            </tr> 

            <tr> 

              <!-- Checkbox untuk row --> 

              <td> 

                <input type="checkbox" name="selected[]" value="2" class="row-checkbox"> 

              </td> 

              <td>MANAGEMENT SERVICES DIVISION</td> 

              <td>FINANCE MANAGEMENT SECTION</td> 

              <td>ACCOUNTS UNIT</td> 

              <td>Submission of Annual Financial Statement Report to National Audit Department</td> 

              <td>Certificate on the Audit of the Financial Statements</td> 

              <td>Annually</td> 

              <td>1.0</td> 

            </tr> 

          </tbody> 

        </table> 

      </div> 

 

      <!-- Table Footer with Inline Layout --> 

      <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2"> 

        <!-- Entries Info --> 

        <div>Showing 1 to 1 of 1 Entries</div> 

 

        <!-- Pagination --> 

        <nav aria-label="Page navigation"> 

          <ul class="pagination mb-0"> 

            <li class="page-item first"> 

              <a class="page-link" href="javascript:void(0);"> 

                <i class="tf-icon bx bx-chevrons-left bx-sm"></i> 

              </a> 

            </li> 

            <li class="page-item prev"> 

              <a class="page-link" href="javascript:void(0);"> 

                <i class="tf-icon bx bx-chevron-left bx-sm"></i> 

              </a> 

            </li> 

            <li class="page-item"> 

              <a class="page-link" href="javascript:void(0);">1</a> 

            </li> 

            <li class="page-item"> 

              <a class="page-link" href="javascript:void(0);">2</a> 

            </li> 

            <li class="page-item next"> 

              <a class="page-link" href="javascript:void(0);"> 

                <i class="tf-icon bx bx-chevron-right bx-sm"></i> 

              </a> 

            </li> 

            <li class="page-item last"> 

              <a class="page-link" href="javascript:void(0);"> 

                <i class="tf-icon bx bx-chevrons-right bx-sm"></i> 

              </a> 

            </li> 

          </ul> 

        </nav> 

      </div> 

 

      <!-- Trigger Modal --> 

      <div class="mt-3"> 

        <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal" data-bs-target="#copyConfirmModal"> 

          Copy 

        </button> 

      </div> 

 

      <!-- Modal --> 

      <div class="modal fade" id="copyConfirmModal" tabindex="-1" aria-labelledby="copyConfirmModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-header"> 

              <h5 class="modal-title" id="copyConfirmModalLabel">Confirm Copy</h5> 

              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 

            </div> 

            <div class="modal-body"> 

              <!-- Icon di atas --> 

              <div class="mb-3"> 

                <i class="bx bx-error-circle text-warning" style="font-size: 3rem;"></i> 

              </div> 

              <p class="fs-5 mb-0">Are you sure you want to copy?</p> 

            </div> 

            <div class="modal-footer justify-content-center border-0"> 

              <button type="button" class="btn btn-primary" id="confirmCopyBtn">Yes</button> 

              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button> <p></p> 

            </div> 

          </div> 

        </div> 

      </div> 

 

      <!-- Success Modal --> 

      <div class="modal fade" id="copySuccessModal" tabindex="-1" aria-labelledby="copySuccessModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-body py-5"> 

              <div class="mb-3"> 

                <i class="bx bx-check-circle text-success" style="font-size: 3rem;"></i> 

              </div> 

              <h5 class="mb-3">Message Copied!</h5> 

              <button type="button" class="btn btn-primary" id="successOkBtn">OK</button> 

            </div> 

          </div> 

        </div> 

      </div> 

 

      <!-- Error Modal --> 

      <div class="modal fade" id="copyErrorModal" tabindex="-1" aria-labelledby="copyErrorModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-body py-5"> 

              <div class="mb-3"> 

                <i class="bx bx-x-circle text-danger" style="font-size: 3rem;"></i> 

              </div> 

              <h5 class="mb-2 text-danger">Error</h5> 

              <p class="mb-3">Indicator <strong>Disposal of Assets and Stocks</strong> already existed!</p> 

              <button type="button" class="btn btn-primary" id="errorOkBtn">OK</button> 

            </div> 

          </div> 

        </div> 

      </div> 

 

 

 

      <!-- Account Deactivation Form --> 

      <form id="formAccountDeactivation" onsubmit="return false"> 

        <div class="form-check my-4 ms-2"> 

          <!-- Optional deactivation checkbox (currently hidden) --> 

        </div> 

      </form> 

    </div> 

 

    <button class="btn btn-outline-primary w-100 d-flex justify-content-between align-items-center" id="toggleCommonBtn"> 

      <span>Common Indicator</span> 

      <i class="tf-icon bx bx-chevron-right bx-sm"></i> 

    </button> 

 

    <br> 

    <!-- Responsive Table --> 

    <div id="tableCommon" style="display: none;"> 

 

        <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); // default to 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"> 

            <!-- Checkbox untuk "Select All" --> 

            <th> 

              <input type="checkbox" id="checkAll"> 

            </th> 

            <th>INDICATOR</th> 

            <th>METRIC</th> 

          </tr> 

        </thead> 

        <tbody class="table-border-bottom-0"> 

          <tr> 

            <!-- Checkbox untuk row --> 

            <td> 

              <input type="checkbox" name="selected[]" value="1" class="row-checkbox"> 

            </td> 

            <td>Asset management report for JPAM</td> 

            <td>Report</td> 

          </tr> 

          <!-- Tambah baris lagi ikut data --> 

          <tr> 

            <!-- Checkbox untuk row --> 

            <td> 

              <input type="checkbox" name="selected[]" value="2" class="row-checkbox"> 

            </td> 

            <td>Disposal of asset within 4 months from approval for disposal (HQ & TCs)</td> 

            <td>Percentage</td> 

          </tr> 

        </tbody> 

      </table> 

 

      </div> 

 

      <!-- Table Footer with Inline Layout --> 

      <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2"> 

        <!-- Entries Info --> 

        <div>Showing 2 to 2 of 2 entries</div> 

 

      <!-- Pagination --> 

      <nav aria-label="Page navigation"> 

        <ul class="pagination mb-0"> 

          <li class="page-item first"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevrons-left bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item prev"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevron-left bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item"> 

            <a class="page-link" href="javascript:void(0);">1</a> 

          </li> 

          <li class="page-item"> 

            <a class="page-link" href="javascript:void(0);">2</a> 

          </li> 

          <li class="page-item next"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevron-right bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item last"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevrons-right bx-sm"></i> 

            </a> 

          </li> 

        </ul> 

      </nav> 

  </div> 

 

      <!-- Copy Button --> 

      <div class="mt-3"> 

          <!-- Butang Copy Kedua --> 

          <button type="button" class="btn btn-primary" onclick="showCopyConfirm('copyType2')">Copy</button> 

 

      </div> 

 

      <!-- Modal --> 

      <div class="modal fade" id="copyConfirmModal" tabindex="-1" aria-labelledby="copyConfirmModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-header"> 

              <h5 class="modal-title" id="copyConfirmModalLabel">Confirm Copy</h5> 

              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 

            </div> 

            <div class="modal-body"> 

              <!-- Icon di atas --> 

              <div class="mb-3"> 

                <i class="bx bx-error-circle text-warning" style="font-size: 3rem;"></i> 

              </div> 

              <p class="fs-5 mb-0">Are you sure you want to copy?</p> 

            </div> 

            <div class="modal-footer justify-content-center border-0"> 

              <button type="button" class="btn btn-primary" id="confirmCopyBtn">Yes</button> 

              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button> <p></p> 

            </div> 

          </div> 

        </div> 

      </div> 

 

      <!-- Success Modal --> 

      <div class="modal fade" id="copySuccessModal" tabindex="-1" aria-labelledby="copySuccessModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-body py-5"> 

              <div class="mb-3"> 

                <i class="bx bx-check-circle text-success" style="font-size: 3rem;"></i> 

              </div> 

              <h5 class="mb-3">Message Copied!</h5> 

              <button type="button" class="btn btn-primary" id="successOkBtn">OK</button> 

            </div> 

          </div> 

        </div> 

      </div> 

 

      <!-- Error Modal --> 

      <div class="modal fade" id="copyErrorModal" tabindex="-1" aria-labelledby="copyErrorModalLabel" aria-hidden="true"> 

        <div class="modal-dialog modal-dialog-centered"> 

          <div class="modal-content text-center"> 

            <div class="modal-body py-5"> 

              <div class="mb-3"> 

                <i class="bx bx-x-circle text-danger" style="font-size: 3rem;"></i> 

              </div> 

              <h5 class="mb-2 text-danger">Error</h5> 

              <p class="mb-3">Indicator <strong>Disposal of Assets and Stocks</strong> already existed!</p> 

              <button type="button" class="btn btn-primary" id="errorOkBtn">OK</button> 

            </div> 

          </div> 

        </div> 

      </div> 

      <br> 

</div> 

       

        <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); // default to 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"> 

            <!-- Checkbox untuk "Select All" --> 

            <th> 

              <input type="checkbox" id="checkAll"> 

            </th> 

            <th>Division</th> 

            <th>Section</th> 

            <th>Unit/Office</th> 

            <th>Indicator</th> 

            <th>Description</th> 

            <th>Submission</th> 

            <th>Results</th> 

            <th>Component Achievement</th> 

            <th>Action</th> 

          </tr> 

        </thead> 

        <tbody class="table-border-bottom-0"> 

          <tr> 

            <!-- Checkbox untuk row --> 

            <td> 

              <input type="checkbox" name="selected[]" value="1" class="row-checkbox"> 

            </td> 

            <td>MANAGEMENT SERVICES DIVISION</td> 

            <td>FACILITY MANAGEMENT SECTION</td> 

            <td>ASSET MANAGEMENT UNIT</td> 

            <td>Anual Assets Management Executive Report for CEO</td> 

            <td>To produce Assets Management Executive Report for CEO by 15th of March anually</td> 

            <td>Anually</td> 

            <td>N/A</td> 

            <td>Export Promotion</td> 

            <td> 

              <!-- Edit --> 

              <button type="button" class="btn btn-sm btn-secondary me-1" data-bs-toggle="modal" data-bs-target="#editModal"> 

                <i class="bx bx-edit-alt"></i> 

              </button> 

 

              <!-- Modal --> 

              <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"> 

                <div class="modal-dialog modal-lg modal-dialog-centered"> 

                  <div class="modal-content"> 

                    <div class="modal-header"> 

                      <h5 class="modal-title" id="editModalLabel">Edit New Indicator</h5> 

                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button> 

                    </div> 

                    <div class="modal-body"> 

                      <!-- Isi borang kemaskini --> 

                      <form id="updateForm"> 

                        <div class="mb-3"> 

                          <label for="title" class="form-label">Year:</label> 

                          <input type="text" class="form-control" id="title" name="title" value="2023" 

                          style="background-color: #e0f0ff; border: 1px solid #66afe9;"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Quarter/Month Group:</label> 

                          <input type="text" class="form-control" id="title" name="title" value="Quarterly" 

                          style="background-color: #e0f0ff; border: 1px solid #66afe9;"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Indicator:</label> 

                          <input type="text" class="form-control" id="title" name="title" value=""> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Indicator Description:</label> 

                          <input type="text" class="form-control" id="title" name="title"  

                          value="Presentation slide describing MATRADE's contribution towards exportsReport on seller's achievement, sales and facilitation/assistance provided by department"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Submission:</label> 

                          <input type="text" class="form-control" id="title" name="title" value="Anually"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Annual Target:</label> 

                          <input type="text" class="form-control" id="title" name="title" value="4.0"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Metric:</label> 

                          <input type="text" class="form-control" id="title" name="title" value="Story"> 

                        </div> 

                      </form> 

                    </div> 

                    <div class="modal-footer"> 

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmUpdateModal"> 

                      Save 

                    </button> 

 

                    <!-- Confirmation Modal --> 

                    <div class="modal fade" id="confirmUpdateModal" tabindex="-1" aria-labelledby="confirmUpdateModalLabel" aria-hidden="true"> 

                      <div class="modal-dialog modal-dialog-centered"> 

                        <div class="modal-content"> 

                          <div class="modal-header"> 

                            <h5 class="modal-title" id="confirmUpdateModalLabel">Confirm Update</h5> 

                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button> 

                          </div> 

                          <div class="modal-body"> 

                            <p>Are you sure you want to update the information?</p> 

                          </div> 

                          <div class="modal-footer"> 

                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> 

                            <button type="button" class="btn btn-primary" id="confirmUpdateBtn">Yes, Update</button> 

                          </div> 

                        </div> 

                      </div> 

                    </div> 

 

 

                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button> 

                    </div> 

                  </div> 

                </div> 

              </div> 

              <button type="button" class="btn btn-sm btn-secondary"> 

                <i class="bx bx-trash"></i>  

              </button> 

            </td> 

 

          </tr> 

          <!-- Tambah baris lagi ikut data --> 

          <tr> 

            <!-- Checkbox untuk row --> 

            <td> 

              <input type="checkbox" name="selected[]" value="2" class="row-checkbox"> 

            </td> 

            <td>MANAGEMENT SERVICES DIVISION</td> 

            <td>FACILITY MANAGEMENT SECTION</td> 

            <td>ASSET MANAGEMENT UNIT</td> 

            <td>Disposal of Assets and Stocks</td> 

            <td>To dispose assets and stocks within four (4) months from approval for disposal (HQ, TC & Reginal Office)</td> 

            <td>As per quarterly/group of months</td> 

            <td>N/A</td> 

            <td>Exporters Development</td> 

            <td> 

              <!-- Edit --> 

              <button type="button" class="btn btn-sm btn-secondary me-1" data-bs-toggle="modal" data-bs-target="#editModal"> 

                <i class="bx bx-edit-alt"></i> 

              </button> 

 

              <!-- Modal --> 

              <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"> 

                <div class="modal-dialog modal-lg modal-dialog-centered"> 

                  <div class="modal-content"> 

                    <div class="modal-header"> 

                      <h5 class="modal-title" id="editModalLabel">Edit New Indicator</h5> 

                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button> 

                    </div> 

                    <div class="modal-body"> 

                      <!-- Isi borang kemaskini --> 

                      <form id="updateForm"> 

                        <div class="mb-3"> 

                          <label for="title" class="form-label">Year:</label> 

                          <input type="text" class="form-control" id="title" name="title"> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Quarter/Month Group:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Indicator:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Indicator Description:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Submission:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Annual Target:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                        <div class="mb-3"> 

                          <label for="desc" class="form-label">Metric:</label> 

                          <textarea class="form-control" id="desc" name="desc" rows="3"></textarea> 

                        </div> 

                      </form> 

                    </div> 

                    <div class="modal-footer"> 

                      <!-- Butang Save dengan margin kanan --> 

                      <button type="submit" class="btn btn-primary me-4" form="updateForm">Save</button>  

                      <button type="button" class="btn btn-secondary" id="backButton">Back</button> 

                    </div> 

 

                  </div> 

                </div> 

              </div> 

 

              <!-- Delete --> 

              <button type="button" class="btn btn-sm btn-secondary"> 

                <i class="bx bx-trash"></i>  

              </button> 

            </td> 

          </tr> 

        </tbody> 

      </table> 

 

      </div> 

 

      <!-- Table Footer with Inline Layout --> 

      <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2"> 

        <!-- Entries Info --> 

        <div>Showing 1 to 1 of 1 Entries</div> 

 

        <!-- Pagination --> 

      <nav aria-label="Page navigation"> 

        <ul class="pagination mb-0"> 

          <li class="page-item first"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevrons-left bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item prev"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevron-left bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item"> 

            <a class="page-link" href="javascript:void(0);">1</a> 

          </li> 

          <li class="page-item"> 

            <a class="page-link" href="javascript:void(0);">2</a> 

          </li> 

          <li class="page-item next"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevron-right bx-sm"></i> 

            </a> 

          </li> 

          <li class="page-item last"> 

            <a class="page-link" href="javascript:void(0);"> 

              <i class="tf-icon bx bx-chevrons-right bx-sm"></i> 

            </a> 

          </li> 

        </ul> 

      </nav> 

 

      <div class="container"> 

        <div class="row"> 

          <div class="col-12"> 

            <div class="d-flex justify-content-start mb-3 gap-2"> 

            <div class="mb-3"> 

                <!-- Butang Add New --> 

                <button type="button" class="btn btn-primary" id="addNewBtn">Add New</button> 

                <button type="submit" class="btn btn-primary">Save</button> 

 

 

              <!-- Form New Indicator yang akan muncul selepas klik Add New --> 

              <div id="newIndicatorForm" style="display: none; margin-top: 20px;"> 

              <table class="table" id="editableTable"> 

                  <thead> 

                    <tr> 

                      <th>Year</th> 

                      <th>Quarter/Month Group</th> 

                      <th>Indicator</th> 

                      <th>Indicator Description</th> 

                      <th>Submission</th> 

                      <th>Annual Target</th> 

                      <th>Metric</th> 

                    </tr> 

                  </thead> 

                  <tbody> 

                    <tr> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                    </tr> 

                    <tr> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                      <td> 

                        <input type="text" class="form-control" id="title" name="title"> 

                      </td> 

                    </tr> 

                  </tbody> 

                </table> 

                <br> 

                <div class="d-flex justify-content-end mb-3"> 

                  <button type="submit" class="btn btn-primary me-2">Add Row</button> 

                  <button type="submit" class="btn btn-primary">Insert</button> 

                </div> 

 

              </div> 

               

              </div> 

               

            </div> 

          </div> 

        </div> 

      </div> 

</div> 

 

 

<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script> 

 

<script> 

  new TomSelect("#division", { 

    plugins: ['remove_button'], 

    maxItems: null, 

    create: false 

  }); 

 

  new TomSelect("#section", { 

    plugins: ['remove_button'], 

    maxItems: null, 

    create: false 

  }); 

 

  new TomSelect("#unit", { 

    plugins: ['remove_button'], 

    maxItems: null, 

    create: false 

  }); 

 

  $(document).ready(function () { 

    // Initialize DataTable 

    $('#indicatorTable').DataTable(); 

 

    // Feather Icons 

    feather.replace(); 

 

    // Toggle button functionality 

    $('#toggleTableBtn').on('click', function () { 

      console.log('Toggle button clicked'); // Debugging line 

      $('#tableContainer').slideToggle(); // Smooth show/hide animation 

    }); 

  }); 

</script> 

 

<script> 

  $(document).ready(function() { 

    // Simple toggle test 

    $('#toggleTableBtn').click(function() { 

      $('#tableContainer').slideToggle(); 

    }); 

  }); 

</script> 

 

<script> 

    // function handleSelect(selectElement) { 

    //     const selectedValue = selectElement.value; 

    //     if (selectedValue) { 

    //         alert("You selected: " + selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1)); 

    //     } 

    // } 

 

    public function index(Request $request) 

{ 

    $perPage = $request->input('perPage', 10); // default to 10 

 

    $query = YourModel::query(); 

 

    if ($perPage === 'all') { 

        $items = $query->get(); // show all 

    } else { 

        $items = $query->paginate((int)$perPage)->appends($request->query()); 

    } 

 

    return view('your-view-name', compact('items')); 

} 

 

</script> 

 

<script> 

  $(document).ready(function () { 

    $('#toggleCommonBtn').on('click', function () { 

      $('#tableCommon').slideToggle(); // Animasi toggle buka/tutup 

 

      // Tukar icon arah bila buka/tutup 

      $(this).find('i').toggleClass('bx-chevron-right bx-chevron-down'); 

    }); 

  }); 

</script> 

 

<script> 

  document.getElementById('confirmCopyBtn').addEventListener('click', function () { 

    // Close modal 

    const modal = bootstrap.Modal.getInstance(document.getElementById('copyConfirmModal')); 

    modal.hide(); 

 

    // Show toast 

    const toast = new bootstrap.Toast(document.getElementById('copyToast')); 

    toast.show(); 

 

 

    // Optionally do your copy logic here (e.g., copy to clipboard, or server action) 

    // For example: 

    // navigator.clipboard.writeText('Your message here'); 

  }); 

 

  document.getElementById('confirmCopyBtn').addEventListener('click', function () { 

  // Tutup confirmation modal 

  const confirmModal = bootstrap.Modal.getInstance(document.getElementById('copyConfirmModal')); 

  confirmModal.hide(); 

 

  // Selepas modal tutup, buka success modal 

  setTimeout(function () { 

    const successModal = new bootstrap.Modal(document.getElementById('copySuccessModal')); 

    successModal.show(); 

  }, 300); // Tunggu sekejap supaya modal sebelum ni betul² tertutup 

 

  // Bila copy gagal 

  function showCopyError() { 

    const errorModal = new bootstrap.Modal(document.getElementById('copyErrorModal')); 

    errorModal.show(); 

  } 

 

}); 

 

document.getElementById('confirmCopyBtn').addEventListener('click', function () { 

  const confirmModal = bootstrap.Modal.getInstance(document.getElementById('copyConfirmModal')); 

  confirmModal.hide(); 

 

  // Simulasi: jika gagal copy 

  const copySuccess = false; // <-- tukar ikut logik sebenar anda 

 

  setTimeout(function () { 

    if (copySuccess) { 

      const successModal = new bootstrap.Modal(document.getElementById('copySuccessModal')); 

      successModal.show(); 

    } else { 

      const errorModal = new bootstrap.Modal(document.getElementById('copyErrorModal')); 

      errorModal.show(); 

    } 

  }, 300); 

}); 

 

</script> 

 

<script> 

  document.getElementById('successOkBtn').addEventListener('click', function () { 

    window.location.href = "{{ url()->current() }}"; // Guna semula page asal 

  }); 

 

  document.getElementById('errorOkBtn').addEventListener('click', function () { 

    window.location.href = "{{ url()->current() }}"; // Sama juga 

  }); 

</script> 

 

<script> 

  let currentCopyType = null; 

 

  // Bila butang Copy ditekan 

  function showCopyConfirm(copyType) { 

    console.log("Copy type:", copyType); // Debug log 

    currentCopyType = copyType; 

 

    const confirmModal = new bootstrap.Modal(document.getElementById('copyConfirmModal')); 

    confirmModal.show(); 

  } 

 

  // Bila tekan "Yes" dalam modal confirm 

  document.addEventListener('DOMContentLoaded', function () { 

    const confirmBtn = document.getElementById('confirmCopyBtn'); 

    const successModalEl = document.getElementById('copySuccessModal'); 

    const errorModalEl = document.getElementById('copyErrorModal'); 

 

    confirmBtn.addEventListener('click', function () { 

      const confirmModal = bootstrap.Modal.getInstance(document.getElementById('copyConfirmModal')); 

      confirmModal.hide(); 

 

      setTimeout(() => { 

        if (currentCopyType === 'copyType2') { 

          const errorModal = new bootstrap.Modal(errorModalEl); 

          errorModal.show(); 

        } else { 

          const successModal = new bootstrap.Modal(successModalEl); 

          successModal.show(); 

        } 

      }, 500); 

    }); 

 

    document.getElementById('successOkBtn').addEventListener('click', () => { 

      // reload balik atau tutup modal je pun boleh 

      location.reload();  

    }); 

 

    document.getElementById('errorOkBtn').addEventListener('click', () => { 

      location.reload(); 

    }); 

  }); 

</script> 

 

<script> 

  document.getElementById('confirmUpdateBtn').addEventListener('click', function () { 

    // Tutup modal confirmation 

    const confirmModal = new bootstrap.Modal(document.getElementById('confirmUpdateModal')); 

    confirmModal.hide(); 

 

    // Proses simpan data (contohnya, dengan AJAX atau submit borang) 

    document.getElementById('updateForm').submit(); // Hantar borang jika sudah confirm 

 

    // Optional: Show confirmation notification (contohnya Toast) 

    alert('Maklumat telah dikemaskini!'); 

  }); 

</script> 

 

<script> 

  document.getElementById('backButton').addEventListener('click', function () { 

    location.reload(); // Ini akan memuat semula halaman yang sama 

  }); 

 

  $(document).ready(function () { 

  $('#addNewBtn').on('click', function () { 

    // Toggle form visibility ketika Add New di klik 

    $('#newIndicatorForm').toggle(); 

  }); 

}); 

</script> 