@extends('layouts.user')

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

@section('content')
<div class="flex justify-between items-center mb-6 flex-wrap gap-4">
    <div>
        <h1 class="text-2xl font-bold">Order #{{ $order->order_number }}</h1>
        <p class="text-sm text-gray-500 mt-1">
            Created: {{ $order->created_at->format('d/m/Y H:i') }}
        </p>
    </div>
    <div class="flex items-center gap-3">
        <span class="px-3 py-1 text-sm rounded 
            @if($order->status == 'delivered') bg-green-100 text-green-800
            @elseif($order->status == 'paid') bg-blue-100 text-blue-800
            @elseif($order->status == 'processing') bg-purple-100 text-purple-800
            @elseif($order->status == 'pending') bg-yellow-100 text-yellow-800
            @else bg-gray-100 text-gray-800 @endif">
            {{ ucfirst($order->status) }}
        </span>
        <div class="text-sm bg-gray-100 px-3 py-1 rounded-full">
            <i class="fas fa-globe mr-1"></i>
            {{ $userCurrency['code'] }} ({{ $userCurrency['symbol'] }})
        </div>
    </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>
            
            <div class="p-6">
                @foreach($order->items as $item)
                <div class="flex items-center justify-between py-3 {{ !$loop->last ? 'border-b' : '' }}">
                    <div>
                        <p class="font-medium">{{ $item->product->name }}</p>
                        <p class="text-sm text-gray-500">Qty: {{ $item->quantity }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-medium">{{ currency($item->price) }}</p>
                        <p class="text-sm text-gray-500">{{ currency($item->price * $item->quantity) }}</p>
                        <p class="text-xs text-gray-400">(IDR: {{ number_format($item->price, 0, ',', '.') }})</p>
                    </div>
                </div>
                @endforeach
            </div>
        </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 Status</h2>
            </div>
            
            <div class="p-6">
                @foreach($order->deliveryLogs as $log)
                <div class="flex items-center justify-between py-2 border-b last:border-0">
                    <div>
                        <p class="text-sm text-gray-600">{{ $log->created_at->format('d/m/Y H:i') }}</p>
                        <p class="font-medium">{{ $log->bot_account }}</p>
                    </div>
                    <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800">
                        {{ $log->delivery_status }}
                    </span>
                </div>
                @endforeach
            </div>
        </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 Admin</h2>
                <span class="text-xs text-gray-500">Order #{{ $order->order_number }}</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 == 'user' ? 'justify-end' : 'justify-start' }}">
                    <div class="max-w-[70%] {{ $chat->sender_type == 'user' 
                        ? '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 == 'user' ? 'text-blue-200' : 'text-gray-500' }} mt-1">
                            {{ $chat->created_at ? $chat->created_at->format('d/m/Y H:i') : '-' }}
                            @if($chat->sender_type == 'user')
                                <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. Kirim pesan untuk bertanya atau konfirmasi pembayaran.</p>
                @endforelse
            </div>
            
            <div class="p-4 border-t">
                <form action="/user/orders/{{ $order->id }}/send-message" method="POST" class="flex space-x-2">
                    @csrf
                    <input type="text" name="message" placeholder="Ketik pesan..." 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 - Order Summary & Upload -->
    <div class="space-y-6">
        <!-- Order Summary with Currency -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Ringkasan Order</h2>
            </div>
            
            <div class="p-6 space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600">Subtotal</span>
                    <div class="text-right">
                        <span class="font-medium">{{ $order->subtotal_formatted }}</span>
                        <p class="text-xs text-gray-400">{{ $order->subtotal_idr }}</p>
                    </div>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Diskon</span>
                    <div class="text-right">
                        <span class="font-medium text-green-600">- {{ $order->discount_formatted }}</span>
                        <p class="text-xs text-gray-400">- {{ $order->discount_idr ?? 'Rp 0' }}</p>
                    </div>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Biaya Layanan</span>
                    <div class="text-right">
                        <span class="font-medium">{{ $order->fee_formatted }}</span>
                        <p class="text-xs text-gray-400">{{ $order->fee_idr ?? 'Rp 0' }}</p>
                    </div>
                </div>
                <div class="flex justify-between text-lg font-bold border-t pt-3">
                    <span>Total</span>
                    <div class="text-right">
                        <span class="text-blue-600">{{ $order->total_formatted }}</span>
                        <p class="text-xs text-gray-400">{{ $order->total_idr }}</p>
                    </div>
                </div>
                <div class="mt-2 pt-2 border-t text-xs text-gray-500 text-center">
                    * Ditampilkan dalam {{ $userCurrency['code'] }} ({{ $userCurrency['symbol'] }})<br>
                    Nilai dalam IDR adalah jumlah yang sebenarnya dibayarkan
                </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">Informasi Pembayaran</h2>
            </div>
            
            <div class="p-6 space-y-3">
                <div>
                    <p class="text-sm text-gray-500">Metode</p>
                    <p class="font-medium">{{ ucfirst($order->payment->payment_method ?? 'Belum dipilih') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Gateway</p>
                    <p class="font-medium">{{ strtoupper($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">
                        {{ ucfirst($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 break-all">{{ $order->payment->transaction_id }}</p>
                </div>
                @endif
                @if($order->payment->amount)
                <div>
                    <p class="text-sm text-gray-500">Jumlah Dibayar</p>
                    <p class="font-medium">Rp {{ number_format($order->payment->amount, 0, ',', '.') }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Bank Tujuan Info -->
        @if($order->manualPayment && $order->manualPayment->bank)
        <div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-blue-500">
            <div class="p-6 border-b bg-gray-50">
                <h2 class="text-lg font-semibold">Bank Tujuan</h2>
            </div>
            
            <div class="p-6">
                <div class="flex items-center">
                    @if($order->manualPayment->bank->logo)
                    <img src="/uploads/banks/{{ $order->manualPayment->bank->logo }}" class="w-16 h-16 mr-4 object-contain">
                    @endif
                    <div>
                        <p class="font-bold text-lg">{{ $order->manualPayment->bank->bank_name }}</p>
                        <p class="text-xl font-mono mt-1">{{ $order->manualPayment->bank->account_number }}</p>
                        <p class="text-gray-600">a.n. {{ $order->manualPayment->bank->account_holder }}</p>
                        @if($order->manualPayment->bank->branch)
                        <p class="text-sm text-gray-500 mt-1">Cabang: {{ $order->manualPayment->bank->branch }}</p>
                        @endif
                    </div>
                </div>
                
                @if($order->manualPayment->status == 'pending')
                <div class="mt-4 p-3 bg-yellow-50 rounded-lg">
                    <p class="text-sm text-yellow-700">
                        ⏳ Menunggu verifikasi admin. Kami akan mengkonfirmasi pembayaran Anda segera.
                    </p>
                </div>
                @elseif($order->manualPayment->status == 'verified')
                <div class="mt-4 p-3 bg-green-50 rounded-lg">
                    <p class="text-sm text-green-700">
                        ✓ Pembayaran telah diverifikasi pada {{ $order->manualPayment->verified_at ? date('d/m/Y H:i', strtotime($order->manualPayment->verified_at)) : '-' }}
                    </p>
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Upload Bukti Pembayaran -->
        @if(in_array($order->status, ['pending']) && $order->payment && $order->payment->payment_method == 'manual' && !$order->manualPayment)
        <div class="bg-white rounded-lg shadow overflow-hidden border-2 border-dashed border-green-300">
            <div class="p-6 border-b bg-green-50">
                <h2 class="text-lg font-semibold text-green-700">Upload Bukti Pembayaran</h2>
            </div>
            
            <div class="p-6">
                @if(session('selected_bank'))
                <div class="mb-4 p-3 bg-blue-50 rounded-lg">
                    <p class="text-sm font-medium mb-2">Bank tujuan yang Anda pilih:</p>
                    <div class="flex items-center">
                        @if(session('selected_bank.logo'))
                        <img src="/uploads/banks/{{ session('selected_bank.logo') }}" class="w-10 h-10 mr-3 object-contain">
                        @endif
                        <div>
                            <p class="font-bold">{{ session('selected_bank.bank_name') }}</p>
                            <p class="text-lg font-mono">{{ session('selected_bank.account_number') }}</p>
                            <p class="text-sm text-gray-600">a.n. {{ session('selected_bank.account_holder') }}</p>
                        </div>
                    </div>
                </div>
                @endif

                <form action="/user/orders/{{ $order->id }}/upload-proof" method="POST" enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    <input type="hidden" name="bank_id" value="{{ session('selected_bank.id') }}">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Pengirim</label>
                        <input type="text" name="account_name" required class="w-full px-3 py-2 border rounded-lg">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">No. Rekening Pengirim</label>
                        <input type="text" name="account_number" required class="w-full px-3 py-2 border rounded-lg">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Bank Pengirim</label>
                        <input type="text" name="bank_name" required class="w-full px-3 py-2 border rounded-lg">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Transfer</label>
                        <input type="datetime-local" name="transfer_date" required class="w-full px-3 py-2 border rounded-lg">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Jumlah Transfer</label>
                        <input type="number" name="amount" value="{{ $order->total }}" readonly class="w-full px-3 py-2 border rounded-lg bg-gray-50">
                        <p class="text-xs text-gray-500 mt-1">(IDR) {{ $order->total_idr }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Upload Bukti Transfer</label>
                        <input type="file" name="proof" accept="image/*" required class="w-full">
                        <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, JPEG. Max 2MB</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Catatan (opsional)</label>
                        <textarea name="notes" rows="2" class="w-full px-3 py-2 border rounded-lg"></textarea>
                    </div>
                    
                    <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
                        Upload Bukti Pembayaran
                    </button>
                </form>
            </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">Lampiran</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">Lihat</a>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Cancel Order -->
        @if($order->status == 'pending')
        <form action="/user/orders/{{ $order->id }}/cancel" method="POST" onsubmit="return confirm('Yakin ingin membatalkan order?')">
            @csrf
            <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">
                Batalkan Order
            </button>
        </form>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chatMessages = document.getElementById('chatMessages');
        if (chatMessages) {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    });
</script>
@endsection