TKK_E32222868/resources/views/livewire/orders.blade.php

<div class="p-6">
    <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Daftar Pesanan</h1>
    {{-- Filter Status --}}
    <div class="mb-4">
        <label for="filterStatus" class="block text-sm font-medium text-gray-700 dark:text-gray-200">
            Filter berdasarkan Status:
        </label>
        <select wire:model.live="filterStatus" id="filterStatus"
            class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="all">Semua</option>
            <option value="pending">Pending Transaksi</option>
            <option value="pending_manual">Pending Transaksi Manual</option>
            <option value="pending_midtrans">Pending Transaksi Midtrans</option>
            <option value="confirmed">Sukses (Manual + Midtrans)</option>
            <option value="confirmed_manual">Sukses Manual</option>
            <option value="settlement_midtrans">Sukses Midtrans</option>
            <option value="cancel">Dibatalkan</option>
            <option value="expire">Kadaluarsa</option>
        </select>
    </div>

    {{-- Daftar Pesanan --}}
    <div class="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            @forelse ($orders as $order)
                <li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
                    wire:click="showOrderDetails({{ $order->id }})">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-lg font-semibold text-indigo-600 dark:text-indigo-400">
                                Order ID: {{ $order->id }}
                            </p>
                            <p class="text-sm text-gray-600 dark:text-gray-300">
                                Pelanggan: {{ $order->customer_name ?? 'Anonim' }}
                            </p>
                            <p class="text-sm text-gray-600 dark:text-gray-300">
                                Meja: {{ $order->table_id }}
                            </p>
                        </div>
                        <div class="text-right">
                            <p class="text-md font-medium text-gray-900 dark:text-white">
                                Total: Rp {{ number_format($order->total_amount, 2, ',', '.') }}
                            </p>
                            <p
                                class="text-sm
                                {{ $order->transaction_status === 'settlement' || $order->transaction_status === 'confirmed'
                                    ? 'text-green-500'
                                    : ($order->transaction_status === 'pending' || $order->transaction_status === 'waiting_for_manual_confirmation'
                                        ? 'text-yellow-500'
                                        : 'text-red-500') }}">
                                Status: {{ ucfirst(str_replace('_', ' ', $order->transaction_status)) }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ \Carbon\Carbon::parse($order->created_at)->timezone('Asia/Jakarta')->format('d M Y H:i:s') }}
                            </p>
                        </div>
                    </div>
                </li>
            @empty
                <li class="p-4 text-gray-500 dark:text-gray-400 text-center">
                    Tidak ada pesanan ditemukan dengan status ini.
                </li>
            @endforelse
        </ul>
    </div>

    {{-- Modal Detail Pesanan --}}
    <div x-data="{ open: @entangle('selectedOrderId').live }" x-show="open"
        class="fixed inset-0 bg-gray-600/80 dark:bg-black/70 z-50 flex items-center justify-center">
        <div x-show="open" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-auto my-auto text-gray-900 dark:text-gray-100">
            @if ($selectedOrder)
                <h3 class="text-xl font-bold mb-4">Detail Pesanan #{{ $selectedOrder->id }}</h3>
                <p><strong>Nama Pelanggan:</strong> {{ $selectedOrder->customer_name ?? 'Anonim' }}</p>
                <p><strong>Email Pelanggan:</strong> {{ $selectedOrder->customer_email ?? '-' }}</p>
                <p><strong>ID Meja:</strong> {{ $selectedOrder->table_id }}</p>
                <p><strong>Metode Pembayaran:</strong> {{ ucfirst($selectedOrder->payment_method) }}</p>
                <p><strong>Status Transaksi:</strong> <span
                        class="font-semibold">{{ ucfirst(str_replace('_', ' ', $selectedOrder->transaction_status)) }}</span>
                </p>
                @if ($selectedOrder->midtrans_transaction_id)
                    <p><strong>Midtrans Transaksi ID:</strong> {{ $selectedOrder->midtrans_transaction_id }}</p>
                @endif
                <p><strong>Total Jumlah:</strong> Rp {{ number_format($selectedOrder->total_amount, 2, ',', '.') }}</p>
                <p><strong>Waktu Pesan:</strong> {{ \Carbon\Carbon::parse($selectedOrder->created_at)->timezone('Asia/Jakarta')->format('d M Y H:i:s') }}</p>

                <h4 class="text-lg font-semibold mt-4 mb-2">Item Pesanan:</h4>
                <ul class="list-disc pl-5">
                    @forelse($selectedOrder->items as $item)
                        <li>
                            {{ $item->item_name }} ({{ $item->quantity }}x) - Rp
                            {{ number_format($item->item_price, 2, ',', '.') }} = Rp
                            {{ number_format($item->total_price, 2, ',', '.') }}
                        </li>
                    @empty
                        <li>Tidak ada item untuk pesanan ini.</li>
                    @endforelse
                </ul>

                <div class="mt-6 flex justify-end space-x-2">
                    {{-- Tombol Aksi Status --}}
                    @if (
                        $selectedOrder->transaction_status === 'pending' ||
                            $selectedOrder->transaction_status === 'waiting_for_manual_confirmation')
                        <button wire:click="updateOrderStatus({{ $selectedOrder->id }}, 'confirmed')"
                            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                            Tandai Terkonfirmasi
                        </button>
                    @endif
                    @if ($selectedOrder->transaction_status !== 'cancel' && $selectedOrder->transaction_status !== 'expire')
                        <button wire:click="updateOrderStatus({{ $selectedOrder->id }}, 'cancel')"
                            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                            Batalkan Pesanan
                        </button>
                    @endif

                    <button x-on:click="open = false"
                        class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                        Tutup
                    </button>
                </div>
            @else
                <p>Memuat detail pesanan...</p>
            @endif
        </div>
    </div>
</div>