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

    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Pembayaran</h1>
            <p class="text-sm text-slate-500 mt-0.5">Verifikasi bukti transfer dan kelola status pembayaran.</p>
        </div>
    </div>

    {{-- Filter Status (tab) --}}
    <div class="flex flex-wrap gap-2 mb-4">
        <button type="button" wire:click="$set('filterStatus', '')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                {{ $filterStatus === '' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
            Semua
        </button>
        @foreach ($statusOptions as $status)
            <button type="button" wire:click="$set('filterStatus', '{{ $status->value }}')"
                class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                    {{ $filterStatus === $status->value ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
                {{ $status->label() }}
            </button>
        @endforeach
    </div>

    {{-- Search & Sort --}}
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-slate-500 mb-1">Cari</label>
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input wire:model.live.debounce.400ms="search" type="text"
                        placeholder="No. Pesanan / Invoice / Nama Customer..."
                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Urutkan</label>
                <select wire:model.live="sortBy"
                    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 bg-white">
                    <option value="newest">Terbaru</option>
                    <option value="oldest">Terlama</option>
                    <option value="highest">Nominal Terbesar</option>
                    <option value="lowest">Nominal Terkecil</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Loading indicator --}}
    <div wire:loading.flex wire:target="filterStatus, search, sortBy, perPage"
        class="items-center gap-2 text-sm text-slate-400 mb-3">
        <svg class="animate-spin w-4 h-4 text-orange-500" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        Memuat data...
    </div>

    {{-- Tabel --}}
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden" wire:loading.class="opacity-60" wire:target="filterStatus, search, sortBy, perPage">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">No. Invoice</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">No. Pesanan</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Customer</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Metode</th>
                        <th class="text-right px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Total Bayar</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Status</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Tanggal Dibuat</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($payments as $payment)
                        <tr class="hover:bg-slate-50 transition-colors" wire:key="payment-{{ $payment->id }}">
                            <td class="px-4 py-3">
                                <span class="font-mono text-xs font-semibold text-slate-700">
                                    INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="font-mono text-xs text-slate-600">{{ $payment->order->order_number ?? '—' }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <p class="font-medium text-slate-800">{{ $payment->order->customer_name ?? '—' }}</p>
                            </td>
                            <td class="px-4 py-3 text-slate-600 whitespace-nowrap">{{ $payment->method->label() }}</td>
                            <td class="px-4 py-3 text-right font-semibold text-slate-800 whitespace-nowrap">
                                Rp {{ number_format($payment->amount, 0, ',', '.') }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                @php
                                    $color = 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-2.5 py-1 rounded-full text-xs font-semibold {{ $color }}">
                                    {{ $payment->status->label() }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-600 whitespace-nowrap">
                                {{ $payment->created_at->format('d M Y') }}
                                <p class="text-xs text-slate-400">{{ $payment->created_at->format('H:i') }}</p>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ route('admin.pembayaran.show', $payment->id) }}" wire:navigate
                                        class="p-1.5 text-slate-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
                                        title="Detail">
                                        <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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    </a>

                                    @if ($payment->isPending())
                                        @can('payment.verify')
                                            <button type="button" wire:click="openVerifyModal({{ $payment->id }})"
                                                class="p-1.5 text-slate-500 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
                                                title="Verifikasi">
                                                <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>
                                            </button>
                                        @endcan
                                        @can('payment.reject')
                                            <button type="button" wire:click="openRejectModal({{ $payment->id }})"
                                                class="p-1.5 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                                title="Tolak">
                                                <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>
                                            </button>
                                        @endcan
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-16 text-center">
                                <svg class="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/>
                                </svg>
                                <p class="text-slate-400">Belum ada data pembayaran.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer: Pagination + Per Page --}}
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-slate-100">
            <div class="flex items-center gap-2 text-sm text-slate-500">
                <span>Tampilkan</span>
                <select wire:model.live="perPage"
                    class="px-2 py-1 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>data per halaman</span>
            </div>
            <div>{{ $payments->links() }}</div>
        </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>
