@extends('layouts.app')

@section('content')
<style>
  .text-success { color: #278c04 !important; }
  .text-danger { color: #d61808 !important; }
  .tombol-clear { background-color: #e11a1a !important; color: white; }
</style>

<main class="pt-90">
  <div class="mb-4 pb-4"></div>

  <section class="shop-checkout container">
    <h2 class="page-title">Keranjang</h2>

    <div class="checkout-steps">
      @foreach([1 => 'Keranjang Pembelian', 2 => 'Pengiriman dan Pembayaran', 3 => 'Konfirmasi'] as $step => $label)
        <a href="javascript:void(0)" class="checkout-steps__item {{ $step === 1 ? 'active' : '' }}">
          <span class="checkout-steps__item-number">0{{ $step }}</span>
          <span class="checkout-steps__item-title">
            <span>{{ $label }}</span>
            <em>
              @if ($step === 1) Kelola Daftar Barang Anda
              @elseif ($step === 2) Periksa Daftar Item Anda
              @else Tinjau dan Kirim Pesanan Anda @endif
            </em>
          </span>
        </a>
      @endforeach
    </div>

    <div class="shopping-cart">
      @if($items->count() > 0)
      <div class="cart-table__wrapper">
        <table class="cart-table">
          <thead>
            <tr>
              <th>Product</th>
              <th></th>
              <th>Harga</th>
              <th>Quantity</th>
              <th>Subtotal</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @foreach($items as $item)
            <tr>
              <td>
                <div class="shopping-cart__product-item">
                  <img loading="lazy" src="{{ asset('storage/products/' . $item->model->image) }}" width="100" height="100" alt="{{ $item->name }}" />
                </div>
              </td>
              <td>
                <div class="shopping-cart__product-item__detail">
                  <h4>{{ $item->name }}</h4>
                  <ul class="shopping-cart__product-item__options">
                    <li>Color: Pink</li>
                    <li>Size: L</li>
                  </ul>
                </div>
              </td>
              <td>
                <span class="shopping-cart__product-price">
                  Rp {{ number_format($item->price, 0, ',', '.') }}
                </span>
              </td>
              <td>
                <div class="qty-control position-relative">
                  <input type="number" name="quantity" value="{{ $item->qty }}" min="1" class="qty-control__number text-center">
                  <form method="POST" action="{{ route('cart.quantity.decrease', ['rowId' => $item->rowId]) }}">
                    @csrf @method('PUT')
                    <div class="qty-control__reduce">-</div>
                  </form>
                  <form method="POST" action="{{ route('cart.quantity.increase', ['rowId' => $item->rowId]) }}">
                    @csrf @method('PUT')
                    <div class="qty-control__increase">+</div>
                  </form>
                </div>
              </td>
              <td>
                <span class="shopping-cart__subtotal">
                  Rp {{ number_format((float) preg_replace('/[^\d.]/', '', $item->subTotal()), 0, ',', '.') }}
                </span>
              </td>
              <td>
                <form method="POST" action="{{ route('cart.remove', ['rowId' => $item->rowId]) }}">
                  @csrf @method('DELETE')
                  <a href="javascript:void(0)" class="remove-cart">
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="#767676" xmlns="http://www.w3.org/2000/svg">
                      <path d="M0.259435 8.85506L9.11449 0L10 0.885506L1.14494 9.74056L0.259435 8.85506Z" />
                      <path d="M0.885506 0.0889838L9.74057 8.94404L8.85506 9.82955L0 0.97449L0.885506 0.0889838Z" />
                    </svg>
                  </a>
                </form>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>

        <div class="cart-table-footer">
          <form action="{{ route('cart.clear') }}" method="POST">
            @csrf @method('DELETE')
            <button class="btn btn-light tombol-clear" type="submit">BERSIHKAN KERANJANG</button>
          </form>

          @if(Session::has('success'))
            <p class="text-success">{{ Session::get('success') }}</p>
          @elseif(Session::has('error'))
            <p class="text-danger">{{ Session::get('error') }}</p>
          @endif
        </div>
      </div>

      <div class="shopping-cart__totals-wrapper">
        <div class="sticky-content">
          <div class="shopping-cart__totals">
            <h3>Cart Totals</h3>

            @if(Session::has('discounts'))
            <table class="cart-totals">
              <tbody>
                <tr>
                  <th>Subtotal</th>
                  <td>Rp {{ number_format((float) preg_replace('/[^\d.]/', '', Cart::instance('cart')->subTotal()), 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Diskon ({{ Session::get('coupon')['code'] }})</th>
                  <td>Rp {{ number_format((float) Session::get('discounts')['discount'], 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Subtotal Setelah Diskon</th>
                  <td>Rp {{ number_format((float) Session::get('discounts')['subtotal'], 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Pengiriman</th>
                  <td>Gratis</td>
                </tr>
                <tr>
                  <th>VAT</th>
                  <td>Rp {{ number_format((float) Session::get('discounts')['tax'], 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Total</th>
                  <td>Rp {{ number_format((float) Session::get('discounts')['total'], 0, ',', '.') }}</td>
                </tr>
              </tbody>
            </table>
            @else
            <table class="cart-totals">
              <tbody>
                <tr>
                  <th>Subtotal</th>
                  <td>Rp {{ number_format((float) preg_replace('/[^\d.]/', '', Cart::instance('cart')->subTotal()), 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Pengiriman</th>
                  <td>Gratis</td>
                </tr>
                <tr>
                  <th>VAT</th>
                  <td>Rp {{ number_format((float) preg_replace('/[^\d.]/', '', Cart::instance('cart')->tax()), 0, ',', '.') }}</td>
                </tr>
                <tr>
                  <th>Total</th>
                  <td>Rp {{ number_format((float) preg_replace('/[^\d.]/', '', Cart::instance('cart')->total()), 0, ',', '.') }}</td>
                </tr>
              </tbody>
            </table>
            @endif
          </div>

          <div class="mobile_fixed-btn_wrapper">
            <div class="button-wrapper container">
              <a href="{{ route('cart.checkout') }}" class="btn btn-primary btn-checkout">LANJUTKAN PEMBELIAN</a>
            </div>
          </div>
        </div>
      </div>
      @else
      <div class="row">
        <div class="col-md-12 text-center pt-5 bp-5">
          <p>Tidak ada item yang ditemukan di keranjang Anda</p>
          <a href="{{ route('home.index') }}" class="btn btn-info">Beli Sekarang</a>
        </div>
      </div>
      @endif
    </div>
  </section>
</main>
@endsection

@push('scripts')
<script>
  $(function(){
    $(".qty-control__increase").on("click", function(){ $(this).closest('form').submit(); });
    $(".qty-control__reduce").on("click", function(){ $(this).closest('form').submit(); });
    $(".remove-cart").on("click", function(){ $(this).closest('form').submit(); });
  });
</script>
@endpush