@extends('layouts.app')
@section('title', 'Pembayaran')
@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('buyer.orders') }}" class="text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        </a>
        <h1 class="text-2xl font-bold text-gray-900">Pembayaran</h1>
        <span class="ml-auto text-xs text-gray-400">{{ $payment->payment_code }}</span>
    </div>

    {{-- Status Badge --}}
    <div class="text-center mb-6">
        @if($payment->status === 'paid')
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-full font-semibold text-sm">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                Pembayaran Lunas
            </div>
        @elseif($payment->status === 'reviewing')
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-full font-semibold text-sm">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Menunggu Verifikasi Admin
            </div>
        @elseif($payment->status === 'expired')
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-full font-semibold text-sm">
                Pembayaran Kedaluwarsa
            </div>
        @else
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-amber-100 text-amber-700 rounded-full font-semibold text-sm">
                Menunggu Pembayaran
            </div>
        @endif
    </div>

    @if(in_array($payment->status, ['pending', 'reviewing']))
        @if($payment->method === 'manual_transfer')
        {{-- Manual Transfer --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6 mb-5">
            <h2 class="font-semibold text-gray-800 mb-4">Detail Transfer</h2>
            <div class="space-y-3">
                <div class="flex justify-between items-center py-3 border-b border-gray-50">
                    <span class="text-sm text-gray-500">Total Bayar</span>
                    <span class="text-xl font-bold text-teal-600">Rp {{ number_format($payment->amount, 0, ',', '.') }}</span>
                </div>
                @if($payment->paymentMethod)
                <div class="bg-gray-50 rounded-xl p-4 space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Bank</span>
                        <span class="font-semibold text-gray-800">{{ $payment->paymentMethod->name }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">No. Rekening</span>
                        <div class="flex items-center gap-2">
                            <span class="font-mono font-semibold text-gray-800">{{ $payment->paymentMethod->account_number }}</span>
                            <button onclick="navigator.clipboard.writeText('{{ $payment->paymentMethod->account_number }}'); this.textContent='✓'" class="text-xs text-teal-600 hover:text-teal-800 font-medium">Salin</button>
                        </div>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Atas Nama</span>
                        <span class="font-semibold text-gray-800">{{ $payment->paymentMethod->account_name }}</span>
                    </div>
                </div>
                @endif
                @if($payment->expires_at)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">Batas Waktu</span>
                    <span class="font-medium text-red-600">{{ $payment->expires_at->format('d M Y, H:i') }}</span>
                </div>
                @endif
            </div>
        </div>

        {{-- Upload Proof --}}
        @if($payment->transfer_proof)
        <div class="bg-white rounded-2xl border border-gray-100 p-6 mb-5" x-data="{ reupload: false }">
            <div class="flex items-center justify-between mb-3">
                <h2 class="font-semibold text-gray-800">Bukti Transfer Dikirim</h2>
                @if($payment->status === 'reviewing')
                    <button @click="reupload = !reupload" class="text-xs text-teal-600 hover:underline">Ganti Bukti</button>
                @endif
            </div>
            <div class="rounded-xl overflow-hidden bg-gray-50 mb-3">
                <img src="{{ Storage::url($payment->transfer_proof) }}" class="max-h-64 mx-auto object-contain">
            </div>
            <p class="text-xs text-gray-400 text-center">Admin sedang memverifikasi bukti transfer kamu.</p>

            <div x-show="reupload" x-cloak class="mt-4 border-t border-gray-100 pt-4">
                <form method="POST" action="{{ route('payment.upload-proof', $payment) }}" enctype="multipart/form-data">
                    @csrf
                    @error('transfer_proof')
                        <p class="text-red-500 text-xs mb-3">{{ $message }}</p>
                    @enderror
                    <div class="border-2 border-dashed border-gray-200 rounded-xl p-4 text-center mb-3" x-data="{ preview: null }">
                        <div x-show="!preview">
                            <label class="cursor-pointer">
                                <span class="text-teal-600 text-sm font-medium">Pilih foto baru</span>
                                <input type="file" name="transfer_proof" accept="image/*" class="hidden"
                                    @change="preview = URL.createObjectURL($event.target.files[0])">
                            </label>
                            <p class="text-xs text-gray-400 mt-1">JPG, PNG, WebP maks 3MB</p>
                        </div>
                        <div x-show="preview" class="relative">
                            <img :src="preview" class="max-h-40 mx-auto rounded-lg object-contain">
                            <button type="button" @click="preview = null" class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">×</button>
                        </div>
                    </div>
                    <button type="submit" class="w-full py-2.5 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm">
                        Kirim Bukti Baru
                    </button>
                </form>
            </div>
        </div>
        @else
        <div class="bg-white rounded-2xl border border-gray-100 p-6 mb-5">
            <h2 class="font-semibold text-gray-800 mb-1">Upload Bukti Transfer</h2>
            <p class="text-xs text-gray-400 mb-4">Upload screenshot atau foto struk transfer kamu.</p>
            <form method="POST" action="{{ route('payment.upload-proof', $payment) }}" enctype="multipart/form-data">
                @csrf
                @error('transfer_proof')
                    <p class="text-red-500 text-xs mb-3">{{ $message }}</p>
                @enderror
                <div class="border-2 border-dashed border-gray-200 rounded-xl p-6 text-center mb-4" x-data="{ preview: null }" x-cloak>
                    <div x-show="!preview">
                        <svg class="w-10 h-10 text-gray-300 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <label class="cursor-pointer">
                            <span class="text-teal-600 text-sm font-medium">Pilih foto</span>
                            <span class="text-gray-400 text-sm"> atau drag & drop</span>
                            <input type="file" name="transfer_proof" accept="image/*" class="hidden"
                                @change="preview = URL.createObjectURL($event.target.files[0])">
                        </label>
                        <p class="text-xs text-gray-400 mt-1">JPG, PNG, WebP maks 3MB</p>
                    </div>
                    <div x-show="preview" class="relative">
                        <img :src="preview" class="max-h-48 mx-auto rounded-lg object-contain">
                        <button type="button" @click="preview = null" class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">×</button>
                    </div>
                </div>
                <button type="submit" class="w-full py-3 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm">
                    Kirim Bukti Transfer
                </button>
            </form>
        </div>
        @endif

        @elseif($payment->method === 'midtrans' || $payment->method === 'xendit')
        <div class="bg-white rounded-2xl border border-amber-200 bg-amber-50/50 p-6 mb-5 text-center">
            <p class="text-sm text-amber-700">Pembayaran via {{ ucfirst($payment->method) }} tidak tersedia saat ini. Silakan hubungi admin untuk bantuan.</p>
        </div>
        @endif
    @endif

    {{-- Order Summary (all orders in this payment) --}}
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-50">
            <h2 class="font-semibold text-gray-800">Ringkasan Pesanan</h2>
        </div>
        @foreach($payment->orders as $order)
        @php $storeName = $order->items->first()?->product?->store?->name ?? 'Toko'; @endphp
        <div class="{{ ! $loop->last ? 'border-b border-gray-50' : '' }} px-6 py-4">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{{ $storeName }} · {{ $order->order_number }}</p>
            <div class="space-y-2">
                @foreach($order->items as $item)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600 truncate max-w-[200px]">{{ $item->product_name }} ×{{ $item->quantity }}</span>
                    <span class="font-medium text-gray-700 shrink-0">Rp {{ number_format($item->total, 0, ',', '.') }}</span>
                </div>
                @endforeach
            </div>
            @if($order->shipping_cost > 0)
            <div class="flex justify-between text-sm mt-2 text-gray-400">
                <span>Ongkos Kirim</span>
                <span>Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
            </div>
            @endif
        </div>
        @endforeach
        <div class="px-6 py-4 bg-gray-50/50 border-t border-gray-100 flex justify-between font-bold text-gray-800">
            <span>Total Pembayaran</span>
            <span class="text-teal-600">Rp {{ number_format($payment->amount, 0, ',', '.') }}</span>
        </div>
    </div>
</div>
@endsection