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

@section('app-content')

  <div class="container py-3">



    @if (count($transaksis) < 1)

      <div class="alert alert-success" role="alert">

        <h4 class="alert-heading">Transaksi Kosong</h4>

        <p>Anda belum melakukan transaksi</p>

        <hr>

        {{-- <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> --}}

      </div>

    @else

      <div class="mb-3">

        <a class="text-black" href="{{ route('home') }}">

            <h5>Riwayat Transaksi</h5>

            <small>Harap cek secara berkala untuk seluruh transaksi produk UMKM dan layanan digital yang telah anda lakukan.</small>

        </a>

      </div>

      @foreach ($transaksis as $transaksi)

        @switch($transaksi->tipe)

          @case('tagihanpdam')

            @php

              $tagihan_pdam = $transaksi->tagihan_pdam;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                  <i class="fa-solid fa-faucet-drip me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>Tagihan PDAM</div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($tagihan_pdam->created_at)) }}

                    </div>

                  </div>

                </div>

                <span>

                  @switch($tagihan_pdam->is_lunas)

                    @case(false)

                      <span class="badge text-bg-warning">Pending</span>

                    @break



                    @case(true)

                      <span class="badge text-bg-success">Lunas</span>

                    @break

                  @endswitch

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <div>

                    <h5 class="card-title mb-0">Tagihan PDAM

                      <span class="text-primary fw-bold">

                        {{-- ID : {{ $tagihan_pdam->pelanggan_pdam->id }} --}}

                        Rp. {{ number_format($tagihan_pdam->nominal - $tagihan_pdam->beban, 0, 0, '.') }}

                      </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">ID : {{ $tagihan_pdam->pelanggan_pdam->id }}</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <p class="mb-0" style="font-size: 15px">Total Belanja</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                      Rp. {{ number_format($tagihan_pdam->nominal, 0, 0, '.') }}

                    </p>

                  </div>

                  {{-- <a href="{{ route('transaksi.detail', $tagihan_pdam->id) }}" class="btn btn-primary"

                  style="height: fit-content; align-self:flex-end">Detail</a> --}}

                </div>

              </div>

            </div>

          @break



          @case('isipulsa')

            @php

              $isi_pulsa = $transaksi->isi_pulsa;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                  <i class="fa-solid fa-phone me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>Isi Pulsa</div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($isi_pulsa->created_at)) }}

                    </div>

                  </div>

                </div>

                <span>

                  @switch($isi_pulsa->status)

                    @case('pending')

                      <span class="badge text-bg-warning">Sedang Proses</span>

                    @break



                    @case('sukses')

                      <span class="badge text-bg-success">Berhasil</span>

                    @break

                  @endswitch

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <div>

                    <p class="card-title mb-0">Isi Pulsa

                      <span class="text-success fw-bold">

                        Rp. {{ number_format($isi_pulsa->nominal, 0, 0, '.') }}

                      </span>

                    </p>

                    <p class="mb-1" style="margin-top: -3px">Nomor : {{ $isi_pulsa->nomor }}</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <small class="mb-0">Total Pembelian</small>

                    <h5 class="mb-0 text-dark" style="font-weight: bold">

                      Rp. {{ number_format($isi_pulsa->nominal + $isi_pulsa->biaya_admin, 0, 0, '.') }}

                    </h5>

                  </div>

                  {{-- <a href="{{ route('transaksi.detail', $isi_pulsa->id) }}" class="btn btn-primary"

                  style="height: fit-content; align-self:flex-end">Detail</a> --}}

                </div>

              </div>

            </div>

          @break



          @case('produk')

            @php

              $order = $transaksi->order;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  <i class="fa-solid fa-bag-shopping me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>

                      @switch($order->tipe)

                        @case('produk')

                          Belanja

                        @break



                        @case('layanan_digital')

                        @break

                      @endswitch

                    </div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($order->created_at)) }}</div>

                  </div>

                </div>

                <span>

                  @switch($order->status)

                    @case('pending')

                      <span class="badge text-bg-warning">{{ $order->status }}</span>

                    @break



                    @case('kirim')

                      <span class="badge text-bg-primary">{{ $order->status }}</span>

                    @break



                    @case('terima')

                      <span class="badge text-bg-success">{{ $order->status }}</span>

                    @break



                    @case('tolak')

                      <span class="badge text-bg-danger">{{ $order->status }}</span>

                    @break

                  @endswitch

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <img src="{{ asset('storage/' . $order->order_details[0]->produk->foto) }}" alt=""

                    style="width: 40px; border-radius: 5px;

              height: fit-content" class="shadow-sm">

                  <div>

                    <h5 class="card-title mb-0">{{ $order->no_invoice }}</h5>

                    <p class="mb-0">{{ $order->total_barang() }} Barang</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <p class="mb-0" style="font-size: 15px">Total Belanja</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">Rp. {{ number_format($order->harga, 0, 0, '.') }}</p>

                  </div>

                  <a href="{{ route('transaksi.detail', $order->id) }}" class="btn btn-primary"

                    style="height: fit-content; align-self:flex-end">Detail</a>

                </div>

              </div>

            </div>

          @break



          @case('tokenlistrik')

            @php

              $token_listrik = $transaksi->token_listrik;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                  <i class="fa-solid fa-bolt-lightning me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>Token Listrik</div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($token_listrik->created_at)) }}

                    </div>

                  </div>

                </div>

                <span>

                  @switch($token_listrik->status)

                    @case('pending')

                      <span class="badge text-bg-warning">Sedang Proses</span>

                    @break



                    @case('sukses')

                      <span class="badge text-bg-success">Berhasil</span>

                    @break

                  @endswitch

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <div>

                    <p class="card-title mb-0">Token Listrik

                      <span class="text-success fw-bold">

                        Rp. {{ number_format($token_listrik->nominal, 0, 0, '.') }}

                      </span>

                    </p>

                    <p class="mb-1" style="margin-top: -3px">ID Pelanggan. {{ $token_listrik->id_pelanggan }}</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <small class="mb-0">Total Pembelian</small>

                    <h5 class="mb-0 text-dark" style="font-weight: bold">

                      Rp. {{ number_format($token_listrik->nominal + $token_listrik->biaya_admin, 0, 0, '.') }}

                    </h5>

                  </div>

                  @if ($token_listrik->status == 'sukses')
                  <a href="{{ route('transaksi.token-listrik.detail', $token_listrik->id) }}"

                    class="btn btn-primary"

                    style="height: fit-content; align-self:flex-end">Lihat Token</a>
                      
                  @endif
               

                </div>

              </div>

            </div>

          @break



          @case('tagihanlistrik')

            @php

              $tagihan_listrik = $transaksi->tagihan_listrik;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                  <i class="fa-solid fa-bolt-lightning me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>Tagihan Listrik</div>

                    <div style="font-size: 13px; margin-top: -5px">

                      {{ date('d M Y', strtotime($tagihan_listrik->created_at)) }}

                    </div>

                  </div>

                </div>

                <span>

                  @switch($tagihan_listrik->status)

                    @case('pending')

                      <span class="badge text-bg-warning">Pending</span>

                    @break



                    @case('lunas')

                      <span class="badge text-bg-success">Lunas</span>

                    @break

                  @endswitch

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <div>

                    <h5 class="card-title mb-0">Tagihan Listrik

                      <span class="text-primary fw-bold">

                        Rp. {{ number_format($tagihan_listrik->nominal, 0, 0, '.') }}

                      </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">ID : {{ $tagihan_listrik->pelanggan_listrik->id }}</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <p class="mb-0" style="font-size: 15px">Total Tagihan</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                      Rp. {{ number_format($tagihan_listrik->nominal + $tagihan_listrik->biaya_admin, 0, 0, '.') }}

                    </p>

                  </div>

                  {{-- <a href="{{ route('transaksi.token-listrik.detail', $tagihan_listrik->id) }}"

                  class="btn btn-primary {{ $tagihan_listrik->status == 'pending' ? 'disabled' : '' }}"

                  style="height: fit-content; align-self:flex-end">Detail</a> --}}

                </div>

              </div>

            </div>

          @break



          @case('wifi')

            @php

              $tagihan_wifi = $transaksi->tagihan_wifi;

            @endphp

            <div class="card mb-3">

              <div class="card-header bg-white d-flex justify-content-between">

                <div style="display: flex; align-items: center;">

                  {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                  <i class="fa-solid fa-wifi me-2"></i>

                  <div style="display: flex; flex-direction: column">

                    <div>Tagihan Wifi</div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($tagihan_wifi->created_at)) }}

                    </div>

                  </div>

                </div>

                <span>

                  {{-- @switch($tagihan_wifi->status)

                  @case('pending')

                    <span class="badge text-bg-warning">Pending</span>

                  @break



                  @case('sukses')

                    <span class="badge text-bg-success">Sukses</span>

                  @break

                @endswitch --}}

                </span>

              </div>

              <div class="card-body">

                <div class="d-flex" style="gap: 5px">

                  <div>

                    <h5 class="card-title mb-0">Tagihan Wifi

                      <span class="text-primary fw-bold">

                        Rp. {{ number_format($tagihan_wifi->nominal, 0, 0, '.') }}

                      </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">Biaya Admin :

                      Rp. {{ number_format($tagihan_wifi->biaya_admin, 0, 0, '.') }}</p>

                  </div>

                </div>

                <div class="d-flex justify-content-between">

                  <div>

                    <p class="mb-0" style="font-size: 15px">Total Tagihan</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                      Rp. {{ number_format($tagihan_wifi->nominal + $tagihan_wifi->biaya_admin, 0, 0, '.') }}

                    </p>

                  </div>

                  <a href="{{ route('transaksi.wifi.detail', $tagihan_wifi->id) }}" class="btn btn-primary"

                    style="height: fit-content; align-self:flex-end">Detail</a>

                </div>

              </div>

            </div>

          @break



        @endswitch

      @endforeach

    @endif

  </div>

@endsection