@extends('frontendLayout')

@section('frontend_layout')

    @push('frontend_css')
        <title>Your Cart – ShopSphere</title>
        <style>
            .cart-wrap {
                max-width: 1100px;
                margin: 40px auto;
                padding: 0 24px 60px;
            }

            .cart-page-header {
                margin-bottom: 28px;
            }

            .cart-page-header h1 {
                font-family: 'Cormorant Garamond', Georgia, serif;
                font-size: 2rem;
                font-weight: 600;
                color: var(--charcoal);
                margin-bottom: 4px;
            }

            .cart-page-header p {
                font-size: .85rem;
                color: var(--mist);
            }

            .cart-layout {
                display: grid;
                grid-template-columns: 1fr 360px;
                gap: 28px;
                align-items: start;
            }

            @media (max-width: 960px) {
                .cart-layout {
                    grid-template-columns: 1fr;
                }
            }

            .cart-card {
                background: var(--warm-white);
                border: 1px solid var(--border);
                border-radius: var(--radius-md);
                overflow: hidden;
            }

            .cart-empty-state {
                padding: 64px 24px;
                text-align: center;
                color: var(--mist);
            }

            .cart-empty-state i {
                font-size: 3rem;
                display: block;
                margin-bottom: 14px;
                opacity: .5;
            }

            .cart-table {
                width: 100%;
                border-collapse: collapse;
            }

            .cart-table thead {
                background: var(--cream);
                border-bottom: 1px solid var(--border);
            }

            .cart-table th {
                padding: 14px 18px;
                font-size: .72rem;
                font-weight: 700;
                letter-spacing: .1em;
                text-transform: uppercase;
                color: var(--mist);
                text-align: left;
            }

            .cart-table td {
                padding: 18px;
                border-bottom: 1px solid var(--border-soft);
                vertical-align: middle;
            }

            .cart-table tbody tr:last-child td {
                border-bottom: none;
            }

            .product-cell {
                display: flex;
                gap: 14px;
                align-items: flex-start;
            }

            .product-thumb {
                width: 76px;
                height: 76px;
                border-radius: var(--radius-sm);
                object-fit: cover;
                flex-shrink: 0;
                border: 1px solid var(--border);
            }

            .product-meta h3 {
                font-size: .9rem;
                font-weight: 600;
                color: var(--charcoal);
                margin-bottom: 3px;
            }

            .product-meta .shop {
                font-size: .75rem;
                color: var(--mist);
                margin-bottom: 5px;
            }

            .variant-tag {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: .72rem;
                font-weight: 600;
                color: var(--gold);
                background: var(--gold-pale);
                border-radius: 4px;
                padding: 2px 7px;
            }

            .qty-group {
                display: inline-flex;
                align-items: center;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                overflow: hidden;
                background: var(--cream);
            }

            .qty-group form {
                display: contents;
            }

            .qty-group-btn {
                background: none;
                border: none;
                padding: 8px 13px;
                cursor: pointer;
                font-weight: 700;
                font-size: .9rem;
                color: var(--charcoal);
                transition: background .15s;
                line-height: 1;
            }

            .qty-group-btn:hover {
                background: var(--border-soft);
            }

            .qty-group-val {
                min-width: 38px;
                text-align: center;
                font-weight: 700;
                font-size: .85rem;
                border-left: 1px solid var(--border);
                border-right: 1px solid var(--border);
                padding: 0 6px;
                line-height: 2.4;
            }

            .price-right {
                text-align: right;
                font-weight: 600;
                font-size: .9rem;
                color: var(--ink);
            }

            .subtotal-right {
                text-align: right;
                font-weight: 700;
                font-size: 1rem;
                color: var(--charcoal);
            }

            .checkout-sidebar {
                position: sticky;
                top: 90px;
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .sidebar-card {
                background: var(--warm-white);
                border: 1px solid var(--border);
                border-radius: var(--radius-md);
                padding: 24px;
            }

            .sidebar-card h2 {
                font-family: 'Cormorant Garamond', Georgia, serif;
                font-size: 1.15rem;
                font-weight: 600;
                color: var(--charcoal);
                margin-bottom: 18px;
                padding-bottom: 12px;
                border-bottom: 1px solid var(--border-soft);
            }

            .summary-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: .88rem;
                padding: 9px 0;
                color: var(--slate);
                border-bottom: 1px solid var(--border-soft);
            }

            .summary-row:last-child {
                border-bottom: none;
                padding-top: 14px;
                font-weight: 700;
                font-size: 1.05rem;
                color: var(--charcoal);
            }

            .form-field {
                margin-bottom: 14px;
            }

            .form-field label {
                display: block;
                font-size: .72rem;
                font-weight: 700;
                letter-spacing: .1em;
                text-transform: uppercase;
                color: var(--mist);
                margin-bottom: 6px;
            }

            .form-field input,
            .form-field textarea {
                width: 100%;
                padding: 10px 13px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                font-size: .88rem;
                font-family: inherit;
                color: var(--ink);
                background: var(--ivory);
                transition: border-color .2s, box-shadow .2s;
            }

            .form-field input:focus,
            .form-field textarea:focus {
                outline: none;
                border-color: var(--gold-light);
                box-shadow: 0 0 0 3px rgba(30, 58, 138, .08);
            }

            .form-field textarea {
                resize: vertical;
                min-height: 70px;
            }

            .btn-place-order {
                width: 100%;
                padding: 13px;
                background: var(--charcoal);
                color: #fff;
                border: none;
                border-radius: var(--radius-sm);
                font-family: inherit;
                font-size: .8rem;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                transition: background .2s, transform .1s;
                margin-top: 4px;
            }

            .btn-place-order:hover {
                background: var(--gold);
            }

            .btn-place-order:active {
                transform: scale(.98);
            }

            .btn-continue {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: .78rem;
                font-weight: 600;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--slate);
                text-decoration: none;
                transition: color .2s;
            }

            .btn-continue:hover {
                color: var(--charcoal);
            }

            @media (max-width: 576px) {

                .cart-table th:nth-child(3),
                .cart-table td:nth-child(3) {
                    display: none;
                }
            }
        </style>
    @endpush

    <div class="cart-wrap">
        <div class="cart-page-header">
            <h1><i class="bi bi-bag-check" style="font-size:1.6rem; vertical-align:middle; margin-right:10px;"></i>Your Cart
            </h1>
            <p>
                {{ count($cartItems) }} {{ count($cartItems) === 1 ? 'item' : 'items' }}
                &nbsp;·&nbsp;
                <a href="{{ route('storefront.home') }}" class="btn-continue">
                    <i class="bi bi-arrow-left"></i> Continue Shopping
                </a>
            </p>
        </div>

        @if (session('error'))
            <div
                style="background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:.88rem; display:flex; align-items:center; gap:8px;">
                <i class="bi bi-exclamation-circle-fill"></i> {{ session('error') }}
            </div>
        @endif

        @if (empty($cartItems))
            <div class="cart-card">
                <div class="cart-empty-state">
                    <i class="bi bi-bag-x"></i>
                    <p style="font-size:.95rem; margin-bottom:20px;">Your cart is empty.</p>
                    <a href="{{ route('storefront.home') }}"
                        style="display:inline-flex; align-items:center; gap:6px; padding:12px 24px; background:var(--charcoal); color:#fff; border-radius:var(--radius-sm); text-decoration:none; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;">
                        <i class="bi bi-shop"></i> Browse Shops
                    </a>
                </div>
            </div>
        @else
            <div class="cart-layout">
                {{-- Items Table --}}
                <div class="cart-card">
                    <table class="cart-table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Qty</th>
                                <th>Price</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cartItems as $item)
                                <tr>
                                    <td>
                                        <div class="product-cell">
                                            <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" class="product-thumb">
                                            <div class="product-meta">
                                                <h3>{{ $item['name'] }}</h3>
                                                <div class="shop">{{ $item['shop_name'] }}</div>
                                                @if (!empty($item['variant_label']))
                                                    <span class="variant-tag">
                                                        <i class="bi bi-tag"></i> {{ $item['variant_label'] }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="qty-group">
                                            <form method="POST"
                                                action="{{ route('storefront.cart.quantity', ['product' => $item['product_id']]) }}">
                                                @csrf
                                                <input type="hidden" name="action" value="decrease">
                                                <input type="hidden" name="cart_item_key"
                                                    value="{{ $item['cart_item_key'] ?? $item['product_id'] }}">
                                                <button type="submit" class="qty-group-btn">−</button>
                                            </form>
                                            <span class="qty-group-val">{{ $item['quantity'] }}</span>
                                            <form method="POST"
                                                action="{{ route('storefront.cart.quantity', ['product' => $item['product_id']]) }}">
                                                @csrf
                                                <input type="hidden" name="action" value="increase">
                                                <input type="hidden" name="cart_item_key"
                                                    value="{{ $item['cart_item_key'] ?? $item['product_id'] }}">
                                                <button type="submit" class="qty-group-btn">+</button>
                                            </form>
                                        </div>
                                    </td>
                                    <td class="price-right">{{ number_format((float) $item['unit_price'], 0) }}৳</td>
                                    <td class="subtotal-right">
                                        {{ number_format(((float) $item['unit_price']) * ((int) $item['quantity']), 0) }}৳
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Checkout Sidebar --}}
                <div class="checkout-sidebar">
                    <div class="sidebar-card">
                        <h2><i class="bi bi-receipt" style="font-size:.9rem; margin-right:6px;"></i>Order Summary</h2>
                        <div class="summary-row">
                            <span>Subtotal ({{ count($cartItems) }} items)</span>
                            <span>{{ number_format((float) $total, 0) }}৳</span>
                        </div>
                        <div class="summary-row">
                            <span>Shipping</span>
                            <span style="color:var(--mist);">Calculated at delivery</span>
                        </div>
                        <div class="summary-row">
                            <span>Total</span>
                            <span>{{ number_format((float) $total, 0) }}৳</span>
                        </div>
                    </div>

                    <div class="sidebar-card">
                        <h2><i class="bi bi-truck" style="font-size:.9rem; margin-right:6px;"></i>Delivery Details</h2>
                        <form method="POST" action="{{ route('storefront.checkout.cod') }}">
                            @csrf
                            <div class="form-field">
                                <label>Full Name</label>
                                <input type="text" name="customer_name" placeholder="Your full name"
                                    value="{{ old('customer_name') }}" required autocomplete="name">
                                @error('customer_name')
                                    <span style="color:#b91c1c; font-size:.75rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-field">
                                <label>Phone Number</label>
                                <input type="tel" name="phone" placeholder="01XXXXXXXXX" value="{{ old('phone') }}"
                                    required autocomplete="tel">
                                @error('phone')
                                    <span style="color:#b91c1c; font-size:.75rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-field">
                                <label>Delivery Address</label>
                                <textarea name="address" placeholder="Street, area, city" rows="3" required autocomplete="street-address">{{ old('address') }}</textarea>
                                @error('address')
                                    <span style="color:#b91c1c; font-size:.75rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-field">
                                <label>Notes <span
                                        style="font-weight:400; text-transform:none; letter-spacing:0;">(optional)</span></label>
                                <textarea name="notes" placeholder="Any special instructions?" rows="2">{{ old('notes') }}</textarea>
                            </div>
                            <button type="submit" class="btn-place-order">
                                <i class="bi bi-check2-circle"></i> Place COD Order
                            </button>
                        </form>
                        <p style="font-size:.72rem; color:var(--mist); text-align:center; margin-top:12px;">
                            <i class="bi bi-shield-check"></i> Cash on Delivery — no prepayment needed
                        </p>
                    </div>
                </div>
            </div>
        @endif
    </div>

@endsection
