@extends('pwa.template.app.main')

@section('script')
  @if (session('success-sendtopup'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses!',
        text: "{{ session('success-sendtopup') }}",
      })
    </script>
  @endif
@endsection

@section('app-content')
  <div class="container py-3">
    <div class="mb-3">
      <a class="text-black" href="{{ route('home') }}">
        <i class="fa-solid fa-arrow-left me-1"></i> <span>Kembali Ke Halaman Beranda</span>
      </a>
    </div>
    @if ($topup->count() <= 0)
      <div class="alert alert-success" role="alert">
        <h4 class="alert-heading">Riwayat Top Up Kosong</h4>
        <p>Anda Belum Melakukan Top Up</p>
        {{-- <hr> --}}
        {{-- <p class="mb-0"></p> --}}
      </div>
    @endif
    @foreach ($topup as $t)
      <div class="card my-3">
        <div class="card-header bg-white d-flex justify-content-between">
          <span><i class="fa-solid fa-wallet px-1"></i>Top Up</span>
          <span>
            @switch($t->status)
              @case(0)
                <span class="badge text-bg-warning">
                  Sedang Diproses
                </span>
              @break

              @case(1)
                <span class="badge text-bg-success">
                  Top Up Berhasil
                </span>
              @break
            @endswitch
          </span>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <div>
              <small class="mb-0">Nominal Top Up</small>
              <h4 class="mb-0 text-dark" style="font-weight: bold">@currency($t->nominal)</h4>
            </div>
            
            <div>
              <p class="mb-0" style="font-size: 15px">{{ $t->tgl_permintaan }}</p>
            </div>
          </div>
          @if ($t->keterangan)
          <div>
            <small class="mb-0">Keterangan</small>
            <p class="mb-0 text-dark" style="font-weight: bold">{{$t->keterangan}}</p>
          </div>
          @endif
        </div>
      </div>
    @endforeach
  </div>
@endsection