    
<link href="<?= base_url(); ?>assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="<?= base_url() ?>assets/libs/select2/select2.min.js"></script>


    <form id="form_edit" autocomplete="off">
      <div class="modal-header">
        <h1 class="modal-title fs-4"><?= $title ?></h1>
        <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
      </div>
      <div class="modal-body px-0 mx-3">
        <div class="w-100">

          <table class="w-100 table">

            <tr>
              <td style="width: 20%;">Nama</td>
              <td>: <?= $row->name ?></td>
            </tr>
            <tr>
              <td>Kecamatan</td>
              <td>: <?= $row->subdistrictName ?></td>
            </tr>
            <tr>
              <td>Desa</td>
              <td>: <?= $row->villageName ?> </td>
            </tr>
            <tr>
              <td>Telepon</td>
              <td>: <?= $row->phone ?></td>
            </tr>
            <tr>
              <td>Paket Internet</td>
              <td>: <?= $row->packageName ?></td>
            </tr>
            <tr>
              <td>Keterangan</td>
              <td>: <?= $row->description ?></td>
            </tr>
          </table>

        </div>
        <div class="d-flex justify-content-between align-items-center px-3">
          <h6 style="padding-top: 8px;">Detail Pembayaran</h6>
          <div class="d-flex align-items-center">
            <label for="start_date" class="pe-2 mb-1" style="font-size: 12px;">Tahun </label>
            <input  type="number" min="1900" max="2099" step="1" class="form-control form-control-sm" id="year" name="year" value="<?= date('Y') ?>" />
            <div>
              <button class="btn btn-sm btn-primary px-2 ms-1 btn-apply">
                <i class="bx bx-refresh"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table w-100" id="detail_payment">
              <tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>


          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </form>