@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-teal-600 to-emerald-600 px-6 py-4">
                <h4 class="text-white text-xl font-bold flex items-center">
                    <i class="fas fa-history mr-2"></i>Riwayat Penarikan Dana
                </h4>
            </div>
            <div class="p-6">
                @php($userTop = auth()->user())

                <!-- Saldo Row -->
                @php($userTop = auth()->user())
                @if(!$userTop || !$userTop->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['total_amount'] ?? 0, 0, ',', '.') }}</div>
                                <div class="text-xs text-teal-600">Berdasarkan pembayaran yang disetujui</div>
                            </div>
                        </div>
                        @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>
                                    Ajukan Penarikan
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
                @endif

                @if(session('success'))
                    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded text-green-700">
                        {{ session('success') }}
                    </div>
                @endif
                @if(session('error'))
                    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded text-red-700">
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Table -->
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white rounded-lg overflow-hidden">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nominal</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bukti</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Diverifikasi Oleh</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($withdrawals as $w)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ optional($w->created_at)->format('d/m/Y H:i') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $w->user->name ?? 'User' }}</td>
                                    <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ number_format($w->amount, 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-sm">
                                        @php($statusColor = match($w->status){
                                            'approved' => 'bg-green-100 text-green-800',
                                            'rejected' => 'bg-red-100 text-red-800',
                                            'paid' => 'bg-teal-100 text-teal-800',
                                            default => 'bg-yellow-100 text-yellow-800'
                                        })
                                        <span class="px-2 py-1 rounded text-xs {{ $statusColor }}">{{ ucfirst($w->status) }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700">
                                        @php(
                                            $proofPath = null
                                        )
                                        @if(!empty($w->notes))
                                            @php(
                                                preg_match('/Bukti\s+transfer:\s*(.+)$/', $w->notes, $m)
                                            )
                                            @if(!empty($m[1]))
                                                @php($proofPath = trim($m[1]))
                                            @endif
                                        @endif

                                        @if($proofPath)
                                            <button type="button" class="inline-flex items-center px-3 py-1 rounded border bg-white text-teal-700 hover:bg-teal-50"
                                                    onclick="openProofModal('{{ asset('storage/' . $proofPath) }}')">
                                                <i class="fas fa-image mr-1"></i> Lihat Bukti
                                            </button>
                                        @else
                                            {{ $w->notes ?? '-' }}
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $w->verifier->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-sm">
                                        @php($currentUser = auth()->user())
                                        @if($currentUser && ($currentUser->isAdmin() || $currentUser->isSuperAdmin()))
                                            @if(in_array($w->status, ['pending','proses']))
                                                <button type="button"
                                                        class="inline-flex items-center px-3 py-1 rounded border bg-red-600 text-white hover:bg-red-700"
                                                        onclick="openTransferModal({ id: {{ $w->id }}, user: '{{ addslashes($w->user->name ?? 'User') }}', amount: {{ (int)$w->amount }}, date: '{{ optional($w->created_at)->format('d/m/Y H:i') }}', notes: '{{ addslashes($w->notes ?? '-') }}' })">
                                                    <i class="fas fa-money-check mr-1"></i> Transfer
                                                </button>
                                            @else
                                                <button type="button"
                                                        class="inline-flex items-center px-3 py-1 rounded border bg-teal-600 text-white hover:bg-teal-700"
                                                        onclick="openTransferModal({ id: {{ $w->id }}, user: '{{ addslashes($w->user->name ?? 'User') }}', amount: {{ (int)$w->amount }}, date: '{{ optional($w->created_at)->format('d/m/Y H:i') }}', notes: '{{ addslashes($w->notes ?? '-') }}' })">
                                                    <i class="fas fa-money-check mr-1"></i> Transfer
                                                </button>
                                            @endif
                                        @else
                                            <a href="{{ route('payments.withdraw.show', $w) }}" class="inline-flex items-center px-3 py-1 rounded border bg-white text-gray-700 hover:bg-gray-50">
                                                <i class="fas fa-eye mr-1"></i> Detail
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 py-6 text-center text-gray-500">Belum ada riwayat penarikan.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-4">
                    {{ $withdrawals->links() }}
                </div>
            </div>
        </div>
    </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">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-4">
            <h5 class="text-lg font-semibold text-gray-900">Permintaan Penarikan Dana</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeWithdrawModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="withdrawForm" method="POST" action="{{ route('payments.withdraw.request') }}">
            @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>
                <p id="withdrawAmountError" class="mt-1 text-xs text-red-600"></p>
            </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="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>
<!-- Proof Modal (gambar) -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="proofModal">
    <div class="relative top-16 mx-auto p-4 border w-[40rem] max-w-[90vw] shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-3">
            <h5 class="text-lg font-semibold text-gray-900">Bukti Transfer</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeProofModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="max-h-[70vh] overflow-auto">
            <img id="proofImage" src="" alt="Bukti Transfer" class="w-full h-auto object-contain" />
        </div>
        <div class="flex justify-end mt-3">
            <button type="button" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors" onclick="closeProofModal()">Tutup</button>
        </div>
    </div>
</div>
<!-- Transfer Modal (Superadmin/Admin) -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="transferModal">
    <div class="relative top-20 mx-auto w-[32rem] border shadow-lg rounded-md bg-white">
        <!-- Header berwarna -->
        <div class="bg-teal-600 text-white rounded-t-md px-5 py-3 flex items-center justify-between">
            <h5 class="text-base font-semibold">Konfirmasi Transfer Penarikan</h5>
            <button type="button" class="text-white/80 hover:text-white" onclick="closeTransferModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-5">
            <!-- Kartu Detail -->
            <div class="border rounded-md overflow-hidden mb-4">
                <div class="bg-teal-50 px-4 py-3 border-b">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">Pemohon</span>
                        <span class="text-sm font-medium text-gray-900" id="tdUser">-</span>
                    </div>
                    <div class="flex justify-between mt-2">
                        <span class="text-sm text-gray-600">Tanggal Pengajuan</span>
                        <span class="text-sm font-medium text-gray-900" id="tdDate">-</span>
                    </div>
                    <div class="flex justify-between mt-2">
                        <span class="text-sm text-gray-600">Nominal</span>
                        <span class="text-sm font-semibold text-gray-900" id="tdAmount">-</span>
                    </div>
                </div>
                <div class="px-4 py-3 space-y-3">
                    <!-- Kartu info rekening -->
                    <div id="tdAccountBox" class="hidden">
                        <div class="rounded-md border bg-teal-50">
                            <div class="bg-teal-600 text-white px-3 py-2 rounded-t-md text-sm font-medium">Rekening Tujuan</div>
                            <div class="px-3 py-3 space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Nama Bank</span>
                                    <span class="text-sm text-gray-900" id="tdBank">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Nama Rekening</span>
                                    <span class="text-sm text-gray-900" id="tdAccountName">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">No Rekening</span>
                                    <span class="text-sm text-gray-900" id="tdAccountNumber">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">Bukti transfer</span>
                        <span class="text-sm text-gray-900" id="tdProof">-</span>
                    </div>
                </div>
            </div>
            <form id="transferForm" method="POST" action="#" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label for="transferProof" class="block text-sm font-medium text-gray-700 mb-2">Upload Bukti Transfer (jpg, png, pdf)</label>
                <input type="file" id="transferProof" name="proof" accept="image/*,.pdf" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <p class="mt-2 text-xs text-gray-500">Opsional, dapat diunggah kemudian jika diperlukan.</p>
            </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="closeTransferModal()">Batal</button>
                <button type="submit" class="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition-colors">
                    Selesai Pembayaran
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openTransferModal(data) {
        // Isi detail
        document.getElementById('tdUser').textContent = data.user || '-';
        document.getElementById('tdDate').textContent = data.date || '-';
        document.getElementById('tdAmount').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(data.amount || 0);
        // Parse catatan dan bukti transfer dari notes
        var notesRaw = data.notes || '';
        var proofMatch = notesRaw.match(/Bukti\s+transfer:\s*(.+)$/i);
        var proofPath = proofMatch ? (proofMatch[1] || '').trim() : '';
        var cleanedNotes = notesRaw.replace(/\|?\s*Bukti\s+transfer:\s*.+$/i, '').trim();
        // Ekstrak bagian "Rekening:" dari catatan bila ada dan pecah menjadi 3 baris
        var accountMatch = cleanedNotes.match(/Rekening\s*:\s*(.+)$/i);
        var accountText = accountMatch ? (accountMatch[1] || '').trim() : '';
        var accBox = document.getElementById('tdAccountBox');
        var bankEl = document.getElementById('tdBank');
        var nameEl = document.getElementById('tdAccountName');
        var numberEl = document.getElementById('tdAccountNumber');
        if (accountText) {
            var parts = accountText.split(/[•\|,\-]+/).map(function(s){ return s.trim(); }).filter(Boolean);
            bankEl.textContent = parts[0] || '-';
            nameEl.textContent = parts[1] || '-';
            numberEl.textContent = parts[2] || '-';
            accBox.classList.remove('hidden');
        } else {
            bankEl.textContent = '-';
            nameEl.textContent = '-';
            numberEl.textContent = '-';
            accBox.classList.add('hidden');
        }
        // Render tombol lihat bukti jika tersedia
        var proofEl = document.getElementById('tdProof');
        if (proofPath) {
            var base = '{{ asset('storage') }}';
            var url = base.replace(/\/$/, '') + '/' + proofPath;
            proofEl.innerHTML = '<button type="button" class="inline-flex items-center px-3 py-1 rounded border bg-white text-teal-700 hover:bg-teal-50" onclick="openProofModal(\'' + url + '\')"><i class="fas fa-image mr-1"></i> Lihat Bukti</button>';
        } else {
            proofEl.textContent = '-';
        }
        // Set action form ke route withdraw.pay
        var form = document.getElementById('transferForm');
        form.action = '/payments/withdraw/' + data.id + '/pay';
        // Tampilkan modal
        document.getElementById('transferModal').classList.remove('hidden');
    }
    function closeTransferModal() {
        document.getElementById('transferModal').classList.add('hidden');
        // Reset form
        var form = document.getElementById('transferForm');
        form.action = '#';
        form.reset();
    }

    function openProofModal(url) {
        // Jika file pdf, buka di tab baru
        if (url && url.toLowerCase().endsWith('.pdf')) {
            window.open(url, '_blank');
            return;
        }
        var img = document.getElementById('proofImage');
        img.src = url || '';
        document.getElementById('proofModal').classList.remove('hidden');
    }
    function closeProofModal() {
        document.getElementById('proofModal').classList.add('hidden');
        var img = document.getElementById('proofImage');
        img.src = '';
    }
</script>
@endsection

@push('scripts')
<script>
    function openWithdrawModal() {
        const modal = document.getElementById('withdrawModal');
        modal.classList.remove('hidden');
    }
    function closeWithdrawModal() {
        const modal = document.getElementById('withdrawModal');
        modal.classList.add('hidden');
    }

    // Close modal when clicking outside
    document.getElementById('withdrawModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeWithdrawModal();
        }
    });

    // 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();
            }
        });
    })();
</script>
@endpush