<x-shop-layout title="কার্ট">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">কার্ট</h1>

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 text-center mb-6">
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        @if($cartItems && count($cartItems) > 0)
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Cart Items -->
                <div class="lg:col-span-2 space-y-4">
                    @foreach($cartItems as $item)
                        <div class="bg-white p-6 rounded-lg shadow-md" data-product-id="{{ $item['product']->id }}">
                            <div class="flex items-center space-x-4">
                                <!-- Product Image -->
                                <div class="flex-shrink-0">
                                    @if($item['product']->images && count($item['product']->images) > 0)
                                        <img src="{{ storage_url($item['product']->images[0]) }}" alt="{{ $item['product']->name }}" 
                                             class="w-20 h-20 object-cover rounded-lg">
                                    @else
                                        <div class="w-20 h-20 bg-gray-200 rounded-lg flex items-center justify-center">
                                            <span class="text-2xl">🐟</span>
                                        </div>
                                    @endif
                                </div>

                                <!-- Product Details -->
                                <div class="flex-grow">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900">
                                                <a href="{{ route('shop.product', $item['product']) }}" class="hover:text-blue-600">
                                                    {{ $item['product']->name }}
                                                </a>
                                            </h3>
                                            @if(!empty($item['variant']['label']))
                                                <p class="text-sm font-semibold text-gray-700">
                                                    <strong>পণ্যের ধরন:</strong> {{ $item['variant']['label'] }}
                                                  <br /> ইউনিট রেট: ৳{{ number_format($item['variant']['base_unit_price'] ?? $item['price'] ?? $item['product']->price, 0) }}/{{ $item['variant']['unit'] ?? $item['product']->unit }}
                                                   <!-- <br />ফাইনাল সেলিং প্রাইস: ৳{{ number_format($item['price'] ?? $item['product']->price, 0) }}
                                                    @if(!empty($item['variant']['sale_price']))
                                                       <br />সেল: ৳{{ number_format($item['variant']['sale_price'], 0) }}
                                                    @endif -->
                                                </p>
                                            @endif
                                            <p class="text-sm text-gray-600">{{ $item['product']->category->name }}</p>
                                            <p class="text-lg font-bold text-blue-600 mt-1" data-price="{{ $item['price'] ?? $item['product']->price }}">
                                                ৳{{ number_format($item['price'] ?? $item['product']->price, 0) }}
                                                <!-- <span class="text-sm text-gray-500 font-normal">/{{ $item['variant']['unit'] ?? $item['product']->unit }}</span> -->
                                            </p>
                                        </div>
                                        
                                        <!-- Remove Button -->
                                        <form method="POST" action="{{ route('cart.remove') }}" class="inline" onsubmit="return confirm('আপনি কি নিশ্চিত যে আপনি এই পণ্যটি কার্ট থেকে সরাতে চান?')">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $item['product']->id }}">
                                            <input type="hidden" name="variant_index" value="{{ $item['variant_index'] ?? '' }}">
                                            <button type="submit" class="text-red-500 hover:text-red-700 p-1">
                                                <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" 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"></path>
                                                </svg>
                                            </button>
                                        </form>
                                    </div>

                                    <!-- Services -->
                                     @php
                                        $availableServices = (new \App\Services\ServicePriceResolver())->resolveServicesForProduct($item['product']->id);
                                        $selectedServiceIds = collect($item['services'] ?? [])->pluck('id')->toArray();
                                    @endphp
                                    @if(count($availableServices) > 0)
                                    <div class="mt-3">
                                        <p class="text-xs font-semibold text-gray-700 mb-1">অতিরিক্ত পরিসেবা</p>
                                        <form method="POST" action="{{ route('cart.update-services') }}" class="cart-services-form">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $item['product']->id }}">
                                            <input type="hidden" name="variant_index" value="{{ $item['variant_index'] ?? '' }}">
                                            <div class="cart-services-list space-y-1" data-product-id="{{ $item['product']->id }}">
                                                
                                                @foreach($availableServices as $service)
                                                    @php
                                                        $isChecked = in_array($service['service']->id, $selectedServiceIds) ? 'checked' : '';
                                                    @endphp
                                                    <label class="flex items-center justify-between text-sm py-1 cursor-pointer hover:bg-gray-50 rounded px-1">
                                                        <div class="flex items-center space-x-2">
                                                            <input type="checkbox" 
                                                                   name="service_ids[]" 
                                                                   value="{{ $service['service']->id }}" 
                                                                   class="cart-service-toggle w-4 h-4 text-blue-600 rounded border-gray-300" 
                                                                   {{ $isChecked }}
                                                                   onchange="this.form.submit()">
                                                            <span class="text-gray-700">{{ $service['service']->name }}</span>
                                                        </div>
                                                        <span class="font-medium text-blue-600 service-price-{{ $item['product']->id }}-{{ $service['service']->id }}">
                                                            ৳{{ number_format($service['resolved_price'] * $item['quantity'], 0) }}
                                                        </span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </form>
                                    </div>
                                    @endif

                                    <!-- Quantity and Subtotal -->
                                    <div class="flex items-center justify-between mt-4">
                                        <form method="POST" action="{{ route('cart.update') }}" class="flex items-center space-x-2">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $item['product']->id }}">
                                            <input type="hidden" name="variant_index" value="{{ $item['variant_index'] ?? '' }}">
                                            <label class="text-sm text-gray-600">পরিমাণ:</label>
                                            <div class="flex items-center border border-gray-300 rounded">
                                                <button type="submit" name="quantity" value="{{ max(1, $item['quantity'] - 1) }}" 
                                                        class="px-2 py-1 text-gray-600 hover:text-gray-800 hover:bg-gray-100 transition-colors"
                                                        {{ $item['quantity'] <= 1 ? 'disabled' : '' }}>
                                                    <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="M20 12H4"></path>
                                                    </svg>
                                                </button>
                                                <span class="px-3 py-1 text-center min-w-[50px]">{{ $item['quantity'] }}</span>
                                                <button type="submit" name="quantity" value="{{ min(10, $item['quantity'] + 1) }}" 
                                                        class="px-2 py-1 text-gray-600 hover:text-gray-800 hover:bg-gray-100 transition-colors"
                                                        {{ $item['quantity'] >= 10 ? 'disabled' : '' }}>
                                                    <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                        </form>
                                        
                                        <div class="text-lg font-bold text-gray-900">
                                            <span id="item-total-{{ $item['product']->id }}">
                                                @php
                                                    $itemTotal = ($item['price'] ?? $item['product']->price) * $item['quantity'];
                                                    $servicesTotal = collect($item['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item['quantity']);
                                                @endphp
                                                ৳{{ number_format($itemTotal + $servicesTotal, 0) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Order Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-white p-6 rounded-lg shadow-md sticky top-8">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">অর্ডার সারাংশ</h2>
                        
                        <div class="space-y-2 mb-4">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">সাবটোটাল ({{ $cartCount }} টি পণ্য)</span>
                                <span class="font-medium" id="cart-subtotal">
                                    ৳{{ number_format($subtotal, 0) }}
                                </span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">অতিরিক্ত পরিসেবা</span>
                                <span class="font-medium" id="cart-services-total">
                                    ৳{{ number_format($servicesTotal, 0) }}
                                </span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">ডেলিভারি চার্জ</span>
                                <span class="font-medium" id="cart-delivery">
                                    @if(calculate_delivery_fee($subtotal) == 0)
                                        <span class="text-green-600">বিনামূল্যে</span>
                                    @else
                                        ৳{{ number_format(calculate_delivery_fee($subtotal), 0) }}
                                    @endif
                                </span>
                            </div>
                            @if(free_delivery_enabled() && $subtotal < free_delivery_minimum())
                                <div class="text-xs text-gray-500 bg-yellow-50 p-2 rounded" id="free-delivery-notice">
                                    💡 ফ্রি ডেলিভারির জন্য আরও ৳{{ number_format(free_delivery_minimum() - $subtotal, 0) }} যোগ করুন!
                                </div>
                            @endif
                        </div>
                        
                        <div class="border-t border-gray-200 pt-4 mb-6">
                            <div class="flex justify-between">
                                <span class="text-lg font-semibold text-gray-900">মোট</span>
                                <span class="text-xl font-bold text-blue-600" id="cart-grand-total">
                                    ৳{{ number_format($cartTotal, 0) }}
                                </span>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <a href="{{ route('checkout.express') }}" 
                                class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-center block">
                                চেকআউট করুন
                            </a>
                            
                            <a href="{{ route('shop.products') }}" 
                               class="w-full bg-gray-100 text-gray-700 py-3 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors text-center block">
                                কেনাকাটা চালিয়ে যান
                            </a>
                            
                            <form method="POST" action="{{ route('cart.clear') }}" class="w-full" onsubmit="return confirm('আপনি কি নিশ্চিত যে আপনার পুরো কার্ট খালি করতে চান?')">
                                @csrf
                                <button type="submit" class="w-full text-red-600 hover:text-red-800 py-2 font-medium text-sm">
                                    কার্ট খালি করুন
                                </button>
                            </form>
                        </div>

                        <!-- Trust Signals -->
                        <div class="mt-6 pt-6 border-t border-gray-200">
                            <div class="space-y-2 text-sm text-gray-600">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                    </svg>
                                    নিরাপদ চেকআউট
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
                                    </svg>
                                    ক্যাশ অন ডেলিভারি
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
                                    </svg>
                                    সহজ রিটার্ন
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <!-- Empty Cart -->
            <div class="text-center py-16">
                <div class="text-8xl mb-6">🛒</div>
                <h2 class="text-2xl font-semibold text-gray-900 mb-4">আপনার কার্ট খালি</h2>
                <p class="text-gray-600 mb-8 max-w-md mx-auto">
                    মনে হচ্ছে আপনি এখনও আপনার কার্টে কোন মাছ যোগ করেননি। কেনাকাটা শুরু করে এটি পূরণ করুন!
                </p>
                <a href="{{ route('shop.products') }}" 
                   class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors inline-block">
                    কেনাকাটা শুরু করুন
                </a>
            </div>
        @endif
    </div>
</x-shop-layout>
