@extends('layouts.admin')
@section('title','Orders')
@section('page-title','Order Management')
@section('content')
<div class="flex flex-wrap gap-3 mb-5">
    @foreach(['','pending','under_review','processing','completed','rejected','cancelled'] as $s)
    <a href="{{ route('admin.orders', array_merge(request()->query(), ['status' => $s])) }}"
       class="px-3 py-1.5 rounded-lg text-xs font-bold uppercase transition-all {{ request('status')===$s ? 'bg-primary text-white shadow-lg shadow-primary/20' : 'bg-white/5 text-slate-400 hover:text-white border border-white/10' }}">
        {{ $s ?: 'All' }}
    </a>
    @endforeach
    <form class="flex items-center gap-2 ml-auto">
        <input type="search" name="search" value="{{ request('search') }}" placeholder="Search VIC-ID…" class="bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-white focus:border-primary/50 focus:ring-0 focus:outline-none placeholder:text-slate-600"/>
        <button class="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-xs font-bold border border-primary/20">Search</button>
    </form>
</div>
<div class="glass-card rounded-2xl overflow-hidden">
    <table class="w-full text-left">
        <thead><tr class="border-b border-white/5 bg-white/5">
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Order ID</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">User</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Asset / Amount</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Payout</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Status</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Date</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Action</th>
        </tr></thead>
        <tbody class="divide-y divide-white/5">
            @forelse($orders as $order)
            <tr class="hover:bg-white/3 transition-colors group" id="order-{{ $order->id }}">
                <td class="px-4 py-3 font-mono text-xs text-primary">{{ $order->order_id }}</td>
                <td class="px-4 py-3"><div><p class="text-sm font-medium">{{ $order->user->name }}</p><p class="text-[10px] text-slate-500">{{ $order->user->email }}</p></div></td>
                <td class="px-4 py-3"><div><p class="font-bold text-sm">{{ $order->asset_type }}</p><p class="text-[10px] text-slate-500">{{ number_format($order->amount, 6) }}</p></div></td>
                <td class="px-4 py-3"><span class="font-bold text-primary">₦{{ number_format($order->calculated_payout, 0) }}</span></td>
                <td class="px-4 py-3">
                    <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-[10px] font-bold uppercase {{ $order->status_badge_class }}">
                        <span class="w-1.5 h-1.5 rounded-full bg-current {{ in_array($order->status,['pending','under_review']) ? 'animate-pulse' : '' }}"></span>{{ $order->status }}
                    </span>
                </td>
                <td class="px-4 py-3 text-xs text-slate-500">{{ $order->created_at->format('M d, H:i') }}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        @if($order->proof_file_path)
                        <a href="{{ route('files.show', ['type'=>'proofs','filename'=>basename($order->proof_file_path)]) }}" target="_blank"
                           class="p-1.5 bg-blue-500/10 text-blue-400 rounded-lg hover:bg-blue-500/20 transition-all" title="View Proof">
                            <span class="material-symbols-outlined text-sm">attachment</span>
                        </a>
                        @endif
                        @if($order->chatThread)
                        <a href="{{ route('admin.chats', ['thread_id' => $order->chatThread->id]) }}"
                           class="p-1.5 bg-white/5 text-slate-400 rounded-lg hover:text-primary transition-all" title="Open Chat">
                            <span class="material-symbols-outlined text-sm">chat_bubble</span>
                        </a>
                        @endif
                        <button onclick="toggleUpdateForm({{ $order->id }})"
                                class="p-1.5 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-all" title="Update Status">
                            <span class="material-symbols-outlined text-sm">edit</span>
                        </button>
                    </div>
                    <div id="updateForm-{{ $order->id }}" class="hidden mt-2 p-3 bg-background-dark rounded-xl border border-white/10 shadow-xl space-y-2 min-w-[200px]">
                        <form method="POST" action="{{ route('admin.orders.update', $order) }}" class="space-y-2">
                            @csrf
                            <select name="status" class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white focus:border-primary/30 focus:ring-0 focus:outline-none">
                                @foreach(['under_review','processing','completed','rejected','cancelled'] as $s)
                                <option value="{{ $s }}" {{ $order->status===$s ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                                @endforeach
                            </select>
                            <textarea name="notes" rows="2" placeholder="Admin notes…" class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white focus:ring-0 focus:outline-none resize-none placeholder:text-slate-600"></textarea>
                            <button class="w-full py-1.5 bg-primary text-white rounded-lg text-xs font-bold">Update</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="py-16 text-center text-slate-500 text-sm">No orders match this filter.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-5">{{ $orders->links() }}</div>
@endsection
@push('scripts')
<script>function toggleUpdateForm(id){const el=document.getElementById('updateForm-'+id);el.classList.toggle('hidden');}</script>
@endpush