@extends('menu.layouts.app')

@section('content')

<main class="max-w-lg min-h-screen px-4 pt-4 pb-48 mx-auto bg-stone-200">
    <div class="relative flex flex-col w-full overflow-hidden gap-y-4">
        <!-- BASLIK -->
        <div class="">
            <div class="flex items-center justify-between">
                <h2 class="text-3xl text-stone-600">{{ __('menu.cart') }}</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">{{ __('menu.table_label') }}: <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 text-sm bg-white gap-y-2 cart-item rounded-2xl" 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="{{ __('menu.product_notes_placeholder') }}"
                        class="w-full px-3 py-1 text-gray-900 border border-gray-300 appearance-none resize-none item-note rounded-xl bg-stone-50 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="p-2 text-white border shadow-sm qty-btn qty-decrease rounded-l-xl bg-stone-200 border-stone-200 hover:bg-stone-300">
                                <span class="font-black material-symbols-rounded 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="p-2 text-white border shadow-sm qty-btn qty-increase rounded-r-xl bg-stone-200 border-stone-200 hover:bg-stone-300">
                                <span class="font-black material-symbols-rounded text-stone-600">add</span>
                            </button>
                        </div>
                        <div class="flex items-center gap-x-2">
                            <button type="button"
                                class="p-2 text-white shadow-sm remove-btn rounded-xl bg-rose-100 hover:bg-rose-200">
                                <span class="font-black material-symbols-rounded text-rose-500">close</span>
                            </button>
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
        </section>

        <!-- SEPET TOPLAM -->
        <section aria-labelledby="summary-heading" class="mt-auto">
            <div class="p-4 bg-stone-900/20 rounded-2xl text-stone-900">
                <div class="flow-root">
                    <dl class="-my-4 text-sm divide-y divide-stone-600">
                        <div class="flex items-center justify-between py-4">
                            <dt class="text-base ">{{ __('menu.total_amount') }}:</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>

        <!-- PREPAYMENT BALANCE INFO -->
        @if(isset($paymentCollection) && $paymentCollection === 'prepayment')
        @php
        $balance = $customerBalance ?? 0;
        $sufficient = $balance >= $cartTotal;
        $remaining = $balance - $cartTotal;
        $shortage = $cartTotal - $balance;
        @endphp

        @if($sufficient)
        <div class="p-4 border border-green-300 bg-green-50 rounded-2xl">
            <div class="flex items-center gap-2 mb-2">
                <span class="text-green-600 material-symbols-rounded">account_balance_wallet</span>
                <span class="text-sm font-medium text-green-700">{{ __('menu.pay_with_balance') }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-green-700">{{ __('menu.your_balance') }}:</span>
                <span class="text-lg font-bold text-green-800">₺{{ number_format($balance, 2, ',', '.') }}</span>
            </div>
            <div class="flex items-center justify-between pt-2 mt-2 border-t border-green-200">
                <span class="text-sm text-green-700">{{ __('menu.remaining_after_order') }}:</span>
                <span class="text-base font-semibold text-green-800">₺{{ number_format($remaining, 2, ',', '.')
                    }}</span>
            </div>
        </div>
        @else
        <div class="p-4 border border-red-300 bg-red-50 rounded-2xl">
            <div class="flex items-center gap-2 mb-2">
                <span class="text-red-600 material-symbols-rounded">account_balance_wallet</span>
                <span class="text-sm font-medium text-red-700">{{ __('menu.insufficient_balance') }}!</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-red-700">{{ __('menu.your_balance') }}:</span>
                <span class="text-lg font-bold text-red-800">₺{{ number_format($balance, 2, ',', '.') }}</span>
            </div>
            <div class="flex items-center justify-between pt-2 mt-2 border-t border-red-200">
                <span class="text-sm text-red-700">{{ __('menu.shortage_amount') }}:</span>
                <span class="text-base font-semibold text-red-800">₺{{ number_format($shortage, 2, ',', '.') }}</span>
            </div>
        </div>
        @endif
        @endif

        <!-- SEPET NOTU -->
        {{-- <div class="">
            <textarea id="cart-note" placeholder="Sipariş notu" rows="2"
                class="w-full px-3 py-2 mt-2 text-gray-900 border border-gray-300 appearance-none resize-none rounded-2xl bg-stone-50 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">
            @if(isset($paymentCollection) && $paymentCollection === 'prepayment' && ($customerBalance ?? 0) <
                $cartTotal) <button type="button" disabled
                class="px-6 py-3 text-xl text-white border border-transparent rounded-md shadow-sm cursor-not-allowed bg-stone-400">
                {{ __('menu.insufficient_balance') }}
                </button>
                @else
                <button type="button" id="checkout-btn"
                    class="px-6 py-3 text-xl text-white border border-transparent rounded-md shadow-sm bg-stone-600 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-gray-50">
                    {{ __('menu.send_order') }}
                </button>
                @endif
        </div>
        @else
        <!-- BOS SEPET -->
        <div class="px-4 py-12 text-center">
            <span class="text-6xl material-symbols-rounded text-stone-300">shopping_cart</span>
            <p class="mt-4 text-stone-500">{{ __('menu.empty_cart') }}</p>
        </div>
        @endif
    </div>

    @include('menu.components.navbar')

</main>

<!-- CHECKOUT MODAL -->
@if (count($cart) > 0)
<div id="checkout-modal"
    class="fixed inset-0 z-50 flex items-start justify-center hidden pt-4 sm:items-center bg-black/50 sm:pt-0">
    <div class="w-full max-w-md p-6 mx-auto bg-white shadow-lg rounded-t-2xl sm:rounded-lg sm:mx-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl text-stone-700">{{ __('menu.order_information') }}</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="p-3 mb-4 border border-red-200 rounded-md bg-red-50">
            @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="p-2 text-xs rounded bg-yellow-50">
                    <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">{{ __('menu.first_name') }} *</label>
                    <input type="text" id="checkout-name" name="name" required autocomplete="given-name"
                        value="{{ old('name') }}"
                        class="w-full px-3 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md focus:outline-2 focus:outline-stone-600">
                </div>
                <div>
                    <label for="checkout-surname" class="block text-sm text-gray-700">{{ __('menu.last_name') }}
                        *</label>
                    <input type="text" id="checkout-surname" name="surname" required autocomplete="family-name"
                        value="{{ old('surname') }}"
                        class="w-full px-3 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md focus:outline-2 focus:outline-stone-600">
                </div>
                <div>
                    <label for="checkout-phone" class="block text-sm text-gray-700">{{ __('menu.phone_label') }}
                        *</label>
                    <input type="tel" id="checkout-phone" name="phone" required autocomplete="tel"
                        value="{{ old('phone') }}"
                        class="w-full px-3 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md focus:outline-2 focus:outline-stone-600">
                </div>
                <div>
                    <label for="checkout-room" class="block text-sm text-gray-700">{{ __('menu.room_number_optional')
                        }}</label>
                    <input type="text" id="checkout-room" name="room" autocomplete="room"
                        placeholder="{{ __('menu.room_number_optional') }}" value="{{ old('room') }}"
                        class="w-full px-3 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md focus:outline-2 focus:outline-stone-600">
                </div>
                @else
                <div class="p-3 mb-4 text-base border border-teal-200 rounded-md bg-teal-50">
                    <p class="text-base text-teal-800">{{ __('menu.continuing_with_registered_customer') }}</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="p-4 mb-4 border border-blue-200 rounded-lg bg-blue-50">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="text-2xl text-blue-600 material-symbols-rounded">person</span>
                        <h4 class="text-base font-semibold text-blue-900">{{ __('menu.customer_information') }}</h4>
                    </div>
                    <div class="grid text-base gap-y-1">
                        <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

                <!-- Room number field for customer QR -->
                <div>
                    <label for="checkout-room-customer" class="block text-sm text-gray-700">{{
                        __('menu.room_number_optional') }}</label>
                    <input type="text" id="checkout-room-customer" name="room" autocomplete="room"
                        placeholder="{{ __('menu.room_number_optional') }}" value="{{ old('room') }}"
                        class="w-full px-3 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md focus:outline-2 focus:outline-stone-600">
                </div>

                @if (isset($table))
                <div class="p-4 mb-4 border border-green-200 rounded-lg bg-green-50">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl text-green-600 material-symbols-rounded">table_bar</span>
                        <div>
                            <h4 class="text-base font-semibold text-green-900">{{ __('menu.table_label') }}</h4>
                            <p class="font-medium text-green-800">{{ $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 py-3 text-xl text-white rounded-md bg-stone-600 hover:bg-stone-700">
                    {{ __('menu.confirm_button') }}
                </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