
        <!-- [ breadcrumb ] start -->
        <div class="page-header mb-3">
          <div class="d-flex align-items-center justify-content-between">
            <h5 class="fw-bold py-3 mb-n3"><i class='bx bx-arrow-back' onclick="history.back()"></i> <?= $title ?>  </h5>
            <div class="d-block d-md-none pt-3">
              <span class="badge bg-label-danger label-total-data"></span>
            </div>
          </div>
          <div class="ps-4">
            <!-- <span  style="font-size: 10px;">Pelanggan yang belum melakukan pembayaran dari bulan <?= date('m-Y') ?> sampai <?= date('m-Y') ?></span> -->
          </div>
        </div>
        <!-- [ breadcrumb ] end -->


        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ sample-page ] start -->
          <div class="col-12 col-md-7 col-lg-8">
            <div class="w-100">
              <div class="w-100">


                <div class="w-100 d-none justify-content-between align-items-center parent-filter-show">
                    <div>
                      <span class="d-none d-md-block ps-4 label-total-data" style="font-size: 14px;"></span>
                    </div>
                    <div class="search-filter-wrapper">
                      <i class='bx bx-search search-icon'></i>
                      <input type="text" class="search-box searching" placeholder="Search..." />
                      <button class="filter-btn d-md-none btn_filter">
                        <i class='bx bx-slider-alt'></i>
                      </button>
                    </div>
                </div>

                <div class="w-100 d-flex justify-content-between align-items-center parent-filter-hide d-md-none">
                    <div>
                      <span class="d-none d-md-block ps-4 label-total-data" style="font-size: 14px;"></span>
                    </div>
                    <div class="search-filter-wrapper">
                      <i class='bx bx-search search-icon d-none '></i>
                      <input type="text" class="search-box searching" placeholder="" disabled readonly />
                      <button class="filter-btn d-md-none btn_filter" >
                        <i class='bx bx-slider-alt'></i>
                      </button>
                    </div>
                </div>


              </div>
              <div class="w-100">
        
                <div class="w-100 py-3 px-1">
                  <div class="row g-2 g-md-4" id="container_product">
                                    
                    <div class="col-12 d-flex justify-content-center align-items-center flex-column">
                      <img src="<?= base_url() ?>assets/images/ic-empty-payment.png" style="width: 330px;" class="mb-n5">
                      <p class="mb-0">Data Masih Kosong</p>
                      <p class="mb-0 text-center">Silahkan lakukan filter desa dan bulan terlebih dahulu</p>
                    </div>

                  </div>
    
                </div>
              </div>
            </div>
          </div>

          <!-- left content -->
          <div class="d-none d-md-block col-md-5 col-lg-4 mt-3 mt-md-0">
            <div class="card " style="display: flex; flex-direction: column; justify-content: space-between;">
              <div>

                <div style="margin-bottom: 12px;">
                  <div class="px-3 py-3">
                    <h5 class="card-title mb-1 " style="color:#697a8d;">Filter Data</h5>
                    <!-- <span style="font-size: 14px;">Terdapat <b id="label_count_product_cart">-</b> produk pada keranjang kamu</span> -->
                    <div class="mt-2" style="width: 99%; margin: auto; height: 1px; background-color: #ccc; border: none;"></div>
                  </div>
                </div>

                <div class=" " style="height: 100%; max-height: 650px;">
                    <div class="w-100 row px-0 mx-0 ">

                      <div class="row col-12 mx-0 px-2">
                        <div class=" col-12 mb-3">
                          <label for="start_date" class="ps-1 mb-1">Bulan </label>
                          <input type="month" class="form-control" id="start_date" placeholder="Masukan nomor telepon disini" name="start_date" value="<?= date('Y-m') ?>" />
                        </div>
<!--                         <div class=" col-6 mb-3">
                          <label for="end_date" class="ps-1 mb-1">Bulan Akhir </label>
                          <input type="month" class="form-control" id="end_date" placeholder="Masukan nomor telepon disini" name="end_date" value="<?= date('Y-m') ?>" />
                        </div> -->
                      </div>

<!--                       <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                        <label for="package" class="ps-1 mb-1">Paket Internet </label>
                        <select class="form-control select2" name="package" id="package" style="width: 100%">
                          <option value="">Pilih Paket Internet</option>
                        </select>
                        <div class="parent_packages w-100 mt-1 px-1 pt-1">

                          

                        </div>
                      </div> -->


<!--                       <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                        <label for="subdistrict" class="ps-1 mb-1">Kecamatan </label>
                        <select class="form-control select2" name="subdistrict" id="subdistrict" style="width: 100%">
                          <option value="">Pilih Kecamatan</option>
                        </select>
                        <div class="parent_subdistricts w-100 mt-1 px-1 pt-1">

                          

                        </div>
                      </div> -->


                      <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                        <label for="village" class="ps-1 mb-1">Desa </label>
                        <select class="form-control select2" name="village" id="village" style="width: 100%">
                          <option value="">Pilih Desa</option>
                        </select>
                        <div class="parent_villages w-100 mt-1 px-1 pt-1">

                          

                        </div>
                      </div>
                      

                    </div>
                </div>

              </div>

              <div class="">
                  
                <div class="w-100 px-3 my-3">
                  <div class="w-100 d-flex">
                    <button onclick="resetForm()" style="width: 30%;" class="btn btn-secondary d-flex justify-content-center align-items-center mt-3 me-2">Bersihkan</button> 

                    <button style="width: 70%;" class="btn btn-primary mt-3 btn_show">Terapkan</button>  
                  </div>

                </div>
              </div>



            </div>
          </div>
        </div>


      <!-- Modal -->
      <div class="modal fade px-0 mx-0" id="modal_filter" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg ps-0 mx-0 mx-md-auto">
          <div class="modal-content">

            <form>

              <div class="modal-header">
                <h1 class="modal-title fs-4">Filter Data</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body px-0">
                    
                <div class="w-100 row px-0 mx-0 ">

                  <div class="row col-12 mx-0 px-2">
                    <div class=" col-12 mb-3">
                      <label for="start_date_sm" class="ps-1 mb-1">Bulan </label>
                      <input type="month" class="form-control" id="start_date_sm" placeholder="Masukan nomor telepon disini" name="start_date_sm" value="<?= date('Y-m') ?>" />
                    </div>
                    <!-- <div class=" col-6 mb-3">
                      <label for="end_date_sm" class="ps-1 mb-1">Bulan Akhir </label>
                      <input type="month" class="form-control" id="end_date_sm" placeholder="Masukan nomor telepon disini" name="end_date_sm" value="<?= date('Y-m') ?>" />
                    </div> -->
                  </div>

<!--                   <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                    <label for="package_sm" class="ps-1 mb-1">Paket Internet </label>
                    <select class="form-control select2" name="package_sm" id="package_sm" style="width: 100%">
                      <option value="">Pilih Paket Internet</option>
                    </select>
                    <div class="parent_packages w-100 mt-1 px-1 pt-1">

                      

                    </div>
                  </div> -->


<!--                   <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                    <label for="subdistrict_sm" class="ps-1 mb-1">Kecamatan </label>
                    <select class="form-control select2" name="subdistrict_sm" id="subdistrict_sm" style="width: 100%">
                      <option value="">Pilih Kecamatan</option>
                    </select>
                    <div class="parent_subdistricts w-100 mt-1 px-1 pt-1">

                      

                    </div>
                  </div> -->


                  <div class="col-12 mx-0 mb-3" style="padding: 0 20px;">
                    <label for="village_sm" class="ps-1 mb-1">Desa </label>
                    <select class="form-control select2" name="village_sm" id="village_sm" style="width: 100%">
                      <option value="">Pilih Desa</option>
                    </select>
                    <div class=" parent_villages w-100 mt-1 px-1 pt-1">

                      

                    </div>
                  </div>
                  

                </div>

              </div>
              <div class="modal-footer">
                <button onclick="resetForm()" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Bersihkan</button>
                <button type="submit" class="btn btn-primary btn_show" >Terapkan</button>
              </div>

            </form>


          </div>
        </div>
      </div>



      <!-- Modal -->
      <div class="modal fade px-0 mx-0" id="modal_detail" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg ps-0 mx-0 mx-md-auto">
          <div class="modal-content">


              
              <form>

                <div class="modal-header">
                  <h1 class="modal-title fs-4">Detail Pelanggan</h1>
                  <span class="btn-close disabled" aria-hidden="true"></span>
                </div>

                <div class="modal-body px-0">
                  <table class="table w-100">
                    <tr>
                      <td style="width: 20%;"><div class="skeleton" style="width: 100px; height: 16px;"></div></td>
                      <td><div class="skeleton" style="width: 150px; height: 16px;"></div></td>
                    </tr>
                    <tr>
                      <td><div class="skeleton" style="width: 150px; height: 16px;"></div></td>
                      <td><div class="skeleton" style="width: 100px; height: 24px; border-radius: 8px;"></div></td>
                    </tr>
                    <tr>
                      <td><div class="skeleton" style="width: 150px; height: 16px;"></div></td>
                      <td><div class="skeleton" style="width: 80px; height: 24px; border-radius: 8px;"></div></td>
                    </tr>
                    <tr>
                      <td><div class="skeleton" style="width: 110px; height: 16px;"></div></td>
                      <td><div class="skeleton" style="width: 130px; height: 16px;"></div></td>
                    </tr>
                    <tr>
                      <td><div class="skeleton" style="width: 80px; height: 16px;"></div></td>
                      <td><div class="skeleton" style="width: 120px; height: 16px;"></div></td>
                    </tr>
                  </table>

                  <div class="mt-2">
                    <p class="card-header"><div class="skeleton ms-2" style="width: 170px; height: 16px;"></div></p>
                  </div>

                  <div style="overflow-y: scroll; height: 250px;">
                    <table class="table w-100">
                      <!-- Ulang baris -->
                      <!-- 1 baris dummy -->
                      <tr>
                        <td style="width: 2%; text-align: center;">
                          <div class="skeleton" style="width: 12px; height: 16px;"></div>
                        </td>
                        <td>
                          <div class="skeleton" style="width: 80px; height: 16px; margin-bottom: 4px;"></div>
                          <div class="skeleton" style="width: 100px; height: 14px;"></div>
                        </td>
                        <td style="width: 10%;">
                          <div class="form-check d-flex justify-content-center">
                            <div class="skeleton" style="width: 16px; height: 16px; border-radius: 4px;"></div>
                          </div>
                        </td>
                      </tr>

                      <!-- Copy beberapa kali -->
                      <tr>
                        <td style="text-align: center;"><div class="skeleton" style="width: 12px; height: 16px;"></div></td>
                        <td><div class="skeleton" style="width: 80px; height: 16px; margin-bottom: 4px;"></div><div class="skeleton" style="width: 100px; height: 14px;"></div></td>
                        <td><div class="form-check d-flex justify-content-center"><div class="skeleton" style="width: 16px; height: 16px; border-radius: 4px;"></div></div></td>
                      </tr>
                      <tr>
                        <td style="text-align: center;"><div class="skeleton" style="width: 12px; height: 16px;"></div></td>
                        <td><div class="skeleton" style="width: 80px; height: 16px; margin-bottom: 4px;"></div><div class="skeleton" style="width: 100px; height: 14px;"></div></td>
                        <td><div class="form-check d-flex justify-content-center"><div class="skeleton" style="width: 16px; height: 16px; border-radius: 4px;"></div></div></td>
                      </tr>
                      <tr>
                        <td style="text-align: center;"><div class="skeleton" style="width: 12px; height: 16px;"></div></td>
                        <td><div class="skeleton" style="width: 80px; height: 16px; margin-bottom: 4px;"></div><div class="skeleton" style="width: 100px; height: 14px;"></div></td>
                        <td><div class="form-check d-flex justify-content-center"><div class="skeleton" style="width: 16px; height: 16px; border-radius: 4px;"></div></div></td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="modal-footer">
                  <div class="skeleton" style="width: 100px; height: 38px; border-radius: 6px;"></div>
                  <div class="skeleton" style="width: 100px; height: 38px; border-radius: 6px;"></div>
                </div>

              </form>



          </div>
        </div>
      </div>


