@extends('pwa.template.app.main')
@section('app-content')
  <div class="container py-3">
    @forelse ($order_details as $order_detail)
      <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-store me-2"></i>
            <div style="display: flex; flex-direction: column">
              <div class="text-primary">
                {{ $order_detail->produk->merchant->nama }}
                {{-- @switch($order_detail->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_detail->created_at)) }}
              </div>
            </div>
          </div>
          <span>

            @switch($order_detail->order->status)
              @case('pending')
                <span class="badge text-bg-warning">{{ $order_detail->order->status }}</span>
              @break

              @case('kirim')
                <span class="badge text-bg-info">{{ $order_detail->order->status }}</span>
              @break

              @case('terima')
                <span class="badge text-bg-success">{{ $order_detail->order->status }}</span>
              @break

              @case('tolak')
                <span class="badge text-bg-danger">{{ $order_detail->order->status }}</span>
              @break
            @endswitch
          </span>
        </div>
        <div class="card-body">
          <div class="d-flex" style="gap: 5px">
            <img
              src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
              alt="" style="width: 40px; border-radius: 5px;
            height: fit-content" class="shadow-sm">
            <div>
              {{-- <h5 class="card-title mb-0">{{ $order_detail->no_invoice }}</h5> --}}
              <h5 class="card-title mb-0">{{ $order_detail->produk->nama }}</h5>
              <p class="mb-0">Rp. {{ number_format($order_detail->harga, 0, 0, '.') }} x {{ $order_detail->kuantitas }}
                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_detail->total_harga(), 0, 0, '.') }}
              </p>
            </div>
            <a href="#" class="btn btn-primary" style="height: fit-content; align-self:flex-end">Detail</a>
          </div>
        </div>
      </div>
      @empty
      @endforelse
    </div>
  @endsection