<div x-data="{ showVerifyModal: @entangle('showVerifyModal'), showRejectModal: @entangle('showRejectModal') }">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.pembayaran') }}" wire:navigate
            class="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
        </a>
        <div class="flex-1">
            <h1 class="text-2xl font-bold text-slate-800 font-mono">
                INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}
            </h1>
            <p class="text-sm text-slate-500 mt-0.5">
                Dibuat {{ $payment->created_at->translatedFormat('d F Y, H:i') }} WIB
            </p>
        </div>

        @php
            $statusColor = match($payment->status->value) {
                'verified' => 'bg-green-100 text-green-700',
                'rejected' => 'bg-red-100 text-red-700',
                default    => 'bg-yellow-100 text-yellow-700',
            };
        @endphp
        <span class="inline-flex px-3 py-1.5 rounded-full text-sm font-semibold {{ $statusColor }}">
            {{ $payment->status->label() }}
        </span>
    </div>

    {{-- Aksi --}}
    @if ($payment->isPending())
        <div class="flex flex-wrap gap-2 mb-6">
            @can('payment.verify')
                <button type="button" wire:click="openVerifyModal"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                    <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.5 12.75l6 6 9-13.5"/>
                    </svg>
                    Verifikasi Pembayaran
                </button>
            @endcan
            @can('payment.reject')
                <button type="button" wire:click="openRejectModal"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 transition-colors">
                    <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="M18 6L6 18M6 6l12 12"/>
                    </svg>
                    Tolak Pembayaran
                </button>
            @endcan
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">

        {{-- Kolom kiri (2/3) --}}
        <div class="lg:col-span-2 space-y-5">

            {{-- Informasi Pesanan --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="font-semibold text-slate-800">Informasi Pesanan</h2>
                    @if ($payment->order)
                        <a href="{{ route('admin.pesanan.show', $payment->order->id) }}" wire:navigate
                            class="text-xs text-orange-600 hover:text-orange-700 font-medium">
                            Lihat Pesanan →
                        </a>
                    @endif
                </div>

                @if ($payment->order)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm mb-4">
                        <div>
                            <p class="text-xs text-slate-400 mb-0.5">Nomor Pesanan</p>
                            <p class="font-mono font-medium text-slate-800">{{ $payment->order->order_number }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-slate-400 mb-0.5">Customer</p>
                            <p class="font-medium text-slate-800">{{ $payment->order->customer_name }}</p>
                        </div>
                    </div>

                    <div class="bg-slate-50 rounded-lg px-4 py-3 space-y-1.5 text-sm">
                        <div class="flex justify-between text-slate-600">
                            <span>Total Belanja</span>
                            <span>Rp {{ number_format($payment->order->subtotal, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-slate-600">
                            <span>Ongkir @if($payment->order->deliveryArea) ({{ $payment->order->deliveryArea->name }}) @endif</span>
                            <span>Rp {{ number_format($payment->order->delivery_cost, 0, ',', '.') }}</span>
                        </div>
                        @if ($payment->order->discount_amount > 0)
                            <div class="flex justify-between text-green-600">
                                <span>Voucher {{ $payment->order->voucher ? '(' . $payment->order->voucher->code . ')' : '' }}</span>
                                <span>− Rp {{ number_format($payment->order->discount_amount, 0, ',', '.') }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between text-base font-bold text-slate-800 pt-1.5 border-t border-slate-200">
                            <span>Grand Total</span>
                            <span>Rp {{ number_format($payment->order->grand_total, 0, ',', '.') }}</span>
                        </div>
                    </div>
                @else
                    <p class="text-sm text-slate-400">Data pesanan tidak ditemukan.</p>
                @endif
            </div>

            {{-- Informasi Pembayaran --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <h2 class="font-semibold text-slate-800 mb-4">Informasi Pembayaran</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Invoice</p>
                        <p class="font-mono font-medium text-slate-800">INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Metode Pembayaran</p>
                        <p class="font-medium text-slate-800">{{ $payment->method->label() }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Status</p>
                        <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusColor }}">
                            {{ $payment->status->label() }}
                        </span>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Waktu Transfer</p>
                        <p class="font-medium text-slate-800">{{ $payment->created_at->translatedFormat('d F Y, H:i') }} WIB</p>
                    </div>
                    @if ($payment->sender_name)
                        <div>
                            <p class="text-xs text-slate-400 mb-0.5">Nama Pengirim</p>
                            <p class="font-medium text-slate-800">{{ $payment->sender_name }}</p>
                        </div>
                    @endif
                    @if ($payment->sender_bank)
                        <div>
                            <p class="text-xs text-slate-400 mb-0.5">Bank Pengirim</p>
                            <p class="font-medium text-slate-800">{{ $payment->sender_bank }}</p>
                        </div>
                    @endif
                </div>

                @if ($payment->isRejected() && $payment->rejection_notes)
                    <div class="mt-4 pt-4 border-t border-slate-100">
                        <p class="text-xs text-slate-400 mb-1">Alasan Penolakan</p>
                        <p class="text-sm text-red-600 bg-red-50 rounded-lg px-3 py-2">{{ $payment->rejection_notes }}</p>
                    </div>
                @endif
            </div>

            {{-- Bukti Transfer --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <h2 class="font-semibold text-slate-800 mb-4">Bukti Transfer</h2>
                @if ($payment->proof_image)
                    <a href="{{ Storage::url($payment->proof_image) }}" target="_blank" class="block">
                        <img src="{{ Storage::url($payment->proof_image) }}" alt="Bukti Transfer"
                            class="w-full max-w-md rounded-lg border border-slate-200" />
                    </a>
                @else
                    <div class="flex flex-col items-center justify-center py-12 bg-slate-50 rounded-lg border border-dashed border-slate-300">
                        <svg class="w-10 h-10 text-slate-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 19.5h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z"/>
                        </svg>
                        <p class="text-sm text-slate-400">Bukti transfer belum diunggah.</p>
                    </div>
                @endif
            </div>

            {{-- Riwayat --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <h2 class="font-semibold text-slate-800 mb-4">Riwayat</h2>

                <div class="space-y-0">
                    <div class="flex gap-3 pb-4 relative">
                        @if ($timeline->isNotEmpty())
                            <div class="absolute left-[7px] top-4 bottom-0 w-px bg-slate-200"></div>
                        @endif
                        <div class="w-4 h-4 rounded-full bg-orange-500 shrink-0 mt-0.5 z-10"></div>
                        <div class="flex-1 -mt-0.5">
                            <p class="text-sm font-medium text-slate-700">Pembayaran dibuat</p>
                            <p class="text-xs text-slate-400">{{ $payment->created_at->translatedFormat('d F Y, H:i') }} WIB</p>
                        </div>
                    </div>

                    @forelse ($timeline as $log)
                        @php
                            $newStatus = $log->properties['attributes']['status'] ?? null;
                            $label = match($newStatus) {
                                'verified' => 'Diverifikasi',
                                'rejected' => 'Ditolak',
                                default    => $log->description,
                            };
                        @endphp
                        <div class="flex gap-3 pb-4 relative">
                            @if (!$loop->last)
                                <div class="absolute left-[7px] top-4 bottom-0 w-px bg-slate-200"></div>
                            @endif
                            <div class="w-4 h-4 rounded-full bg-slate-300 shrink-0 mt-0.5 z-10"></div>
                            <div class="flex-1 -mt-0.5">
                                <p class="text-sm font-medium text-slate-700">{{ $label }}</p>
                                <p class="text-xs text-slate-400">
                                    {{ $log->created_at->translatedFormat('d F Y, H:i') }} WIB
                                    @if ($log->causer)
                                        oleh {{ $log->causer->name }}
                                    @endif
                                </p>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-slate-400 pl-7">Belum ada riwayat.</p>
                    @endforelse
                </div>
            </div>

        </div>

        {{-- Kolom kanan (1/3) --}}
        <div class="space-y-5">

            {{-- Diverifikasi/Ditolak oleh --}}
            @if ($payment->verifiedBy)
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-3">
                        {{ $payment->isVerified() ? 'Diverifikasi Oleh' : 'Ditolak Oleh' }}
                    </h2>
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                            <span class="text-orange-700 font-bold text-sm">
                                {{ strtoupper(substr($payment->verifiedBy->name, 0, 1)) }}
                            </span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-slate-800">{{ $payment->verifiedBy->name }}</p>
                            @if ($payment->verified_at)
                                <p class="text-xs text-slate-400">{{ $payment->verified_at->translatedFormat('d M Y, H:i') }} WIB</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>

    {{-- ── Modal Verifikasi ────────────────────────────────────────────── --}}
    <div x-show="showVerifyModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4"
        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/50" @click="$wire.set('showVerifyModal', false)"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm" @click.stop>
            <div class="p-6 text-center">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.5 12.75l6 6 9-13.5"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-800 mb-1">Verifikasi Pembayaran?</h3>
                <p class="text-sm text-slate-500 mb-6">Apakah Anda yakin pembayaran ini valid?</p>
                <div class="flex gap-3">
                    <button type="button" wire:click="$set('showVerifyModal', false)"
                        class="flex-1 px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                        Batal
                    </button>
                    <button type="button" wire:click="verifyPayment"
                        class="flex-1 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700"
                        wire:loading.attr="disabled" wire:target="verifyPayment">
                        <span wire:loading.remove wire:target="verifyPayment">Ya, Verifikasi</span>
                        <span wire:loading wire:target="verifyPayment">Memproses...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Modal Tolak ─────────────────────────────────────────────────── --}}
    <div x-show="showRejectModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4"
        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/50" @click="$wire.set('showRejectModal', false)"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md" @click.stop>
            <div class="p-6">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-800 mb-1">Tolak Pembayaran</h3>
                <p class="text-sm text-slate-500 mb-4">Jelaskan alasan penolakan pembayaran ini.</p>

                <form wire:submit.prevent="rejectPayment" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Alasan Penolakan <span class="text-red-500">*</span></label>
                        <textarea wire:model="rejectReason" rows="3" placeholder="Contoh: Nominal transfer tidak sesuai..."
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
                        @error('rejectReason') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="flex gap-3 justify-end pt-2">
                        <button type="button" wire:click="$set('showRejectModal', false)"
                            class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                            Batal
                        </button>
                        <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600"
                            wire:loading.attr="disabled" wire:target="rejectPayment">
                            <span wire:loading.remove wire:target="rejectPayment">Tolak Pembayaran</span>
                            <span wire:loading wire:target="rejectPayment">Memproses...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <x-admin.toast />
</div>
