@extends('layouts.main')

@section('title', 'Sipariş Başarılı')

@section('content')
<div class="bg-[#b4bf9f]">
    <div class="container mx-auto px-4 pt-32 pb-12">
        <div class="max-w-2xl mx-auto">
            <div class="bg-[#DBDBBC] rounded-lg shadow-lg p-8 text-center">
                <div class="mb-8">
                    <svg class="mx-auto h-16 w-16 text-[#2C5530]" fill="none" stroke="currentColor" viewBox="0 0 48 48">
                        <circle cx="24" cy="24" r="22" stroke-width="2"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 24l6 6 12-12"/>
                    </svg>
                </div>

                <h1 class="text-4xl font-bold text-[#2C5530] mb-4">Siparişiniz için Teşekkürler!</h1>
                <p class="text-lg text-gray-600 mb-8">
                    Siparişiniz başarıyla alındı ve işleme alındı.<br>
                    Sipariş numaranız: <span class="font-semibold">{{ $order->order_number }}</span>
                </p>

                <div class="bg-[#b4bf9f] rounded-lg shadow p-6 mb-8">
                    <h2 class="text-xl font-semibold mb-4 text-[#2C5530]">Sipariş Detayları</h2>
                    <div class="divide-y divide-[#2C5530]">
                        @foreach($order->items as $item)
                            <div class="py-4 flex justify-between">
                                <div class="text-left">
                                    <h3 class="font-medium">{{ $item->product_name }}</h3>
                                    <p class="text-sm text-gray-500">Adet: {{ $item->quantity }}</p>
                                    <p class="text-sm text-gray-500">Ağırlık: {{ $item->weight }} KG</p>
                                </div>
                                <p class="font-medium">₺{{ number_format($item->subtotal, 2) }}</p>
                            </div>
                        @endforeach
                    </div>
                    <div class="border-t border-[#2C5530] mt-4 pt-4 space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Ara Toplam</span>
                            <span>₺{{ number_format($order->subtotal, 2) }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Teslimat Ücreti</span>
                            <span>₺{{ number_format($order->delivery_cost, 2) }}</span>
                        </div>
                        <div class="border-t border-[#2C5530] pt-2">
                            <div class="flex justify-between font-semibold text-[#2C5530]">
                                <span>Toplam</span>
                                <span>₺{{ number_format($order->total, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <p class="text-gray-600">
                        Sipariş detayları ve takip bilgilerini içeren bir e-posta göndereceğiz.
                    </p>
                    <div class="flex justify-center">
                        <a href="{{ route('home') }}" class="inline-block bg-[#2C5530] text-white px-6 py-3 rounded-lg hover:opacity-90 transition-opacity duration-200">
                            Alışverişe Devam Et
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// GA4: Track purchase event (client-side backup)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
        transaction_id: '{{ $order->order_number }}',
        affiliation: 'Serap Gerebiç Website',
        currency: 'TRY',
        value: {{ $order->total }},
        shipping: {{ $order->delivery_cost }},
        tax: 0,
        items: [
            @foreach($order->items as $item)
            {
                item_id: '{{ $item->product_id }}',
                item_name: @json($item->product_name),
                affiliation: 'Serap Gerebiç',
                currency: 'TRY',
                item_brand: 'Serap Gerebiç',
                @php
                    $categoryName = '';
                    if (isset($item->product) && $item->product && isset($item->product->category) && $item->product->category) {
                        $categoryName = $item->product->category->name;
                    }
                @endphp
                item_category: @json($categoryName),
                price: {{ $item->price }},
                quantity: {{ $item->quantity }},
                item_variant: '{{ $item->weight }}kg'
            }{{ !$loop->last ? ',' : '' }}
            @endforeach
        ]
    }
});
</script>
@endsection