@extends('layouts.main')

@section('title', 'Sepetim - Tek Umut Sigara Tiksindirici')

@section('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    <div class="container mx-auto px-4 py-12 max-w-5xl min-h-[60vh]">
        <div class="mb-8 flex items-center justify-between">
            <h1 class="font-headline-lg font-bold text-primary">Sepetim</h1>
            <a href="/#purchase" class="text-sm font-medium text-primary hover:underline">&larr; Alışverişe Dön</a>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <div class="md:col-span-2">
                <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant">
                    @if($totalQuantity <= 0)
                        <div class="text-center py-12">
                            <div class="text-outline-variant mb-4">
                                <span class="material-symbols-outlined" style="font-size: 48px;">shopping_cart</span>
                            </div>
                            <h2 class="text-xl font-bold text-on-surface-variant mb-2">Sepetiniz Boş</h2>
                            <p class="text-on-surface-variant mb-6">Sepetinizde henüz ürün bulunmamaktadır.</p>
                            <a href="/#purchase" class="inline-block bg-primary text-on-primary px-6 py-3 rounded-lg font-bold hover:opacity-90 transition">Alışverişe Başla</a>
                        </div>
                    @else
                        <div class="divide-y divide-outline-variant">
                            <div class="py-6 flex flex-col sm:flex-row justify-between items-center sm:items-start gap-4 cart-item">
                                <div class="flex-1 text-center sm:text-left">
                                    <h3 class="font-bold text-lg text-primary">Sigara Tiksindirici Toz İçecek</h3>
                                    <p class="text-sm text-on-surface-variant mt-1">
                                        @foreach($pricing['items'] as $item)
                                            {{ $item['package_qty'] }}x {{ $item['name'] }}<br>
                                        @endforeach
                                    </p>
                                </div>
                                <div class="flex items-center gap-6">
                                    <div class="flex items-center bg-surface-container-low rounded-lg border border-outline-variant p-1">
                                        <button type="button" class="btn-decrement w-8 h-8 flex items-center justify-center text-on-surface-variant hover:text-primary hover:bg-surface-container rounded transition">
                                            <span class="material-symbols-outlined text-[20px]">remove</span>
                                        </button>
                                        <span class="w-10 text-center font-bold quantity-val text-on-surface">{{ $totalQuantity }}</span>
                                        <button type="button" class="btn-increment w-8 h-8 flex items-center justify-center text-on-surface-variant hover:text-primary hover:bg-surface-container rounded transition">
                                            <span class="material-symbols-outlined text-[20px]">add</span>
                                        </button>
                                    </div>
                                    <div class="text-right w-24">
                                        <span class="font-bold text-lg text-primary"><span class="item-total">{{ number_format($pricing['total'], 2) }}</span> TL</span>
                                    </div>
                                    <button class="btn-remove text-status-error hover:opacity-80 transition">
                                        <span class="material-symbols-outlined">delete</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="md:col-span-1">
                <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant sticky top-28">
                    <h2 class="text-xl font-bold mb-4 text-primary">Sipariş Özeti</h2>
                    
                    <div class="border-t border-outline-variant mt-4 pt-4 flex justify-between items-center mb-6">
                        <span class="font-bold text-lg text-on-surface">Ara Toplam</span>
                        <span class="font-bold text-xl text-primary"><span id="cart-total">{{ number_format($pricing['total'] ?? 0, 2) }}</span> TL</span>
                    </div>

                    @if(isset($upsell) && $upsell)
                        <div class="bg-secondary-container border border-secondary text-on-secondary-container px-4 py-3 rounded-lg mb-6 text-sm text-center shadow-sm">
                            <span class="material-symbols-outlined align-middle mr-1" style="font-size: 18px;">campaign</span>
                            <strong>Fırsat:</strong> {{ $upsell['add_qty'] }} adet daha ekleyin, toplamda <strong>{{ number_format($upsell['savings'], 2) }} TL</strong> kâr edin!
                        </div>
                    @endif

                    @if($totalQuantity > 0)
                        <a href="{{ route('checkout.index') }}" class="block text-center w-full bg-primary text-on-primary py-4 rounded-lg font-bold text-lg hover:opacity-90 transition shadow-md hover:shadow-lg">
                            Ödemeye Geç
                        </a>
                    @else
                        <button disabled class="w-full bg-surface-dim text-on-surface-variant py-4 rounded-lg font-bold text-lg cursor-not-allowed">
                            Ödemeye Geç
                        </button>
                    @endif
                    
                    <p class="text-xs text-center text-on-surface-variant mt-4 flex items-center justify-center gap-1">
                        <span class="material-symbols-outlined text-[14px]">lock</span>
                        256-bit SSL ile güvenli ödeme.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        function updateCart(action) {
            fetch('/cart/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ action: action })
            }).then(res => res.json()).then(data => {
                if(data.success) {
                    window.location.reload();
                }
            });
        }

        function removeFromCart() {
            fetch('/cart/remove', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            }).then(res => res.json()).then(data => {
                if(data.success) {
                    window.location.reload();
                }
            });
        }

        document.querySelectorAll('.btn-increment').forEach(btn => {
            btn.addEventListener('click', () => {
                updateCart('increment');
            });
        });

        document.querySelectorAll('.btn-decrement').forEach(btn => {
            btn.addEventListener('click', () => {
                updateCart('decrement');
            });
        });

        document.querySelectorAll('.btn-remove').forEach(btn => {
            btn.addEventListener('click', () => {
                if(confirm('Ürünü sepetten silmek istediğinize emin misiniz?')) {
                    removeFromCart();
                }
            });
        });
    </script>
@endsection