@extends('menu.layouts.app')

@section('content')

<main class="h-screen max-w-lg p-4 pb-24 mx-auto bg-stone-200">
    <div class="relative flex flex-col w-full py-4 overflow-hidden bg-white rounded-lg shadow">
        <!-- BASLIK -->
        <div class="flex items-center justify-between px-4">
            <h2 class="text-3xl text-stone-400">SİPARİŞLERİM</h2>
            @if (isset($table))
            <span class="text-sm text-stone-500">Masa: <span class=" text-stone-700">{{ $table->name }}</span></span>
            @endif
        </div>

        @if (isset($sale))
        <div class="px-4 mt-1">
            <p class="text-stone-400">No: #{{ $sale->id }}</p>
        </div>
        @endif

        <!-- BASARI MESAJI -->
        @if (session('success'))
        <div class="p-3 mx-4 mt-3 rounded-md bg-green-50">
            <div class="flex">
                <div class="shrink-0">
                    <svg class="text-green-400 size-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-green-800">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        @if ($orders->count() > 0)
        <!-- SIPARISLER -->
        <section class="mt-3">
            <ul role="list" class="px-4 divide-y divide-gray-200">
                @php
                $groupedOrders = $orders->groupBy('product_id')->map(function ($items) {
                return [
                'product' => $items->first()->product,
                'product_id' => $items->first()->product_id,
                'quantity' => $items->sum('quantity'),
                'total_price' => $items->sum('total_price'),
                'unit_price' => $items->first()->total_price / $items->first()->quantity,
                'notes' => $items->pluck('note')->filter()->unique()->toArray(),
                ];
                });
                @endphp

                @foreach ($groupedOrders as $groupedOrder)
                <li class="flex justify-between py-1.5">
                    <div class="flex-1 min-w-0">
                        <h4 class="text-gray-900 ">
                            {{ $groupedOrder['product']->name ?? 'Urun#' . $groupedOrder['product_id'] }}
                        </h4>
                        @if ($groupedOrder['quantity'] > 1)
                        <div class="flex items-center gap-x-2">
                            <span class="text-sm text-stone-400">{{ number_format($groupedOrder['unit_price'], 0, ',',
                                '.') }}
                                TL</span>
                            <span class="text-sm text-stone-400">x
                                {{ (int) $groupedOrder['quantity'] }}</span>
                        </div>
                        @endif
                        @if (!empty($groupedOrder['notes']))
                        <p class="text-xs italic text-stone-400">Not:
                            {{ implode(', ', $groupedOrder['notes']) }}</p>
                        @endif
                    </div>
                    <div class="flex items-center flex-shrink-0">
                        <p class="text-lg text-gray-900">
                            {{ number_format($groupedOrder['total_price'], 0, ',', '.') }}<span
                                class="text-xs ml-0.5 uppercase">TL</span>
                        </p>
                    </div>
                </li>
                @endforeach
            </ul>
        </section>

        <!-- TOPLAM -->
        @if (isset($sale))
        <section class="mt-auto">
            <div class="p-4 text-white bg-stone-900/60">
                <div class="flex items-center justify-between">
                    <span class="text-base">Toplam:</span>
                    <p class="text-2xl ">
                        {{ number_format($sale->gross_price, 0, ',', '.') }}<span
                            class="text-sm ml-0.5 uppercase">TL</span>
                    </p>
                </div>
            </div>
        </section>
        @endif

        <!-- BILGILENDIRME -->
        <div class="p-3 mx-4 mt-3 border border-blue-200 rounded-md bg-blue-50">
            <div class="flex">
                <div class="shrink-0">
                    <svg class="text-blue-400 size-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700">Ödeme kasada yapılacaktır.</p>
                </div>
            </div>
        </div>

        <!-- MENU'YE DON -->
        <div class="flex justify-center px-4 mt-4">
            <a href="{{ route('menu.index', session('menu_qr_code')) }}"
                class="px-4 py-2 text-sm bg-white border rounded-md shadow-sm border-stone-300 text-stone-600 hover:bg-stone-50">
                ŞİPARİŞ EKLE
            </a>
        </div>
        @else
        <!-- BOS ADISYON -->
        <div class="px-4 py-12 text-center">
            <span class="text-6xl material-symbols-rounded text-stone-300">receipt_long</span>
            <p class="mt-4 text-stone-500">Henüz gönderilmiş bir siparişiniz bulunmuyor.</p>
            <a href="{{ route('menu.index', session('menu_qr_code')) }}"
                class="inline-block mt-4 underline text-stone-600 hover:text-stone-800">Menüye dön</a>
        </div>
        @endif
    </div>

    @include('menu.components.navbar')

</main>

@endsection