@extends('layouts.app')

@section('title', 'Your Shopping Cart')

@section('content')
<div class="container py-3">
    {{-- Header Section --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h2 class="fw-bold fs-3 mb-0">Shopping Cart</h2>
            <p class="text-muted mb-0">You have <span class="text-primary fw-bold" id="cart-count-display">{{ $cart->items->count() }}</span> items in your cart</p>
        </div>
        <a href="{{ url('/products') }}" class="btn btn-outline-primary rounded-pill px-4">
            <i class="bi bi-arrow-left me-2"></i>Continue Shopping
        </a>
    </div>

    @if ($cart && $cart->items->count() > 0)
        <div class="row g-4">
            {{-- Left Side: Cart Items List --}}
            <div class="col-lg-8">
                <div class="card border-1 shadow-sm rounded-4">
                    <div class="card-body p-0">
                        @php $total = 0; @endphp
                        @foreach ($cart->items as $item)
                            @php
                                $subtotal = $item->price * $item->qty;
                                $total += $subtotal;
                            @endphp
                            
                            {{-- Item Row --}}
                            <div class="p-4 {{ !$loop->last ? 'border-bottom' : '' }}" id="cart-item-row-{{ $item->id }}">
                                <div class="row align-items-center">
                                    {{-- Product Image --}}
                                    <div class="col-3 col-md-2">
                                        <div class="bg-light rounded-3 overflow-hidden">
                                            <img src="{{ asset('storage/uploads/' . $item->product->thumbnail) }}"
                                                 class="img-fluid" 
                                                 alt="{{ $item->product->name }}"
                                                 style="aspect-ratio: 1/1; object-fit: cover;">
                                        </div>
                                    </div>

                                    {{-- Product Name & Price --}}
                                    <div class="col-9 col-md-4">
                                        <h6 class="fw-bold mb-1 text-truncate">{{ $item->product->name }}</h6>
                                        <div class="text-primary fw-semibold mb-0">₹{{ number_format($item->price, 2) }}</div>
                                        <small class="text-muted d-block d-md-none mt-1">Subtotal: ₹<span id="subtotal-{{ $item->id }}">{{ number_format($subtotal, 2) }}</span></small>
                                    </div>

                                    {{-- Quantity Controls (AJAX Ready) --}}
                                    <div class="col-7 col-md-3 mt-3 mt-md-0">
                                        <div class="input-group input-group-sm border rounded-pill overflow-hidden bg-light" style="max-width: 130px;">
                                            <button class="btn btn-link text-dark border-0 px-3 py-2" onclick="updateQty({{ $item->id }}, -1)">
                                                <i class="bi bi-dash-lg"></i>
                                            </button>
                                            <input type="text" id="qty-{{ $item->id }}" value="{{ $item->qty }}" 
                                                   class="form-control border-0 text-center bg-transparent fw-bold shadow-none" readonly>
                                            <button class="btn btn-link text-dark border-0 px-3 py-2" onclick="updateQty({{ $item->id }}, 1)">
                                                <i class="bi bi-plus-lg"></i>
                                            </button>
                                        </div>
                                    </div>

                                    {{-- Subtotal & Remove --}}
                                    <div class="col-5 col-md-3 text-end">
                                        <div class="d-none d-md-block fw-bold text-dark fs-5 mb-1">
                                            ₹<span class="item-subtotal" id="subtotal-desktop-{{ $item->id }}">{{ number_format($subtotal, 2) }}</span>
                                        </div>
                                        <button onclick="removeFromCart({{ $item->id }}, this)" 
                                                class="btn btn-link text-danger text-decoration-none p-0 small fw-semibold">
                                            <i class="bi bi-trash3 me-1"></i> Remove
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Right Side: Order Summary (Sticky) --}}
            <div class="col-lg-4">
                <div class="card border-1 shadow-sm rounded-4 sticky-top" style="top: 100px;">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Order Summary</h5>
                        
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Selected Items Subtotal</span>
                            <span class="fw-bold text-dark">₹<span class="cart-total-display">{{ number_format($total, 2) }}</span></span>
                        </div>
                        
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Estimated Shipping</span>
                            <span class="text-success fw-bold">FREE</span>
                        </div>

                        <div class="bg-light p-3 rounded-3 mb-4">
                            <label class="small fw-bold text-muted text-uppercase mb-2 d-block">Apply Coupon</label>
                            <div class="input-group">
                                <input type="text" class="form-control border-0 bg-white" placeholder="CODE20">
                                <button class="btn btn-dark px-3">Apply</button>
                            </div>
                        </div>

                        <hr class="opacity-25">
                        
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <span class="h5 fw-bold mb-0">Total Payable</span>
                            <span class="h3 fw-bold text-primary mb-0">₹<span class="cart-total-display">{{ number_format($total, 2) }}</span></span>
                        </div>

                        <a href="{{ url('/checkout') }}" class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow">
                            Proceed to Checkout <i class="bi bi-shield-check ms-2"></i>
                        </a>
                        
                        <div class="mt-4 pt-2 border-top">
                            <p class="small text-muted text-center mb-3">We accept secure payments via</p>
                            <div class="d-flex justify-content-center gap-3 grayscale opacity-50">
                                <i class="bi bi-credit-card-2-back fs-3"></i>
                                <i class="bi bi-paypal fs-3"></i>
                                <i class="bi bi-wallet2 fs-3"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        {{-- Empty Cart State --}}
        <div class="row justify-content-center py-5">
            <div class="col-md-6 text-center">
                <div class="mb-4">
                    <div class="bg-light d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 120px; height: 120px;">
                        <i class="bi bi-cart-x text-muted display-4"></i>
                    </div>
                </div>
                <h3 class="fw-bold">Your cart is currently empty</h3>
                <p class="text-muted mb-4">Before you proceed to checkout, you must add some products to your shopping cart. You will find a lot of interesting products on our "Shop" page.</p>
                <a href="{{ url('/products') }}" class="btn btn-primary btn-lg rounded-pill px-5">
                    Start Shopping
                </a>
            </div>
        </div>
    @endif
</div>

<style>
    .rounded-4 { border-radius: 1.25rem !important; }
    .bg-light { background-color: #f8f9fa !important; }
    .grayscale { filter: grayscale(1); }
    .btn-primary { background: #4e73df; border: none; }
    .btn-primary:hover { background: #2e59d9; }
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; margin: 0; 
    }
</style>
@endsection