@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_cart'))

@section('content')
<div class="min-h-[60vh] py-1 flex flex-col items-center justify-center bg-transparent">
    <div class="max-w-6xl w-full px-4">
        <h1 class="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-4 tracking-tight relative inline-block">
            <span class="relative z-10">
                {{ __('general.shopping_cart') }}
            </span>
            <span class="absolute left-1/2 -bottom-2 w-24 h-1 bg-primary rounded-full -translate-x-1/2 z-0"></span>
        </h1>
        @if(isset($cartItems) && count($cartItems) === 0)
            <div class="flex flex-col items-center justify-center py-24">
                <svg class="w-20 h-20 text-primary mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18v18H3V3zm3 6h12M9 9v12m6-12v12" />
                </svg>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ __('general.your_cart_is_empty') }}</h2>
                <p class="mb-2 text-white">{{ __('general.cart_empty_page_message') }}</p>
                <a href="{{ route('products.index') }}" class="inline-block bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-semibold shadow transition">
                    {{ __('general.continue_shopping') }}
                </a>
            </div>
            @if(!empty($suggestedProducts))
            <div class="mt-12">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">{{ __('general.new_arrivals') }}</h2>
                <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
                    @foreach($suggestedProducts as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>
            </div>
            @endif
        @else
            <div class="lg:grid lg:grid-cols-12 lg:gap-x-12 lg:items-start mt-10">
                <div class="lg:col-span-7">
                    <div class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($cartItems as $item)
                        <div class="py-6 flex items-center backdrop-blur-md bg-white/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl mb-6 hover:scale-[1.02] hover:shadow-2xl transition">
                            <div class="flex-shrink-0 w-24 h-24 flex items-center justify-center">
                                <img src="{{ $item['product']->cart_image_url }}" alt="{{ $item['product']->name }}" class="w-20 h-20 object-contain rounded-xl bg-white dark:bg-gray-900">
                            </div>
                            <div class="ml-6 flex-1 flex flex-col justify-between">
                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 sm:mb-0">
                                        <a href="{{ route('products.show', $item['product']) }}" class="hover:text-primary transition">{{ $item['product']->name }}</a>
                                    </h3>
                                    @php
                                        $currency = session('currency', 'AZN');
                                        $price = $item['product']->getPriceInCurrency($currency);
                                        $finalPrice = $item['product']->getFinalPriceInCurrency($currency);
                                        $symbol = $item['product']->getCurrencySymbol($currency);
                                    @endphp
                                    <div class="text-right pr-6">
                                        @if($item['product']->isDiscounted())
                                            <span class="line-through text-gray-400 mr-2" data-product-price data-product-id="{{ $item['product']->id }}" data-price-type="original">{{ $symbol }}{{ number_format($price, 2) }}</span>
                                            <span class="text-primary font-bold text-lg" data-product-price data-product-id="{{ $item['product']->id }}" data-price-type="final">{{ $symbol }}{{ number_format($finalPrice, 2) }}</span>
                                        @else
                                            <span class="text-primary font-bold text-lg" data-product-price data-product-id="{{ $item['product']->id }}" data-price-type="final">{{ $symbol }}{{ number_format($price, 2) }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="mt-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                    <form method="POST" action="{{ route('cart.update') }}" class="flex items-center space-x-2 cart-qty-form" data-product-id="{{ $item['product']->id }}">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $item['product']->id }}">
                                        <button type="button" class="decrement-qty px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary hover:text-white transition" aria-label="Decrease quantity">-</button>
                                        <input type="number" name="quantity" id="quantity-{{ $item['product']->id }}" value="{{ $item['quantity'] }}" min="1" max="{{ $item['product']->stock_quantity }}" class="w-16 rounded-lg border border-gray-300 py-1.5 px-2 text-base leading-5 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white text-center cart-qty-input" autocomplete="off">
                                        <button type="button" class="increment-qty px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary hover:text-white transition" aria-label="Increase quantity">+</button>
                                    </form>
                                    <form method="POST" action="{{ route('cart.remove') }}">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $item['product']->id }}">
                                        <button type="submit" class="inline-flex items-center px-3 py-1 rounded-lg text-red-500 border border-red-200 bg-white/70 dark:bg-gray-900/70 hover:bg-red-500 hover:text-white transition font-semibold shadow-sm">
                                            <svg class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                                            </svg>
                                            {{ __('general.remove') }}
                                        </button>
                                    </form>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 pr-6">{{ __('general.subtotal') }}: <span id="cart-subtotal-{{ $item['product']->id }}" data-subtotal data-product-id="{{ $item['product']->id }}">{{ $symbol }}{{ number_format($item['subtotal'], 2) }}</span></span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @php
                    $currency = session('currency', 'AZN');
                    $symbol = get_currency_symbol($currency);
                    $originalTotal = 0;
                    foreach ($cartItems as $item) {
                        $originalTotal += $item['product']->getPriceInCurrency($currency) * $item['quantity'];
                    }
                    $discountAmount = $originalTotal - $total;
                @endphp
                <section aria-labelledby="summary-heading" class="mt-10 rounded-2xl backdrop-blur-md bg-white/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 shadow-xl px-6 py-8 sm:p-8 lg:col-span-5 lg:mt-0">
                    <h2 id="summary-heading" class="text-xl font-bold text-gray-900 dark:text-white mb-6">{{ __('general.order_summary') }}</h2>
                    <dl class="space-y-4">
                        <div class="flex items-center justify-between">
                            <dt class="text-base text-gray-600 dark:text-gray-400">{{ __('general.original_total') ?? 'Original total' }}</dt>
                            <dd class="text-base font-bold text-gray-700 dark:text-gray-200" data-original-total>{{ $symbol }}{{ number_format($originalTotal, 2) }}</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-base text-gray-600 dark:text-gray-400">{{ __('general.discount_amount') ?? 'Discount' }}</dt>
                            <dd class="text-base font-bold text-green-600" data-discount-amount>-{{ $symbol }}{{ number_format($discountAmount, 2) }}</dd>
                        </div>
                        <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-4">
                            <dt class="text-lg font-bold text-gray-900 dark:text-white">{{ __('general.order_total') }}</dt>
                            <dd class="text-lg font-bold text-primary cart-total-amount">{{ $symbol }}{{ number_format($total, 2) }}</dd>
                        </div>
                    </dl>
                    <div class="mt-8">
                        <a href="{{ route('checkout.index') }}" class="w-full block bg-primary border border-transparent rounded-lg shadow-sm py-3 px-4 text-base font-bold text-white hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-primary transition text-center">{{ __('general.proceed_to_checkout') }}</a>
                    </div>
                    <div class="mt-6 flex justify-center text-center text-sm text-gray-500 dark:text-gray-400">
                        <p>
                            {{ __('general.or') }}
                            <a href="{{ route('products.index') }}" class="font-medium text-primary hover:text-orange-700 transition">{{ __('general.continue_shopping') }}</a>
                        </p>
                    </div>
                </section>
            </div>
        @endif
    </div>
</div>

@if(isset($recentProducts) && count($recentProducts) > 0)
<div class="w-full flex flex-col items-center mb-16">
    <h2 class="text-2xl font-extrabold text-primary mb-8 text-center tracking-tight drop-shadow-lg">{{ __('general.recently_added') }}</h2>
    <div class="w-full max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 px-4">
        @foreach($recentProducts->take(4) as $product)
            <x-product-card :product="$product" />
        @endforeach
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    function updateCartCurrency(currency) {
        fetch('{{ route("cart.update-currency") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ currency: currency })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.querySelectorAll('[data-product-price]').forEach(element => {
                    const productId = element.getAttribute('data-product-id');
                    const priceType = element.getAttribute('data-price-type');
                    let product = data.cartItems.find(item => item.product_id == productId);
                    if (!product && data.recentProducts) {
                        product = data.recentProducts.find(item => item.product_id == productId);
                    }
                    if (product) {
                        if (priceType === 'original' && product.price !== undefined) {
                            element.textContent = data.symbol + product.price;
                        } else if (priceType === 'final' && product.final_price !== undefined) {
                            element.textContent = data.symbol + product.final_price;
                        }
                    }
                });
                
                document.querySelectorAll('[data-subtotal]').forEach(element => {
                    const productId = element.getAttribute('data-product-id');
                    const product = data.cartItems.find(item => item.product_id == productId);
                    
                    if (product) {
                        element.textContent = data.symbol + product.subtotal;
                    }
                });
                
                document.querySelectorAll('.cart-total-amount').forEach(element => {
                    element.textContent = data.symbol + data.total;
                });
                
                const originalTotalEl = document.querySelector('[data-original-total]');
                if (originalTotalEl && data.originalTotal) originalTotalEl.textContent = data.symbol + data.originalTotal;
                const discountAmountEl = document.querySelector('[data-discount-amount]');
                if (discountAmountEl && data.discountAmount) discountAmountEl.textContent = '-' + data.symbol + data.discountAmount;
                
                const currencyDisplay = document.querySelector('[data-currency-display]');
                if (currencyDisplay) {
                    currencyDisplay.textContent = data.currency;
                }
                
                if (data.suggestedProducts && data.suggestedProducts.length > 0) {
                    data.suggestedProducts.forEach(product => {
                        const priceElements = document.querySelectorAll(`[data-product-price][data-product-id="${product.id}"]`);
                        priceElements.forEach(element => {
                            const priceType = element.getAttribute('data-price-type');
                            if (priceType === 'original') {
                                element.textContent = product.price_formatted;
                            } else if (priceType === 'final') {
                                element.textContent = product.final_price_formatted;
                            }
                        });
                        const badge = document.querySelector(`[data-product-discount-badge][data-product-id="${product.id}"]`);
                        if (badge) {
                            if (product.discount_type === 'percent') {
                                badge.textContent = `-${parseFloat(product.discount_value_in_currency)}%`;
                                badge.style.display = '';
                            } else if (product.discount_type === 'fixed') {
                                badge.textContent = `-${data.symbol}${product.discount_value_in_currency}`;
                                badge.style.display = '';
                            } else {
                                badge.textContent = '';
                                badge.style.display = 'none';
                            }
                        }
                    });
                }
            }
        })
        .catch(error => {
            console.error('Error updating currency:', error);
        });
    }
    
    document.addEventListener('click', function(e) {
        if (e.target.closest('a.currency-switcher-link')) {
            e.preventDefault();
            const href = e.target.closest('a.currency-switcher-link').getAttribute('href');
            const url = new URL(href, window.location.origin);
            const currency = url.searchParams.get('currency');
            if (currency) {
                updateCartCurrency(currency);
            }
        }
    });
});

window.cartRemovedTranslation = @json(__('general.removed_from_cart'));

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('form[action*="cart/remove"]').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(form);
            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                },
                body: formData
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                    return;
                }
                return response.json();
            })
            .then(data => {
                if (data && data.success !== false) {
                    showCartRemovedPopup();
                    setTimeout(() => window.location.reload(), 600);
                } else {
                    window.location.reload();
                }
            })
            .catch(() => window.location.reload());
        });
    });
});
</script>
@endpush