@extends('layouts.biller')

@section('title', 'Order History')
@section('page_title', 'Transaction Logs')

@section('content')
<div class="max-w-7xl mx-auto space-y-8" x-data="orderHistoryApp()">
    <!-- Filters -->
    <div class="bg-white p-6 rounded-sm border border-zinc-200 shadow-sm flex flex-col md:flex-row md:items-end justify-between gap-6">
        <form action="{{ route('biller.orders.index') }}" method="GET" class="flex flex-col md:flex-row items-start md:items-end gap-4 flex-1">
            <div class="w-full md:w-64">
                <label class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5 block">Time Period</label>
                <select name="date_filter" x-model="dateFilter" @change="if(dateFilter !== 'custom') $event.target.form.submit()" class="w-full bg-zinc-50 border border-zinc-200 rounded-sm px-4 py-2.5 text-[11px] font-black uppercase tracking-widest focus:border-indigo-500 outline-hidden appearance-none">
                    <option value="today" {{ $filter == 'today' ? 'selected' : '' }}>Today</option>
                    <option value="yesterday" {{ $filter == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                    <option value="last_7_days" {{ $filter == 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="custom" {{ $filter == 'custom' ? 'selected' : '' }}>Custom Range</option>
                </select>
            </div>
            
            <template x-if="dateFilter === 'custom'">
                <div class="flex items-end space-x-4 w-full md:w-auto">
                    <div class="flex-1 md:w-40">
                        <label class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5 block">From</label>
                        <input type="date" name="start_date" value="{{ request('start_date') }}" class="w-full bg-zinc-50 border border-zinc-200 rounded-sm px-4 py-2 text-[11px] font-bold focus:border-indigo-500 outline-hidden">
                    </div>
                    <div class="flex-1 md:w-40">
                        <label class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5 block">To</label>
                        <input type="date" name="end_date" value="{{ request('end_date') }}" class="w-full bg-zinc-50 border border-zinc-200 rounded-sm px-4 py-2 text-[11px] font-bold focus:border-indigo-500 outline-hidden">
                    </div>
                    <button type="submit" class="px-6 py-2 bg-zinc-900 text-white text-[10px] font-black uppercase tracking-widest rounded-sm hover:bg-zinc-800 transition-colors">Filter</button>
                </div>
            </template>
        </form>

        <div class="flex items-center space-x-2">
            <button class="px-4 py-2.5 bg-indigo-50 text-indigo-600 text-[10px] font-black uppercase tracking-widest rounded-sm hover:bg-indigo-100 transition-all flex items-center space-x-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                <span>Export CSV</span>
            </button>
        </div>
    </div>

    <!-- Orders Table -->
    <div class="bg-white rounded-sm border border-zinc-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-zinc-950 text-white">
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest">ID</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest">Timestamp</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest">Entity / Type</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest">Status</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest">Payment</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest text-right">Revenue</th>
                        <th class="py-4 px-6 text-[9px] font-black uppercase tracking-widest text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100">
                    @forelse($orders as $order)
                    <tr class="hover:bg-zinc-50/50 transition-colors group">
                        <td class="py-4 px-6">
                            <span class="text-xs font-black text-indigo-600">#{{ $order->id }}</span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="text-[10px] font-bold text-zinc-600 block">{{ $order->created_at->format('d M Y') }}</span>
                            <span class="text-[9px] font-black text-zinc-400 uppercase tracking-widest block mt-0.5">{{ $order->created_at->format('h:i A') }}</span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="block text-[11px] font-black text-zinc-800 uppercase tracking-tight">
                                {{ $order->order_type == 'dine_in' ? ($order->table ? $order->table->name : 'N/A') : ($order->customer_name ?: 'Walk-in') }}
                            </span>
                            <span class="block text-[8px] font-black text-zinc-400 uppercase tracking-widest mt-0.5">{{ str_replace('_', ' ', $order->order_type) }}</span>
                        </td>
                        <td class="py-4 px-6">
                            @if($order->status == 'active')
                                <span class="px-2 py-0.5 bg-amber-50 text-amber-600 text-[8px] font-black uppercase tracking-widest rounded-sm border border-amber-100">Active</span>
                            @elseif($order->status == 'settled')
                                <span class="px-2 py-0.5 bg-emerald-50 text-emerald-600 text-[8px] font-black uppercase tracking-widest rounded-sm border border-emerald-100">Settled</span>
                            @else
                                <span class="px-2 py-0.5 bg-rose-50 text-rose-600 text-[8px] font-black uppercase tracking-widest rounded-sm border border-rose-100">{{ $order->status }}</span>
                            @endif
                        </td>
                        <td class="py-4 px-6">
                            <span class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">{{ $order->payment_method ?? 'Pending' }}</span>
                        </td>
                        <td class="py-4 px-6 text-right">
                            <span class="text-[11px] font-black text-zinc-900 tracking-tight">₹{{ number_format($order->grand_total, 2) }}</span>
                        </td>
                        <td class="py-4 px-6 text-center">
                            <button @click="viewOrder({{ $order->toJson() }})" class="px-3 py-1.5 bg-zinc-50 group-hover:bg-indigo-600 group-hover:text-white text-zinc-600 text-[9px] font-black uppercase tracking-widest rounded-sm transition-all border border-zinc-200 group-hover:border-indigo-600">Details</button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-16 text-center">
                            <div class="flex flex-col items-center opacity-30">
                                <svg class="w-12 h-12 text-zinc-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                <p class="text-[10px] font-black uppercase tracking-widest">No matching transactions</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($orders->hasPages())
        <div class="px-6 py-4 bg-zinc-50 border-t border-zinc-100">
            {{ $orders->links('pagination::tailwind') }}
        </div>
        @endif
    </div>

    <!-- Order Details Modal -->
    <div x-cloak x-show="selectedOrder" class="fixed inset-0 bg-zinc-950/90 backdrop-blur-md z-50 flex items-center justify-center p-6" x-transition.opacity>
        <div class="bg-white w-full max-w-md rounded-sm shadow-2xl flex flex-col max-h-[90vh] border border-zinc-800" @click.away="selectedOrder = null" x-show="selectedOrder" x-transition>
            <div class="px-8 py-6 bg-zinc-950 text-white flex justify-between items-center flex-shrink-0">
                <div>
                    <h3 class="text-xs font-black uppercase tracking-widest" x-text="'Transaction #' + (selectedOrder?.id || '')"></h3>
                    <p class="text-[9px] text-zinc-500 font-black uppercase tracking-widest mt-1" x-text="selectedOrder ? new Date(selectedOrder.created_at).toLocaleString() : ''"></p>
                </div>
                <button @click="selectedOrder = null" class="text-zinc-500 hover:text-white transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div class="p-8 overflow-y-auto flex-1 space-y-8">
                <template x-if="selectedOrder">
                    <div class="space-y-8">
                        <!-- Info Grid -->
                        <div class="grid grid-cols-2 gap-8 pb-8 border-b border-zinc-100">
                            <div>
                                <p class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5" x-text="selectedOrder.order_type === 'dine_in' ? 'Entity / Table' : 'Customer Info'"></p>
                                <p class="text-[11px] font-black text-zinc-900 uppercase tracking-tight" x-text="selectedOrder.order_type === 'dine_in' ? (selectedOrder.table ? selectedOrder.table.name : 'N/A') : (selectedOrder.customer_name || 'Walk-in')"></p>
                            </div>
                            <div>
                                <p class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5">Order Classification</p>
                                <p class="text-[11px] font-black text-zinc-900 uppercase tracking-tight" x-text="selectedOrder.order_type.replace('_', ' ')"></p>
                            </div>
                            <div>
                                <p class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5">Assigned Steward</p>
                                <p class="text-[11px] font-black text-zinc-900 uppercase tracking-tight" x-text="selectedOrder.waiter ? selectedOrder.waiter.name : 'N/A'"></p>
                            </div>
                            <div>
                                <p class="text-[9px] font-black text-zinc-400 uppercase tracking-widest mb-1.5">Terminal Status</p>
                                <p class="text-[11px] font-black text-zinc-900 uppercase tracking-tight" x-text="selectedOrder.status"></p>
                            </div>
                        </div>

                        <!-- Itemized Bill -->
                        <div>
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-[10px] font-black uppercase tracking-widest text-zinc-900">Itemized Bill</h4>
                                <span class="text-[9px] font-black text-zinc-400 uppercase tracking-widest" x-text="selectedOrder.items.length + ' Items'"></span>
                            </div>
                            <div class="bg-zinc-50 rounded-sm border border-zinc-200 divide-y divide-zinc-100">
                                <template x-for="item in selectedOrder.items" :key="item.id">
                                    <div class="p-4 flex justify-between items-start">
                                        <div class="flex-1 pr-4">
                                            <p class="text-[11px] font-black text-zinc-900 uppercase tracking-tight" x-text="item.name"></p>
                                            <p class="text-[9px] text-zinc-500 font-bold mt-0.5" x-text="item.quantity + ' Units @ ₹' + parseFloat(item.price).toFixed(2)"></p>
                                        </div>
                                        <p class="text-[11px] font-black text-zinc-900 tracking-tight" x-text="'₹' + parseFloat(item.subtotal).toFixed(2)"></p>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Bill Calculation -->
                        <div class="bg-zinc-950 p-6 rounded-sm text-white space-y-3">
                            <div class="flex justify-between text-[10px] font-black uppercase tracking-widest text-zinc-500">
                                <span>Net Amount</span>
                                <span class="text-white" x-text="'₹' + parseFloat(selectedOrder.subtotal).toFixed(2)"></span>
                            </div>
                            <div class="flex justify-between text-[10px] font-black uppercase tracking-widest text-zinc-500">
                                <span>Service GST (5%)</span>
                                <span class="text-white" x-text="'₹' + parseFloat(selectedOrder.gst_amount).toFixed(2)"></span>
                            </div>
                            <template x-if="parseFloat(selectedOrder.discount_amount) > 0">
                                <div class="flex justify-between text-[10px] font-black uppercase tracking-widest text-emerald-500">
                                    <span x-text="'Campaign Discount (' + (selectedOrder.discount_type === 'percentage' ? selectedOrder.discount_value + '%' : 'Flat') + ')'"></span>
                                    <span x-text="'- ₹' + parseFloat(selectedOrder.discount_amount).toFixed(2)"></span>
                                </div>
                            </template>
                            <div class="flex justify-between items-end pt-3 border-t border-zinc-800">
                                <span class="text-[11px] font-black uppercase tracking-widest text-zinc-400">Total Payable</span>
                                <span class="text-xl font-black text-indigo-400 tracking-tighter" x-text="'₹' + parseFloat(selectedOrder.grand_total).toFixed(2)"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <div class="p-8 border-t border-zinc-100 bg-zinc-50 flex gap-4">
                <a :href="'{{ url('biller/orders') }}/' + selectedOrder.id + '/print'" target="_blank" class="flex-1 py-4 bg-zinc-900 text-white text-[11px] font-black uppercase tracking-widest rounded-sm flex items-center justify-center space-x-3 hover:bg-zinc-800 transition-all shadow-xl shadow-zinc-900/20">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                    <span>Print Bill</span>
                </a>
                <button @click="selectedOrder = null" class="px-8 py-4 bg-white text-zinc-900 text-[11px] font-black uppercase tracking-widest rounded-sm border border-zinc-200 hover:bg-zinc-100 transition-all">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function orderHistoryApp() {
        return {
            dateFilter: '{{ $filter }}',
            selectedOrder: null,
            
            viewOrder(order) {
                this.selectedOrder = order;
            }
        }
    }
</script>
@endpush