@extends('layouts.main')

@push('styles')
<style>
    /* Sesuaikan posisi & lebar konten seperti halaman Berita */
    .main-content { padding-left: 0 !important; padding-right: 0 !important; }
    .content { padding-left: 0 !important; padding-right: 0 !important; }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-white py-4 px-4">
    <div class="w-full">
        <!-- Header Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4">
                <h4 class="text-white text-xl font-bold flex items-center">
                    <i class="fas fa-money-bill-wave mr-2"></i>Manajemen Pembayaran
                </h4>
            </div>
            <div class="p-6">
                <!-- Saldo + Withdraw Row -->
                @php($userTopHeader = auth()->user())
                @if(!$userTopHeader || !$userTopHeader->isSuperAdmin())
                <div class="mb-4">
                    <div class="flex items-center justify-between bg-teal-50 border border-teal-200 rounded-lg px-4 py-3">
                        <div class="flex items-center gap-3">
                            <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-teal-100 text-teal-700">
                                <i class="fas fa-wallet"></i>
                            </span>
                            <div>
                                <div class="text-sm text-teal-700 font-semibold">Saldo Saat Ini</div>
                                <div class="text-xl font-bold text-teal-900">Rp {{ number_format($stats['balance_amount'] ?? ($stats['total_amount'] ?? 0), 0, ',', '.') }}</div>
                                <div class="text-xs text-teal-600">Berdasarkan pembayaran yang disetujui</div>
                            </div>
                        </div>
                        @php($userTop = auth()->user())
                        @if($userTop && ($userTop->isAdmin() || $userTop->isCreator()))
                            <div class="flex items-center gap-2">
                                <button type="button"
                                        class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border bg-green-600 text-white border-green-600 hover:bg-green-700"
                                        onclick="openWithdrawModal()">
                                    <i class="fas fa-hand-holding-usd mr-2"></i>
                                    Minta Penarikan Dana
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
                @endif
                <!-- Toggle between Activity payments -->
                <div class="mb-4 flex flex-row flex-wrap gap-2">
                    <a href="{{ route('payments.manage') }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border bg-blue-100 text-blue-700 border-blue-300 hover:bg-blue-200">
                        <i class="fas fa-clipboard-list mr-2"></i>
                        Kegiatan
                    </a>
                    
                    @php($userToggle = auth()->user())
                    @if($userToggle && ($userToggle->isAdmin() || $userToggle->isSuperAdmin() || $userToggle->isCreator()))
                        <a href="{{ route('payments.withdraw.history') }}"
                           class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.withdraw.history') ? 'bg-orange-600 text-white border-orange-600 hover:bg-orange-700' : 'bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-200' }}">
                            <i class="fas fa-history mr-2"></i>
                            Permintaan Penarikan
                        </a>
                        <a href="{{ route('payments.ledger') }}"
                           class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.ledger') ? 'bg-teal-600 text-white border-teal-600 hover:bg-teal-700' : 'bg-teal-100 text-teal-700 border-teal-300 hover:bg-teal-200' }}">
                            <i class="fas fa-balance-scale mr-2"></i>
                            Neraca Keuangan
                        </a>
                        @if($userToggle && ($userToggle->isAdmin() || $userToggle->isSuperAdmin()))
                        <a href="{{ route('payments.payment-methods.index') }}"
                           class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.payment-methods.*') ? 'bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-700' : 'bg-indigo-100 text-indigo-700 border-indigo-300 hover:bg-indigo-200' }}">
                            <i class="fas fa-university mr-2"></i>
                            Kelola Bank Manual
                        </a>
                        @endif
                        @if($userToggle && ($userToggle->isAdmin() || $userToggle->isSuperAdmin()))
                        <a href="{{ route('payments.rules') }}"
                           class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.rules') ? 'bg-pink-600 text-white border-pink-600 hover:bg-pink-700' : 'bg-pink-100 text-pink-700 border-pink-300 hover:bg-pink-200' }}">
                            <i class="fas fa-sliders-h mr-2"></i>
                            Aturan Keuangan
                        </a>
                        @endif
                    @endif
                    
                </div>
                @if(session('success'))
                    <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('success') }}</span>
                        <button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentElement.remove()">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('error') }}</span>
                        <button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentElement.remove()">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                @endif

                <!-- Statistics Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="bg-blue-600 text-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h6 class="text-blue-100 text-sm font-semibold uppercase mb-1">Total Pembayaran</h6>
                                <h3 class="text-3xl font-bold">{{ number_format($stats['total']) }}</h3>
                            </div>
                            <i class="fas fa-wallet text-4xl opacity-75"></i>
                        </div>
                    </div>
                    <div class="bg-orange-500 text-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h6 class="text-orange-100 text-sm font-semibold uppercase mb-1">Pending</h6>
                                <h3 class="text-3xl font-bold">{{ number_format($stats['pending']) }}</h3>
                            </div>
                            <i class="fas fa-clock text-4xl opacity-75"></i>
                        </div>
                    </div>
                    <div class="bg-green-600 text-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h6 class="text-green-100 text-sm font-semibold uppercase mb-1">Disetujui</h6>
                                <h3 class="text-3xl font-bold">{{ number_format($stats['approved']) }}</h3>
                            </div>
                            <i class="fas fa-check-circle text-4xl opacity-75"></i>
                        </div>
                    </div>
                    <div class="bg-teal-600 text-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h6 class="text-teal-100 text-sm font-semibold uppercase mb-1">Total Pendapatan</h6>
                                <h3 class="text-3xl font-bold">Rp {{ number_format($stats['income_amount'] ?? 0, 0, ',', '.') }}</h3>
                            </div>
                            <i class="fas fa-money-bill-wave text-4xl opacity-75"></i>
                        </div>
                    </div>
                </div>

                <!-- Filter Form -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <form method="GET" action="{{ route('payments.manage') }}" class="grid grid-cols-1 md:grid-cols-6 gap-4" id="filterForm">
                        <div class="md:col-span-2">
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Cari</label>
                            <input type="text" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                   id="search" 
                                   name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="Nama kegiatan atau user...">
                        </div>
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                    id="status" 
                                    name="status">
                                <option value="">Semua Status</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Disetujui</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                        </div>
                        <div>
                            <label for="payment_type" class="block text-sm font-medium text-gray-700 mb-2">Tipe Pembayaran</label>
                            <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                    id="payment_type" 
                                    name="payment_type">
                                <option value="">Semua Tipe</option>
                                <option value="midtrans" {{ request('payment_type') == 'midtrans' ? 'selected' : '' }}>Midtrans</option>
                                <option value="manual" {{ request('payment_type') == 'manual' ? 'selected' : '' }}>Manual</option>
                            </select>
                        </div>
                        <div>
                            <label for="sort_by" class="block text-sm font-medium text-gray-700 mb-2">Urutkan</label>
                            <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                    id="sort_by" 
                                    name="sort_by">
                                <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Tanggal</option>
                                <option value="amount" {{ request('sort_by') == 'amount' ? 'selected' : '' }}>Jumlah</option>
                                <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                            </select>
                        </div>
                        <div class="flex flex-col">
                            <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                            <div class="flex gap-2">
                                <select class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                        id="sort_order" 
                                        name="sort_order">
                                    <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Terbaru</option>
                                    <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Terlama</option>
                                </select>
                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Payments Table -->
                <!-- Header gaya seperti List Berita -->
                <div class="mb-4">
                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-5 py-2">
                        <div class="flex items-center justify-between">
                            <h2 class="text-xl font-bold text-white flex items-center">
                                <i class="fas fa-money-check mr-2"></i>
                                List Pembayaran
                            </h2>
                            <div class="flex items-center gap-3">
                                <div class="relative">
                                    <input type="text"
                                           id="paymentSearchInput"
                                           class="pl-9 pr-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 placeholder-gray-200"
                                           placeholder="Cari pembayaran..."
                                           autocomplete="off">
                                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-white/70"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 table-activity">
                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                                <tr>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">User</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Kegiatan</th>
                                    <th class="px-6 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wider">Jumlah</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tipe Pembayaran</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                                    <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Diverifikasi Oleh</th>
                                    <th class="px-6 py-2 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="paymentsTableBody">
                                @if($payments && $payments->count())
                                @foreach($payments as $index => $payment)
                                    <tr class="payment-row hover:bg-blue-50 transition-colors duration-150" data-payment-id="{{ $payment->id }}" data-order-id="{{ $payment->midtrans_transaction_id ?? '' }}" data-status="{{ $payment->status }}">
                                        <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
                                            {{ $payments->firstItem() + $index }}
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">
                                            {{ $payment->created_at->format('d/m/Y H:i') }}
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap">
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900">{{ $payment->user->name ?? 'N/A' }}</div>
                                                <div class="text-sm text-gray-500">{{ $payment->user->email ?? 'N/A' }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap">
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900">{{ $payment->activity->name ?? 'N/A' }}</div>
                                                <div class="text-sm text-gray-500">ID: {{ $payment->activity_id }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap text-right text-sm font-semibold text-gray-900">
                                            Rp {{ number_format($payment->amount, 0, ',', '.') }}
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap">
                                            @if($payment->midtrans_transaction_id)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                                    <i class="fas fa-credit-card mr-1 text-xs"></i>Midtrans
                                                </span>
                                                @if($payment->midtrans_transaction_id)
                                                    <div class="text-xs text-gray-500 mt-1">{{ substr($payment->midtrans_transaction_id, 0, 20) }}...</div>
                                                @endif
                                                @php($mid = $payment->midtrans_response ? json_decode($payment->midtrans_response, true) : null)
                                                @if($mid)
                                                    <div class="mt-1 flex flex-wrap gap-1">
                                                        @if(isset($mid['transaction_status']))
                                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-indigo-100 text-indigo-800">
                                                                {{ $mid['transaction_status'] }}
                                                            </span>
                                                        @endif
                                                        @if(isset($mid['fraud_status']))
                                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-purple-100 text-purple-800">
                                                                fraud: {{ $mid['fraud_status'] }}
                                                            </span>
                                                        @endif
                                                        @if(isset($mid['status_code']))
                                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-gray-100 text-gray-700">
                                                                code: {{ $mid['status_code'] }}
                                                            </span>
                                                        @endif
                                                        <a href="{{ url('/midtrans/payment/finish?order_id=' . $payment->midtrans_transaction_id . '&debug=1') }}" target="_blank" class="inline-flex items-center text-[10px] text-blue-600 hover:text-blue-700 underline">
                                                            debug
                                                        </a>
                                                    </div>
                                                @endif
                                            @elseif($payment->payment_method_id)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
                                                    <i class="fas fa-money-bill-wave mr-1 text-xs"></i>Manual
                                                </span>
                                                @if($payment->paymentMethod)
                                                    <div class="text-xs text-gray-500 mt-1">{{ $payment->paymentMethod->name }}</div>
                                                @endif
                                            @else
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-teal-100 text-teal-800">Gratis</span>
                                            @endif
                                            @php($mid = $payment->midtrans_response ? json_decode($payment->midtrans_response, true) : null)
                                            @if($mid && isset($mid['transaction_status']))
                                                @php($ts = strtolower($mid['transaction_status']))
                                                @php($midClass = in_array($ts, ['settlement', 'capture']) ? 'bg-green-100 text-green-800' : ($ts === 'pending' ? 'bg-yellow-100 text-yellow-800' : (in_array($ts, ['deny','cancel','expire']) ? 'bg-red-100 text-red-800' : ($ts === 'refund' ? 'bg-orange-100 text-orange-800' : 'bg-gray-100 text-gray-800')))))
                                                <div class="mt-1 flex flex-wrap items-center gap-1">
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $midClass }}"><i class="fas fa-info-circle mr-1 text-xs"></i>Midtrans: {{ $mid['transaction_status'] }}</span>
                                                    @if(isset($mid['fraud_status']))
                                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-purple-100 text-purple-800">fraud: {{ $mid['fraud_status'] }}</span>
                                                    @endif
                                                    @if(isset($mid['status_code']))
                                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-gray-100 text-gray-700">code: {{ $mid['status_code'] }}</span>
                                                    @endif
                                                </div>
                                            @endif
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap">
                                            @if($payment->status === 'approved')
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                                    <i class="fas fa-check-circle mr-1 text-xs"></i>Disetujui
                                                </span>
                                            @elseif($payment->status === 'rejected')
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                                                    <i class="fas fa-times-circle mr-1 text-xs"></i>Ditolak
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 status-badge">
                                                    <i class="fas fa-clock mr-1 text-xs"></i>Pending
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap">
                                            @if($payment->verifier)
                                                <div>
                                                    <div class="text-sm font-semibold text-gray-900">{{ $payment->verifier->name }}</div>
                                                    <div class="text-sm text-gray-500">
                                                        @if($payment->verified_at)
                                                            {{ $payment->verified_at->format('d/m/Y H:i') }}
                                                        @else
                                                            N/A
                                                        @endif
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-gray-400">-</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-2 whitespace-nowrap text-center">
                                            <div class="flex items-center justify-center gap-1.5">
                                                <a href="{{ route('payments.show', $payment) }}" 
                                                   class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-100 hover:bg-blue-200 text-blue-600 transition-all duration-200 hover:scale-110" 
                                                   title="Detail">
                                                    <i class="fas fa-eye text-xs"></i>
                                                </a>
                                                @if($payment->status === 'pending' && auth()->user() && auth()->user()->canVerifyPayment($payment->activity))
                                                    <form action="{{ route('payments.verify', $payment) }}" method="POST" class="inline" onsubmit="return confirm('Yakin setujui pembayaran ini?');">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="hidden" name="status" value="approved">
                                                        <button type="submit" 
                                                                class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-green-100 hover:bg-green-200 text-green-600 transition-all duration-200 hover:scale-110" 
                                                                title="Setujui">
                                                            <i class="fas fa-check text-xs"></i>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('payments.verify', $payment) }}" method="POST" class="inline" onsubmit="return confirm('Yakin tolak pembayaran ini?');">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="hidden" name="status" value="rejected">
                                                        <button type="submit" 
                                                                class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110" 
                                                                title="Tolak">
                                                            <i class="fas fa-times text-xs"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                @else
                                    <tr>
                                        <td colspan="9" class="px-6 py-12 text-center">
                                            <div class="flex flex-col items-center">
                                                <div class="bg-gray-100 rounded-full p-6 mb-4">
                                                    <i class="fas fa-inbox text-4xl text-gray-400"></i>
                                                </div>
                                                <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada data pembayaran</h3>
                                                <p class="text-gray-600">Tidak ada data pembayaran ditemukan</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($payments->hasPages())
                        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                            <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                                <div class="text-sm text-gray-600">
                                    Menampilkan <span class="font-semibold text-gray-900">{{ $payments->firstItem() }}</span> sampai 
                                    <span class="font-semibold text-gray-900">{{ $payments->lastItem() }}</span> dari 
                                    <span class="font-semibold text-gray-900">{{ $payments->total() }}</span> data
                                </div>
                                <div class="flex items-center">
                                    {{ $payments->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Verification Modal -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="verifyModal" style="z-index: 100010; pointer-events: auto;">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white" style="pointer-events: auto;">
        <div class="flex justify-between items-center mb-4">
            <h5 class="text-lg font-semibold text-gray-900">Verifikasi Pembayaran</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeVerifyModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="verifyForm" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" name="status" id="verifyStatus">
            <div class="mb-4">
                <label for="verifyNotes" class="block text-sm font-medium text-gray-700 mb-2">Catatan (Opsional)</label>
                <textarea class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                          id="verifyNotes" 
                          name="notes" 
                          rows="3" 
                          placeholder="Tambahkan catatan verifikasi..."></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" 
                        class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors" 
                        onclick="closeVerifyModal()">
                    Batal
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>
<!-- Withdrawal Modal -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="withdrawModal" style="z-index: 100010; pointer-events: auto;">
    <div class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white overflow-hidden" style="pointer-events: auto;">
        <div class="flex justify-between items-center mb-4 -mx-5 -mt-5 px-5 py-4 rounded-t-md bg-gradient-to-r from-green-600 to-teal-600 text-white relative">
            <div class="flex items-center gap-2">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/20 text-white">
                    <i class="fas fa-hand-holding-usd"></i>
                </span>
                <h5 class="text-lg font-semibold text-white">Permintaan Penarikan</h5>
            </div>
            <button type="button" class="text-white/80 hover:text-white absolute top-2 right-2 p-1" onclick="closeWithdrawModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="withdrawForm" method="POST" action="{{ route('payments.withdraw.request', [], false) }}">
            @csrf
            <div class="mb-4">
                <label for="withdrawAmount" class="block text-sm font-medium text-gray-700 mb-2">Nominal Penarikan (Rp)</label>
                <input type="number" min="1000" step="1000" id="withdrawAmount" name="amount"
                       class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                       placeholder="Masukkan nominal" required max="{{ $stats['total_amount'] ?? 0 }}">
                <p class="mt-2 text-xs text-gray-500">Maksimal: Rp {{ number_format($stats['total_amount'] ?? 0, 0, ',', '.') }}</p>
                <div id="withdrawAccountInfo" class="mt-3 hidden rounded-lg border border-teal-200 bg-teal-50">
                    <div class="bg-teal-500 text-white px-3 py-2 rounded-t-lg text-sm font-medium flex items-center gap-2">
                        <i class="fas fa-university"></i>
                        Rekening Penarikan
                    </div>
                    <div class="px-3 py-2 text-sm text-teal-900 grid grid-cols-1 gap-1">
                        <div id="withdrawBankNameInfo" class="hidden"><span class="font-medium mr-1">Nama Bank:</span> <span id="withdrawBankNameText"></span></div>
                        <div id="withdrawAccountNameInfo" class="hidden"><span class="font-medium mr-1">Nama Rekening:</span> <span id="withdrawAccountNameText"></span></div>
                        <div id="withdrawAccountNumberInfo" class="hidden"><span class="font-medium mr-1">No Rekening:</span> <span id="withdrawAccountNumberText"></span></div>
                    </div>
                </div>
                <p id="withdrawAmountError" class="mt-1 text-xs text-red-600"></p>
            </div>
            <!-- Rekening terpilih (opsional) -->
            <input type="hidden" name="bank_name" id="withdrawBankName">
            <input type="hidden" name="account_name" id="withdrawAccountName">
            <input type="hidden" name="account_number" id="withdrawAccountNumber">
            <!-- Form Rekening: tampil melalui tombol, tersembunyi secara default -->
            <div class="mt-4">
                <div class="flex items-center justify-between mb-2">
                    <div class="text-sm font-medium text-gray-700">Rekening Penarikan</div>
                    <button type="button" id="toggleBankBtn" class="inline-flex items-center px-3 py-1.5 rounded border bg-white text-gray-700 hover:bg-gray-50" onclick="toggleBankSection()">
                        <i class="fas fa-university mr-2"></i>Atur Rekening
                    </button>
                </div>
                <div id="bankAccountSection" class="hidden">
                <div id="bankAccountForm" class="bg-white border border-gray-100 rounded-md">
                    <div class="bg-blue-600 text-white px-4 py-2 rounded-t-md text-sm font-medium flex items-center gap-2">
                        <i class="fas fa-university"></i>
                        Atur Rekening Penarikan
                    </div>
                    <div class="px-5 py-5 space-y-4">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2" for="bank_select">Nama Bank</label>
                            <div>
                                <select id="bank_select" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                                <option value="" selected>Pilih bank</option>
                                <option>BCA</option>
                                <option>Mandiri</option>
                                <option>BRI</option>
                                <option>BNI</option>
                                <option>CIMB Niaga</option>
                                <option>Permata</option>
                                <option>BTN</option>
                                <option>Danamon</option>
                                <option>Maybank Indonesia</option>
                                <option>OCBC NISP</option>
                                <option>BSI (Bank Syariah Indonesia)</option>
                                <option>Bank Mega</option>
                                <option>Panin Bank</option>
                                <option>Bank Sinarmas</option>
                                <option>Bank Bukopin</option>
                                <option>Bank Jago</option>
                                <option>SeaBank</option>
                                <option>UOB Indonesia</option>
                                <option value="__custom__">Tambah Bank…</option>
                            </select>
                        </div>
                        <div id="bank_custom_group" class="mt-2 hidden">
                            <div class="rounded-lg border border-sky-200 bg-sky-50">
                                <div class="bg-sky-500 text-white px-3 py-2 rounded-t-lg text-sm font-medium">Tambah Bank</div>
                                <div class="px-3 py-3">
                                    <div class="flex gap-2">
                                        <input type="text" id="bank_custom" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nama bank lainnya">
                                        <button type="button" class="px-3 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700" onclick="addCustomBank()">Simpan</button>
                                        <button type="button" class="px-3 py-2 rounded-md border bg-white text-gray-700 hover:bg-gray-50" onclick="toggleCustomBank(false)">Batal</button>
                                    </div>
                                    <p class="mt-2 text-xs text-gray-600">Jika bank tidak ada dalam daftar, tambahkan di sini lalu simpan.</p>
                                    <p id="bankCustomError" class="mt-1 text-xs text-red-600 hidden">Bank sudah ada dalam daftar. Silakan pilih bank tersebut.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2" for="account_name">Nama Rekening</label>
                        <input type="text" id="account_name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nama pemilik rekening" value="{{ auth()->user()->name ?? '' }}" required>
                        <div class="mt-2 rounded-lg border border-amber-300 bg-amber-50">
                            <div class="bg-amber-500 text-white px-3 py-2 rounded-t-lg text-sm font-medium flex items-center gap-2">
                                <i class="fas fa-exclamation-triangle"></i>
                                Penting
                            </div>
                            <div class="px-3 py-2 text-xs text-amber-900">
                                Nama rekening <span class="font-semibold">disarankan</span> sama dengan nama user pada aplikasi: <span class="font-semibold">{{ auth()->user()->name ?? '—' }}</span>.
                                Jika berbeda, data tetap disimpan dan akan menjadi pertimbangan admin saat memproses transfer.
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2" for="account_number">No. Rekening</label>
                        <input type="text" id="account_number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nomor rekening" required>
                    </div>
                        <div class="flex justify-end mt-4 mb-4">
                            <button type="button" onclick="saveBankAccount(event)" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">Simpan</button>
                        </div>
                        <p id="bankSaveError" class="mt-1 text-xs text-red-600 hidden"></p>
                    </div>
                </div>
                </div>
            </div>
            <div class="flex justify-end space-x-3 mt-4">
                <button type="button" 
                        class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors" 
                        onclick="closeWithdrawModal()">
                    Batal
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                    Kirim Permintaan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Payment management configuration
    window.savedBankAccount = @json($bankAccount ?? null);
    window.paymentCheckStatusRoute = '{{ route('midtrans.payment.check-status') }}';
    window.paymentBankAccountSaveRoute = '{{ route('payments.bank-account.save', [], false) }}';
    window.paymentTotalAmount = {{ $stats['total_amount'] ?? 0 }};
    window.paymentUserName = "{{ auth()->user()->name ?? '' }}";
</script>
<script src="{{ asset('js/payment-management-full.js') }}"></script>
<script>
        const select = document.getElementById('bank_select');
        if(select && !select.dataset.listenerAttached){
            select.addEventListener('change', handleBankSelectChange);
            select.dataset.listenerAttached = '1';
        }
        // Awal: bagian rekening tersembunyi, tombol berlabel "Atur Rekening"
        updateToggleButtonLabel();
        // Prefill dari server jika tersedia
        try {
            const saved = window.savedBankAccount;
            if(saved){
                const selectEl = document.getElementById('bank_select');
                if(selectEl){
                    const exists = Array.from(selectEl.options).some(opt => (opt.value || opt.textContent) === saved.bank_name);
                    if(!exists && saved.bank_name){
                        const opt = document.createElement('option');
                        opt.value = saved.bank_name;
                        opt.textContent = saved.bank_name;
                        selectEl.appendChild(opt);
                    }
                    if(saved.bank_name){ selectEl.value = saved.bank_name; toggleCustomBank(false); }
                }
                const accNameEl = document.getElementById('account_name');
                const accNumEl = document.getElementById('account_number');
                if(accNameEl && saved.account_name){ accNameEl.value = saved.account_name; }
                if(accNumEl && saved.account_number){ accNumEl.value = saved.account_number; }
                // Tampilkan info nomor rekening di area penarikan
                const infoText1 = document.getElementById('withdrawAccountNumberText');
                const infoRow1 = document.getElementById('withdrawAccountNumberInfo');
                if(infoText1) infoText1.textContent = saved.account_number || '';
                if(infoRow1 && saved.account_number) infoRow1.classList.remove('hidden');
                // Tampilkan info nama bank & nama rekening
                const bankText1 = document.getElementById('withdrawBankNameText');
                const bankRow1 = document.getElementById('withdrawBankNameInfo');
                const nameText1 = document.getElementById('withdrawAccountNameText');
                const nameRow1 = document.getElementById('withdrawAccountNameInfo');
                if(bankText1) bankText1.textContent = saved.bank_name || '';
                if(bankRow1 && saved.bank_name) bankRow1.classList.remove('hidden');
                if(nameText1) nameText1.textContent = saved.account_name || '';
                if(nameRow1 && saved.account_name) nameRow1.classList.remove('hidden');
                const container1 = document.getElementById('withdrawAccountInfo');
                if(container1) container1.classList.remove('hidden');
            }
        } catch (e) { /* noop */ }
    });

    function toggleBankSection(show){
        const sec = document.getElementById('bankAccountSection');
        if(!sec) return;
        const willShow = (typeof show === 'boolean') ? show : sec.classList.contains('hidden');
        if(willShow){ sec.classList.remove('hidden'); }
        else { sec.classList.add('hidden'); }
        updateToggleButtonLabel();
    }
    function updateToggleButtonLabel(){
        const sec = document.getElementById('bankAccountSection');
        const btn = document.getElementById('toggleBankBtn');
        if(!btn || !sec) return;
        const isHidden = sec.classList.contains('hidden');
        btn.innerHTML = `${isHidden ? '<i class="fas fa-university mr-2"></i>Atur Rekening' : '<i class="fas fa-times mr-2"></i>Tutup'}`;
        // Ubah warna tombol saat bagian rekening terbuka
        btn.classList.add('border','transition-colors');
        if(isHidden){
            btn.classList.remove('bg-red-600','text-white','hover:bg-red-700','border-red-600');
            btn.classList.add('bg-white','text-gray-700','hover:bg-gray-50');
        } else {
            btn.classList.remove('bg-white','text-gray-700','hover:bg-gray-50');
            btn.classList.add('bg-red-600','text-white','hover:bg-red-700','border-red-600');
        }
    }
    function handleBankSelectChange(){
        const select = document.getElementById('bank_select');
        if(!select) return;
        toggleCustomBank(select.value === '__custom__');
        // Reset error when switching options
        const err = document.getElementById('bankCustomError');
        err?.classList.add('hidden');
    }
    function toggleCustomBank(show){
        const grp = document.getElementById('bank_custom_group');
        if(!grp) return;
        if(show){ grp.classList.remove('hidden'); }
        else { grp.classList.add('hidden'); }
    }
    function addCustomBank(){
        const input = document.getElementById('bank_custom');
        const select = document.getElementById('bank_select');
        const val = (input?.value || '').trim();
        if(!val || !select) return;
        // Prevent duplicates (case-insensitive, trimmed)
        const norm = s => (s||'').toLowerCase().replace(/\s+/g,' ').trim();
        const exists = Array.from(select.options).some(opt => norm(opt.textContent) === norm(val));
        if(exists){
            const err = document.getElementById('bankCustomError');
            err?.classList.remove('hidden');
            return;
        }
        const opt = document.createElement('option');
        opt.textContent = val;
        opt.value = val;
        select.appendChild(opt);
        select.value = val;
        toggleCustomBank(false);
        input.value = '';
        const err = document.getElementById('bankCustomError');
        err?.classList.add('hidden');
    }
    function saveBankAccount(e) {
        e.preventDefault();
        const select = document.getElementById('bank_select');
        const bank = (select?.value || '').trim();
        const name = document.getElementById('account_name').value.trim();
        const number = document.getElementById('account_number').value.trim();
        const inlineErr = document.getElementById('bankSaveError');
        if(inlineErr){ inlineErr.textContent=''; inlineErr.classList.add('hidden'); }
        if(!bank || bank === '__custom__' || !name || !number){ return; }
        // Catatan: nama rekening boleh berbeda, tetap lanjut simpan dan tampilkan peringatan di UI
        // Set hidden inputs in withdraw form
        document.getElementById('withdrawBankName').value = bank;
        document.getElementById('withdrawAccountName').value = name;
        document.getElementById('withdrawAccountNumber').value = number;
        // Perbarui tampilan info nomor rekening pada form penarikan
        const infoText2 = document.getElementById('withdrawAccountNumberText');
        const infoRow2 = document.getElementById('withdrawAccountNumberInfo');
        if(infoText2) infoText2.textContent = number || '';
        if(infoRow2 && number) infoRow2.classList.remove('hidden');
        // Perbarui info nama bank & nama rekening
        const bankText2 = document.getElementById('withdrawBankNameText');
        const bankRow2 = document.getElementById('withdrawBankNameInfo');
        const nameText2 = document.getElementById('withdrawAccountNameText');
        const nameRow2 = document.getElementById('withdrawAccountNameInfo');
        if(bankText2) bankText2.textContent = bank || '';
        if(bankRow2 && bank) bankRow2.classList.remove('hidden');
        if(nameText2) nameText2.textContent = name || '';
        if(nameRow2 && name) nameRow2.classList.remove('hidden');
        const container2 = document.getElementById('withdrawAccountInfo');
        if(container2) container2.classList.remove('hidden');
        
        // Persist to server
        // Ambil token CSRF dari beberapa sumber agar lebih tahan terhadap mismatch
        const tokenEl = document.querySelector('#bankAccountForm input[name=_token]');
        const metaTokenEl = document.querySelector('meta[name="csrf-token"]');
        const token = tokenEl?.value || metaTokenEl?.content || '';
        // Ambil cookie XSRF-TOKEN (Laravel juga menerima header X-XSRF-TOKEN)
        const cookieXsrf = (document.cookie.split('; ').find(row => row.startsWith('XSRF-TOKEN=')) || '').split('=')[1] || '';
        const params = new URLSearchParams({ _token: token, bank_name: bank, account_name: name, account_number: number });
        // Gunakan path relatif agar tidak terjadi mismatch domain (localhost vs 127.0.0.1)
        fetch('{{ route('payments.bank-account.save', [], false) }}', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'X-CSRF-TOKEN': token,
                'X-XSRF-TOKEN': cookieXsrf ? decodeURIComponent(cookieXsrf) : undefined,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params
        }).then(async (res) => {
            const data = await res.json().catch(() => ({}));
            if(!res.ok || data.success === false){
                const msg = (data && data.message) ? data.message : 'Gagal menyimpan rekening.';
                if(inlineErr){ inlineErr.textContent = msg; inlineErr.classList.remove('hidden'); }
                return;
            }
            window.savedBankAccount = data.bank_account;
            // Tutup bagian rekening tanpa popup dan lanjutkan proses penarikan
            toggleBankSection(false);
        }).catch(() => {
            if(inlineErr){ inlineErr.textContent = 'Tidak dapat menyimpan ke server saat ini. Coba lagi.'; inlineErr.classList.remove('hidden'); }
        });
    }

    // Validasi nominal tidak boleh melebihi saldo
    (function(){
        const saldo = Number(@json($stats['total_amount'] ?? 0));
        const amountInput = document.getElementById('withdrawAmount');
        const errorEl = document.getElementById('withdrawAmountError');
        const form = document.getElementById('withdrawForm');
        const submitBtn = form?.querySelector('button[type="submit"]');

        function formatIDR(num){
            return new Intl.NumberFormat('id-ID').format(Number(num || 0));
        }

        function validate(){
            const val = Number(amountInput?.value || 0);
            let error = '';
            if(val > saldo){
                error = `Nominal melebihi saldo (maks Rp ${formatIDR(saldo)}).`;
            } else if(val && val < Number(amountInput.min || 0)){
                error = `Nominal minimal Rp ${formatIDR(amountInput.min || 0)}.`;
            }

            if(errorEl){ errorEl.textContent = error; }
            if(error){
                amountInput?.classList.add('border-red-500','focus:ring-red-500','focus:border-red-500');
                if(submitBtn){ submitBtn.disabled = true; submitBtn.classList.add('opacity-50','cursor-not-allowed'); }
            } else {
                amountInput?.classList.remove('border-red-500','focus:ring-red-500','focus:border-red-500');
                if(submitBtn){ submitBtn.disabled = false; submitBtn.classList.remove('opacity-50','cursor-not-allowed'); }
            }
        }

        amountInput?.addEventListener('input', validate);
        form?.addEventListener('submit', function(e){
            const val = Number(amountInput?.value || 0);
            if(val > saldo){
                e.preventDefault();
                validate();
            }
        });
    })();

    // Apply saved bank account ke field dan hidden input saat page load
    document.addEventListener('DOMContentLoaded', function(){
        try {
            const saved = window.savedBankAccount;
            if(saved && saved.bank_name && saved.account_name && saved.account_number){
                const bn = document.getElementById('withdrawBankName');
                const an = document.getElementById('withdrawAccountName');
                const nr = document.getElementById('withdrawAccountNumber');
                if(bn) bn.value = saved.bank_name;
                if(an) an.value = saved.account_name;
                if(nr) nr.value = saved.account_number;
                const infoText3 = document.getElementById('withdrawAccountNumberText');
                const infoRow3 = document.getElementById('withdrawAccountNumberInfo');
                if(infoText3) infoText3.textContent = saved.account_number || '';
                if(infoRow3 && saved.account_number) infoRow3.classList.remove('hidden');
                const bankText3 = document.getElementById('withdrawBankNameText');
                const bankRow3 = document.getElementById('withdrawBankNameInfo');
                const nameText3 = document.getElementById('withdrawAccountNameText');
                const nameRow3 = document.getElementById('withdrawAccountNameInfo');
                if(bankText3) bankText3.textContent = saved.bank_name || '';
                if(bankRow3 && saved.bank_name) bankRow3.classList.remove('hidden');
                if(nameText3) nameText3.textContent = saved.account_name || '';
                if(nameRow3 && saved.account_name) nameRow3.classList.remove('hidden');
                const selectEl = document.getElementById('bank_select');
                if(selectEl){
                    const exists = Array.from(selectEl.options).some(opt => (opt.value || opt.textContent) === saved.bank_name);
                    if(!exists){
                        const opt = document.createElement('option');
                        opt.value = saved.bank_name;
                        opt.textContent = saved.bank_name;
                        selectEl.appendChild(opt);
                    }
                    selectEl.value = saved.bank_name;
                    toggleCustomBank(false);
                }
                const accNameEl = document.getElementById('account_name');
                const accNumEl = document.getElementById('account_number');
                if(accNameEl) accNameEl.value = saved.account_name;
                if(accNumEl) accNumEl.value = saved.account_number;
            }
        } catch(e){ /* noop */ }
    });
</script>
@endpush