@extends('layouts.master')

@section('title', 'Shopping Cart - DigitalStore')

@section('content')
<div class="bg-slate-50 min-h-screen pt-4 pb-20" x-data="{
    isLoading: false,
    itemCount: {{ $cart ? (int)$cart->items->count() : 0 }},
    subtotal: {{ (float)($totals['subtotal'] ?? 0) }},
    tax: {{ (float)($totals['tax'] ?? 0) }},
    total: {{ (float)($totals['total'] ?? 0) }},
    formatMoney(amount) {
        return parseFloat(amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    },
    async removeItem(productId, planId = 0) {
        if (this.isLoading) return;
        this.isLoading = true;
        
        try {
            const baseUrl = '{{ route('cart.items.remove', 'ITEM_ID') }}';
            const endpoint = (productId > 0 ? productId : planId);
            const url = baseUrl.replace('ITEM_ID', endpoint) + (productId > 0 ? '' : '?type=plan');

            const response = await fetch(url, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) throw new Error('Failed to remove item');

            const result = await response.json();
            const id = productId > 0 ? productId : `plan-${planId}`;
            
            // Remove from DOM
            const el = document.getElementById(`cart-item-${id}`);
            const elMobile = document.getElementById(`cart-item-mobile-${id}`);
            if (el) el.remove();
            if (elMobile) elMobile.remove();

            if (result.data) {
                this.itemCount = result.data.item_count;
                this.subtotal = result.data.subtotal;
                this.tax = result.data.tax;
                this.total = result.data.total;

                if (this.itemCount === 0) {
                    window.location.reload();
                    return;
                }

                // Update header count
                window.dispatchEvent(new CustomEvent('cart-updated', { 
                    detail: { count: result.data.item_count } 
                }));
            }
        } catch (e) {
            console.error('Error removing item:', e);
            alert('Could not remove item. Please check your connection and try again.');
        } finally {
            this.isLoading = false;
        }
    }
}">
    <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
        {{-- Header --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
            <div>
                <h1 class="text-base md:text-lg font-900 text-slate-900 tracking-tight">Shopping Cart</h1>
                <nav class="flex items-center gap-2 text-sm font-600 text-slate-400">
                    <a href="{{ route('storefront.home') }}" class="hover:text-brand-500 transition-colors">Home</a>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    <span class="text-slate-500">Cart</span>
                </nav>
            </div>
            <a href="{{ route('storefront.products') }}" class="h-10 px-5 bg-white border border-slate-200 text-slate-600 rounded-xl font-800 flex items-center gap-2 hover:bg-slate-50 transition-all text-[12px] shadow-sm">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Continue Shopping
            </a>
        </div>

        @if($cart && !$cart->isEmpty())
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
            {{-- Main Content --}}
            <div class="lg:col-span-8 space-y-8">
                {{-- Cart Items --}}
                <div class="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
                    {{-- Desktop Table --}}
                    <div class="hidden md:block">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="border-b border-slate-50">
                                    <th class="px-6 py-4 text-[9px] font-800 text-slate-400 uppercase tracking-[0.2em]">Acquisition</th>
                                    <th class="px-6 py-4 text-[9px] font-800 text-slate-400 uppercase tracking-[0.2em] text-center">Price</th>
                                    <th class="px-6 py-4 text-[9px] font-800 text-slate-400 uppercase tracking-[0.2em] text-center">Qty</th>
                                    <th class="px-6 py-4 text-[9px] font-800 text-slate-400 uppercase tracking-[0.2em] text-center">Subtotal</th>
                                    <th class="px-6 py-4"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @foreach($cart->items as $item)
                                @php $prod = $item->product; @endphp
                                <tr id="cart-item-{{ $item->product_id ?? 'plan-' . $item->plan_id }}" class="group hover:bg-slate-50/50 transition-all">
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-5">
                                            <div class="w-16 h-16 rounded-xl overflow-hidden bg-slate-100 border border-slate-100 shrink-0">
                                                @if($prod)
                                                    <img src="{{ $prod->thumbnail_url }}" class="w-full h-full object-cover">
                                                @elseif($item->plan)
                                                    <div class="w-full h-full flex items-center justify-center text-brand-500 bg-brand-50">
                                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="space-y-0.5">
                                                <h3 class="text-[12px] font-bold text-slate-900 leading-tight">{{ $prod->title ?? $item->plan->name ?? 'Product' }}</h3>
                                                <p class="text-[10px] font-600 text-slate-400">{{ $item->plan ? 'Subscription' : 'License' }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 text-center">
                                        <span class="text-slate-600 font-800 tabular-nums text-sm">${{ number_format($item->price, 2) }}</span>
                                    </td>
                                    <td class="px-6 py-6 text-center">
                                        <div class="inline-flex items-center bg-slate-100 rounded-lg p-0.5 border border-slate-200">
                                            <button class="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
                                                <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4"/></svg>
                                            </button>
                                            <span class="w-8 text-[12px] font-900 text-slate-900 tabular-nums">1</span>
                                            <button class="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
                                                <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 text-center">
                                        <span class="text-slate-900 font-900 tabular-nums text-sm">${{ number_format($item->price, 2) }}</span>
                                    </td>
                                    <td class="px-6 py-6 text-right">
                                        <button @click.stop="removeItem({{ $item->product_id ?? 0 }}, {{ $item->plan_id ?? 0 }})" 
                                                class="w-9 h-9 inline-flex items-center justify-center rounded-lg bg-slate-50 text-slate-400 hover:bg-rose-50 hover:text-rose-600 transition-all cursor-pointer" 
                                                title="Remove item">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- Mobile List --}}
                    <div class="md:hidden divide-y divide-slate-100">
                        @foreach($cart->items as $item)
                        @php $prod = $item->product; $itemId = $item->product_id ?? 'plan-' . $item->plan_id; @endphp
                        <div id="cart-item-mobile-{{ $itemId }}" class="p-6 space-y-5 bg-white">
                            <div class="flex gap-5">
                                <div class="w-20 h-20 rounded-2xl overflow-hidden bg-slate-50 border border-slate-100 shrink-0">
                                    @if($prod)
                                        <img src="{{ $prod->thumbnail_url }}" class="w-full h-full object-cover">
                                    @elseif($item->plan)
                                        <div class="w-full h-full flex items-center justify-center text-brand-500 bg-brand-50">
                                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-[15px] font-900 text-slate-900 leading-snug">{{ $prod->title ?? $item->plan->name ?? 'Product' }}</h3>
                                    <p class="text-[10px] font-700 text-slate-400 mt-1 uppercase tracking-widest">{{ $item->plan ? 'Subscription' : 'Lifetime Access' }}</p>
                                    <div class="text-lg font-900 text-brand-500 mt-2">${{ number_format($item->price, 2) }}</div>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between gap-4 pt-4 border-t border-slate-50">
                                <div class="inline-flex items-center bg-slate-50 rounded-xl p-1 border border-slate-200">
                                    <button class="w-9 h-9 flex items-center justify-center text-slate-400">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4"/></svg>
                                    </button>
                                    <span class="w-8 text-sm font-900 text-slate-900 text-center tabular-nums">1</span>
                                    <button class="w-9 h-9 flex items-center justify-center text-slate-400">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                                    </button>
                                </div>
                                
                                <button @click.stop="removeItem({{ $item->product_id ?? 0 }}, {{ $item->plan_id ?? 0 }})" 
                                        class="flex items-center gap-2 px-4 py-2.5 bg-rose-50 text-rose-600 rounded-xl font-800 text-[11px] uppercase tracking-widest hover:bg-rose-100 transition-all border border-rose-100/50">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                    Remove
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Coupon --}}
                <div class="bg-white rounded-[2rem] border border-slate-200 p-6 md:p-8 shadow-sm flex flex-col md:flex-row items-center justify-between gap-6">
                    <div class="flex items-center gap-4 md:gap-5 w-full md:w-auto">
                        <div class="w-12 h-12 md:w-14 md:h-14 bg-brand-50 rounded-2xl flex items-center justify-center text-brand-500 shrink-0">
                            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                        </div>
                        <div>
                            <h4 class="text-sm md:text-base font-900 text-slate-900 mb-0.5 md:mb-1">Have a coupon code?</h4>
                            <p class="text-[10px] md:text-xs font-600 text-slate-400">Apply code for instant discount.</p>
                        </div>
                    </div>
                    <div class="flex w-full md:w-auto items-center gap-2">
                        <input type="text" placeholder="Enter code" class="h-11 md:h-12 flex-1 md:w-48 px-4 md:px-5 bg-slate-50 border border-slate-200 rounded-xl font-600 text-slate-900 focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all outline-none text-xs md:text-sm">
                        <button class="h-11 md:h-12 px-6 md:px-8 bg-brand-500 text-white rounded-xl font-800 hover:bg-brand-600 transition-all shadow-lg shadow-brand-500/20 text-xs md:text-sm whitespace-nowrap">Apply</button>
                    </div>
                </div>

                {{-- Trust Badges --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 pt-4">
                    @php
                        $badges = [
                            ['icon' => 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', 'title' => 'Instant Download', 'desc' => 'Your files available immediately after purchase.'],
                            ['icon' => 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', 'title' => 'Secure Payment', 'desc' => '100% secure payment with SSL encryption.'],
                            ['icon' => 'M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', 'title' => 'Commercial License', 'desc' => 'Use in personal & client projects. No attribution.'],
                            ['icon' => 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z', 'title' => '24/7 Support', 'desc' => 'We\'re here to help you anytime you need.'],
                        ];
                    @endphp
                    @foreach($badges as $b)
                    <div class="space-y-3">
                        <div class="text-brand-500">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $b['icon'] }}"/></svg>
                        </div>
                        <h5 class="text-xs font-900 text-slate-900 uppercase tracking-tight">{{ $b['title'] }}</h5>
                        <p class="text-[10px] font-600 text-slate-400 leading-relaxed">{{ $b['desc'] }}</p>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="lg:col-span-4 space-y-6">
                {{-- Order Summary --}}
                <div class="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
                    <h2 class="text-sm font-900 text-slate-900 uppercase tracking-widest mb-4">Summary</h2>
                    <p class="text-[10px] font-700 text-slate-400 uppercase tracking-widest mb-6" x-text="itemCount + ' items'"></p>

                    <div class="space-y-4 mb-10">
                        <div class="flex justify-between items-center text-sm font-700">
                            <span class="text-slate-400">Subtotal</span>
                            <span class="text-slate-900 tabular-nums" x-text="'$' + formatMoney(subtotal)"></span>
                        </div>
                        <div class="flex justify-between items-center text-sm font-700">
                            <span class="text-slate-400">Discount</span>
                            <span class="text-emerald-500 tabular-nums">-$0.00</span>
                        </div>
                        <div class="flex justify-between items-center text-sm font-700">
                            <span class="text-slate-400">Tax (0%)</span>
                            <span class="text-slate-900 tabular-nums">$0.00</span>
                        </div>
                    </div>

                    <div class="pt-6 border-t border-slate-100 flex justify-between items-baseline mb-8">
                        <span class="text-lg font-900 text-slate-900 uppercase tracking-tight">Total</span>
                        <span class="text-3xl font-900 text-brand-500 tabular-nums" x-text="'$' + formatMoney(total)"></span>
                    </div>

                    <a href="{{ route('checkout.index') }}" class="h-14 w-full bg-brand-500 text-white rounded-2xl font-800 flex items-center justify-center gap-3 hover:bg-brand-600 transition-all shadow-xl shadow-brand-500/20 text-base mb-6">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        Proceed to Checkout
                    </a>

                    <div class="flex items-center justify-center gap-2 text-[11px] font-700 text-slate-400 uppercase tracking-widest">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        Secure & Encrypted
                    </div>
                </div>

                {{-- Payment Methods --}}
                <div class="bg-white rounded-[2rem] border border-slate-200 p-8 shadow-sm">
                    <h5 class="text-xs font-900 text-slate-900 uppercase tracking-widest mb-6">We Accept</h5>
                    <div class="flex flex-wrap gap-4 opacity-40">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" class="h-4" alt="Visa">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" class="h-6" alt="Mastercard">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" class="h-6" alt="PayPal">
                    </div>
                </div>

                {{-- Help --}}
                <div class="bg-indigo-50 rounded-[2rem] border border-indigo-100 p-8 shadow-sm space-y-4">
                    <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-500 shadow-sm">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    </div>
                    <div>
                        <h5 class="text-base font-900 text-slate-900 mb-1">Need Help?</h5>
                        <p class="text-xs font-600 text-slate-500 leading-relaxed">If you have any questions, feel free to contact our support team.</p>
                    </div>
                    <a href="#" class="text-brand-500 font-800 text-sm flex items-center gap-2 hover:gap-3 transition-all">
                        Contact Support
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
        </div>
        @else
        {{-- Empty State --}}
        <div class="bg-white rounded-[3rem] border border-slate-200 p-20 text-center flex flex-col items-center justify-center shadow-sm">
            <div class="w-24 h-24 bg-slate-50 border border-slate-100 rounded-3xl flex items-center justify-center text-slate-200 mb-8">
                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            </div>
            <h2 class="text-2xl font-900 text-slate-900 mb-4">Your Cart Is Empty</h2>
            <p class="text-slate-400 font-500 max-w-sm mx-auto mb-10 leading-relaxed">Explore our curated marketplace to find premium digital assets for your next big project.</p>
            <a href="{{ route('storefront.products') }}" class="h-14 px-10 bg-brand-500 text-white rounded-2xl font-800 flex items-center justify-center gap-3 hover:bg-brand-600 transition-all shadow-xl shadow-brand-500/20 text-base">
                Start Shopping
            </a>
        </div>
        @endif
    </div>
</div>
@endsection