@section('title', __('Orders'))
<div>

    @php
        $showNewBtn = true;
        if (\Auth::user()->hasRole('manager')) {
            $showNewBtn = false;
        } elseif (!\Auth::user()->hasAnyRole(['admin', 'admin-limited'])) {
            if (\Auth::user()->vendor == null || \Auth::user()->vendor->vendor_type->slug == 'parcel') {
                $showNewBtn = false;
            }
        }
    @endphp

    <x-baseview title="{{ __('Orders') }}" :showNew="$showNewBtn" link="{{ route('order.create') }}">
        @php
            $criticalOrders = $this->recommended_dispatch_orders;
            $canOpenQueueMonitor = \Route::has('queue.jobs.handler') &&
                (\Auth::user()->hasRole('admin') || \Auth::user()->can('view-queue-jobs-handler'));
        @endphp

        @if ($criticalOrders->isNotEmpty())
            <div class="mb-4 border rounded-lg bg-amber-50 border-amber-200 p-4">
                <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                    <div>
                        <p class="text-sm font-semibold text-amber-900">{{ __('Recommended Action') }}</p>
                        <p class="mt-1 text-sm text-amber-800">
                            {{ __(':count orders are waiting too long without a driver (more than :minutes min).', [
                                'count' => $criticalOrders->count(),
                                'minutes' => $this->recommendedDispatchWindowMinutes,
                            ]) }}
                        </p>
                        <p class="text-xs mt-1 text-amber-700">
                            {{ __('Online regular drivers now: :count', ['count' => $this->online_regular_drivers_count]) }}
                        </p>
                    </div>
                    <div class="flex gap-2">
                        @if ($canOpenQueueMonitor)
                            <a href="{{ route('queue.jobs.handler') }}"
                                class="inline-flex items-center px-3 py-2 text-xs font-semibold text-white rounded-md bg-primary-500 hover:bg-primary-600">
                                <x-tabler-stack-3 class="w-4 h-4 mr-1" />
                                {{ __('Open Jobs Monitor') }}
                            </a>
                        @endif
                    </div>
                </div>
                <div class="mt-3 space-y-2">
                    @foreach ($criticalOrders as $criticalOrder)
                        <div class="flex flex-col gap-2 p-3 border rounded-md sm:flex-row sm:items-center sm:justify-between border-amber-200 bg-white">
                            <div class="text-sm text-gray-800">
                                <a href="{{ route('orders.details', ['code' => $criticalOrder->code]) }}"
                                    class="font-semibold text-primary-600 hover:underline">#{{ $criticalOrder->code }}</a>
                                <span class="mx-1">•</span>
                                <span>{{ $criticalOrder->vendor->name ?? '--' }}</span>
                                <span class="mx-1">•</span>
                                <span>{{ __('Waiting: :minutes min', ['minutes' => $criticalOrder->dispatch_wait_minutes]) }}</span>
                                @if ((int) $criticalOrder->pending_auto_assignments_count > 0)
                                    <span class="mx-1">•</span>
                                    <span>{{ __('Pending alerts: :count', ['count' => $criticalOrder->pending_auto_assignments_count]) }}</span>
                                @endif
                            </div>
                            <div class="flex">
                                <a href="{{ route('orders.details', ['code' => $criticalOrder->code]) }}"
                                    class="inline-flex items-center px-3 py-1.5 text-xs font-semibold text-white rounded-md bg-amber-500 hover:bg-amber-600">
                                    <x-tabler-arrow-right class="w-4 h-4 mr-1" />
                                    {{ __('Open Order') }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <livewire:tables.order-table />
    </x-baseview>

    {{-- details moal --}}
    <div x-data="{ open: @entangle('showDetails') }">
        <x-modal-xl>
            <p class="text-xl font-semibold">{{ __('Order Details') }}</p>
            @if (!empty($selectedModel))
                @switch($selectedModel->order_type)
                    @case('package')
                        @include('livewire.order.package_order_details')
                    @break

                    @case('parcel')
                        @include('livewire.order.package_order_details')
                    @break

                    @case('service')
                        @include('livewire.order.service_order_details')
                    @break

                    @case('taxi')
                        @include('livewire.order.taxi_order_details')
                    @break

                    @default
                        @include('livewire.order.regular_order_details')
                    @break
                @endswitch
            @endif
        </x-modal-xl>
    </div>

    {{-- edit modal --}}
    <div x-data="{ open: @entangle('showEdit') }">
        <x-modal confirmText="{{ __('Update') }}" action="update" :clickAway="false">

            <p class="text-xl font-semibold">{{ __('Edit Order') }}</p>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <x-details.item title="{{ __('Code') }}" text="#{{ $selectedModel->code ?? '' }}" />
                <x-details.item title="{{ __('Status') }}" text="{{ ucfirst(__($selectedModel->status ?? '')) }}" />
                <x-details.item title="{{ __('Payment Status') }}"
                    text="{{ ucfirst(__($selectedModel->payment_status ?? '')) }}" />
                <x-details.item title="{{ __('Payment Method') }}"
                    text="{{ __($selectedModel->payment_method->name ?? '') }}" />
            </div>
            <hr />
            @if ($selectedModel->can_edit_products ?? false)
                <div class="gap-4 my-2">
                    <p class="w-full py-4 text-center underline cursor-pointer text-primary-500"
                        wire:click="showEditOrderProducts">{{ __('Edit Products') }}</p>
                </div>
            @endif
            <hr />
            <div class="gap-4">
                {{-- with initial emit --}}
                {{-- delivery boy --}}
                @can('order-assign-driver')
                    <x-label for="deliveryBoyId" title="{{ __('Delivery Personal/Driver') }}">
                        <livewire:select.edit-order-driver-select name="deliveryBoyId" placeholder="{{ __('Search') }}"
                            :searchable="true" />
                    </x-label>
                @endcan


                @hasanyrole('admin|admin-limited')
                    <x-select title="{{ __('Status') }}" :options="$this->order_status ?? []" name="status" :defer="false" />
                @else
                    @can('change-order-status')
                        @if (in_array($selectedModel->status ?? '', ['pending']))
                            <div class="mx-auto w-full flex justify-center items-center mt-2">
                                <div class="flex space-x-2 mx-auto rtl:flex-row-reverse">
                                    <x-buttons.plain bgColor="bg-red-500 w-6/12" wireClick="rejectOrder">
                                        <p class="mx-2">{{ __('Reject') }}</p>
                                        <x-heroicon-o-x class="w-5 h-5" />
                                    </x-buttons.plain>
                                    <x-buttons.plain bgColor="bg-green-500 w-6/12" wireClick="acceptOrder">
                                        <p class="mx-2">{{ __('Accept') }}</p>
                                        <x-heroicon-o-check class="w-5 h-5" />
                                    </x-buttons.plain>
                                </div>
                            </div>
                        @else
                            <x-select title="{{ __('Status') }}" :options="$this->order_status ?? []" name="status" :defer="false" />
                        @endif
                    @endcan
                @endhasanyrole
                @can('order-edit-payment-status')
                    <x-select title="{{ __('Payment Status') }}" :options="$this->order_payment_status ?? []" name="paymentStatus" />
                @endcan
                <div class="{{ in_array($status, ['failed', 'cancelled']) ? 'block' : 'hidden' }}">
                    <x-input title="{{ __('Reason') }}" name="note" />
                </div>
            </div>
        </x-modal>
    </div>


    {{-- payment review moal --}}
    <div x-data="{ open: @entangle('showAssign') }">
        <x-modal confirmText="{{ __('Approve') }}" action="approvePayment" :clickAway="false">

            <p class="text-xl font-semibold">{{ __('Order Payment Proof') }}</p>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <x-details.item title="{{ __('Transaction Code') }}"
                    text="{{ $selectedModel->payment->ref ?? '' }}" />
                <x-details.item title="{{ __('Status') }}" text="{{ $selectedModel->payment->status ?? '' }}" />
                <x-details.item title="{{ __('Payment Method') }}"
                    text="{{ $selectedModel->payment_method->name ?? '' }}" />
                <div>
                    <x-label title="{{ __('Transaction Photo') }}" />
                    <a href="{{ $selectedModel->payment->photo ?? '' }}" target="_blank">
                        <img src="{{ $selectedModel->payment->photo ?? '' }}" class="w-32 h-32" />
                    </a>
                </div>
            </div>
        </x-modal>
    </div>


</div>