@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">
                                <!-- MENÜ GRUPLARI -->
                                <x-main-button name="GRUPLAR" count="" route="{{ route('pos-groups.index') }}"
                                    icon="folder" color="stone" unit="GÖZ AT"
                                    data="KATEGORİLERİ GRUPLAYIN, SERVİS SAATLERİ YÖNETİN" class='' />
                                <!-- 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 -->
                                @if ($menu_mode != 'digital_menu')
                                <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='' />
                                <!-- MÜŞTERİLER -->
                                <x-main-button name="MÜŞTERİLER" count="" route="{{ route('customers.index') }}"
                                    icon="family_restroom" color="violet" unit="TÜM"
                                    data="EKLEYİN, DÜZENLEYİN ve YÖNETİN" class='' />
                                @endif
                                <!-- İŞLETME AYARLARI -->
                                <x-main-button name="AYARLARI" count="" route="{{ route('settings.index') }}"
                                    icon="settings" color="stone" unit="MENÜ" data="GENEL AYARLARI YAPILANDIRIN"
                                    class='' />
                            </div>
                        </div>
                    </div>

                    <!-- AÇIK ADİSYONLAR -->
                    {{-- @livewire('open-bills') --}}

                    <!-- 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 -->
                    <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">
                                text_compare
                            </span>
                            Menü Modu
                        </h2>

                        @if (session()->has('error'))
                        <div class="p-3 rounded-md bg-red-50">
                            <div class="flex">
                                <div class="shrink-0">
                                    <svg class="w-5 h-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Dijital Menü Checkbox -->
                        <form action="{{ route('menu-settings.toggle-digital-menu') }}" method="POST">
                            @csrf
                            <label aria-label="Dijital Menü"
                                class="group flex border border-gray-200 p-4 rounded-md focus:outline-none has-[:checked]:relative has-[:checked]:border-violet-200 has-[:checked]:bg-violet-50 cursor-pointer">
                                <input id="digital-menu" type="checkbox" name="digital_menu_enabled" value="1" {{
                                    $digitalMenuEnabled ? 'checked' : '' }} onchange="this.form.submit()"
                                    class="col-start-1 row-start-1 bg-white border border-gray-300 rounded appearance-none checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
                                <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
                                        Menü</span>
                                    <span
                                        class="block text-xs text-stone-500 group-has-[:checked]:text-violet-700">Müşteriler
                                        QR kod yardımı ile işletme menüsüne erişim sağlayabilirler.</span>
                                    <div class="mt-1">
                                        @if($company)
                                        <p class="text-xs break-all text-stone-400">
                                            https://menu.apper.com.tr/menu/digital/<span
                                                class="font-bold text-stone-600">{{ $company->slug }}</span></p>
                                        @else
                                        <p class="text-xs italic text-stone-400">Firma seçilmedi</p>
                                        @endif
                                    </div>
                                    <div class="flex gap-x-2">
                                        @if($digitalMenuUrl)
                                        <a href="{{ $digitalMenuUrl }}" target="_blank"
                                            class="inline-flex items-center px-3 py-2 mt-2 text-sm font-semibold text-white rounded-md w-fit bg-violet-600 hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">
                                            MENÜYÜ GÖRÜNTÜLE
                                            <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                            </svg>
                                        </a>
                                        @endif
                                        <a href="{{ route('menu-settings.download-digital-menu-qr') }}"
                                            class="flex items-center px-3 py-2 mt-2 text-sm font-semibold border rounded-md border-violet-300 gap-x-2 text-violet-800 w-fit bg-violet-600/20 hover:bg-violet-500/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">
                                            QR KOD İNDİR
                                            <span class="material-symbols-rounded">download</span>
                                        </a>
                                        <a href="{{ route('menu-settings.print-digital-menu-qr') }}" target="_blank"
                                            class="flex items-center px-3 py-2 mt-2 text-sm font-semibold border rounded-md border-violet-300 gap-x-2 text-violet-800 w-fit bg-violet-600/20 hover:bg-violet-500/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">
                                            YAZDIR
                                            <span class="material-symbols-rounded">print</span>
                                        </a>
                                    </div>
                                </span>
                            </label>
                        </form>

                        <!-- Menü Modları (Radio Buttons) -->
                        <fieldset aria-label="Menü Modu" class="-space-y-px bg-white rounded-md">
                            <label aria-label="Sabit QR + Sipariş"
                                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="menu-mode" value="static" 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">Sabit
                                        QR + Sipariş</span>
                                    <span
                                        class="block text-xs text-stone-500 group-has-[:checked]:text-violet-700">Müşteriler
                                        masalara
                                        yerleştirilen sabit QR kodlar ile isim soyisim ve telefon bilgisi girerek
                                        sipariş verebilirler.</span>
                                </span>
                            </label>
                            <label aria-label="Kod Doğrulama + Sipariş"
                                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="menu-mode" value="code-verification" 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">Doğrulama
                                        + Sipariş</span>
                                    <span
                                        class="block text-xs text-stone-500 group-has-[:checked]:text-violet-700">Müşteriler
                                        girişte
                                        aldıkları doğrulama kodu ile sisteme giriş yaparak sipariş verebilirler.</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