@extends('layouts.main')

@section('title', 'Sipariş Tamamla')

@push('styles')
<link href="{{ asset('assets/css/sweetalert/animate.min.css') }}" rel="stylesheet">
<style>
    #iyzipay-checkout-form {
        display: none;
    }

    .contract-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }

    .contract-modal-content {
        background-color: #DBDBBC;
        margin: 5% auto;
        padding: 20px;
        width: 90%;
        max-width: 900px;
        max-height: 80vh;
        border-radius: 12px;
        position: relative;
    }

    .contract-modal-body {
        max-height: calc(80vh - 100px);
        overflow-y: auto;
        padding: 20px;
        background-color: hsla(81, 20%, 69%, .5);
        border-radius: 8px;
    }

    .close-modal {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 24px;
        cursor: pointer;
        color: #2C5530;
    }

    .close-modal:hover {
        opacity: 0.8;
    }
</style>
@endpush

@section('content')
<div class="bg-[#b4bf9f] min-h-screen">
    <div class="container mx-auto px-4 pt-32 pb-12">
        <h1 class="text-2xl font-medium mb-8 text-[#2C5530]">Sipariş Tamamla</h1>

        <form action="{{ route('cart.process-checkout') }}" method="POST" class="grid grid-cols-1 lg:grid-cols-3 gap-8" id="checkoutForm">
            @csrf

            <!-- Customer Information -->
            <div class="lg:col-span-2 space-y-8">
                @auth('customer')
                    @if($addresses->isNotEmpty())
                        <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 border-2 border-[#2C5530] border-opacity-10">
                            <div class="flex justify-between items-center mb-6">
                                <h2 class="text-xl font-medium text-[#2C5530]">Kayıtlı Adresleriniz</h2>
                                <a href="{{ route('cart.index') }}" class="inline-flex items-center justify-center px-3 py-2 border-2 border-[#2C5530] text-[#2C5530] rounded-lg hover:bg-[#2C5530] hover:text-white transition-all duration-200 text-sm gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                                    </svg>
                                    <span>Geri Dön</span>
                                </a>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($addresses as $address)
                                    <div class="relative">
                                        <input type="radio" name="selected_address" id="address_{{ $address->id }}"
                                            value="{{ $address->id }}" class="hidden peer"
                                            {{ $address->is_default ? 'checked' : '' }}>
                                        <label for="address_{{ $address->id }}"
                                            class="block p-4 bg-[#b4bf9f] rounded-lg cursor-pointer
                                            peer-checked:bg-[#2C5530] peer-checked:text-white
                                            transition-all duration-200">
                                            <span class="font-medium block mb-1">{{ $address->title }}</span>
                                            <span class="text-sm block">{{ $address->first_name }} {{ $address->last_name }}</span>
                                            <span class="text-sm block">{{ $address->phone }}</span>
                                            <span class="text-sm block">{{ $address->address }}</span>
                                            <span class="text-sm block">{{ $address->city->name }} / {{ $address->district->name }}</span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                            <div class="mt-4">
                                <button type="button" id="newAddressBtn"
                                    class="text-[#2C5530] hover:text-[#2C5530] hover:underline">
                                    + Yeni Adres Ekle
                                </button>
                            </div>
                        </div>
                    @endif
                @endauth

                <div id="customerInfoFields" class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 border-2 border-[#2C5530] border-opacity-10"
                    {!! auth('customer')->check() && $addresses->isNotEmpty() ? 'style="display: none;"' : '' !!}>
                    <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Müşteri Bilgileri</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[#2C5530] mb-2" for="name">
                                Ad Soyad <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" id="name" required
                                class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50"
                                value="{{ $cart->customer_name }}">
                        </div>

                        <div>
                            <label class="block text-[#2C5530] mb-2" for="email">
                                E-posta Adresi <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="email" id="email" required
                                class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50"
                                value="{{ $cart->customer_email }}">
                        </div>

                        <div class="md:col-span-2">
                            <label class="block text-[#2C5530] mb-2" for="phone">
                                Telefon Numarası <span class="text-red-500">*</span>
                            </label>
                            <input type="tel" name="phone" id="phone" required
                                class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50"
                                value="{{ $cart->customer_phone }}">
                        </div>
                    </div>
                </div>

                <!-- Delivery Information -->
                <div id="deliveryFields" class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 border-2 border-[#2C5530] border-opacity-10"
                    {!! auth('customer')->check() && $addresses->isNotEmpty() ? 'style="display: none;"' : '' !!}>
                    <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Teslimat Bilgileri</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[#2C5530] mb-2" for="city_id">
                                İl <span class="text-red-500">*</span>
                            </label>
                            <select name="city_id" id="city_id" required
                                class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50">
                                <option value="">İl Seçiniz</option>
                                @foreach($cities as $city)
                                    <option value="{{ $city->id }}" {{ $cart->city_id == $city->id ? 'selected' : '' }}>
                                        {{ $city->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-[#2C5530] mb-2" for="district_id">
                                İlçe <span class="text-red-500">*</span>
                            </label>
                            <select name="district_id" id="district_id" required
                                class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50">
                                <option value="">Önce İl Seçiniz</option>
                            </select>
                        </div>
                    </div>

                    <div class="mt-6">
                        <label class="block text-[#2C5530] mb-2" for="shipping_address">
                            Teslimat Adresi <span class="text-red-500">*</span>
                        </label>
                        <textarea name="shipping_address" id="shipping_address" rows="3" required
                            class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50">{{ $cart->shipping_address }}</textarea>
                    </div>
                </div>

                <!-- Order Note -->
                <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 border-2 border-[#2C5530] border-opacity-10">
                    <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Sipariş Notu</h2>

                    <div>
                        <label class="block text-[#2C5530] mb-2" for="note">
                            Siparişiniz ile ilgili eklemek istediğiniz notları buraya yazabilirsiniz.
                        </label>
                        <textarea name="note" id="note" rows="3"
                            class="w-full px-4 py-2 rounded-lg bg-[#b4bf9f] border-2 border-[#2C5530] border-opacity-10 focus:border-[#2C5530] focus:ring focus:ring-[#2C5530] focus:ring-opacity-50">{{ $cart->note }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="lg:col-span-1">
                <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-6 border-2 border-[#2C5530] border-opacity-10 sticky top-8">
                    <h2 class="text-xl font-medium mb-6 text-[#2C5530]">Sipariş Özeti</h2>

                    <div class="space-y-4">
                        @foreach($cart->items as $item)
                            <div class="flex justify-between items-center text-[#2C5530]">
                                <div>
                                    <span class="font-medium">{{ $item->product->name }}</span>
                                    <span class="block text-sm text-[#2C5530] text-opacity-75">{{ $item->quantity }} Adet</span>
                                    <span class="block text-sm text-[#2C5530] text-opacity-75">{{ $item->weight }} KG</span>
                                </div>
                                <span class="font-medium">₺{{ number_format($item->subtotal, 2) }}</span>
                            </div>
                        @endforeach
                    </div>

                    <div class="border-t-2 border-[#2C5530] border-opacity-10 mt-6 pt-6 space-y-4">
                        <div class="flex justify-between items-center text-[#2C5530]">
                            <span class="text-lg">Ara Toplam</span>
                            <span class="font-medium">₺{{ number_format($cart->subtotal, 2) }}</span>
                        </div>

                        <div class="flex justify-between items-center text-[#2C5530]">
                            <span class="text-lg">Teslimat Ücreti</span>
                            <span class="font-medium">₺{{ number_format($cart->delivery_cost, 2) }}</span>
                        </div>

                        <div class="border-t-2 border-[#2C5530] border-opacity-10 pt-4">
                            <div class="flex justify-between items-center text-[#2C5530]">
                                <span class="text-xl font-medium">Toplam</span>
                                <span class="text-xl font-bold">₺{{ number_format($cart->total, 2) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 space-y-4">
                        <!-- Contract Checkbox -->
                        <div class="flex items-start space-x-2">
                            <input type="checkbox" id="contract_accepted" name="contract_accepted" class="mt-1" required>
                            <label for="contract_accepted" class="text-sm text-gray-700">
                                <span id="openContractModal" class="text-[#2C5530] hover:underline cursor-pointer">Mesafeli Satış Sözleşmesini</span> okudum ve onaylıyorum
                            </label>
                        </div>

                        <!-- Campaign SMS Checkbox -->
                        <div class="flex items-start space-x-2">
                            <input type="checkbox" id="campaign_sms" name="campaign_sms" class="mt-1">
                            <label for="campaign_sms" class="text-sm text-gray-700">
                                Kampanya ve SMS'lerden haberdar olmak istiyorum
                            </label>
                        </div>

                        <button type="submit" id="orderSubmitBtn" class="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 Onayla
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Contract Modal -->
<div id="contractModal" class="contract-modal">
    <div class="contract-modal-content">
        <span class="close-modal">&times;</span>
        <h2 class="text-2xl font-bold text-[#2C5530] mb-6">Mesafeli Satış Sözleşmesi</h2>
        <div class="contract-modal-body">
            <!-- Contract Content -->
            <div class="prose prose-sm max-w-none text-gray-700">
                <section class="mb-8">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">1. Taraflar</h2>
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold mb-2">Satıcı:</h3>
                        <ul class="space-y-2">
                            <li><span class="font-medium">Unvan:</span> Serap Gerebiç</li>
                            <li><span class="font-medium">Adres:</span> Necmettin Erbakan Mah. Turgut Özal Cad. Ilhamur Apt No: 38A Merkez/Kilis</li>
                            <li><span class="font-medium">Telefon:</span> 0543 868 71 88</li>
                            <li><span class="font-medium">E-posta:</span> serapgerebic1@gmail.com</li>
                            <li><span class="font-medium">Vergi Numarası:</span> 4630358873</li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="font-semibold mb-2">Alıcı:</h3>
                        <ul class="space-y-2">
                            <li><span class="font-medium">Ad Soyad:</span> <span id="contractCustomerName"></span></li>
                            <li><span class="font-medium">Telefon:</span> <span id="contractCustomerPhone"></span></li>
                            <li><span class="font-medium">E-posta:</span> <span id="contractCustomerEmail"></span></li>
                            <li><span class="font-medium">Adres:</span> <span id="contractCustomerAddress"></span></li>
                        </ul>
                    </div>
                </section>

                <section class="mb-8">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">3. Satışa Konu Ürünler</h2>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <table class="min-w-full">
                            <thead>
                                <tr>
                                    <th class="text-left">Ürün</th>
                                    <th class="text-right">Adet</th>
                                    <th class="text-right">Ağırlık</th>
                                    <th class="text-right">Tutar</th>
                                </tr>
                            </thead>
                            <tbody id="contractProducts">
                                @foreach($cart->items as $item)
                                <tr>
                                    <td>{{ $item->product->name }}</td>
                                    <td class="text-right">{{ $item->quantity }}</td>
                                    <td class="text-right">{{ $item->weight }} KG</td>
                                    <td class="text-right">₺{{ number_format($item->subtotal, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="border-t">
                                    <td colspan="3" class="text-right font-medium">Ara Toplam:</td>
                                    <td class="text-right">₺{{ number_format($cart->subtotal, 2) }}</td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-right font-medium">Kargo Ücreti:</td>
                                    <td class="text-right">₺{{ number_format($cart->delivery_cost, 2) }}</td>
                                </tr>
                                <tr class="border-t">
                                    <td colspan="3" class="text-right font-medium">Toplam:</td>
                                    <td class="text-right font-bold">₺{{ number_format($cart->total, 2) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </section>

                <!-- Rest of the contract content -->
                @include('partials.contract-content')
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('checkoutForm');
    const submitButton = form.querySelector('button[type="submit"]');
    const modal = document.getElementById('contractModal');
    const openModalBtn = document.getElementById('openContractModal');
    const closeModalBtn = document.querySelector('.close-modal');
    const contractAcceptedCheckbox = document.getElementById('contract_accepted');
    const addressRadios = document.querySelectorAll('input[name="selected_address"]');
    const orderSubmitBtn = document.getElementById('orderSubmitBtn');

    if (orderSubmitBtn) {
        orderSubmitBtn.addEventListener('click', function(e) {
            if (addressRadios.length) {
                const addressSelected = Array.from(addressRadios).some(radio => radio.checked);
                if (!addressSelected) {
                    e.preventDefault();
                    showError('Lütfen teslimat için bir adres seçiniz.');
                    return false;
                }
            }
        });
    }

    // Contract Modal Functions
    function updateContractDetails() {
        const customerName = document.getElementById('name').value;
        document.getElementById('contractCustomerName').textContent = customerName;
        document.getElementById('contractCustomerNameFooter').textContent = customerName;
        document.getElementById('contractCustomerPhone').textContent = document.getElementById('phone').value;
        document.getElementById('contractCustomerEmail').textContent = document.getElementById('email').value;
        
        let address = document.getElementById('shipping_address').value;
        const citySelect = document.getElementById('city_id');
        const districtSelect = document.getElementById('district_id');
        
        if (citySelect.selectedIndex > 0) {
            address += `, ${citySelect.options[citySelect.selectedIndex].text}`;
        }
        if (districtSelect.selectedIndex > 0) {
            address += `, ${districtSelect.options[districtSelect.selectedIndex].text}`;
        }
        
        document.getElementById('contractCustomerAddress').textContent = address;
    }

    // Modal Event Listeners
    openModalBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        updateContractDetails();
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden';
    });

    closeModalBtn.addEventListener('click', function() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    });

    window.addEventListener('click', function(e) {
        if (e.target == modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });

    // Address Selection
    const customerInfoFields = document.getElementById('customerInfoFields');
    const deliveryFields = document.getElementById('deliveryFields');
    const newAddressBtn = document.getElementById('newAddressBtn');

    if (newAddressBtn) {
        newAddressBtn.addEventListener('click', function() {
            customerInfoFields.style.display = 'block';
            deliveryFields.style.display = 'block';
            addressRadios.forEach(radio => radio.checked = false);
        });
    }

    addressRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                customerInfoFields.style.display = 'none';
                deliveryFields.style.display = 'none';

                const addressId = this.value;
                
                fetch(`/api/addresses/${addressId}`)
                    .then(response => response.json())
                    .then(addressData => {
                        document.getElementById('name').value = addressData.first_name + ' ' + addressData.last_name;
                        document.getElementById('phone').value = addressData.phone;
                        document.getElementById('city_id').value = addressData.city_id;
                        
                        document.getElementById('city_id').dispatchEvent(new Event('change'));
                        
                        setTimeout(() => {
                            document.getElementById('district_id').value = addressData.district_id;
                        }, 500);
                        
                        document.getElementById('shipping_address').value = addressData.address;
                    })
                    .catch(error => console.error('Error:', error));
            }
        });
    });

    // City-District Selection
    const citySelect = document.getElementById('city_id');
    const districtSelect = document.getElementById('district_id');

    if (citySelect) {
        citySelect.addEventListener('change', function() {
            const cityId = this.value;
            if (cityId) {
                fetch(`/api/districts/${cityId}`)
                    .then(response => response.json())
                    .then(districts => {
                        districtSelect.innerHTML = '<option value="">İlçe Seçiniz</option>';
                        districts.forEach(district => {
                            const option = new Option(district.name, district.id);
                            if (district.id == {{ $cart->district_id ?? 'null' }}) {
                                option.selected = true;
                            }
                            districtSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            } else {
                districtSelect.innerHTML = '<option value="">Önce İl Seçiniz</option>';
            }
        });

        if (citySelect.value) {
            citySelect.dispatchEvent(new Event('change'));
        }
    }

    function showError(message) {
        // Use SweetAlert for error messages
        Swal.fire({
            title: 'Uyarı',
            text: message,
            icon: 'warning',
            confirmButtonText: 'Tamam',
            confirmButtonColor: '#2C5530',
            background: '#DBDBBC',
            iconColor: '#2C5530',
            timer: 4000,
            timerProgressBar: true,
            toast: false,
            position: 'center',
            showClass: {
                popup: 'animate__animated animate__fadeIn animate__faster'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOut animate__faster'
            }
        });
    }
    
    function showSuccess(message) {
        // Use SweetAlert for success messages
        Swal.fire({
            title: 'Başarılı',
            text: message,
            icon: 'success',
            confirmButtonText: 'Tamam',
            confirmButtonColor: '#2C5530',
            background: '#DBDBBC',
            iconColor: '#2C5530',
            timer: 3000,
            timerProgressBar: true,
            toast: false,
            position: 'center',
            showClass: {
                popup: 'animate__animated animate__fadeIn animate__faster'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOut animate__faster'
            }
        });
    }
    
    function showWhatsAppPopup(message, phone) {
        Swal.fire({
            title: 'Online Ödeme Sistemi',
            html: `
                <div class="text-left">
                    <p class="mb-4 text-gray-700">
                        Şu anda online ödeme sistemimiz aktif değildir.
                        Siparişinizi WhatsApp üzerinden tamamlayabilirsiniz.
                    </p>
                    <p class="text-sm text-gray-600">
                        <strong>Not:</strong> "Whatsapp'a Git" butonuna tıkladığınızda,
                        sipariş bilgileriniz ile birlikte WhatsApp'a yönlendirileceksiniz.
                    </p>
                </div>
            `,
            icon: 'info',
            confirmButtonText: 'WhatsApp\'a Git',
            confirmButtonColor: '#25D366',
            background: '#DBDBBC',
            iconColor: '#25D366',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showClass: {
                popup: 'animate__animated animate__fadeIn animate__faster'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOut animate__faster'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // GA4: WhatsApp siparişi için purchase event gönder
                if (window.dataLayer) {
                    window.dataLayer.push({
                        event: 'purchase',
                        ecommerce: {
                            transaction_id: 'WA-' + Date.now(),
                            affiliation: 'Serap Gerebiç',
                            value: {{ $cart->total ?? 0 }},
                            tax: {{ $cart->tax ?? 0 }},
                            shipping: {{ $cart->delivery_cost ?? 0 }},
                            currency: 'TRY',
                            payment_type: 'whatsapp',
                            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
                            ]
                        }
                    });
                    console.log('GA4 WhatsApp purchase event sent');
                }

                // WhatsApp URL'sini oluştur - wa.me kullan (evrensel link, her platformda çalışır)
                const encodedMessage = encodeURIComponent(message);
                const cleanPhone = phone.replace(/\D/g, ''); // Sadece rakamları al

                // wa.me her platformda çalışır (mobil, desktop, web)
                // WhatsApp resmi dokümantasyonu wa.me kullanımını öneriyor
                const whatsappUrl = `https://wa.me/${cleanPhone}?text=${encodedMessage}`;

                // WhatsApp'ı aç
                window.open(whatsappUrl, '_blank');

                // Başarı mesajı göster
                Swal.fire({
                    title: 'Yönlendiriliyor',
                    text: 'WhatsApp\'a yönlendiriliyorsunuz. Siparişiniz için teşekkür ederiz!',
                    icon: 'success',
                    confirmButtonText: 'Tamam',
                    confirmButtonColor: '#2C5530',
                    background: '#DBDBBC',
                    iconColor: '#2C5530',
                    timer: 3000,
                    timerProgressBar: true
                }).then(() => {
                    // Ana sayfaya yönlendir
                    window.location.href = '/';
                });
            }
        });
    }

    // Form Submission
    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        // Contract validation
        if (!contractAcceptedCheckbox.checked) {
            showError('Lütfen mesafeli satış sözleşmesini okuyup onaylayın.');
            return false;
        }

        // Form validation
        const requiredFields = {
            'name': 'Lütfen ad soyad giriniz.',
            'email': 'Lütfen e-posta adresi giriniz.',
            'phone': 'Lütfen telefon numarası giriniz.',
            'city_id': 'Lütfen il seçiniz.',
            'district_id': 'Lütfen ilçe seçiniz.',
            'shipping_address': 'Lütfen teslimat adresini giriniz.'
        };

        for (const [fieldId, message] of Object.entries(requiredFields)) {
            const field = document.getElementById(fieldId);
            if (!field || !field.value.trim()) {
                showError(message);
                return;
            }
        }

        // Submit butonunu devre dışı bırak
        submitButton.disabled = true;
        submitButton.innerHTML = 'İşleminiz Gerçekleştiriliyor...';

        try {
            // Form verilerini topla
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            // API isteği gönder
            const response = await fetch("{{ route('cart.process-checkout') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (!response.ok) {
                throw new Error(result.error || 'Bir hata oluştu');
            }

            // WhatsApp yönlendirmesi için kontrol
            if (result.status === 'whatsapp') {
                // WhatsApp popup'ını göster
                showWhatsAppPopup(result.message, result.phone);
                return;
            }
            
            /* ÖDEME KODU DEVRE DIŞI BIRAKILDI
            if (result.status === 'success' && result.redirectUrl) {
                // Google Data Layer'a ödeme bilgisi ekleme olayını gönder
                if (window.dataLayer) {
                    window.dataLayer.push({
                        'event': 'add_payment_info',
                        'value': {{ $cart->total }},
                        'currency': 'TRY',
                        'payment_type': 'credit_card',
                        'items': [
                            @foreach($cart->items as $item)
                            {
                                'item_id': '{{ $item->product_id }}',
                                'item_name': '{{ $item->product_name }}',
                                'price': {{ $item->subtotal }},
                                'quantity': {{ $item->quantity }},
                                'weight': {{ $item->weight }}
                            }@if(!$loop->last),@endif
                            @endforeach
                        ]
                    });
                    console.log('Add payment info event pushed to dataLayer');
                }
                
                window.location.href = result.redirectUrl;
            } else {
                throw new Error('Yönlendirme bilgisi alınamadı');
            }
            */

        } catch (error) {
            console.error('Error:', error);
            submitButton.disabled = false;
            submitButton.innerHTML = 'Siparişi Onayla';
            showError(error.message || 'Bir hata oluştu. Lütfen tekrar deneyiniz.');
        }
    });
});
</script>

@if($cart && $cart->items && !$cart->items->isEmpty())
<script>
// GA4: Track begin_checkout event on page load
if (window.dataLayer) {
    window.dataLayer.push({
        event: 'begin_checkout',
        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