
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
          <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"><?= titleApp() ?> /</span> <?= $title ?></h4>
        </div>
        <!-- [ breadcrumb ] end -->


        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ sample-page ] start -->
          <div class="col-sm-12">
            <div class="card">
              <div class="card-header">
                <div class="d-flex justify-content-between flex-column flex-md-row">
                  <div class="pe-5 pe-md-0">
                    <h5 class="mb-1"><?= $title ?></h5>
                    <span>Kelola data <?= strtolower($title) ?> kamu disini</span>
                  </div>
                  <div class="mt-2">                      
                      <!-- <button class="me-1 btn btn-sm btn-danger">
                        <i class='bx bx-file pb-1' style="font-size: 12px;"></i>
                        <span>PDF</span>
                      </button>
                      <button class="me-1 btn btn-sm btn-success">
                        <i class='bx bx-file pb-1' style="font-size: 12px;"></i>
                        <span>EXCEL</span>
                      </button> -->
                      <button class="me-1 btn btn-sm btn-warning"
                      data-bs-toggle="collapse"
                      data-bs-target="#accordionIcon-filter"
                      aria-controls="accordionIcon-filter"
                      >
                        <i class='bx bx-filter-alt pb-1' style="font-size: 12px;"></i>
                        <span>Filter</span>
                      </button>
                      
                  </div>
                </div>
              </div>
              <div>

                <div class="accordion-item card">
                  
                  <div id="accordionIcon-filter" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
                    <div class="accordion-body py-0 pe-0 ps-3 ">
                      <div class="w-100 row pb-3 pe-0 ps-0 ps-md-2">
                          
                        <div class="col-12 col-md-4 mb-2 ">
                          <label for="customer" class="ps-1 mb-1 form-label">Pelanggan</label>
                          <select class="form-control form-control-sm select2" name="customer" id="customer" style="width: 100%">
                            <!-- <option value="">Pilih Pelanggan</option> -->
                          </select>
                        </div>


                        <div class="col-12 col-md-4 mb-2 ">
                          <label for="month" class="ps-1 mb-1 form-label">Pembayaran Bulan</label>
                          <input type="month" class="form-control form-control-sm" id="month" name="month" autocomplete="off" />
                        </div>


                        <div class="col-12 col-md-4 mb-2 ">
                          <label for="village" class="ps-1 mb-1 form-label">Desa</label>
                          <select class="form-control form-control-sm select2" name="village" id="village" style="width: 100%">
                            <!-- <option value="">Pilih Desa</option> -->
                          </select>
                        </div>

                        <div class="col-12 d-flex justify-content-end mt-2">
                          <button class="btn btn-secondary btn-sm me-2" id="clear_filter">
                            <i class='bx bx-trash'></i> 
                            Bersihkan</button>
                          <button id="apply_filter" class="btn btn-primary btn-sm"><i class='bx bx-search'></i> Cari Data</button>
                        </div>
                        <div class="col-12 mt-4">
                          <hr class="py-0 my-0">
                        </div>

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


                </div>

              </div>
              <div class="card-body">
                <div></div>
                <div class="w-100">
                  <div class="table-responsive">
                      <table class="table table-borderless border-bottom w-100" id="datatable">
                        <thead>
                          <tr>
                            <th class="">No</th>
                            <th class="">Tanggal Input</th>
                            <th class="">Dibuat Oleh</th>
                            <th class=" ">Pembayaran Bulan</th>
                            <th class=" ">Pelanggan</th>
                            <th class=" ">Desa</th>
                            <th class=" ">Total</th>
                            <th class=" text-center">Pilihan</th>
                          </tr>
                        </thead>
                        <tbody>
                          
                        </tbody>
                      </table>
                    </div>
                </div>
              </div>
            </div>
          </div>



      <!-- Modal -->
      <div class="modal fade px-0 mx-0" id="modal_add" 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">

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


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

          </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">
          <div class="modal-content">

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

</div>