

        <!-- [ 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">

          <div class="px-2 mb-3 mx-0 col-12 col-md-6 ">
            <div class="card">
              <div class="card-body py-0 my-0 px-2" style="position: relative;">
                <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #0349b1;"></div>
                <div class="w-100 d-flex justify-content-between py-0 my-0">
                  <div class="d-flex flex-column justify-content-between ps-2 pt-2 pb-3 ">
                    <div>
                      <p class="text-primary my-0">Selamat Datang <?= session()->get('name') ?></p>
                      <span class="">Kelola data dengan aplikasi kami </span>
                    </div>
                    <div>
                        <!-- <button class="btn btn-sm btn-outline-primary">Profile</button> -->
                    </div>
                  </div>
                  <div class="py-1">
                    <img src="<?= base_url() ?>assets/img/illustrations/man-with-laptop-light.png" height=93 alt="View Badge User" data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png">
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="px-2 mb-3 mx-0 col-12 col-md-6 col-lg-3">
            <div class="card">
              <div class="card-body px-2" style="position: relative;">
                <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #992bad;"></div>
                <div class="w-100 d-flex justify-content-between">
                  <div class="d-flex flex-column ps-2">
                    <h4 class="mb-0"><strong><?= $masterData->customer ?></strong></h4>
                    <span>Total Pelanggan</span>
                  </div>
                  <div>
                    <div class="d-flex justify-content-center align-items-center" style="width: 50px; height: 50px; border-radius: 50%; background-color: #992bad;">
                      <i class="bx bx-user-pin text-white" style="font-size: 22px;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="px-2 mb-3 mx-0 col-12 col-md-6 col-lg-3">
            <div class="card">
              <div class="card-body px-2" style="position: relative;">
                <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #25a698;"></div>
                <div class="w-100 d-flex justify-content-between">
                  <div class="d-flex flex-column ps-2">
                    <h4 class="mb-0"><strong><?= $masterData->package ?></strong></h4>
                    <span>Total Paket Internet</span>
                  </div>
                  <div>
                    <div class="d-flex justify-content-center align-items-center" style="width: 50px; height: 50px; border-radius: 50%; background-color: #25a698;">
                      <i class="bx bx-category text-white" style="font-size: 22px;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="px-2 mb-3 mx-0 col-12 col-lg-5">
            <div class="card">

              <div class="card-body px-2 pt-3 pb-1 mx-0">
                <div class="d-flex justify-content-between px-1">
                  <p>Pelanggan Sudah & Belum Bayar</p>
                  <div>
                    <input type="month" class="form-control form-control-sm" id="month_payment" name="month_payment" autocomplete="off" value="<?= date('Y-m') ?>" />
                  </div>
                </div>
                <div class="w-100" id="parent_payment_count">
                
                  <hr class="mt-0 mb-2 py-0 mx-2">
                  <div class="w-100 px-1">
                    <div class="px-1 py-1">
                      <!-- Atas -->
                      <div class="d-flex justify-content-between align-items-start">
                        <div class="d-flex justify-content-center align-items-center pe-1">
                          <div class="skeleton-payment skeleton-payment-icon"></div>
                        </div>
                        <div class="d-flex align-items-end flex-column pt-1">
                          <div class="skeleton-payment skeleton-payment-text-sm"></div>
                          <div class="skeleton-payment skeleton-payment-number mt-1"></div>
                        </div>
                      </div>

                      <hr class="mt-1 mb-3">

                      <!-- Bawah -->
                      <div class="d-flex justify-content-between py-1">
                        <div>
                          <div class="skeleton-payment skeleton-payment-text-sm"></div>
                          <div class="skeleton-payment skeleton-payment-number mt-1"></div>
                        </div>
                        <div class="d-flex justify-content-center align-items-center pe-1">
                          <div class="skeleton-payment skeleton-payment-icon"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>

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

          <div class="px-2 mb-3 mx-0 col-12 col-lg-7">
            <div class="card">
              <div class="card-body px-0 mx-0 pt-2">
                <div class="row p-0 m-0">
                  <div class="col-12 col-md-6 py-0">
                    <div>
                      <span>Pelanggan Per Desa</span>
                    </div>
                    <div class="row px-0 mx-0 mt-3">
                      <div class="px-0 mx-0 col-8">
                        <div id="donut-chart-village" style="width: 90%; height: 185px; margin: 0 auto;"></div>
                      </div>
                      <div class="px-0 mx-0 col-4 ">
                        <div class="w-100" style="overflow-y: scroll; height: 185px;" id="parent_lables_villages">

                          




                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-6 py-0">
                    <div>
                      <span>Pelanggan Per Paket Internet</span>
                    </div>
                    <div class="row px-0 mx-0 mt-3">
                      <div class="px-0 mx-0 col-8">
                        <div id="donut-chart-package" style="width: 90%; height: 185px; margin: 0 auto;"></div>
                      </div>
                      <div class="px-0 mx-0 col-4 ">
                        <div class="w-100" style="overflow-y: scroll; height: 185px;" id="parent_lables_packages">



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

        </div>