<div @if(!pusherSettings()->is_enabled_pusher_broadcast) wire:poll.10s @endif>
    <div class="block p-4  dark:bg-gray-800 dark:border-gray-700">
        <div class="w-full mb-4">
            <h1 class="text-lg font-semibold text-gray-900  dark:text-white flex justify-between items-center">
                <div class="flex items-center gap-2">
                    @if($showAllKitchens)
                        {{ __('kitchen::modules.menu.allKitchenKot') }}
                    @else
                        {{ $kotPlace?->name }}
                        @lang('menu.kot')
                    @endif
                    @if(pusherSettings()->is_enabled_pusher_broadcast)
                        <div class="flex items-center gap-2 px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
                            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                            @lang('app.realTime')
                        </div>
                    @endif
                </div>
                @if (!$showAllKitchens && $kotPlace && $kotPlace->printerSetting)
                    <div class="text-lg font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clip-rule="evenodd"></path>
                        </svg>
                        {{ $kotPlace->printerSetting->name }}
                    </div>
                @endif
            </h1>
        </div>

        <div class="flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-center">
            <div class="w-full lg:w-auto">
                <div class="w-full">
                    <form class="w-full" action="#" method="GET">
                        <div class="flex flex-col gap-4 md:flex-row">
                            @if($showAllKitchens)
                                <!-- Kitchen Filter for All Kitchens View -->
                                <x-select id="selectedKitchen" class="w-full md:w-48" wire:model.live="selectedKitchen">
                                    <option value="">{{ __('kitchen::modules.menu.allKitchens') }}</option>
                                    @foreach($kitchens as $kitchen)
                                        <option value="{{ $kitchen->id }}">{{ $kitchen->name }}</option>
                                    @endforeach
                                </x-select>


                            @endif

                            <x-select id="dateRangeType" class="w-full md:w-48" wire:model.defer="dateRangeType"
                                wire:change="setDateRange">
                                <option value="today">@lang('app.today')</option>
                                <option value="currentWeek">@lang('app.currentWeek')</option>
                                <option value="lastWeek">@lang('app.lastWeek')</option>
                                <option value="last7Days">@lang('app.last7Days')</option>
                                <option value="currentMonth">@lang('app.currentMonth')</option>
                                <option value="lastMonth">@lang('app.lastMonth')</option>
                                <option value="currentYear">@lang('app.currentYear')</option>
                                <option value="lastYear">@lang('app.lastYear')</option>
                            </x-select>

                            <div id="date-range-picker" class="flex flex-col w-full gap-2 sm:flex-row">
                                <div class="relative flex-1">
                                    <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
                                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                        </svg>
                                    </div>

                                        <x-datepicker wire:model.live='startDate' placeholder="@lang('app.selectStartDate')" class="pl-10" />
                                </div>
                                <span class="self-center hidden text-gray-500 sm:block">@lang('app.to')</span>
                                <div class="relative flex-1">
                                    <div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
                                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                        </svg>
                                    </div>

                                        <x-datepicker wire:model.live='endDate' placeholder="@lang('app.selectEndDate')" class="pl-10" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div @class([
                'flex gap-2 w-full lg:w-auto flex-col lg:flex-row',
                ])>
                <div wire:click="$set('filterOrders', 'pending_confirmation')" @class([
                    'whitespace-nowrap items-center font-medium
                                                        cursor-pointer p-2 text-center rounded-md text-xs border hover:text-gray-900 bg-white
                                                        hover:bg-gray-200 w-full dark:bg-gray-800 dark:hover:bg-gray-700 cols
                                                        dark:hover:text-white dark:text-neutral-400',
                    ' border-1 border-skin-base dark:border-skin-base' =>
                        $filterOrders == 'pending_confirmation',
                ])>
                    @lang('modules.reservation.Pending') ({{ $pendingConfirmationCount }})
                </div>

                <div wire:click="$set('filterOrders', 'in_kitchen')" @class([
                    'whitespace-nowrap items-center font-medium
                                                    cursor-pointer p-2 text-center rounded-md text-xs border hover:text-gray-900 bg-white
                                                    hover:bg-gray-200 w-full dark:bg-gray-800 dark:hover:bg-gray-700
                                                    dark:hover:text-white dark:text-neutral-400',
                    ' border-1 border-skin-base dark:border-skin-base' =>
                        $filterOrders == 'in_kitchen',
                ])>
                    @lang('modules.order.in_kitchen') ({{ $inKitchenCount }})
                </div>
                <div wire:click="$set('filterOrders', 'food_ready')" @class([
                    'whitespace-nowrap items-center font-medium
                                                    cursor-pointer p-2 text-center rounded-md text-xs border hover:text-gray-900 bg-white
                                                    hover:bg-gray-200 w-full dark:bg-gray-800 dark:hover:bg-gray-700
                                                    dark:hover:text-white dark:text-neutral-400',
                    ' border-1 border-skin-base dark:border-skin-base' =>
                        $filterOrders == 'food_ready',
                ])>
                    @lang('modules.order.food_ready') ({{ $foodReadyCount }})
                </div>
                <div wire:click="$set('filterOrders', 'cancelled')" @class([
                    'whitespace-nowrap items-center font-medium
                                                    cursor-pointer p-2 text-center rounded-md text-xs border hover:text-gray-900 bg-white
                                                    hover:bg-gray-200 w-full dark:bg-gray-800 dark:hover:bg-gray-700
                                                    dark:hover:text-white dark:text-neutral-400',
                    ' border-1 border-skin-base dark:border-skin-base' =>
                        $filterOrders == 'cancelled',
                ])>
                    @lang('modules.order.cancelled') ({{ $cancelledCount }})
                </div>

            </div>
        </div>

        <div class="flex flex-col my-4">
            {{-- @dd(restaurant_modules()) --}}
            {{-- @dd( in_array('kitchen', custom_module_plugins())); --}}

            <!-- Card Section -->
            <div class="space-y-4">
                <div class="grid sm:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4" wire:key="kots-grid" wire:loading.class.delay="opacity-50">
                    @foreach ($kots as $item)
                            @livewire('kot.kot-card', ['kot' => $item, 'kotSettings' => $kotSettings, 'cancelReasons' => $cancelReasons, 'kotPlace' => $kotPlace, 'showAllKitchens' => $showAllKitchens], key('kot-' . $item->id . '-' . $kotsGridKey))
                    @endforeach
                </div>
                @if($hasMore)
                    <div
                        class="py-6 text-center text-gray-500 dark:text-gray-400"
                        x-data
                        x-intersect="$wire.call('loadMore')"
                        wire:key="kots-load-more"
                    >
                        <div wire:loading wire:target="loadMore" class="flex items-center justify-center gap-2 text-sm">
                            <svg class="w-4 h-4 animate-spin text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4l3.5-3.5L12 0v4a8 8 0 100 16v-4l-3.5 3.5L12 24v-4a8 8 0 01-8-8z"></path>
                            </svg>
                        </div>
                        <div wire:loading.remove wire:target="loadMore" class="text-sm text-gray-400 dark:text-gray-500">
                            @lang('app.loadMore')
                        </div>
                    </div>
                @endif
            </div>

            <!-- End Card Section -->

        </div>

        <x-confirmation-modal wire:model.defer="confirmDeleteKotModal">
            <x-slot name="title">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">@lang('modules.order.cancelKot')</h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">@lang('modules.order.cancelOrderMessageUndone')</p>
                </div>
            </x-slot>

            <x-slot name="content" class="col-span-full">
                <div class="flex flex-col w-full space-y-6">
                    <!-- Warning Message -->
                    <x-alert type="warning" class="w-full mb-0">
                        <div class="flex items-start gap-3">
                            <svg class="flex-shrink-0 mt-0.5 w-5 h-5 text-amber-500" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                            </svg>
                            <div>
                                <p class="text-sm font-semibold text-amber-800 dark:text-amber-200">@lang('modules.order.cancelKotMessage')
                                </p>
                                <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">Please select a reason for
                                    cancellation</p>
                            </div>
                        </div>
                    </x-alert>

                    <!-- Reason Selection -->
                    <div class="w-full">
                        <x-label for="cancelReason" value="{{ __('modules.settings.selectCancelReason') }}"
                            class="text-sm font-medium text-gray-700 dark:text-gray-200" />
                        <x-select id="cancelReason" class="block w-full mt-2" wire:model.defer="cancelReason">
                            <option value="">{{ __('modules.settings.selectCancelReason') }}</option>
                            @foreach ($cancelReasons as $reason)
                                <option value="{{ $reason->id }}">{{ $reason->reason }}</option>
                            @endforeach
                        </x-select>
                        <x-input-error for="cancelReason" class="mt-2" />
                    </div>

                    <!-- Custom Reason Textarea -->
                    <div class="w-full">
                        <textarea wire:model.defer="cancelReasonText" id="cancelReasonText" rows="4"
                            class="block w-full px-4 py-3 transition-all duration-200 border-2 border-gray-300 shadow-sm resize-none rounded-xl dark:border-gray-600 focus:ring-2 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                            placeholder="@lang('modules.settings.enterCancelReason')"></textarea>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="$set('confirmDeleteKotModal', false)" wire:loading.attr="disabled">
                    {{ __('app.cancel') }}
                </x-secondary-button>

                <x-danger-button class="ml-3" wire:click="deleteKot({{ $selectedCancelKotId }})"
                    wire:loading.attr="disabled">
                    @lang('modules.order.cancelKot')
                </x-danger-button>
            </x-slot>
        </x-confirmation-modal>

        <!-- Delete KOT Item Modal -->
        <x-confirmation-modal wire:model.defer="confirmDeleteKotItemModal" max-width="xl">

            <x-slot name="title">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                        @lang('modules.order.cancelKotItem')
                        @if($this->selectedKotItem)
                            ({{ $this->selectedKotItem->menuItem->item_name ?? 'N/A' }})
                        @endif
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">@lang('modules.order.actionCannotBeUndone')</p>
                </div>
            </x-slot>

            <x-slot name="content">
                <div class="flex flex-col w-full space-y-6">
                    <!-- Warning Message -->
                    <x-alert type="warning" class="w-full mb-0">
                        <div class="flex items-start gap-3">
                            <svg class="flex-shrink-0 mt-0.5 w-5 h-5 text-amber-500" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                            </svg>
                            <div>
                                <p class="text-sm font-semibold text-amber-800 dark:text-amber-200">@lang('modules.order.cancelKotItemMessage')
                                </p>
                                <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">@lang('modules.order.pleaseSelectReasonForCancellation')</p>
                            </div>
                        </div>
                    </x-alert>

                    <!-- Reason Selection -->
                    <div class="w-full space-y-4">
                        <div>
                            <x-label for="cancelItemReason" value="{{ __('modules.settings.selectCancelReason') }}"
                                class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2" />
                            <x-select id="cancelItemReason" class="block w-full" wire:model.live="cancelItemReason" onchange="console.log('Select changed:', this.value); @this.set('cancelItemReason', this.value);">
                                <option value="">{{ __('modules.settings.selectCancelReason') }}</option>
                                @foreach ($cancelReasons as $reason)
                                    <option value="{{ $reason->id }}">{{ $reason->reason }}</option>
                                @endforeach
                            </x-select>
                            <x-input-error for="cancelItemReason" class="mt-2" />
                        </div>

                        <!-- Custom Reason Textarea -->
                        <div>
                            <x-label for="cancelItemReasonText" value="{{ __('modules.settings.enterCancelReason') }}"
                                class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2" />
                            <textarea wire:model.live="cancelItemReasonText" id="cancelItemReasonText" rows="4"
                                class="block w-full px-4 py-3 transition-all duration-200 border-2 border-gray-300 shadow-sm resize-none rounded-xl dark:border-gray-600 focus:ring-2 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                placeholder="@lang('modules.settings.enterCancelReason')"
                                oninput="console.log('Textarea input:', this.value); @this.set('cancelItemReasonText', this.value);"></textarea>
                        </div>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="$set('confirmDeleteKotItemModal', false)" wire:loading.attr="disabled">
                    {{ __('app.cancel') }}
                </x-secondary-button>

                <x-danger-button class="ml-3" wire:click="deleteKotItem({{ $selectedCancelKotItemId }})"
                    wire:loading.attr="disabled">
                    @lang('modules.order.cancelKotItem')
                </x-danger-button>
            </x-slot>
        </x-confirmation-modal>

    </div>

    @if ($playSound ?? false)
        @script
            <script>
                new Audio(@json(asset('sound/new_order.wav'))).play();
            </script>
        @endscript
    @endif
