@extends('layouts.store')

@section('title', __('Shopping Cart') . ' | OMNITRADE Global Direct')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 py-6 sm:py-8 lg:py-12">
    <!-- Breadcrumbs -->
    <nav class="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-body-sm text-on-surface-variant mb-4 sm:mb-6">
        <a href="{{ route('store.home') }}" class="hover:text-primary transition-colors">{{ __('Home') }}</a>
        <span class="text-outline">/</span>
        <span class="text-on-surface font-semibold">{{ __('Shopping Cart') }}</span>
    </nav>

    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight mb-6">
        {{ __('Shopping Cart') }} <span class="text-secondary text-lg font-normal">({{ $cartData['items_count'] }} {{ __('items') }})</span>
    </h1>

    @if(empty($cartData['items']))
        <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-12 sm:p-16 text-center max-w-lg mx-auto flex flex-col items-center">
            <span class="material-symbols-outlined text-[64px] text-outline mb-4">shopping_bag</span>
            <h2 class="text-xl font-bold text-on-surface mb-2">{{ __('Your cart is empty') }}</h2>
            <p class="text-xs sm:text-body-sm text-on-surface-variant mb-6">
                {{ __('Discover trending direct drops with guaranteed factory pricing and automated worldwide shipping.') }}
            </p>
            <a href="{{ route('store.catalog') }}" class="h-12 px-8 rounded-xl bg-primary-container hover:bg-primary text-on-primary font-label-lg font-bold flex items-center justify-center gap-2 transition-all shadow-md">
                <span>{{ __('Start Shopping') }}</span>
                <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
            </a>
        </div>
    @else
        <!-- Free Shipping Progress Meter -->
        <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-4 sm:p-5 mb-8 shadow-sm">
            <div class="flex items-center justify-between text-xs sm:text-sm font-bold text-on-surface mb-2">
                <span>{{ __('Worldwide Express Shipping') }}</span>
                @if($cartData['free_shipping_remaining'] <= 0)
                    <span class="text-primary font-bold">{{ __('🎉 You qualify for FREE Express Shipping!') }}</span>
                @else
                    <span class="text-secondary">
                        @if(app()->getLocale() === 'it')
                            Aggiungi altri <strong class="text-primary">${{ number_format($cartData['free_shipping_remaining'], 2) }}</strong> per la spedizione GRATIS
                        @else
                            Add <strong class="text-primary">${{ number_format($cartData['free_shipping_remaining'], 2) }}</strong> more for FREE Shipping
                        @endif
                    </span>
                @endif
            </div>
            <div class="w-full h-2 bg-surface-container rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-primary to-primary-container rounded-full transition-all duration-300" style="width: {{ $cartData['free_shipping_progress'] }}%;"></div>
            </div>
        </div>

        <!-- 2-Col Responsive Grid (Items on Left, Summary on Right) -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <!-- Items Column (lg:col-span-8) -->
            <div class="lg:col-span-8 bg-surface-container-lowest border border-surface-container rounded-2xl overflow-hidden shadow-sm">
                <!-- Header (Hidden on Mobile) -->
                <div class="hidden sm:grid sm:grid-cols-12 gap-4 p-4 bg-surface-container-low border-b border-surface-container text-xs font-bold uppercase tracking-wider text-secondary">
                    <div class="col-span-6">{{ __('Product') }}</div>
                    <div class="col-span-2 text-center">{{ __('Price') }}</div>
                    <div class="col-span-2 text-center">{{ __('Quantity') }}</div>
                    <div class="col-span-2 text-right">{{ __('Subtotal') }}</div>
                </div>

                <!-- Items Rows -->
                <div class="divide-y divide-surface-container p-4 sm:p-0">
                    @foreach($cartData['items'] as $item)
                        <div class="py-4 sm:p-4 sm:grid sm:grid-cols-12 sm:gap-4 sm:items-center flex flex-col gap-3">
                            <!-- Product Details -->
                            <div class="sm:col-span-6 flex items-center gap-3 sm:gap-4 min-w-0">
                                <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl object-cover bg-surface-container-low border border-surface-container shrink-0">
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-bold text-on-surface line-clamp-2 hover:text-primary transition-colors leading-snug">
                                        <a href="{{ route('store.product', $item['slug']) }}">{{ $item['title'] }}</a>
                                    </h3>
                                    @if(!empty($item['variant_title']))
                                        <div class="text-xs text-secondary mt-0.5">{{ $item['variant_title'] }}</div>
                                    @endif
                                    <form action="{{ route('cart.remove') }}" method="POST" class="inline-block mt-1">
                                        @csrf
                                        <input type="hidden" name="cart_key" value="{{ $item['cart_key'] }}">
                                        <button type="submit" class="text-xs text-error hover:underline font-semibold cursor-pointer">
                                            {{ __('Remove') }}
                                        </button>
                                    </form>
                                </div>
                            </div>

                            <!-- Unit Price (Desktop) -->
                            <div class="hidden sm:block sm:col-span-2 text-center text-sm font-bold text-on-surface">
                                ${{ number_format($item['price'], 2) }}
                            </div>

                            <!-- Quantity Stepper & Mobile Price Row -->
                            <div class="sm:col-span-2 flex items-center justify-between sm:justify-center">
                                <span class="sm:hidden text-xs text-secondary">{{ __('Price') }}: <strong class="text-on-surface font-bold">${{ number_format($item['price'], 2) }}</strong></span>
                                <form action="{{ route('cart.update') }}" method="POST" class="flex items-center border border-surface-container-high rounded-xl bg-surface-container-lowest p-0.5">
                                    @csrf
                                    <input type="hidden" name="cart_key" value="{{ $item['cart_key'] }}">
                                    <button type="submit" name="quantity" value="{{ $item['quantity'] - 1 }}" class="w-8 h-8 flex items-center justify-center text-secondary hover:text-on-surface font-bold text-sm cursor-pointer">-</button>
                                    <span class="w-8 text-center text-xs font-bold text-on-surface">{{ $item['quantity'] }}</span>
                                    <button type="submit" name="quantity" value="{{ $item['quantity'] + 1 }}" class="w-8 h-8 flex items-center justify-center text-secondary hover:text-on-surface font-bold text-sm cursor-pointer">+</button>
                                </form>
                            </div>

                            <!-- Item Subtotal -->
                            <div class="sm:col-span-2 flex items-center justify-between sm:justify-end">
                                <span class="sm:hidden text-xs font-bold text-secondary">{{ __('Subtotal') }}:</span>
                                <span class="text-base sm:text-sm font-extrabold text-on-surface">
                                    ${{ number_format($item['price'] * $item['quantity'], 2) }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Footer Buttons -->
                <div class="p-4 bg-surface-container-low border-t border-surface-container flex items-center justify-between flex-wrap gap-3">
                    <a href="{{ route('store.catalog') }}" class="text-xs sm:text-sm text-primary hover:underline font-bold flex items-center gap-1">
                        <span class="material-symbols-outlined text-[16px]">arrow_back</span>
                        <span>{{ __('Continue Shopping') }}</span>
                    </a>
                    <form action="{{ route('cart.clear') }}" method="POST">
                        @csrf
                        <button type="submit" class="text-xs text-error hover:underline font-semibold cursor-pointer">
                            {{ __('Clear Entire Cart') }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Order Summary Column (lg:col-span-4) -->
            <div class="lg:col-span-4 bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-6 shadow-sm flex flex-col gap-4 sticky top-44">
                <h2 class="text-lg font-bold text-on-surface border-b border-surface-container pb-3">
                    {{ __('Order Summary') }}
                </h2>

                <div class="space-y-2.5 text-sm text-on-surface-variant">
                    <div class="flex items-center justify-between">
                        <span>{{ __('Items Subtotal') }}</span>
                        <strong class="text-on-surface">${{ number_format($cartData['subtotal'], 2) }}</strong>
                    </div>
                    <div class="flex items-center justify-between">
                        <span>{{ __('Estimated Shipping') }}</span>
                        @if($cartData['shipping_fee'] == 0)
                            <strong class="text-primary">{{ __('Free') }}</strong>
                        @else
                            <strong class="text-on-surface">${{ number_format($cartData['shipping_fee'], 2) }}</strong>
                        @endif
                    </div>
                </div>

                <div class="pt-3 border-t border-surface-container flex items-baseline justify-between">
                    <span class="font-bold text-on-surface text-base">{{ __('Estimated Total') }}</span>
                    <span class="text-2xl sm:text-3xl font-extrabold text-on-surface font-headline-xl">
                        ${{ number_format($cartData['total'], 2) }}
                    </span>
                </div>

                <p class="text-[11px] text-outline">{{ __('Duties, taxes, and courier transit insurance included.') }}</p>

                <a href="{{ route('checkout.index') }}" class="w-full h-12 rounded-xl bg-primary-container hover:bg-primary text-on-primary font-label-lg font-bold flex items-center justify-center gap-2 shadow-md hover:shadow-lg transition-all transform active:scale-98">
                    <span class="material-symbols-outlined text-[20px]">lock</span>
                    <span>{{ __('Proceed to Checkout') }}</span>
                </a>

                <div class="pt-2 flex items-center justify-center gap-1.5 text-xs text-secondary text-center">
                    <span class="material-symbols-outlined text-primary text-[18px]">verified_user</span>
                    <span>{{ __('Encrypted 256-Bit SSL Checkout') }}</span>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection