@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-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-btn:disabled {
                opacity: .4;
                cursor: not-allowed;
            }

            .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;
            }

            .cart-row-removing {
                opacity: .45;
                pointer-events: none;
                transition: opacity .25s;
            }

            .btn-remove-item {
                background: none;
                border: none;
                cursor: pointer;
                color: var(--mist);
                font-size: .85rem;
                padding: 4px 8px;
                border-radius: 6px;
                transition: color .15s, background .15s;
                margin-left: 6px;
            }

            .btn-remove-item:hover {
                color: #b91c1c;
                background: #fef2f2;
            }

            #cart-toast-container {
                position: fixed;
                bottom: 28px;
                right: 24px;
                z-index: 9999;
                display: flex;
                flex-direction: column;
                gap: 10px;
                pointer-events: none;
            }

            .cart-toast {
                background: #1c1c1c;
                color: #fff;
                border-radius: 12px;
                padding: 13px 20px;
                font-size: .84rem;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 10px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
                min-width: 220px;
                max-width: 320px;
                pointer-events: all;
                animation: ctToastIn .28s cubic-bezier(.34, 1.56, .64, 1) forwards;
            }

            .cart-toast.cart-toast-success {
                background: #1a3a2a;
                border-left: 4px solid #4ade80;
            }

            .cart-toast.cart-toast-error {
                background: #3a1a1a;
                border-left: 4px solid #c8543a;
            }

            .cart-toast.cart-toast-out {
                animation: ctToastOut .28s ease forwards;
            }

            @keyframes ctToastIn {
                from {
                    opacity: 0;
                    transform: translateY(18px) scale(.94)
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            @keyframes ctToastOut {
                from {
                    opacity: 1;
                    transform: none
                }

                to {
                    opacity: 0;
                    transform: translateY(10px)
                }
            }

            .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 $key => $item)
                                @php $cartKey = $item['cart_item_key'] ?? $item['product_id']; @endphp
                                <tr id="cart-row-{{ $cartKey }}" data-cart-key="{{ $cartKey }}"
                                    data-product-id="{{ $item['product_id'] }}"
                                    data-unit-price="{{ (float) $item['unit_price'] }}"
                                    data-stock="{{ (int) ($item['stock'] ?? 99) }}"
                                    data-update-url="{{ route('storefront.cart.quantity', ['product' => $item['product_id']]) }}">
                                    <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">
                                            <button type="button" class="qty-group-btn"
                                                onclick="cartChangeQty('{{ $cartKey }}', 'decrease')"
                                                id="dec-{{ $cartKey }}">−</button>
                                            <span class="qty-group-val"
                                                id="qval-{{ $cartKey }}">{{ $item['quantity'] }}</span>
                                            <button type="button" class="qty-group-btn"
                                                onclick="cartChangeQty('{{ $cartKey }}', 'increase')"
                                                id="inc-{{ $cartKey }}"
                                                {{ (int) $item['quantity'] >= (int) ($item['stock'] ?? 99) ? 'disabled' : '' }}>+</button>
                                        </div>
                                        <button type="button" class="btn-remove-item"
                                            onclick="cartRemoveRow('{{ $cartKey }}')" title="Remove item">
                                            <i class="bi bi-trash3"></i>
                                        </button>
                                    </td>
                                    <td class="price-right">{{ number_format((float) $item['unit_price'], 0) }}৳</td>
                                    <td class="subtotal-right" id="sub-{{ $cartKey }}">
                                        {{ 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 (<span id="summary-count">{{ count($cartItems) }}</span> items)</span>
                            <span id="summary-subtotal">{{ 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 id="summary-total">{{ 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>

    <div id="cart-toast-container"></div>

@endsection

@push('frontend_js')
    <script>
        const CART_CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // ── TOAST ──
        function cartToast(msg, type = 'success') {
            const c = document.getElementById('cart-toast-container');
            const el = document.createElement('div');
            el.className = `cart-toast cart-toast-${type}`;
            el.innerHTML = `<span>${type === 'success' ? '✓' : '✕'}</span><span>${msg}</span>`;
            c.appendChild(el);
            setTimeout(() => {
                el.classList.add('cart-toast-out');
                setTimeout(() => el.remove(), 300);
            }, 2600);
        }

        // ── NAVBAR BADGE ──
        function updateNavBadge(cartArray) {
            const count = cartArray.reduce((s, i) => s + Number(i.quantity || 0), 0);
            const badge = document.getElementById('nav-cart-badge');
            if (!badge) return;
            if (count > 0) {
                badge.textContent = count > 99 ? '99+' : count;
                badge.style.display = '';
                badge.classList.remove('badge-pop');
                void badge.offsetWidth;
                badge.classList.add('badge-pop');
            } else {
                badge.style.display = 'none';
            }
        }

        // ── SUMMARY PANEL ──
        function refreshSummary() {
            let total = 0;
            let count = 0;
            document.querySelectorAll('tr[data-cart-key]').forEach(row => {
                if (row.classList.contains('cart-row-removing')) return;
                const unitPrice = parseFloat(row.dataset.unitPrice || 0);
                const qty = parseInt(document.getElementById('qval-' + row.dataset.cartKey)?.textContent || 0, 10);
                total += unitPrice * qty;
                count++;
            });
            const fmt = v => Math.round(v).toLocaleString('en-US') + '৳';
            const sc = document.getElementById('summary-count');
            const ss = document.getElementById('summary-subtotal');
            const st = document.getElementById('summary-total');
            if (sc) sc.textContent = count;
            if (ss) ss.textContent = fmt(total);
            if (st) st.textContent = fmt(total);
        }

        // ── CHANGE QTY ──
        async function cartChangeQty(cartKey, action) {
            const row = document.getElementById('cart-row-' + cartKey);
            if (!row) return;
            const url = row.dataset.updateUrl;
            const stock = parseInt(row.dataset.stock || '99', 10);
            const qvalEl = document.getElementById('qval-' + cartKey);
            const subEl = document.getElementById('sub-' + cartKey);
            const decBtn = document.getElementById('dec-' + cartKey);
            const incBtn = document.getElementById('inc-' + cartKey);
            const unitPrice = parseFloat(row.dataset.unitPrice || 0);
            const currentQty = parseInt(qvalEl?.textContent || '1', 10);

            if (action === 'increase' && currentQty >= stock) {
                cartToast('Stock limit reached.', 'error');
                return;
            }

            // Optimistic update
            const nextQty = action === 'increase' ? currentQty + 1 : Math.max(1, currentQty - 1);
            if (qvalEl) qvalEl.textContent = nextQty;
            if (subEl) subEl.textContent = Math.round(unitPrice * nextQty).toLocaleString('en-US') + '৳';
            if (decBtn) decBtn.disabled = nextQty <= 1;
            if (incBtn) incBtn.disabled = nextQty >= stock;
            refreshSummary();

            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': CART_CSRF,
                        'Accept': 'application/json',
                    },
                    body: new URLSearchParams({
                        _token: CART_CSRF,
                        action,
                        cart_item_key: cartKey
                    }),
                });

                const data = await res.json().catch(() => ({}));
                if (!res.ok) throw new Error(data.message || 'Update failed');

                // Confirm from server response
                if (qvalEl && data.quantity != null) qvalEl.textContent = data.quantity;
                if (subEl && data.quantity != null) subEl.textContent = Math.round(unitPrice * data.quantity)
                    .toLocaleString('en-US') + '৳';
                if (decBtn) decBtn.disabled = (data.quantity ?? nextQty) <= 1;
                if (incBtn) incBtn.disabled = (data.quantity ?? nextQty) >= stock;
                refreshSummary();
                if (Array.isArray(data.cart)) updateNavBadge(data.cart);

            } catch (err) {
                // Rollback
                if (qvalEl) qvalEl.textContent = currentQty;
                if (subEl) subEl.textContent = Math.round(unitPrice * currentQty).toLocaleString('en-US') + '৳';
                if (decBtn) decBtn.disabled = currentQty <= 1;
                if (incBtn) incBtn.disabled = currentQty >= stock;
                refreshSummary();
                cartToast(err.message || 'Could not update. Try again.', 'error');
            }
        }

        // ── REMOVE ROW ──
        async function cartRemoveRow(cartKey) {
            const row = document.getElementById('cart-row-' + cartKey);
            if (!row) return;
            const productId = row.dataset.productId;
            const removeUrl = `/cart/items/${productId}`;

            row.classList.add('cart-row-removing');
            refreshSummary();

            try {
                const res = await fetch(removeUrl, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': CART_CSRF,
                        'Accept': 'application/json',
                    },
                    body: new URLSearchParams({
                        _token: CART_CSRF,
                        cart_item_key: cartKey
                    }),
                });
                const data = await res.json().catch(() => ({}));
                if (Array.isArray(data.cart)) updateNavBadge(data.cart);
            } catch (_) {}

            setTimeout(() => {
                row.remove();
                refreshSummary();
                const tbody = document.querySelector('.cart-table tbody');
                if (tbody && tbody.querySelectorAll('tr').length === 0) {
                    location.reload();
                }
            }, 260);

            cartToast('Item removed from cart.', 'success');
        }
    </script>
@endpush