@extends('layouts.app')

@section('title', 'Keranjang Belanja')
@section('active', 'keranjang')

@section('content')
<section class="py-4 bg-biru-muda">
  <div class="container d-flex flex-wrap justify-content-between align-items-end gap-2">
    <div>
      <h1 class="mb-1">Keranjang Belanja</h1>
      @if ($items->isNotEmpty())
        <p class="text-muted-soft mb-0"><span data-cart-total-qty>{{ $items->sum('qty') }}</span> barang siap di-checkout</p>
      @endif
    </div>
    @if ($items->isNotEmpty())
      <a href="{{ route('katalog') }}" class="btn btn-light-blue"><i class="bi bi-plus-lg me-1" aria-hidden="true"></i>Tambah produk lain</a>
    @endif
  </div>
</section>

<section class="section-sm">
  <div class="container">
    @if ($items->isEmpty())
      <div class="card-soft p-5 text-center empty-state">
        <div class="empty-icon mx-auto mb-3" aria-hidden="true"><i class="bi bi-bag-x"></i></div>
        <h2 class="h4">Keranjang masih kosong</h2>
        <p class="text-muted-soft">Yuk pilih kaos dan outfit distro favoritmu.</p>
        <div><a href="{{ route('katalog') }}" class="btn btn-gradient">Mulai Belanja</a></div>
      </div>
    @else
    <div class="row g-4 align-items-start">
      <div class="col-lg-8">
        <form action="{{ route('keranjang.update') }}" method="post" data-cart-form>
          @csrf
          @method('PATCH')
          <div class="cart-list card-soft" role="list" aria-label="Daftar produk di keranjang">
            <div class="cart-head" aria-hidden="true">
              <span>Produk</span><span>Harga</span><span>Jumlah</span><span class="text-end">Subtotal</span><span></span>
            </div>
            @foreach ($items as $item)
            <div class="cart-row" role="listitem" data-cart-row="{{ $item->variant->id }}">
              <div class="cart-product">
                <a href="{{ route('produk.show', $item->product) }}" tabindex="-1" aria-hidden="true"><img src="{{ $item->product->image_url }}" width="72" height="72" class="cart-thumb" alt="" loading="lazy"></a>
                <div class="min-w-0">
                  <a href="{{ route('produk.show', $item->product) }}" class="fw-semibold text-dark cart-name">{{ $item->product->name }}</a>
                  <div class="small text-muted-soft">Ukuran {{ $item->variant->size }} · {{ $item->variant->color }}@if ($item->product->color) &middot; {{ $item->product->color }}@endif</div>
                  <div class="small fw-semibold text-biru d-md-none mt-1">{{ rupiah($item->product->price) }}</div>
                </div>
              </div>
              <div class="cart-price d-none d-md-block">{{ rupiah($item->product->price) }}</div>
              <div class="cart-qty-cell">
                <div class="input-group input-group-sm cart-qty">
                  <button type="button" class="btn btn-light-blue" data-qty-minus aria-label="Kurangi jumlah {{ $item->product->name }}">&minus;</button>
                  <input type="number" name="qty[{{ $item->variant->id }}]" value="{{ $item->qty }}" min="1" max="{{ $item->variant->stock }}" class="form-control text-center" aria-label="Jumlah {{ $item->product->name }} ukuran {{ $item->variant->size }}" inputmode="numeric" data-qty-input data-autosubmit>
                  <button type="button" class="btn btn-light-blue" data-qty-plus aria-label="Tambah jumlah {{ $item->product->name }}">&plus;</button>
                </div>
                <small class="text-muted-soft d-block mt-1" data-line-stock>Stok {{ $item->variant->stock }}</small>
              </div>
              <div class="cart-subtotal fw-semibold text-nowrap" data-line-subtotal>{{ rupiah($item->subtotal) }}</div>
              <div class="cart-remove">
                <button type="submit" form="hapus-{{ $item->variant->id }}" class="btn btn-sm btn-remove" aria-label="Hapus {{ $item->product->name }} ukuran {{ $item->variant->size }}" title="Hapus" data-confirm="Hapus {{ $item->product->name }} ({{ $item->variant->size }}) dari keranjang?"><i class="bi bi-trash3" aria-hidden="true"></i></button>
              </div>
            </div>
            @endforeach
          </div>
          <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-3">
            <a href="{{ route('katalog') }}" class="btn btn-light-blue"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i>Lanjut belanja</a>
            <span class="small text-muted-soft js-only" data-cart-status aria-live="polite"><i class="bi bi-cloud-check me-1" aria-hidden="true"></i>Perubahan jumlah tersimpan otomatis</span>
            <button type="submit" class="btn btn-outline-primary no-js-only"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>Perbarui keranjang</button>
          </div>
        </form>
        @foreach ($items as $item)
          <form id="hapus-{{ $item->variant->id }}" action="{{ route('keranjang.destroy', $item->variant->id) }}" method="post" class="d-none" data-cart-remove="{{ $item->variant->id }}">
            @csrf
            @method('DELETE')
          </form>
        @endforeach
      </div>
      <div class="col-lg-4">
        <div class="card-soft p-4 summary-sticky">
          <h2 class="h5 mb-3">Ringkasan Belanja</h2>
          <div class="d-flex justify-content-between mb-2"><span class="text-muted-soft">Subtotal (<span data-cart-total-qty>{{ $items->sum('qty') }}</span> barang)</span><span class="fw-semibold" data-cart-subtotal>{{ rupiah($subtotal) }}</span></div>
          <div class="d-flex justify-content-between mb-2"><span class="text-muted-soft">Ongkir</span><span class="fw-semibold" data-cart-ongkir>{{ app(\App\Services\Shipping::class)->distanceMode() ? 'Saat checkout' : rupiah($ongkir) }}</span></div>
          @if(app(\App\Services\Shipping::class)->distanceMode())<p class="small text-muted-soft">Total sementara belum termasuk ongkir. Ongkir dihitung saat checkout.@if(config('toko.delivery.free_threshold')>0) Gratis ongkir mulai {{ rupiah(config('toko.delivery.free_threshold')) }} dalam area layanan.@endif</p>@endif
          <hr>
          <div class="d-flex justify-content-between align-items-center mb-3"><span class="fw-bold">Total</span><span class="fw-bold text-primary fs-5" data-cart-grand>{{ rupiah($subtotal + $ongkir) }}</span></div>
          <a href="{{ route('checkout') }}" class="btn btn-gradient w-100 btn-lg"><i class="bi bi-shield-check me-2" aria-hidden="true"></i>Lanjut ke Checkout</a>
          @guest
            <p class="small text-muted-soft text-center mt-2 mb-0">Kamu akan diminta masuk atau daftar dulu sebelum checkout.</p>
          @endguest
          <div class="pay-hint mt-3">
            <span class="small text-muted-soft">Bayar dengan</span>
            <span class="pay-chip"><i class="bi bi-bank" aria-hidden="true"></i>Virtual Account</span>
            <span class="pay-chip"><i class="bi bi-qr-code" aria-hidden="true"></i>QRIS</span>
          </div>
        </div>
      </div>
    </div>
    @endif
  </div>
</section>
@endsection