@extends('backoffice.template.app')
@section('content')
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Admin /</span> Top Up
  </h4>
  <div class="card mb-4">
    {{-- <h5 class="card-header">Olifia Zambrud</h5> --}}
    <!-- Account -->
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6">
          <img
            src="https://images.unsplash.com/photo-1589525231707-f2de2428f59c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="user-avatar" class="d-block rounded" height="100" width="100" id="uploadedAvatar"
            style="object-fit: cover">
          <p class="mb-0 mt-3">Nama</p>
          <h5>Olifia Dadar Ceplok</h5>
          <p class="mb-0 mt-3">No Telepon</p>
          <h5>08813746346</h5>
        </div>
        <div class="col-lg-6 d-flex justify-content-end pe-3">
          <div class="mt-4 me-3">
            <div>
              <h5 class="text-muted mb-2">Saldo Anda</h5>
              <h2 class="mb-0">Rp. 20.000.000</h2>
            </div>
            <button class="btn btn-primary mt-5 w-100" style="height: 30; width: 30">
              Tambah Saldo
            </button>
          </div>
        </div>
      </div>
      {{-- <div class="d-flex align-items-start align-items-sm-center justify-content-between">
        <div class="d-flex gap-3">
          <div>
            <h5 class="text-muted mb-2">Saldo Anda</h5>
            <h3 class="mb-0">Rp. 20.000.000</h3>
          </div>
          <button class="btn btn-primary" style="height: 30; width: 30"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
              <path fill-rule="evenodd"
                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
            </svg></button>
        </div>
      </div> --}}
    </div>
    <hr class="my-0">
    <div class="card-body">
      <h5>Riwayat Top Up</h5>
      <table class="table">
        <thead>
          <tr>
            <th>No</th>
            <th>Deskripsi</th>
            <th>Nominal</th>
            <th>Tanggal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- /Account -->
  </div>
@endsection
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-user').DataTable();
    });
  </script>
@endsection