@extends('menu.layouts.app')

@section('content')

<main class="bg-stone-200 max-w-lg px-4 pt-4 min-h-screen mx-auto pb-48">
    <div class="relative flex w-full gap-y-4 flex-col overflow-hidden">
        <!-- BASLIK -->
        <div class="">
            <div class="flex items-center justify-between">
                <h2 class="text-3xl text-stone-600">SEPET</h2>
                <a href="{{ route('menu.index', session('menu_qr_code')) }}" class="text-gray-500 hover:text-gray-500">
                    <span class="material-symbols-rounded">close</span>
                </a>
            </div>

            @if(isset($table))
            <div class="">
                <p class="text-sm text-stone-500">Masa: <span class="text-stone-700">{{ $table->name }}</span></p>
            </div>
            @endif
        </div>

        @if(count($cart) > 0)
        <!-- SEPET URUNLERI -->
        <section aria-labelledby="cart-heading">
            <ul role="list" class="grid gap-y-1.5 divide-y divide-gray-200">
                @foreach($cart as $productId => $item)
                <li class="grid p-2 gap-y-2 text-sm cart-item rounded-2xl bg-white" data-product-id="{{ $productId }}">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg text-gray-900">{{ $item['name'] }}</h3>
                        <p class="row-span-2 row-end-2 text-2xl text-gray-900 item-total">
                            {{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}<span
                                class="text-xs ml-0.5 uppercase">TL</span>
                        </p>
                    </div>
                    <input type="text" placeholder="Ürun ile ilgili notlar"
                        class="item-note w-full resize-none appearance-none rounded-xl bg-stone-50 border border-gray-300 px-3 py-1 text-gray-900 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                        value="{{ $item['note'] }}" />
                    <div class="flex justify-between">
                        <div class="flex items-center">
                            <button type="button"
                                class="qty-btn qty-decrease rounded-l-xl bg-stone-200 p-2 border border-stone-200 text-white shadow-sm hover:bg-stone-300">
                                <span class="material-symbols-rounded font-black text-stone-600">remove</span>
                            </button>
                            <input type="number" value="{{ $item['quantity'] }}" min="1"
                                class="qty-input block w-24 bg-white px-3 py-1.5 text-xl border border-stone-200 text-center text-stone-900"
                                readonly />
                            <button type="button"
                                class="qty-btn qty-increase rounded-r-xl bg-stone-200 p-2 border border-stone-200 text-white shadow-sm hover:bg-stone-300">
                                <span class="material-symbols-rounded font-black text-stone-600">add</span>
                            </button>
                        </div>
                        <div class="flex items-center gap-x-2">
                            <button type="button"
                                class="remove-btn rounded-xl bg-rose-100 p-2 text-white shadow-sm hover:bg-rose-200">
                                <span class="material-symbols-rounded font-black text-rose-500">close</span>
                            </button>
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
        </section>

        <!-- SEPET TOPLAM -->
        <section aria-labelledby="summary-heading" class="mt-auto">
            <div class="bg-stone-900/20 rounded-2xl p-4 text-stone-900">
                <div class="flow-root">
                    <dl class="-my-4 divide-y divide-stone-600 text-sm">
                        <div class="flex items-center justify-between py-4">
                            <dt class="text-base ">Toplam Tutar:</dt>
                            <p id="cart-total" class="text-2xl ">
                                {{ number_format($cartTotal, 0, ',', '.') }}<span
                                    class="text-sm ml-0.5 uppercase">TL</span>
                            </p>
                        </div>
                    </dl>
                </div>
            </div>
        </section>

        <!-- SEPET NOTU -->
        <div class="">
            <textarea id="cart-note" placeholder="Sipariş notu" rows="2"
                class="w-full mt-2 resize-none appearance-none rounded-2xl bg-stone-50 border border-gray-300 px-3 py-2 text-gray-900 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600"></textarea>
        </div>

        <!-- SIPARIS GONDER BUTONU -->
        <div class="flex justify-center px-4">
            <button type="button" id="checkout-btn"
                class="rounded-md border border-transparent bg-stone-600 px-6 py-3 text-xl text-white shadow-sm hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-gray-50">
                SİPARİŞİ GÖNDER
            </button>
        </div>
        @else

        <!-- BOS SEPET -->
        <div class="px-4 py-12 text-center">
            <span class="material-symbols-rounded text-stone-300 text-6xl">shopping_cart</span>
            <p class="mt-4 text-stone-500">Sepetiniz boş.</p>
            <a href="{{ route('menu.index', session('menu_qr_code')) }}"
                class="mt-4 inline-block text-stone-600 underline hover:text-stone-800">Menüye dön</a>
        </div>

        @endif
    </div>

    @include('menu.components.navbar')

</main>

<!-- CHECKOUT MODAL -->
@if(count($cart) > 0)
<div id="checkout-modal"
    class="hidden fixed inset-0 z-50 flex items-start sm:items-center justify-center bg-black/50 pt-4 sm:pt-0">
    <div class="bg-white rounded-t-2xl sm:rounded-lg shadow-lg w-full max-w-md mx-auto sm:mx-4 p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl text-stone-700">Sipariş Bilgileri</h3>
            <button type="button" id="close-modal" class="text-gray-400 hover:text-gray-600">
                <svg class="size-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
        </div>

        @if($errors->any())
        <div class="bg-red-50 border border-red-200 rounded-md p-3 mb-4">
            @foreach($errors->all() as $error)
            <p class="text-sm text-red-600">{{ $error }}</p>
            @endforeach
        </div>
        @endif

        <form id="checkout-form" method="POST" action="{{ route('menu.checkout') }}">
            @csrf
            <div class="space-y-4">
                <!-- Debug: Show menu type -->
                @if(app()->environment('local'))
                <div class="bg-yellow-50 p-2 rounded text-xs">
                    <p>Menu Type: {{ $menuType ?? 'NULL' }}</p>
                    <p>Existing Customer: {{ $existingCustomerInfo ? 'YES' : 'NO' }}</p>
                </div>
                @endif

                @if($menuType === 'fixed_qr_order' || !$menuType)
                <!-- TİP B: Müşteri bilgisi formu -->
                @if(!$existingCustomerInfo)
                <div>
                    <label for="checkout-name" class="block text-sm  text-gray-700">İsim *</label>
                    <input type="text" id="checkout-name" name="name" required autocomplete="given-name"
                        value="{{ old('name') }}"
                        class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:outline-2 focus:outline-stone-600">
                </div>
                <div>
                    <label for="checkout-surname" class="block text-sm  text-gray-700">Soyisim *</label>
                    <input type="text" id="checkout-surname" name="surname" required autocomplete="family-name"
                        value="{{ old('surname') }}"
                        class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:outline-2 focus:outline-stone-600">
                </div>
                <div>
                    <label for="checkout-phone" class="block text-sm  text-gray-700">Telefon *</label>
                    <input type="tel" id="checkout-phone" name="phone" required autocomplete="tel"
                        value="{{ old('phone') }}"
                        class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:outline-2 focus:outline-stone-600">
                </div>
                @else
                <div class="bg-teal-50 text-base border border-teal-200 rounded-md p-3 mb-4">
                    <p class="text-base text-teal-800">Kayıtlı müşteri ile devam ediliyor</p>
                </div>
                <div class="grid gap-y-0.5 text-lg">
                    <p class="text-stone-700">{{ $existingCustomerInfo['name'] }} {{
                        $existingCustomerInfo['surname'] }}</p>
                    <p class="text-stone-700">{{ $existingCustomerInfo['phone'] }}</p>
                </div>
                <!-- Hidden inputs to pass existing customer info -->
                <input type="hidden" name="name" value="{{ $existingCustomerInfo['name'] }}">
                <input type="hidden" name="surname" value="{{ $existingCustomerInfo['surname'] }}">
                <input type="hidden" name="phone" value="{{ $existingCustomerInfo['phone'] }}">
                @endif

                @elseif($menuType === 'customer_qr')
                <!-- TİP C: Read-only müşteri bilgisi -->
                @if($existingCustomerInfo)
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="material-symbols-rounded text-blue-600 text-2xl">person</span>
                        <h4 class="text-base font-semibold text-blue-900">Müşteri Bilgisi</h4>
                    </div>
                    <div class="grid gap-y-1 text-base">
                        <p class="text-blue-800">
                            <span class="font-medium">{{ $existingCustomerInfo['name'] }} {{
                                $existingCustomerInfo['surname'] }}</span>
                        </p>
                        <p class="text-blue-700">{{ $existingCustomerInfo['phone'] }}</p>
                    </div>
                </div>

                <!-- Hidden fields for backend -->
                <input type="hidden" name="name" value="{{ $existingCustomerInfo['name'] }}">
                <input type="hidden" name="surname" value="{{ $existingCustomerInfo['surname'] }}">
                <input type="hidden" name="phone" value="{{ $existingCustomerInfo['phone'] }}">
                @endif

                @if(isset($table))
                <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-rounded text-green-600 text-2xl">table_bar</span>
                        <div>
                            <h4 class="text-base font-semibold text-green-900">Masa</h4>
                            <p class="text-green-800 font-medium">{{ $table->name }}</p>
                        </div>
                    </div>
                </div>
                @endif
                @endif

                <input type="hidden" name="sale_note" id="sale-note-hidden">
                <div id="item-notes-container"></div>
                <button type="submit" id="submit-checkout"
                    class="w-full rounded-md bg-stone-600 py-3 text-xl text-white hover:bg-stone-700">
                    SİPARİŞİ GÖNDER
                </button>
            </div>
        </form>
    </div>
</div>
@endif

@endsection

@section('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Miktar artir/azalt
    document.querySelectorAll('.qty-increase, .qty-decrease').forEach(btn => {
        btn.addEventListener('click', () => {
            const item = btn.closest('.cart-item');
            const productId = item.dataset.productId;
            const input = item.querySelector('.qty-input');
            let qty = parseInt(input.value);

            if (btn.classList.contains('qty-increase')) {
                qty += 1;
            } else if (qty > 1) {
                qty -= 1;
            }
            input.value = qty;

            fetch("{{ route('menu.update-cart') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ product_id: productId, quantity: qty })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    item.querySelector('.item-total').innerHTML =
                        formatPrice(data.item_total) + '<span class="text-xs ml-0.5 uppercase">TL</span>';
                    document.getElementById('cart-total').innerHTML =
                        formatPrice(data.cart_total) + '<span class="text-sm ml-0.5 uppercase">TL</span>';
                }
            });
        });
    });

    // Urun sil
    document.querySelectorAll('.remove-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const item = btn.closest('.cart-item');
            const productId = item.dataset.productId;

            fetch("{{ route('menu.remove-from-cart') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ product_id: productId })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    item.remove();
                    document.getElementById('cart-total').innerHTML =
                        formatPrice(data.cart_total) + '<span class="text-sm ml-0.5 uppercase">TL</span>';
                    // Sepet bossa sayfayi yenile
                    if (data.cart_count === 0) {
                        location.reload();
                    }
                }
            });
        });
    });

    // Checkout modal
    const checkoutBtn = document.getElementById('checkout-btn');
    const checkoutModal = document.getElementById('checkout-modal');
    const closeModalBtn = document.getElementById('close-modal');

    if (checkoutBtn && checkoutModal) {
        checkoutBtn.addEventListener('click', () => {
            checkoutModal.classList.remove('hidden');
        });
    }

    if (closeModalBtn && checkoutModal) {
        closeModalBtn.addEventListener('click', () => {
            checkoutModal.classList.add('hidden');
        });
        checkoutModal.addEventListener('click', (e) => {
            if (e.target === checkoutModal) checkoutModal.classList.add('hidden');
        });
    }

    // Form submit - collect notes before sending
    const checkoutForm = document.getElementById('checkout-form');
    if (checkoutForm) {
        checkoutForm.addEventListener('submit', function() {
            const saleNote = document.getElementById('cart-note');
            if (saleNote) {
                document.getElementById('sale-note-hidden').value = saleNote.value;
            }
            const container = document.getElementById('item-notes-container');
            container.innerHTML = '';
            document.querySelectorAll('.cart-item').forEach(item => {
                const productId = item.dataset.productId;
                const noteEl = item.querySelector('.item-note');
                if (noteEl && noteEl.value.trim()) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'item_notes[' + productId + ']';
                    input.value = noteEl.value.trim();
                    container.appendChild(input);
                }
            });
        });
    }

    // Auto-open modal if validation errors exist
    @if($errors->any())
        if (checkoutModal) checkoutModal.classList.remove('hidden');
    @endif

    function formatPrice(num) {
        return new Intl.NumberFormat('tr-TR', { maximumFractionDigits: 0 }).format(num);
    }
});
</script>
@endsection