@extends('layouts.admin')

@section('title', 'Order Details')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Order #{{ $order->order_number }}</h1>
    <div class="flex space-x-2">
        <!-- Status Update Form -->
        <form action="/admin/orders/{{ $order->id }}/update-status" method="POST" class="flex space-x-2">
            @csrf
            <select name="status" class="px-3 py-2 border rounded-lg">
                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="paid" {{ $order->status == 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                <option value="delivered" {{ $order->status == 'delivered' ? 'selected' : '' }}>Delivered</option>
                <option value="failed" {{ $order->status == 'failed' ? 'selected' : '' }}>Failed</option>
                <option value="refunded" {{ $order->status == 'refunded' ? 'selected' : '' }}>Refunded</option>
            </select>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Update</button>
        </form>
        
        <!-- Order Delivered Button -->
        @if(!in_array($order->status, ['delivered', 'failed', 'refunded']))
        <form action="/admin/orders/{{ $order->id }}/delivered" method="POST" onsubmit="return confirm('Mark this order as delivered? This action will notify the customer.');">
            @csrf
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                Order Delivered
            </button>
        </form>
        @endif
        
        <!-- Cancel Order Button -->
        @if(!in_array($order->status, ['delivered', 'failed', 'refunded']))
        <form action="/admin/orders/{{ $order->id }}/cancel" method="POST" onsubmit="return confirm('Are you sure you want to cancel this order? This action cannot be undone.');">
            @csrf
            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
                <svg class="w-5 h-5 inline mr-1" 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>
                Cancel Order
            </button>
        </form>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left Column - Order Items & Chat -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Order Items -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Order Items</h2>
            </div>
            
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Qty</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @foreach($order->items as $item)
                    <tr>
                        <td class="px-6 py-4">{{ $item->product->name }}</td>
                        <td class="px-6 py-4">Rp {{ number_format($item->price) }}</td>
                        <td class="px-6 py-4">{{ $item->quantity }}</td>
                        <td class="px-6 py-4">Rp {{ number_format($item->price * $item->quantity) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Delivery Logs -->
        @if($order->deliveryLogs->count())
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Delivery Logs</h2>
            </div>
            
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Bot Account</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Roblox User</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($order->deliveryLogs as $log)
                    <tr>
                        <td class="px-6 py-4">{{ $log->created_at }}</td>
                        <td class="px-6 py-4">{{ $log->bot_account }}</td>
                        <td class="px-6 py-4">{{ $log->roblox_username }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800">
                                {{ $log->delivery_status }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        <!-- Chat Section -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50 flex justify-between items-center">
                <h2 class="text-lg font-semibold">Chat dengan Customer</h2>
                <span class="text-xs text-gray-500">{{ $order->user->username ?? 'Guest' }}</span>
            </div>
            
            <div class="p-6 h-96 overflow-y-auto flex flex-col space-y-4" id="chatMessages">
                @forelse($order->chats ?? [] as $chat)
                <div class="flex {{ $chat->sender_type == 'admin' ? 'justify-end' : 'justify-start' }}">
                    <div class="max-w-[70%] {{ $chat->sender_type == 'admin' 
                        ? 'bg-blue-600 text-white rounded-l-lg rounded-tr-lg' 
                        : 'bg-gray-100 text-gray-800 rounded-r-lg rounded-tl-lg' }} p-3">
                        <p class="text-sm">{{ $chat->message }}</p>
                        <p class="text-xs {{ $chat->sender_type == 'admin' ? 'text-blue-200' : 'text-gray-500' }} mt-1">
                            {{ $chat->created_at ? date('d/m/Y H:i', strtotime($chat->created_at)) : '-' }} 
                            - {{ $chat->user->username ?? 'System' }}
                            @if($chat->sender_type == 'admin')
                                <span class="ml-2">{{ $chat->is_read ? '✓✓' : '✓' }}</span>
                            @endif
                        </p>
                    </div>
                </div>
                @empty
                <p class="text-center text-gray-500 py-8">Belum ada pesan</p>
                @endforelse
            </div>
            
            <div class="p-4 border-t">
                <form action="/admin/orders/{{ $order->id }}/send-message" method="POST" class="flex space-x-2">
                    @csrf
                    <input type="text" name="message" placeholder="Ketik pesan ke customer..." required
                        class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                        Kirim
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Column - Customer Info & Payment -->
    <div class="space-y-6">
        <!-- Customer Info -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Customer Info</h2>
            </div>
            
            <div class="p-6 space-y-3">
                <div>
                    <p class="text-sm text-gray-500">Username</p>
                    <p class="font-medium">{{ $order->user->username ?? 'Guest' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Email</p>
                    <p class="font-medium">{{ $order->email }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Roblox Username</p>
                    <p class="font-medium">{{ $order->roblox_username }}</p>
                </div>
            </div>
        </div>

        <!-- Order Summary -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Order Summary</h2>
            </div>
            
            <div class="p-6 space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600">Subtotal</span>
                    <span>Rp {{ number_format($order->subtotal) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Discount</span>
                    <span class="text-green-600">- Rp {{ number_format($order->discount) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Fee</span>
                    <span>Rp {{ number_format($order->fee) }}</span>
                </div>
                <div class="flex justify-between text-lg font-bold border-t pt-3">
                    <span>Total</span>
                    <span class="text-blue-600">Rp {{ number_format($order->total) }}</span>
                </div>
            </div>
        </div>

        <!-- Payment Info -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Payment Info</h2>
            </div>
            
            <div class="p-6 space-y-3">
                <div>
                    <p class="text-sm text-gray-500">Method</p>
                    <p class="font-medium">{{ $order->payment->payment_method ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Gateway</p>
                    <p class="font-medium">{{ $order->payment->gateway ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status</p>
                    <span class="inline-block px-2 py-1 text-xs rounded 
                        @if($order->payment->status == 'success') bg-green-100 text-green-800
                        @elseif($order->payment->status == 'pending') bg-yellow-100 text-yellow-800
                        @else bg-gray-100 text-gray-800 @endif">
                        {{ $order->payment->status ?? 'pending' }}
                    </span>
                </div>
                @if($order->payment->transaction_id)
                <div>
                    <p class="text-sm text-gray-500">Transaction ID</p>
                    <p class="text-sm font-mono">{{ $order->payment->transaction_id }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Manual Payment Verification -->
        @if($order->manualPayment)
        <div class="bg-white rounded-lg shadow overflow-hidden border-2 border-yellow-400">
            <div class="p-6 border-b bg-yellow-50">
                <h2 class="text-lg font-semibold text-yellow-800">Verifikasi Pembayaran Manual</h2>
                <span class="text-xs bg-yellow-200 px-2 py-1 rounded mt-1 inline-block">Status: {{ $order->manualPayment->status }}</span>
            </div>
            
            <div class="p-6 space-y-4">
                @if($order->manualPayment->bank)
                <div class="bg-blue-50 p-4 rounded">
                    <p class="text-sm font-medium mb-2 text-blue-800">🏦 Bank Tujuan:</p>
                    <div class="flex items-center">
                        @if($order->manualPayment->bank->logo)
                        <img src="/uploads/banks/{{ $order->manualPayment->bank->logo }}" class="w-12 h-12 mr-3 object-contain">
                        @endif
                        <div>
                            <p class="font-bold">{{ $order->manualPayment->bank->bank_name }}</p>
                            <p class="text-lg font-mono">{{ $order->manualPayment->bank->account_number }}</p>
                            <p class="text-sm text-gray-600">a.n. {{ $order->manualPayment->bank->account_holder }}</p>
                        </div>
                    </div>
                </div>
                @endif

                <div class="bg-gray-50 p-4 rounded">
                    <p class="text-sm font-medium mb-2">📤 Detail Transfer dari Pembeli:</p>
                    <table class="w-full text-sm">
                        <tr>
                            <td class="py-1 text-gray-600 w-32">Bank Pengirim</td>
                            <td class="py-1 font-medium">{{ $order->manualPayment->bank_name }}</td>
                        </tr>
                        <tr>
                            <td class="py-1 text-gray-600">Nama Pengirim</td>
                            <td class="py-1 font-medium">{{ $order->manualPayment->account_name }}</td>
                        </tr>
                        <tr>
                            <td class="py-1 text-gray-600">No. Rekening</td>
                            <td class="py-1 font-medium">{{ $order->manualPayment->account_number }}</td>
                        </tr>
                        <tr>
                            <td class="py-1 text-gray-600">Tanggal Transfer</td>
                            <td class="py-1 font-medium">{{ $order->manualPayment->transfer_date ? date('d/m/Y H:i', strtotime($order->manualPayment->transfer_date)) : '-' }}</td>
                        </tr>
                        <tr>
                            <td class="py-1 text-gray-600">Jumlah</td>
                            <td class="py-1 font-medium text-green-600">Rp {{ number_format($order->manualPayment->amount) }}</td>
                        </tr>
                        @if($order->manualPayment->notes)
                        <tr>
                            <td class="py-1 text-gray-600">Catatan</td>
                            <td class="py-1 italic">{{ $order->manualPayment->notes }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
                
                @if($order->manualPayment->proof_file)
                <div>
                    <p class="text-sm font-medium mb-2">📎 Bukti Transfer:</p>
                    <a href="/{{ $order->manualPayment->proof_file }}" target="_blank" 
                       class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                        </svg>
                        Lihat Bukti Transfer
                    </a>
                </div>
                @endif
                
                @if($order->manualPayment->status == 'pending')
                <form action="/admin/orders/{{ $order->id }}/verify-payment/{{ $order->manualPayment->id }}" method="POST" class="flex space-x-2 pt-4 border-t">
                    @csrf
                    <button type="submit" name="status" value="verified" 
                            class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
                        ✓ Verifikasi & Setujui
                    </button>
                    <button type="submit" name="status" value="rejected" 
                            class="flex-1 bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">
                        ✗ Tolak
                    </button>
                </form>
                @elseif($order->manualPayment->status == 'verified')
                <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                    <div class="flex items-center text-green-700">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span class="font-medium">Diverifikasi oleh {{ $order->manualPayment->verifier->username ?? 'Admin' }} pada {{ $order->manualPayment->verified_at ? date('d/m/Y H:i', strtotime($order->manualPayment->verified_at)) : '-' }}</span>
                    </div>
                </div>
                @elseif($order->manualPayment->status == 'rejected')
                <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                    <div class="flex items-center text-red-700">
                        <svg class="w-5 h-5 mr-2" 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>
                        <span class="font-medium">Ditolak</span>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Attachments -->
        @if(isset($order->attachments) && $order->attachments->count())
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Attachments</h2>
            </div>
            
            <div class="p-6">
                @foreach($order->attachments as $file)
                <div class="flex items-center justify-between py-2 border-b last:border-0">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                        </svg>
                        <div>
                            <p class="text-sm font-medium">{{ $file->file_name }}</p>
                            <p class="text-xs text-gray-500">{{ $file->created_at ? date('d/m/Y H:i', strtotime($file->created_at)) : '-' }}</p>
                        </div>
                    </div>
                    <a href="/{{ $file->file_path }}" target="_blank" class="text-blue-600 text-sm">View</a>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        @if($order->status == 'paid')
        <form action="/admin/orders/{{ $order->id }}/delivery/retry" method="POST">
            @csrf
            <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
                Retry Delivery
            </button>
        </form>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Auto scroll to bottom of chat
    const chatMessages = document.getElementById('chatMessages');
    if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
</script>
@endsection