@extends('layouts.main')

@section('title', 'Alışveriş Sepeti')

@push('styles')
    <link href="{{ asset('assets/css/sweetalert/animate.min.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="bg-[#b4bf9f] min-h-screen">
    <div class="container mx-auto px-4 pt-32 pb-12">
        @if(session('error'))
            <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
                <span class="block sm:inline">{{ session('error') }}</span>
            </div>
        @endif

        @if($cart && $cart->items->count() > 0)
            <h1 class="text-2xl font-medium mb-8 text-[#2C5530]">Alışveriş Sepeti</h1>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Cart Items and Delivery Options -->
                <div class="lg:col-span-2 space-y-8">
                    <!-- Cart Items -->
                    <div class="bg-[#DBDBBC] rounded-xl shadow-lg overflow-hidden p-6">
                        <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Sepetinizdeki Ürünler</h2>
                        <div class="space-y-4">
                            @foreach($cart->items as $item)
                                <div class="bg-[#DBDBBC] rounded-lg p-4 border-2 border-[#2C5530] border-opacity-10 hover:border-opacity-20 transition-all duration-200" id="cart-item-{{ $item->id }}">
                                    <!-- Mobil Görünüm -->
                                    <div class="flex flex-col space-y-4 lg:hidden">
                                        <!-- Ürün Bilgileri -->
                                        <div class="flex items-start space-x-4">
                                            @if($item->product->coverImage)
                                                <img src="{{ asset('storage/'.$item->product->coverImage->image_path) }}" alt="{{ $item->product_name }}" class="w-20 h-20 object-cover rounded-lg shadow-sm">
                                            @endif
                                            <div class="flex-1">
                                                <h3 class="text-lg font-medium text-[#2C5530]">{{ $item->product_name }}</h3>
                                                <p class="text-sm text-[#2C5530] text-opacity-75 mt-1">{{ $item->weight }} KG</p>
                                                <p class="text-[#2C5530] font-medium text-lg mt-1">₺{{ number_format($item->subtotal, 2) }}</p>
                                            </div>
                                        </div>

                                        <!-- Miktar ve Silme Kontrolleri -->
                                        <div class="flex items-center justify-between border-t border-[#2C5530]/10 pt-4">
                                            <div class="flex items-center space-x-4">
                                                <button onclick="updateQuantity({{ $item->id }}, {{ $item->quantity - 1 }})" 
                                                    class="w-10 h-10 flex items-center justify-center text-[#2C5530] bg-[#b4bf9f] rounded-lg hover:bg-[#2C5530] hover:text-white transition-colors duration-200">
                                                    -
                                                </button>
                                                <span class="w-12 text-center py-2 text-[#2C5530] font-medium text-lg">{{ $item->quantity }}</span>
                                                <button onclick="updateQuantity({{ $item->id }}, {{ $item->quantity + 1 }})" 
                                                    class="w-10 h-10 flex items-center justify-center text-[#2C5530] bg-[#b4bf9f] rounded-lg hover:bg-[#2C5530] hover:text-white transition-colors duration-200">
                                                    +
                                                </button>
                                            </div>
                                            <button onclick="removeItem({{ $item->id }})" class="flex items-center text-red-500 hover:text-red-600 transition-colors duration-200 px-4 py-2 hover:bg-red-50 rounded-lg gap-2">
                                                <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" />
                                                </svg>
                                                <span class="text-sm font-medium">Sil</span>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Masaüstü Görünüm -->
                                    <div class="hidden lg:flex items-center">
                                        @if($item->product->coverImage)
                                            <img src="{{ asset('storage/'.$item->product->coverImage->image_path) }}" alt="{{ $item->product_name }}" class="w-20 h-20 object-cover rounded-lg shadow-sm">
                                        @endif
                                        <div class="ml-6 flex-1">
                                            <h3 class="text-lg font-medium text-[#2C5530]">{{ $item->product_name }}</h3>
                                            <p class="text-sm text-[#2C5530] text-opacity-75 mt-1">{{ $item->weight }} KG</p>
                                            <p class="text-[#2C5530] font-medium text-lg mt-1">₺{{ number_format($item->subtotal, 2) }}</p>
                                        </div>
                                        <div class="flex items-center gap-4">
                                            <div class="flex items-center bg-[#b4bf9f] rounded-lg shadow-sm">
                                                <button onclick="updateQuantity({{ $item->id }}, {{ $item->quantity - 1 }})" 
                                                    class="px-4 py-2 hover:bg-[#2C5530] hover:text-white transition-colors duration-200 text-[#2C5530] rounded-l-lg">
                                                    -
                                                </button>
                                                <span class="px-4 py-2 text-[#2C5530] font-medium">{{ $item->quantity }}</span>
                                                <button onclick="updateQuantity({{ $item->id }}, {{ $item->quantity + 1 }})" 
                                                    class="px-4 py-2 hover:bg-[#2C5530] hover:text-white transition-colors duration-200 text-[#2C5530] rounded-r-lg">
                                                    +
                                                </button>
                                            </div>
                                            <button onclick="removeItem({{ $item->id }})" class="text-red-500 hover:text-red-600 transition-colors duration-200 p-2 hover:bg-red-50 rounded-lg">
                                                <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="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>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Cart Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 sticky top-8">
                        <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Sepet Özeti</h2>
                        <div class="space-y-4 text-[#2C5530]">
                            <div class="flex justify-between items-center">
                                <span class="text-lg">Ara Toplam</span>
                                <span class="text-lg font-medium">₺{{ number_format($cart->subtotal, 2) }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-lg">Teslimat Ücreti</span>
                                <span class="text-lg font-medium" id="delivery-cost">₺{{ number_format($cart->delivery_cost, 2) }}</span>
                            </div>
                            <div class="border-t-2 border-[#2C5530] border-opacity-10 pt-4 mt-4">
                                <div class="flex justify-between items-center">
                                    <span class="text-xl font-medium">Toplam</span>
                                    <span class="text-xl font-bold" id="cart-total">₺{{ number_format($cart->total, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-8 space-y-4">
                            <button onclick="handleCheckout()" class="block w-full bg-[#2C5530] text-white text-center py-3 rounded-lg hover:opacity-90 transition-all duration-200 text-lg font-medium shadow-lg">
                                Siparişi Tamamla
                            </button>
                            <button type="button" onclick="clearCartItems()" class="block w-full border-2 border-[#2C5530] text-[#2C5530] text-center py-3 rounded-lg hover:bg-[#2C5530] hover:text-white transition-all duration-200 text-lg font-medium">
                                Sepeti Temizle
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="flex items-center justify-center py-12">
                <div class="text-center bg-[#DBDBBC] rounded-xl shadow-lg p-8 max-w-lg w-full mx-4">
                    <div class="mb-8">
                        <svg class="w-20 h-20 mx-auto text-[#2C5530] mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                        </svg>
                        <h2 class="text-2xl font-medium mb-3 text-[#2C5530]">Sepetiniz boş</h2>
                        <p class="text-[#2C5530] text-opacity-75 text-lg">Sepetinize ürün ekleyin ve siparişinizi tamamlamak için buraya geri dönün.</p>
                    </div>
                    <a href="{{ route('order') }}" class="inline-flex items-center justify-center bg-[#2C5530] text-white px-8 py-3 rounded-lg hover:opacity-90 transition-all duration-200 text-lg font-medium gap-3 shadow-lg">
                        <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="M7 16l-4-4m0 0l4-4m-4 4h18" />
                        </svg>
                        Alışverişe Devam Et
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Auth Modal -->
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center">
    <div class="bg-[#DBDBBC] rounded-xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-[#2C5530]">Devam Etmek İçin</h3>
                <button onclick="closeAuthModal()" class="text-gray-400 hover:text-gray-500">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="space-y-4">
                <a href="{{ route('customer.login') }}" class="block w-full bg-[#2C5530] text-white text-center py-3 px-4 rounded-lg hover:opacity-90 transition-all duration-200">
                    Üye Ol / Giriş Yap
                </a>
                <a href="{{ route('cart.checkout') }}" class="block w-full border-2 border-[#2C5530] text-[#2C5530] text-center py-3 px-4 rounded-lg hover:bg-[#2C5530] hover:text-white transition-all duration-200">
                    Üye Olmadan Devam Et
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
    function updateQuantity(itemId, quantity) {
        if (quantity < 0) return;

        fetch(`/cart/update/${itemId}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ quantity })
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                location.reload();
            }
        });
    }

    function removeItem(itemId) {
        Swal.fire({
            title: 'Ürünü Sil',
            text: 'Bu ürünü sepetten çıkarmak istediğinize emin misiniz?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#2C5530',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, çıkar',
            cancelButtonText: 'İptal',
            background: '#DBDBBC',
            customClass: {
                popup: 'rounded-xl',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/cart/remove/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // GA4: Track remove_from_cart event
                    if (window.dataLayer && data.product) {
                        window.dataLayer.push({
                            event: 'remove_from_cart',
                            ecommerce: {
                                currency: 'TRY',
                                value: parseFloat(data.product.price) * parseFloat(data.weight) * parseInt(data.quantity),
                                items: [{
                                    item_id: String(data.product.id),
                                    item_name: data.product.name,
                                    affiliation: 'Serap Gerebiç',
                                    currency: 'TRY',
                                    item_brand: 'Serap Gerebiç',
                                    item_category: data.product.category || '',
                                    price: parseFloat(data.product.price),
                                    quantity: parseInt(data.quantity),
                                    item_variant: data.weight + 'kg'
                                }]
                            }
                        });
                    }
                    
                    location.reload();
                });
            }
        });
    }

    function clearCartItems() {
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Sepetinizdeki tüm ürünler silinecek!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#2C5530',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, temizle',
            cancelButtonText: 'İptal',
            background: '#DBDBBC',
            customClass: {
                popup: 'rounded-xl',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('/cart/clear', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // Google Data Layer'a sepet temizleme olayını gönder
                    if (window.dataLayer && data.cart_items) {
                        window.dataLayer.push({
                            'event': 'clear_cart',
                            'cart_items': data.cart_items,
                            'previous_cart_total': data.previous_cart_total
                        });
                        console.log('Clear cart event pushed to dataLayer');
                    }
                    
                    location.reload();
                });
            }
        });
    }

    function handleCheckout() {
        @auth('customer')
            window.location.href = "{{ route('cart.checkout') }}";
        @else
            showAuthModal();
        @endauth
    }

    function showAuthModal() {
        const modal = document.getElementById('authModal');
        const modalContent = document.getElementById('modalContent');

        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Trigger reflow
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeAuthModal() {
        const modal = document.getElementById('authModal');
        const modalContent = document.getElementById('modalContent');

        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            modal.classList.remove('flex');
            modal.classList.add('hidden');
        }, 300);
    }

    // Close modal when clicking outside
    document.getElementById('authModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeAuthModal();
        }
    });
    </script>

    @if($cart && $cart->items && !$cart->items->isEmpty())
    <script>
    // GA4: Track view_cart event on page load
    if (window.dataLayer) {
        window.dataLayer.push({
            event: 'view_cart',
            ecommerce: {
                currency: 'TRY',
                value: {{ $cart->total ?? 0 }},
                items: [
                    @foreach($cart->items as $item)
                    {
                        item_id: '{{ $item->product_id }}',
                        item_name: @json($item->product ? $item->product->name : 'Unknown Product'),
                        affiliation: 'Serap Gerebiç',
                        currency: 'TRY',
                        item_brand: 'Serap Gerebiç',
                        @php
                            $categoryName = '';
                            if ($item->product && $item->product->category) {
                                $categoryName = $item->product->category->name;
                            }
                        @endphp
                        item_category: @json($categoryName),
                        price: {{ $item->price ?? 0 }},
                        quantity: {{ $item->quantity ?? 1 }},
                        item_variant: '{{ $item->weight ?? 1 }}kg'
                    }{{ !$loop->last ? ',' : '' }}
                    @endforeach
                ]
            }
        });
    }
    </script>
    @endif
@endpush