@extends('layouts.app')

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <div
                class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-5">
                <!-- SOL KOLON -->
                <div class="grid gap-4 lg:col-span-3">
                    {{-- İŞLEVLER --}}
                    <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div>
                            <h2 class="flex justify-between leading-6 text-stone-700">
                                <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                    İşlevler
                                </div>
                            </h2>
                            <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                <!-- KATEGORİLER -->
                                <x-main-button name="KATEGORİLER" count="" route="{{ route('pos-categories.index') }}"
                                    icon="category" color="amber" unit="GÖZ AT"
                                    data="KATEGORİLERİ ve ÜRÜNLERİ LİSTELEYİN, DÜZENLEYİN" class='' />
                                <!-- SATIŞ ÜRÜNLERİ -->
                                <x-main-button name="ÜRÜNLER" count="" route="{{ route('pos-products.index') }}"
                                    icon="fork_spoon" color="teal" unit="GÖZ AT"
                                    data="SATIŞ ÜRÜNLERİNİ LİSTELEYİN, DÜZENLEYİN" class='' />
                                <!-- ADİSYONLAR -->
                                <x-main-button name="ADİSYONLAR" count="" route="#" icon="receipt" color="stone"
                                    unit="GÖZ AT" data="GEÇMİŞ ADİSYONLARI LİSTELEYİN" class='' />
                                <!-- QR KODLAR -->
                                <x-main-button name="KOD YÖNETİCİSİ" count="" route="{{ route('qrcodes.index') }}"
                                    icon="qr_code" color="stone" unit="GÖZ AT"
                                    data="MASALARA YERLEŞTİRECEĞİNİZ QR KODLARI İNDİRİN" class='' />
                                <!-- İŞLETME AYARLARI -->
                                <x-main-button name="AYARLARI" count="" route="{{ route('settings.index') }}"
                                    icon="settings" color="stone" unit="MENÜ" data="GENEL AYARLARI YAPILANDIRIN"
                                    class='' />
                                @if ($is_admin == 1)
                                <!-- YENİ MÜŞTERİ -->
                                <x-main-button name="MÜŞTERİ OLUŞTUR" count="" route="{{ route('customers.index') }}"
                                    icon="person_add" color="violet" unit="YENİ" data="MÜŞTERİ İÇİN QR KOD OLUŞTURUN"
                                    class='' />
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- ADİSYONLAR -->
                    <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="sm:flex sm:items-center">
                            <div class="sm:flex-auto">
                                <h1 class="text-base font-semibold text-stone-900">Açık Adisyonlar</h1>
                                <p class="mt-2 text-xs text-stone-700">Burada henüz tahsil edilmemiş açık adisyonlar
                                    listelenir. Detaylar için Poscloud uygulamasını kullanın.</p>
                            </div>
                            <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                                <button type="button"
                                    class="block px-3 py-2 text-sm font-semibold text-center text-white rounded-md shadow-sm bg-stone-600 hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">TÜM
                                    ADİSYONLAR</button>
                            </div>
                        </div>
                        @if (isset($openMenuSales) && $openMenuSales->count() > 0)
                        <ul role="list" class="grid grid-cols-3 gap-x-4 gap-y-6">
                            @foreach ($openMenuSales as $sale)
                            <li class="overflow-hidden rounded outline outline-1 outline-violet-300">
                                <div class="flex p-4 border-b items-top gap-x-4 border-stone-900/5 bg-violet-50">
                                    <div class="grid gap-y-0.5">
                                        <div
                                            class="px-2 py-1 mb-1 text-base font-medium rounded w-fit bg-violet-200 text-violet-800 ring-1 ring-inset ring-violet-600/20">
                                            {{ $sale->tables ? $sale->tables->name : 'M-' . $sale->destination_id }}
                                        </div>
                                        @if ($sale->customer)
                                        <div class="text-base font-medium text-stone-900">
                                            {{ $sale->customer->name }} {{ $sale->customer->surname }}
                                        </div>
                                        @if ($sale->customer->phone)
                                        <div class="text-xs font-medium text-stone-600">
                                            {{ $sale->customer->phone }}
                                        </div>
                                        @endif
                                        @else
                                        <div class="text-base font-medium text-stone-900">Misafir</div>
                                        @endif
                                    </div>
                                    <el-dropdown class="relative ml-auto">
                                        <button class="relative block text-gray-400 hover:text-gray-500">
                                            <span class="absolute -inset-2.5"></span>
                                            <span class="sr-only">Open options</span>
                                            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon"
                                                aria-hidden="true" class="size-5">
                                                <path
                                                    d="M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" />
                                            </svg>
                                        </button>
                                        <el-menu anchor="bottom end" popover
                                            class="m-0 w-32 origin-top-right rounded-md bg-white p-0 py-2 shadow-lg outline outline-1 outline-gray-900/5 transition [--anchor-gap:theme(spacing[0.5])] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in">
                                            <a href="#"
                                                class="block px-3 py-1 text-gray-900 text-sm/6 focus:bg-gray-50 focus:outline-none">Görüntüle<span
                                                    class="sr-only">, Adisyon</span></a>
                                            <a href="#"
                                                class="block px-3 py-1 text-gray-900 text-sm/6 focus:bg-gray-50 focus:outline-none">Düzenle<span
                                                    class="sr-only">, Adisyon</span></a>
                                        </el-menu>
                                    </el-dropdown>
                                </div>
                                <dl class="p-4 -my-3 divide-y divide-stone-100 text-sm/6">
                                    <div class="grid py-3 gap-y-1">
                                        @if ($sale->orders && $sale->orders->count() > 0)
                                        @foreach ($sale->orders->take(3) as $order)
                                        <div class="flex justify-between gap-x-4">
                                            <dt class="text-stone-500">
                                                {{ $order->product ? $order->product->name : 'Ürün' }}
                                            </dt>
                                            <dd class="text-stone-700">
                                                {{ number_format($order->total_price ?? 0, 2, ',', '.') }}
                                            </dd>
                                        </div>
                                        @endforeach
                                        @if ($sale->orders->count() > 3)
                                        <div class="pt-1 text-xs text-stone-400">
                                            +{{ $sale->orders->count() - 3 }}
                                            ürün daha</div>
                                        @endif
                                        @else
                                        <div class="text-sm text-stone-400">Henüz ürün eklenmemiş</div>
                                        @endif
                                    </div>
                                    <div class="flex justify-between py-3 gap-x-4">
                                        <dt class="text-stone-500">Adisyon Toplamı</dt>
                                        <dd class="flex items-start gap-x-2">
                                            <div class="text-lg font-medium text-stone-900">
                                                {{ number_format($sale->net_price ?? 0, 2, ',', '.') }}</div>
                                        </dd>
                                    </div>
                                </dl>
                            </li>
                            @endforeach
                        </ul>
                        @else
                        <div class="py-8 text-center">
                            <div class="text-sm text-stone-400">Açık adisyon bulunmamaktadır</div>
                        </div>
                        @endif
                    </div>

                    <!-- GEÇMİŞ SİPARİŞLER -->
                    <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="">
                            <div class="sm:flex sm:items-center">
                                <div class="sm:flex-auto">
                                    <h1 class="text-base font-semibold text-stone-900">Geçmiş Adisyonlar</h1>
                                    <p class="mt-2 text-xs text-stone-700">Geçmiş siparişleriniz listelenmektedir.
                                        Detaylar için Poscloud uygulamasını kullanın.</p>
                                </div>
                                <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                                    <button type="button"
                                        class="block px-3 py-2 text-sm font-semibold text-center text-white rounded-md shadow-sm bg-stone-600 hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">TÜM
                                        SİPARİŞLER</button>
                                </div>
                            </div>
                            <div class="mt-6 -mx-4 ring-1 ring-stone-200 sm:mx-0 sm:rounded">
                                <table class="relative min-w-full divide-y divide-gray-200">
                                    <thead class="bg-violet-50">
                                        <tr>
                                            <th scope="col"
                                                class="py-2 pl-4 pr-3 text-sm font-semibold text-left text-stone-900 sm:pl-6">
                                                No</th>
                                            <th scope="col"
                                                class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                                İsim Soyisim</th>
                                            <th scope="col"
                                                class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                                Masa</th>
                                            <th scope="col"
                                                class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                                Ürünler</th>
                                            <th scope="col"
                                                class="px-3 py-2 text-sm font-semibold text-right text-stone-900">
                                                Tutar
                                            </th>
                                            <th scope="col" class="py-2 pl-3 pr-4 sm:pr-6">
                                                <span class="sr-only">Select</span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (isset($pastMenuSales) && $pastMenuSales->count() > 0)
                                        @foreach ($pastMenuSales as $sale)
                                        <tr>
                                            <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                                                <div class="font-medium text-stone-900">#{{ $sale->id }}
                                                </div>
                                                <div class="mt-1 text-xs text-stone-500">
                                                    {{ $sale->deleted_at ? $sale->deleted_at->format('d.m.Y H:i') : '-'
                                                    }}
                                                </div>
                                            </td>
                                            <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                                @if ($sale->payer_id)
                                                @if ($sale->customer)
                                                {{ $sale->customer->name }}
                                                {{ $sale->customer->surname }}
                                                @else
                                                <span class="text-red-500">Customer not found (ID:
                                                    {{ $sale->payer_id }})</span>
                                                @endif
                                                @else
                                                Misafir
                                                @endif
                                            </td>
                                            <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                                {{ $sale->tables ? $sale->tables->name : 'M-' . $sale->destination_id }}
                                            </td>
                                            <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                                @if ($sale->orders && $sale->orders->count() > 0)
                                                {{ $sale->orders->count() }} ürün
                                                @else
                                                -
                                                @endif
                                            </td>
                                            <td class="px-3 py-3.5 text-right text-sm text-stone-500">
                                                <div class="font-medium">
                                                    {{ number_format($sale->net_price ?? 0, 2, ',', '.') }}
                                                    ₺</div>
                                            </td>
                                            <td
                                                class="relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                                <button type="button"
                                                    class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white">Görüntüle</button>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <tr>
                                            <td colspan="6" class="py-8 text-sm text-center text-stone-500">
                                                Geçmiş adisyon bulunmamaktadır
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

                </div>

                {{-- SAĞ KOLON --}}
                <div class="grid gap-4 lg:col-span-2">

                    {{-- DÖVİZ KURLARI --}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="flex gap-x-1">
                            @if (isset($ex_rate) && count($ex_rate) > 0)
                            @foreach ($ex_rate as $item)
                            @if ($item)
                            <span class="pr-1 text-xs text-stone-500">{{ $item->currency }}</span><span
                                class="font-semibold tracking-tight">{{ number_format($item->rate, 2, ',', '.')
                                }}</span>{{ $loop->last ? '' : ' | ' }}
                            @endif
                            @endforeach
                            @if (isset($ex_rate['USD']) && $ex_rate['USD'] && isset($ex_rate['USD']->date))
                            <span class="flex items-center pl-3 text-xs font-light gap-x-1 text-stone-400">
                                <span class="text-sm material-symbols-rounded">
                                    cached
                                </span>
                                {{ date('d.m.Y', strtotime($ex_rate['USD']->date)) }}
                            </span>
                            @endif
                            @else
                            <span class="text-xs text-stone-400">Döviz kuru bilgisi bulunamadı</span>
                            @endif
                        </div>
                    </div>

                    <!-- MENÜ MODU -->
                    @livewire('menu-settings')

                    <!-- ONLINE TAHSİLAT -->
                    <div class="grid p-4 bg-white rounded-lg shadow gap-y-4 ring-1 ring-stone-300">
                        <h2 class="flex items-center text-lg leading-6 gap-x-2 font-jbmono-bold text-stone-700">
                            <span class="material-symbols-rounded text-stone-500">
                                payments
                            </span>
                            Tahsilat Tipi
                        </h2>
                        <fieldset aria-label="Pay Setting" class="-space-y-px bg-white rounded-md">
                            <label aria-label="Paying at the checkout point"
                                aria-description="This project would be available to anyone who has the link"
                                class="group flex border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-violet-200 has-[:checked]:bg-violet-50">
                                <input type="radio" name="pay-setting" value="paying-at-checkout" checked
                                    class="relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-violet-600 checked:bg-violet-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <span class="flex flex-col ml-3 gap-y-1">
                                    <span
                                        class="block text-sm font-medium text-stone-900 group-has-[:checked]:text-violet-900">Kasada
                                        Ödeme</span>
                                    <span
                                        class="block text-xs tracking-tight text-stone-500 group-has-[:checked]:text-violet-700">Ödemeler
                                        işletme tarafından kasada tahsil edilir.</span>
                                </span>
                            </label>
                            <label aria-label="Digital Payment"
                                aria-description="Only members of this project would be able to access"
                                class="group flex border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-violet-200 has-[:checked]:bg-violet-50 opacity-60">
                                <input type="radio" name="pay-setting" value="digital-payment" disabled
                                    class="relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-violet-600 checked:bg-violet-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <span class="flex flex-col ml-3 gap-y-1">
                                    <span
                                        class="block text-sm font-medium text-stone-900 group-has-[:checked]:text-violet-900">Ön
                                        Ödeme
                                        <span class="text-xs text-stone-400 ml-0.5">YAKINDA</span></span>
                                    <span
                                        class="block text-xs tracking-tight text-stone-500 group-has-[:checked]:text-violet-700">Müşteriler
                                        işletme girişinde hesaplarına bakiye yüklerler ve sipariş tutarları bakiyeden
                                        düşer.</span>
                                </span>
                            </label>
                            <label aria-label="Digital Payment"
                                aria-description="Only members of this project would be able to access"
                                class="group flex border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-violet-200 has-[:checked]:bg-violet-50 opacity-60">
                                <input type="radio" name="pay-setting" value="digital-payment" disabled
                                    class="relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-violet-600 checked:bg-violet-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <span class="flex flex-col ml-3 gap-y-1">
                                    <span
                                        class="block text-sm font-medium text-stone-900 group-has-[:checked]:text-violet-900">Dijital
                                        Ödeme
                                        <span class="text-xs text-stone-400 ml-0.5">YAKINDA</span></span>
                                    <span
                                        class="block text-xs tracking-tight text-stone-500 group-has-[:checked]:text-violet-700">Müşteriler
                                        kredi kartları ile dijital menü üzerinden ödeme yapabilirler.</span>
                                </span>
                            </label>
                        </fieldset>
                    </div>

                </div>
            </div>
    </main>
</div>

@endsection

@section('scripts')
<script>
    // Livewire hata yakalama
        document.addEventListener('livewire:init', () => {
            Livewire.on('error', (event) => {
                console.error('Livewire error:', event);
            });
        });
</script>
@endsection