

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

          <?php if(!$alert->safe): ?>
          <div class="col-12 mt-n2 mb-2">
            <div class="alert <?= $alert->month <= 1 ? 'alert-danger' : 'alert-warning' ?> w-100" role="alert">
              <div>
                <p class="my-0" style="font-size: 18px;">
                  <i class='bx bx-error'></i>
                  <strong>Peringatan!</strong>
                </p>
              </div>
              <div>
                <span>Masa aktif aplikasi Anda akan segera berakhir. Silakan perpanjang masa aktif untuk terus menikmati layanan tanpa gangguan.</span>
              </div>
            </div>  
          </div>
          <?php endif; ?>

          <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: #6d00fa;"></div>
                <div class="w-100 d-flex justify-content-between">
                  <div class="d-flex flex-column ps-2">
                    <h4 class="mb-0"><strong><?= $masterData->user ?></strong></h4>
                    <span>Total User</span>
                  </div>
                  <div>
                    <div class="d-flex justify-content-center align-items-center" style="padding-left: 2px; width: 50px; height: 50px; border-radius: 50%; background-color: #6d00fa;">
                      <i class="bx bx-group 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: #ffb004;"></div>
                <div class="w-100 d-flex justify-content-between">
                  <div class="d-flex flex-column ps-2">
                    <h4 class="mb-0"><strong><?= $masterData->role ?></strong></h4>
                    <span>Total Role</span>
                  </div>
                  <div>
                    <div class="d-flex justify-content-center align-items-center" style="width: 50px; height: 50px; border-radius: 50%; background-color: #ffb004;">
                      <i class="bx bx-id-card 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: #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 class="px-2 mb-3 mx-0 col-12 col-lg-8">
            <div class="card">
              <div class="card-body px-0 mx-0 pb-0">
                <div class="d-flex justify-content-between px-3 px-md-3">
                  <p>Grafik Pendapatan & Pengeluaran</p>
                  <div class="pt-3 pt-md-0" style="overflow-x: auto; white-space: nowrap;">
                    <button data-type="WEEK" class="btn-filter-line d-inline-block btn btn-sm btn-primary me-1">Minggu Ini</button>
                    <button data-type="MONTH" class="btn-filter-line d-inline-block btn btn-sm btn-light-primary me-1">Bulan Ini</button>
                    <button data-type="YEAR" class="btn-filter-line d-inline-block btn btn-sm btn-light-primary me-1">Tahun Ini</button>
                  </div>
                </div>
                <div class="w-100">
                  <div id="barChart" style="width: 100%; height: 300px;"></div>
                </div>
              </div>
            </div>
          </div>


          <div class="px-2 mb-3 mx-0 col-12 col-lg-4">
            <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>Pemasukan & Pengeluaran</p>
                  <div>
                    <input type="month" class="form-control form-control-sm" id="in_out_payment" name="in_out_payment" autocomplete="off"value="<?= date('Y-m') ?>" />
                  </div>
                </div>
                <div class="w-100" id="parent_in_out_total">

                   <!-- Bawah -->
                  <div class="d-flex justify-content-between py-4">
                    <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>
                  <hr class="mt-3 mb-5">
                  <!-- Bawah -->
                  <div class="d-flex justify-content-between py-4">
                    <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>