@extends('pwa.template.app.main')
@push('scripts')
  @if (session('sukses'))
    <script>
      Swal.fire({
        icon: 'Sukses',
        title: 'Sukses',
        text: "{{ session('sukses') }}",
      })
    </script>
  @endif
@endpush
@section('app-content')
  <div class="container py-3">
    @switch($order->status)
      @case('pending')
      @break

      @case('kirim')
        <button class="btn btn-primary w-100 mb-3 py-3" data-bs-toggle="modal" data-bs-target="#modal-konfirm">
          <span>Konfirmasi Barang Telah Diterima</span>
          <i class="fa-solid fa-circle-check fs-4 ms-2" style="vertical-align: middle"></i>
        </button>
        <div class="alert alert-primary">
          <i class="fa-solid fa-circle-info"></i>
          Dikenakan Biaya Ongkir Sebesar,
          <span class="fw-bold">Rp{{ number_format($order->ongkir, 0, 0, '.') }}</span>
        </div>
      @break

      @case('tolak')
      @break
    @endswitch
    @foreach ($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-primary">{{ $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="{{ asset('storage/' . $order_detail->produk->foto) }}" 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>
            <div>
              <p class="mb-0" style="font-size: 15px">Ongkir</p>
              <p class="">Rp{{ number_format($order->ongkir, 0, 0, '.') }}</p>

            </div>
          </div>
        </div>
      </div>
    @endforeach
    {{-- MODAL KONFIRMASI --}}
    <div class="modal fade" id="modal-konfirm" tabindex="-1" aria-labelledby="modal-konfirmLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Konfirmasi</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Harap Pastikan Barang Telah Sesuai, Sebelum Melakukan Konfirmasi</p>
          </div>
          <div class="modal-footer">
            <form action="{{ route('transaksi.konfirmasi', $order->id) }}" method="post">
              @csrf
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Konfirmasi</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection