@props(['order'])
<div class="p-5 my-1 bg-gray-100 dark:bg-bg rounded-xl">
    <div class="grid grid-cols-2 gap-4">
        <x-item.text-tile title="Order #">{{ env('ORDER_PREFIX') . $order->id }}</x-item.text-tile>
        <x-item.text-tile
            title="Order Date">{{ \Carbon\Carbon::parse($order->created_at)->format('jS M Y \a\t H:i') }}</x-item.text-tile>
        <x-item.text-tile title="Network Bundle">{{ $order->network->name }}</x-item.text-tile>
        <x-item.text-tile title="Bundle Capacity">
            @if ($order->chosenbundle && $order->chosenbundle->capacity)
                {{ $order->chosenbundle->capacity }} GB
            @else
                <span>N/A</span>
            @endif
        </x-item.text-tile>
        <x-item.text-tile title="Bundle Price">GH&#8373;
            {{ number_format($order->cost, 2) }}</x-item.text-tile>
        <x-item.text-tile title="Receipient">{{ $order->recipient_phone }}</x-item.text-tile>
        @role('Admin|SuperAdmin')
            <x-item.text-tile
                title="Agent">{{ $order->agent->name . ' - ' . env('AGENT_PREFIX') . $order->agent->id }}</x-item.text-tile>

            <x-item.text-tile title="API Service">
                <div
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $order->api_service ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' }}">
                    {{ $order->api_service ?? 'N/A' }}
                </div>
            </x-item.text-tile>
        @endrole
        <x-item.text-tile title="Payment Status">
            @if ($order->payment)
                @if ($order->payment->payment_status == 'completed')
                    <x-status.completed />
                @elseif ($order->payment->payment_status == 'pending')
                    <x-status.pending />
                @elseif ($order->payment->payment_status == 'processing')
                    <x-status.processing />
                @elseif ($order->payment->payment_status == 'refunded')
                    <x-status.refunded />
                @else
                    <x-status.canceled />
                @endif
            @else
                <p>N/A</p>
            @endif
        </x-item.text-tile>
        <x-item.text-tile title="Payment Mode">{{ $order->payment->payment_mode ?? 'Wallet' }}</x-item.text-tile>
        <x-item.text-tile title="Order Status">
            @if ($order->status == 'pending')
                <x-status.pending />
            @elseif($order->status == 'processing')
                <x-status.processing />
            @elseif($order->status == 'completed')
                <x-status.completed />
            @elseif($order->status == 'waiting')
                <x-status.waiting />
            @else
                <x-status.canceled />
            @endif
        </x-item.text-tile>

        <div class="grid grid-cols-2 col-span-2 gap-4">
            @if ($order->status == 'completed')
                <x-material-button name="Complain" icon="ri-speak-fill"
                    class="text-white bg-gray-500 hover:bg-gray-800 text-nowrap"
                    wire:click="reportOrder({{ $order->id }})"></x-material-button>
            @endif

            @if ($order->status !== 'completed')
                @can('copy order')
                    <x-material-button name="Copy" icon="ri-file-copy-fill"
                        class="text-white bg-gray-500 hover:bg-gray-800"
                        wire:click="copyOrderDetails({{ $order->id }})"></x-material-button>
                @endcan
            @endif

            @can('approve payments')
                @if ($order->payment)
                    @if ($order->payment->payment_status == 'pending' || $order->payment->payment_status == 'processing')
                        <x-material-button name="Payment" icon="ri-wallet-3-fill"
                            class="text-white bg-green-500 hover:bg-green-800"
                            wire:click="approvePayment({{ $order->id }})"></x-material-button>
                    @endif
                @endif
            @endcan

            @can('serve orders')
                @if ($order->status == 'pending')
                    <x-material-button name="Process" icon="ri-refresh-line"
                        class="text-white bg-blue-500 hover:bg-blue-800"
                        wire:click="processOrder({{ $order->id }})"></x-material-button>
                @endif

                @if ($order->status == 'processing')
                    <x-material-button name="Complete" icon="ri-check-fill"
                        class="text-white bg-green-500 hover:bg-green-800"
                        wire:click="completeOrder({{ $order->id }})"></x-material-button>
                @endif

                <x-material-button name="Cancel" icon="ri-close-fill" class="text-white bg-red-500 hover:bg-red-800"
                    wire:click="cancelOrder({{ $order->id }})"></x-material-button>

                <x-material-button name="Refund" icon="ri-refund-fill" class="text-white bg-orange-500 hover:bg-orange-800"
                    wire:click="cancelAndRefundOrder({{ $order->id }})"></x-material-button>
            @endcan
        </div>

        <div class="flex col-span-2">
            @if ($order->complaint)
                <p class="text-xs italic text-red-500">Complaint has been submitted!</p>
            @endif
        </div>
    </div>
</div>