@extends('layouts.app')
@section('title', "Cart — God's Treat")

@push('styles')
<style>
  .cart-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:110px 5% 60px;max-width:1300px;margin:0 auto;}
  .cart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
  .cart-title{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;}
  .cart-item{display:grid;grid-template-columns:110px 1fr auto;gap:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;align-items:center;animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .cart-item-img{width:110px;height:110px;background:rgba(255,107,26,.06);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .cart-item-img img{max-width:85%;max-height:85%;object-fit:contain;}
  .item-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);margin-bottom:4px;}
  .item-name{font-weight:700;font-size:1rem;margin-bottom:4px;}
  .item-weight{color:var(--muted);font-size:.8rem;margin-bottom:14px;}
  .item-qty{display:flex;align-items:center;gap:12px;}
  .iqty-btn{width:32px;height:32px;background:var(--card2);border:1px solid var(--border2);color:var(--white);border-radius:8px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s;}
  .iqty-btn:hover{background:var(--orange);border-color:var(--orange);color:#0a0a14;}
  .iqty-val{font-weight:700;font-size:1.1rem;min-width:24px;text-align:center;}
  .item-price{font-size:1.3rem;font-weight:800;text-align:right;}
  .item-price-old{font-size:.85rem;color:var(--muted);text-decoration:line-through;text-align:right;margin-top:2px;}
  .remove-btn{background:none;border:1px solid rgba(247,37,133,.3);color:var(--pink);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;margin-top:10px;transition:all .2s;}
  .remove-btn:hover{background:rgba(247,37,133,.15);}
  /* Summary */
  .order-summary{position:sticky;top:100px;height:fit-content;}
  .delivery-note{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.2);border-radius:14px;padding:16px;display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
  .dn-icon{font-size:1.6rem;}
  .summary-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px;}
  .summary-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);}
  .summary-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:.9rem;}
  .summary-row.total{padding-top:14px;border-top:1px solid var(--border);font-size:1.1rem;font-weight:700;margin-top:4px;}
  .saved{color:#06d6a0;font-weight:700;}
  .free-tag{background:rgba(6,214,160,.15);color:#06d6a0;padding:2px 10px;border-radius:50px;font-size:.75rem;font-weight:700;}
  .delivery-bar{background:var(--border);border-radius:50px;height:6px;margin-top:8px;overflow:hidden;}
  .delivery-bar-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:50px;transition:width .5s;}
  .empty-cart{text-align:center;padding:80px 20px;grid-column:1/-1;}
  @media(max-width:768px){.cart-layout{grid-template-columns:1fr}.order-summary{position:static}.cart-item{grid-template-columns:80px 1fr}}
</style>
@endpush

@section('content')
<div class="cart-layout">
  <!-- Left: Items -->
  <div>
    <div class="cart-header">
      <h1 class="cart-title">YOUR CART <span class="gradient-text">({{ $items->sum('qty') }} items)</span></h1>
      @if($items->count() > 0)
      <form method="POST" action="{{ route('cart.clear') }}">
        @csrf @method('DELETE')
        <button class="remove-btn" type="submit">Clear All</button>
      </form>
      @endif
    </div>

    @forelse($items as $item)
    <div class="cart-item">
      <div class="cart-item-img">
        <img src="{{ asset('images/' . $item->product->image) }}" alt="{{ $item->product->name }}"
          onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><rect width=%22100%22 height=%22100%22 fill=%22%23ff6b1a11%22/><text x=%2250%22 y=%2258%22 text-anchor=%22middle%22 fill=%22%23ff6b1a55%22 font-size=%2240%22>🌾</text></svg>'"/>
      </div>
      <div>
        <div class="item-cat">{{ $item->product->category }}</div>
        <div class="item-name">{{ $item->product->name }}</div>
        <div class="item-weight">{{ $item->product->weight }}</div>
        <div class="item-qty">
          <form method="POST" action="{{ route('cart.update', $item->id) }}" style="display:flex;align-items:center;gap:10px">
            @csrf @method('PATCH')
            <button class="iqty-btn" type="submit" name="qty" value="{{ max(1, $item->qty - 1) }}">−</button>
            <div class="iqty-val">{{ $item->qty }}</div>
            <button class="iqty-btn" type="submit" name="qty" value="{{ $item->qty + 1 }}">+</button>
          </form>
        </div>
      </div>
      <div style="text-align:right">
        <div class="item-price">₹{{ number_format($item->product->price * $item->qty) }}</div>
        @if($item->product->old_price)
          <div class="item-price-old">₹{{ number_format($item->product->old_price * $item->qty) }}</div>
        @endif
        <form method="POST" action="{{ route('cart.remove', $item->id) }}">
          @csrf @method('DELETE')
          <button class="remove-btn" type="submit">✕ Remove</button>
        </form>
      </div>
    </div>
    @empty
    <div class="empty-cart">
      <div style="font-size:4rem;margin-bottom:16px">🛒</div>
      <h2 style="font-family:'Bebas Neue',sans-serif;font-size:2rem;margin-bottom:8px">CART IS EMPTY</h2>
      <p style="color:var(--muted);margin-bottom:24px">Add some makhana to get started!</p>
      <a href="{{ route('products') }}" class="btn-primary">Shop Now →</a>
    </div>
    @endforelse

    @if($items->count() > 0)
    <div style="margin-top:20px">
      <a href="{{ route('products') }}" style="color:var(--orange);text-decoration:none;font-size:.875rem;font-weight:600">← Continue Shopping</a>
    </div>
    @endif
  </div>

  <!-- Right: Summary -->
  @if($items->count() > 0)
  <div class="order-summary">
    @php
      $original = $items->sum(fn($i) => ($i->product->old_price ?? $i->product->price) * $i->qty);
      $saved = $original - $subtotal;
      $freeDeliveryAt = 499;
      $remaining = max(0, $freeDeliveryAt - $subtotal);
      $pct = min(100, ($subtotal / $freeDeliveryAt) * 100);
    @endphp
    <div class="delivery-note">
      <span class="dn-icon">🚚</span>
      <div>
        @if($remaining > 0)
          <p>Add <b>₹{{ number_format($remaining) }} more</b> for <b>FREE delivery!</b></p>
        @else
          <p>You've unlocked <b>FREE delivery!</b> 🎉</p>
        @endif
        <div class="delivery-bar"><div class="delivery-bar-fill" style="width:{{ $pct }}%"></div></div>
      </div>
    </div>

    <div class="summary-card">
      <h3 class="summary-title">ORDER SUMMARY</h3>
      <div class="summary-row"><span>Subtotal ({{ $items->sum('qty') }} items)</span><span>₹{{ number_format($subtotal) }}</span></div>
      <div class="summary-row"><span>Original Price</span><span style="text-decoration:line-through;color:var(--muted)">₹{{ number_format($original) }}</span></div>
      <div class="summary-row"><span>You Save</span><span class="saved">−₹{{ number_format($saved) }}</span></div>
      <div class="summary-row"><span>Delivery</span><span><span class="free-tag">FREE</span></span></div>
      <div class="summary-row total"><span>Total</span><span>₹{{ number_format($subtotal) }}</span></div>
    </div>

    <a href="{{ route('checkout') }}" class="btn-primary btn-full" style="font-size:.95rem;padding:16px;text-decoration:none;text-align:center;display:block">
      Proceed to Checkout →
    </a>

    <div style="display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap">
      <span style="color:var(--muted);font-size:.78rem">🔒 Secure</span>
      <span style="color:var(--muted);font-size:.78rem">💳 UPI / Card / COD</span>
      <span style="color:var(--muted);font-size:.78rem">🛡 Encrypted</span>
    </div>
  </div>
  @endif
</div>
@endsection
