@extends('pwa.template.app.main')
{{-- @push('scripts')
  @if (session('failed'))
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Pembelian Gagal',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
@endpush --}}
@section('app-content')
  <div class="container pt-3 pb-5">
    <div class="mb-3">
      <a class="text-black" href="{{ route('cart') }}">
        <i class="fa-solid fa-arrow-left me-1"></i> <span>Kembali Ke Keranjang</span>
      </a>
    </div>
    @if (session('failed'))
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <h4 class="alert-heading">Gagal Melakukan Pembelian</h4>
        <p>{{ session('failed') }}</p>
        <hr>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif
    <div class="billing-information-card mb-3">
      <div class="card billing-information-title-card bg-danger">
        <div class="card-body">
          <h6 class="text-center mb-0 text-white">Informasi Data Pengguna</h6>
        </div>
      </div>
      <div class="card user-data-card">
        <div class="card-body">
          <div class="single-profile-data d-flex align-items-center justify-content-between">
            <div class="title d-flex align-items-center"><i class="fa-solid fa-user"></i><span>Nama Lengkap</span></div>
            <div class="data-content fs-6 text-black">{{ $user->nama }}</div>
          </div>
          <div class="single-profile-data d-flex align-items-center justify-content-between">
            <div class="title d-flex align-items-center"><i class="fa-solid fa-envelope"></i><span>Alamat</span>
            </div>
            <div class="data-content fs-6 text-black">{{ $user->alamat }}</div>
          </div>
          <div class="single-profile-data d-flex align-items-center justify-content-between">
            <div class="title d-flex align-items-center"><i class="fa-solid fa-phone"></i><span>Phone</span></div>
            <div class="data-content fs-6 text-black">{{ $user->no_hp }}</div>
          </div>
          <div class="single-profile-data d-flex align-items-center justify-content-between">
            <div class="title d-flex align-items-center"><i class="fa-solid fa-location-crosshairs"></i><span>Saldo
                Anda</span></div>
            <div class="data-content fs-6 text-black">Rp. {{ number_format($user->saldo, 0, 0, '.') }}</div>
          </div>
          <!-- Edit Address-->
          {{-- <a class="btn btn-danger w-100" href="edit-profile.html">Edit Billing Information</a> --}}
        </div>
      </div>
    </div>
    @foreach ($produks_by_merchant as $key => $produks)
      <div class="cart-table card mb-3 ">
        <div class="card-header bg-white  py-3">
          <div class="py-1 px-2 d-flex align-items-center m-0" role="alert" style="width: fit-content; gap: 5px;">
            <i class="fa-solid fa-store"></i> {{ $produks[0]->merchant->nama }}
          </div>
        </div>
        <div class="table-responsive card-body py-0">
          <table class="table mb-0">
            <tbody>
              @foreach ($produks as $i => $produk)
                <tr id="produk-item-{{ $i }}" style="height: 90px; ">
                  <td>
                    <img class="rounded" src="{{ asset('storage/' . $produk->foto) }}" alt="">
                  </td>
                  <td>
                    <a href="single-product.html">{{ $produk->nama }}
                      <span class="fw-bold">Rp. {{ number_format($produk->harga) }} ×
                        <span style="display: inline" id="kuantitas-{{ $i }}">
                          {{ $produk->pivot->kuantitas }}
                        </span>
                      </span>
                    </a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        <div class="card-footer bg-white">
          <table class="w-100">
            <tbody>
              <tr>
                <td>Subtotal</td>
                <td style="width: 19px; white-space: nowrap; padding-right: 10px;">Rp. </td>
                <td style="width: 19px; white-space: nowrap;">{{ number_format($subtotal_by_merchant[$key], 0, 0, '.') }}
                </td>
              </tr>
              <tr>
                <td>Ongkir</td>
                <td>Rp. </td>
                <td style=" text-align: end;">{{ number_format($ongkir_by_merchant[$key], 0, 0, '.') }}</td>
              </tr>
              <tr>
                <td>Total</td>
                <td>Rp. </td>
                <td>{{ number_format($subtotal_by_merchant[$key] + $ongkir_by_merchant[$key], 0, 0, '.') }}</td>
              </tr>
            </tbody>
          </table>
          {{-- <div class="d-flex justify-content-between">
            <p>Subtotal</p>
            <p class="fw-bold text-black">Rp. {{ number_format($produks[0]->merchant->ongkir, 0, 0, '.') }}</p>
          </div>
          <div class="d-flex justify-content-between">
            <p>Ongkir</p>
            <p class="fw-bold text-black">Rp. {{ number_format($subtotal_by_merchant[$key], 0, 0, '.') }}</p>
          </div>
          <div class="d-flex justify-content-between">
            <p>Total</p>
            <p class="fw-bold text-black">Rp. {{ number_format($subtotal_by_merchant[$key], 0, 0, '.') }}</p>
          </div> --}}
        </div>
      </div>
    @endforeach
    <div class="card">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <p class="p-0 m-0">Total Tagihan</p>
          <p class="p-0 m-0 fw-bold text-black fs-5">Rp.
            {{ number_format($cart->harga + array_sum($ongkir_by_merchant), 0, ',', '.') }}</p>
        </div>
        <div>
          <a class="btn btn-primary" href="{{ route('checkout.pembayaran', $cart) }}">Metode Pembayaran</a>
          {{-- <ul class="dropdown-menu">
            <form action="{{ route('checkout.action', $cart->id) }}" method="post">
              @csrf
              <li>
                <button type="submit" class="dropdown-item" name="metode_pembayaran" value="saldo"><i
                    class="fa-solid me-1 fa-wallet"></i>
                  Saldo
                </button>
              </li>
              <hr class="m-0">
              <li>
                <button type="submit" class="dropdown-item" name="metode_pembayaran" value="cash"><i
                    class="fa-solid me-1 fa-money-bill"></i>
                  Cash</button>
              </li>
            </form>
          </ul> --}}
        </div>
      </div>
    </div>
  </div>
@endsection