@extends('front.layouts.app')

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

@section('content')
    <div class="min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <h1 class="text-3xl font-black tracking-tight text-white mb-8">Shopping Cart</h1>

            @if(session('success'))
                <div class="rounded-xl bg-emerald-500/10 border border-emerald-500/20 p-4 mb-8">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i data-lucide="check-circle" class="h-5 w-5 text-emerald-400"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-emerald-400">{{ session('success') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="rounded-xl bg-red-500/10 border border-red-500/20 p-4 mb-8">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i data-lucide="x-circle" class="h-5 w-5 text-red-400"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-red-400">{{ session('error') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="mt-8 lg:grid lg:grid-cols-12 lg:gap-x-12 lg:items-start xl:gap-x-16">
                <!-- Cart Items Section -->
                <section aria-labelledby="cart-heading" class="lg:col-span-8">
                    <h2 id="cart-heading" class="sr-only">Items in your shopping cart</h2>

                    @if($cart && $cart->items->count() > 0)
                        <ul role="list" class="divide-y divide-white/10 border-t border-b border-white/10">
                            @foreach($cart->items as $item)
                                <li class="flex py-6 sm:py-10">
                                    <div class="flex-shrink-0">
                                        @php
                                            $img = null;
                                            $itemName = 'Unknown';
                                            $itemLink = '#';
                                            $itemType = 'product';

                                            if ($item->astrologer_pooja_service_id && $item->poojaService) {
                                                $itemType = 'pooja';
                                                $itemName = $item->poojaService->poojaService->name ?? ($item->poojaService->custom_name ?? 'Ritual Service');
                                                $itemLink = route('pooja-services.show', $item->poojaService->poojaService->slug ?? 'service');
                                                $img = $item->poojaService->custom_image ?? ($item->poojaService->poojaService->image ?? null);
                                                if ($img)
                                                    $img = asset('storage/' . $img);
                                            } else if ($item->product) {
                                                $itemName = $item->product->name;
                                                $itemLink = route('shop.product', $item->product->slug);
                                                if ($item->variation && $item->variation->image_path) {
                                                    $img = $item->variation->image_path;
                                                } else {
                                                    $mainImage = $item->product->images->sortBy('sort_order')->first();
                                                    $img = $mainImage ? $mainImage->image_path : null;
                                                }
                                            }
                                            $imagePath = $img ?? 'https://placehold.co/200x200?text=No+Image';
                                        @endphp
                                        <div
                                            class="h-24 w-24 sm:h-32 sm:w-32 rounded-xl border border-white/10 overflow-hidden bg-slate-800">
                                            <img src="{{ $imagePath }}" alt="{{ $itemName }}"
                                                class="h-full w-full object-center object-cover hover:scale-105 transition-transform duration-500">
                                        </div>
                                    </div>

                                    <div class="ml-4 flex-1 flex flex-col justify-between sm:ml-6">
                                        <div class="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
                                            <div>
                                                <div class="flex justify-between">
                                                    <h3
                                                        class="text-lg font-bold text-white hover:text-yellow-500 transition-colors">
                                                        <a href="{{ $itemLink }}">
                                                            {{ $itemName }}
                                                        </a>
                                                    </h3>
                                                </div>
                                                <div class="mt-1 flex flex-col gap-1">
                                                    @if($itemType === 'pooja' && $item->poojaService)
                                                        <p
                                                            class="text-[10px] items-center gap-1.5 font-bold uppercase tracking-widest text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded-md border border-purple-500/20 inline-flex self-start">
                                                            <i data-lucide="user" class="w-3 h-3"></i>
                                                            Expert: {{ $item->poojaService->user->name }}
                                                        </p>
                                                    @endif

                                                    @if($item->variation)
                                                        <p
                                                            class="text-slate-400 font-medium bg-white/5 px-2 py-0.5 rounded-md inline-block border border-white/5 text-sm self-start">
                                                            @foreach($item->variation->options as $option)
                                                                {{ $option->attribute_value }}
                                                                @if(!$loop->last) / @endif
                                                            @endforeach
                                                        </p>
                                                    @endif
                                                </div>
                                                <p class="mt-2 text-lg font-bold text-yellow-500 tracking-tight">
                                                    ₹{{ number_format($item->price, 2) }}
                                                </p>
                                            </div>

                                            <div class="mt-4 sm:mt-0 sm:pr-9">
                                                @if($itemType === 'product')
                                                    <form action="{{ route('cart.update', $item->id) }}" method="POST"
                                                        class="flex items-center">
                                                        @csrf
                                                        <label for="quantity-{{ $item->id }}" class="sr-only">Quantity,
                                                            {{ $itemName }}</label>
                                                        <div class="relative rounded-lg w-24">
                                                            <select id="quantity-{{ $item->id }}" name="quantity"
                                                                onchange="this.form.submit()"
                                                                class="block w-full rounded-lg border-white/10 py-1.5 pl-3 pr-8 text-base font-medium text-white bg-slate-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm">
                                                                @for($i = 1; $i <= 10; $i++)
                                                                    <option value="{{ $i }}" {{ $item->quantity == $i ? 'selected' : '' }}>
                                                                        {{ $i }}
                                                                    </option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                    </form>
                                                @else
                                                    <div class="flex items-center">
                                                        <span class="text-xs font-bold text-slate-500 uppercase tracking-widest">Qty:
                                                            {{ $item->quantity }}</span>
                                                    </div>
                                                @endif

                                                <div class="absolute top-0 right-0 flex sm:bottom-0 sm:top-auto">
                                                    <!-- Move to Wishlist (Only for products) -->
                                                    @if($itemType === 'product')
                                                        <form action="{{ route('cart.move_to_wishlist', $item->id) }}" method="POST"
                                                            class="mr-3">
                                                            @csrf
                                                            <button type="submit"
                                                                class="group p-2 rounded-full hover:bg-white/5 transition-colors"
                                                                title="Move to Wishlist">
                                                                <i data-lucide="heart"
                                                                    class="w-5 h-5 text-slate-500 group-hover:text-rose-500 transition-colors"></i>
                                                            </button>
                                                        </form>
                                                    @endif

                                                    <!-- Remove -->
                                                    <a href="{{ route('cart.remove', $item->id) }}"
                                                        class="group p-2 rounded-full hover:bg-white/5 transition-colors"
                                                        title="Remove from Cart">
                                                        <span class="sr-only">Remove</span>
                                                        <i data-lucide="trash-2"
                                                            class="w-5 h-5 text-slate-500 group-hover:text-red-500 transition-colors"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <!-- Empty Cart State -->
                        <div class="text-center py-20 bg-white/5 rounded-3xl border border-white/5 border-dashed">
                            <div class="mx-auto h-24 w-24 bg-white/5 rounded-full flex items-center justify-center mb-6">
                                <i data-lucide="shopping-cart" class="w-12 h-12 text-slate-500"></i>
                            </div>
                            <h3 class="mt-2 text-xl font-bold text-white">Your cart is empty</h3>
                            <p class="mt-2 text-slate-400 max-w-sm mx-auto mb-8">Before you proceed to checkout, you must add
                                some products to your shopping cart.</p>
                            <a href="{{ route('shop.index') }}"
                                class="inline-flex items-center px-8 py-4 border border-transparent shadow-lg text-sm font-bold uppercase tracking-widest rounded-xl text-slate-900 bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-yellow-500 transition-all transform hover:-translate-y-1">
                                Start Shopping
                                <i data-lucide="arrow-right" class="ml-2 w-5 h-5"></i>
                            </a>
                        </div>
                    @endif
                </section>

                <!-- Order Summary Section -->
                @if($cart && $cart->items->count() > 0)
                    <section aria-labelledby="summary-heading"
                        class="mt-16 bg-slate-900/50 backdrop-blur-xl rounded-2xl border border-white/10 px-6 py-8 sm:p-8 lg:mt-0 lg:col-span-4 sticky top-24 shadow-2xl">
                        <h2 id="summary-heading" class="text-xl font-bold text-white mb-6 flex items-center">
                            Order Summary
                        </h2>

                        <dl class="space-y-4">
                            @php
                                $subtotal = 0;
                                foreach ($cart->items as $item) {
                                    $subtotal += $item->price * $item->quantity;
                                }
                                $shipping = 0;
                                $total = $subtotal + $shipping;
                            @endphp

                            <div class="flex items-center justify-between pb-4 border-b border-white/10">
                                <dt class="text-sm text-slate-400">Subtotal</dt>
                                <dd class="text-base font-semibold text-white">₹{{ number_format($subtotal, 2) }}</dd>
                            </div>

                            @if($automaticDiscount > 0)
                                <div class="flex items-center justify-between py-4 border-b border-white/10">
                                    <dt class="text-sm text-emerald-400 font-bold">Automatic Discount</dt>
                                    <dd class="text-base font-bold text-emerald-400">-₹{{ number_format($automaticDiscount, 2) }}
                                    </dd>
                                </div>
                            @endif

                            <div class="flex items-center justify-between pt-6 border-t border-white/10">
                                <dt class="text-lg font-bold text-white">Order Total</dt>
                                <dd class="text-2xl font-bold text-yellow-500">
                                    ₹{{ number_format($subtotal - $automaticDiscount, 2) }}</dd>
                            </div>
                        </dl>

                        <p class="mt-4 text-xs text-slate-500 text-center">Shipping & taxes calculated at checkout</p>

                        <div class="mt-8">
                            <a href="{{ route('cart.checkout.check') }}"
                                class="w-full bg-white border border-transparent rounded-xl shadow-lg py-4 px-4 text-base font-bold uppercase tracking-widest text-slate-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-white block text-center transition-all transform hover:-translate-y-1">
                                Proceed to Checkout
                            </a>
                        </div>

                        <div class="mt-6 flex justify-center">
                            <a href="{{ route('shop.index') }}"
                                class="group flex items-center text-sm font-medium text-slate-500 hover:text-white transition-colors">
                                <i data-lucide="arrow-left"
                                    class="mr-2 w-4 h-4 transform group-hover:-translate-x-1 transition-transform"></i>
                                Continue Shopping
                            </a>
                        </div>

                        <!-- Trust Badges -->
                        <div class="mt-8 pt-8 border-t border-white/10 grid grid-cols-3 gap-4 text-center">
                            <div class="flex flex-col items-center">
                                <i data-lucide="lock" class="w-6 h-6 text-slate-500 mb-2"></i>
                                <span class="text-[10px] font-medium text-slate-500">Secure Payment</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <i data-lucide="truck" class="w-6 h-6 text-slate-500 mb-2"></i>
                                <span class="text-[10px] font-medium text-slate-500">Free Shipping</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <i data-lucide="rotate-ccw" class="w-6 h-6 text-slate-500 mb-2"></i>
                                <span class="text-[10px] font-medium text-slate-500">30 Day Returns</span>
                            </div>
                        </div>
                    </section>
                @endif
            </div>

            @if(isset($crossSellProducts) && $crossSellProducts->count() > 0)
                <div class="mt-24">
                    <h2 class="text-2xl font-black tracking-tight text-white mb-8">You may also like</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-6 xl:gap-x-8">
                        @foreach($crossSellProducts as $product)
                            <div
                                class="group relative glass rounded-2xl overflow-hidden border border-white/5 hover:border-yellow-500/30 transition-all duration-300">
                                <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden bg-slate-800 relative">
                                    @php
                                        $imageUrl = $product->images->sortBy('sort_order')->first()?->image_path ?? 'https://placehold.co/300x300?text=No+Image';
                                    @endphp
                                    <img src="{{ $imageUrl }}" alt="{{ $product->name }}"
                                        class="h-full w-full object-cover object-center group-hover:scale-110 transition-transform duration-700">

                                    <!-- Quick Add Overlay -->
                                    <div
                                        class="absolute inset-0 flex items-end justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pb-4">
                                        <form action="{{ route('cart.add') }}" method="POST" class="w-10/12">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit"
                                                class="w-full bg-white text-slate-900 font-bold py-3 px-4 rounded-xl shadow-lg hover:bg-gray-100 transition-colors text-xs uppercase tracking-widest">
                                                Add to Cart
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <div class="p-4 flex justify-between items-start">
                                    <div>
                                        <h3 class="text-sm font-bold text-white mb-1">
                                            <a href="{{ route('shop.product', $product->slug) }}">
                                                <span aria-hidden="true" class="absolute inset-0"></span>
                                                {{ $product->name }}
                                            </a>
                                        </h3>
                                        <p class="text-xs text-slate-400">{{ $product->category->name ?? '' }}</p>
                                    </div>
                                    <p class="text-sm font-bold text-yellow-500">₹{{ number_format($product->sp, 2) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection