@extends('template.desktop.app')
@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endpush
@section('content')
    <div class="max-w-12xl mx-auto">

        <!-- Header Halaman -->
        <header class="mb-6">
            <h1 class="text-2xl font-bold text-slate-900">Manajemen Penarikan Dana</h1>
            <p class="text-slate-500 text-sm">Tinjau, setujui, atau tolak permintaan penarikan dana dari mitra.</p>
        </header>

        <!-- Statistik Ringkasan -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-6">
            <!-- Card Pending -->
            <div class="bg-white p-5 rounded-xl border border-slate-200 flex items-start gap-4">
                <div class="bg-amber-100 p-3 rounded-lg">
                    <i data-lucide="loader-2" class="w-6 h-6 text-amber-600 animate-spin"
                        style="animation-duration: 3s;"></i>
                </div>
                <div>
                    <p class="text-sm text-slate-500">Menunggu Persetujuan</p>
                    <p class="text-2xl font-bold text-slate-800">{{ $stats['count_pending'] }}</p>
                    <p class="text-xs text-slate-400">Total: Rp {{ number_format($stats['pending_total'] ?? 0, 0, '.', '.') }}</p>
                </div>
            </div>
            <!-- Card Disetujui -->
            <div class="bg-white p-5 rounded-xl border border-slate-200 flex items-start gap-4">
                <div class="bg-emerald-100 p-3 rounded-lg">
                    <i data-lucide="check-circle-2" class="w-6 h-6 text-emerald-600"></i>
                </div>
                <div>
                    <p class="text-sm text-slate-500">Disetujui (Bulan Ini)</p>
                    <p class="text-2xl font-bold text-slate-800">{{ $stats['count_approved_month'] }}</p>
                    <p class="text-xs text-slate-400">Total: Rp {{ number_format($stats['approved_total_month'] ?? 0, 0, '.', '.') }}</p>
                </div>
            </div>
            <!-- Card Ditolak -->
            <div class="bg-white p-5 rounded-xl border border-slate-200 flex items-start gap-4">
                <div class="bg-red-100 p-3 rounded-lg">
                    <i data-lucide="x-circle" class="w-6 h-6 text-red-600"></i>
                </div>
                <div>
                    <p class="text-sm text-slate-500">Ditolak (Bulan Ini)</p>
                    <p class="text-2xl font-bold text-slate-800">{{ $stats['count_rejected'] }}</p>
                    <p class="text-xs text-slate-400">Total: Rp {{ number_format($stats['rejected_total'] ?? 0, 0, '.', '.') }}</p>
                </div>
            </div>
            <!-- Card Total Dicairkan -->
            <div class="bg-indigo-600 text-white p-5 rounded-xl flex items-start gap-4">
                <div class="bg-indigo-500 p-3 rounded-lg">
                    <i data-lucide="wallet" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <p class="text-sm text-indigo-200">Total Dicairkan</p>
                    <p class="text-2xl font-bold">
                        Rp
                        @php
                            $n = $stats['approved_total_lifetime'];
                            if ($n >= 1000000000000) {
                                echo number_format($n / 1000000000000, 1) . ' T';
                            } elseif ($n >= 1000000000) {
                                echo number_format($n / 1000000000, 1) . ' M';
                            } elseif ($n >= 1000000) {
                                echo number_format($n / 1000000, 1) . ' Jt';
                            } elseif ($n >= 1000) {
                                echo number_format($n / 1000, 1) . ' Rb';
                            } else {
                                echo $n;
                            }
                        @endphp
                    </p>

                    <p class="text-xs text-indigo-300">Sepanjang Waktu</p>
                </div>
            </div>
        </div>

        <!-- Tabel Transaksi -->
        <main class="bg-white rounded-xl border border-slate-200">
            <!-- Header Tabel: Filter & Pencarian -->
            <div class="p-4 flex flex-col sm:flex-row justify-between items-center gap-3 border-b border-slate-200">
                <nav class="flex gap-1 bg-slate-100 p-1 rounded-lg">
                    <button data-tab="all"
                        class="tab-link px-3 py-1 text-sm font-semibold text-slate-800 bg-white rounded-md shadow-sm">Semua</button>
                    <button data-tab="pending"
                        class="tab-link px-3 py-1 text-sm font-medium text-slate-500 hover:bg-white/60 rounded-md">Pending</button>
                    <button data-tab="disetujui"
                        class="tab-link px-3 py-1 text-sm font-medium text-slate-500 hover:bg-white/60 rounded-md">Disetujui</button>
                    <button data-tab="ditolak"
                        class="tab-link px-3 py-1 text-sm font-medium text-slate-500 hover:bg-white/60 rounded-md">Ditolak</button>
                </nav>
                <div class="relative w-full sm:w-64">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                    <input id="searchInput" type="text" placeholder="Cari Transaksi..."
                        class="w-full pl-9 pr-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>

            <!-- Tabel -->
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="text-left font-semibold text-slate-600 p-3">#</th>
                            <th class="text-left font-semibold text-slate-600 p-3">ID Transaksi</th>
                            <th class="text-left font-semibold text-slate-600 p-3">Mitra</th>
                            <th class="text-right font-semibold text-slate-600 p-3">Jumlah</th>
                            <th class="text-center font-semibold text-slate-600 p-3">Status</th>
                            <th class="text-left font-semibold text-slate-600 p-3">Tanggal</th>
                            <th class="text-center font-semibold text-slate-600 p-3">Bukti</th>
                            <th class="text-center font-semibold text-slate-600 p-3">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody" class="divide-y divide-slate-100">
                        <!-- akan diisi lewat JS -->
                    </tbody>
                </table>
            </div>

            <!-- Paginasi -->
            <footer class="p-4 flex justify-between items-center text-sm border-t border-slate-200">
                <span id="paginationInfo" class="text-slate-500">Menampilkan ...</span>
                <div id="pagination" class="flex items-center gap-1">
                    <!-- tombol halaman via JS -->
                </div>
            </footer>
        </main>
    </div>
@endsection

@push('scripts')
    <script>
        lucide.createIcons();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let activeTab = '{{ request('tab', 'all') }}',
            searchQuery = '{{ request('search', '') }}',
            debounceTimer;

        const formatCurrency = amt => new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(amt);

        const formatDate = ds => new Date(ds).toLocaleDateString('id-ID', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        });

        const badgeStyle = status => {
            switch (status.toLowerCase()) {
                case 'disetujui':
                    return 'bg-emerald-100 text-emerald-800';
                case 'pending':
                    return 'bg-amber-100 text-amber-800';
                case 'ditolak':
                    return 'bg-red-100 text-red-800';
                case 'diproses':
                    return 'bg-sky-100 text-sky-800';
                default:
                    return 'bg-slate-100 text-slate-600';
            }
        };

        const translateStatus = status => ({
            approved: 'Disetujui',
            pending: 'Pending',
            rejected: 'Ditolak',
            process: 'Diproses'
        } [status] || status);

        const showLoading = () => {
            document.getElementById('tableBody').innerHTML = `
            <tr>
                <td colspan="8" class="text-center py-6 text-slate-500">
                    <div class="animate-spin rounded-full h-6 w-6 border-2 border-indigo-500 border-t-transparent mx-auto"></div>
                </td>
            </tr>`;
        };

        const updateURL = () => {
            const params = new URLSearchParams(window.location.search);
            params.set('tab', activeTab);
            if (searchQuery) params.set('search', searchQuery);
            else params.delete('search');
            history.replaceState(null, '', `${location.pathname}?${params.toString()}`);
        };

        const renderTable = data => {
            const tbody = document.getElementById('tableBody');

            if (data.length === 0) {
                tbody.innerHTML =
                    `<tr><td colspan="8" class="text-center py-4 text-slate-500">Tidak ada transaksi</td></tr>`;
                return;
            }

            tbody.innerHTML = data.map((trx, i) => `
            <tr class="hover:bg-slate-50">
                <td class="p-3">${i + 1}</td>
                <td class="p-3 font-medium text-slate-700">${trx.trx_no}</td>
                <td class="p-3 font-semibold text-slate-800">${trx.user?.actor?.name ?? '-'}</td>
                <td class="p-3 text-right font-semibold text-slate-800">${formatCurrency(trx.amount)}</td>
                <td class="p-3 text-center">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold ${badgeStyle(translateStatus(trx.status))}">
                        ${translateStatus(trx.status)}
                    </span>
                </td>
                <td class="p-3 text-slate-600">${trx.transaction_date ? formatDate(trx.transaction_date) : '-'}</td>
                <td class="p-3 text-center">
                    ${trx.transfer_proof
                        ? `<a href="/${trx.transfer_proof}" target="_blank" class="px-2 py-1 text-xs rounded-md text-sky-600 bg-sky-100 hover:bg-sky-200">Lihat Bukti</a>`
                        : '<span class="text-slate-400 text-sm">Tidak Ada</span>'}
                </td>
                <td class="p-3 text-center">
                    <a href="/admin/transactions/withdraw/${trx.id}/detail" class="px-2 py-1 text-xs rounded-md text-indigo-600 bg-indigo-100 hover:bg-indigo-200">Detail</a>
                </td>
            </tr>
        `).join('');
        };

        const renderPagination = (currentPage, lastPage, total, perPage) => {
            const ul = document.getElementById('pagination');
            const info = document.getElementById('paginationInfo');
            let html = '';

            const start = (currentPage - 1) * perPage + 1;
            const end = Math.min(currentPage * perPage, total);
            info.textContent = `Menampilkan ${start}-${end} dari ${total} hasil`;

            html += `
            <button class="px-2 py-1 rounded-lg hover:bg-slate-100 text-slate-500 ${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${currentPage - 1}">
                <i data-lucide="chevron-left" class="w-5 h-5"></i>
            </button>`;

            for (let i = 1; i <= lastPage; i++) {
                html += `
                <button class="px-3 py-1 rounded-lg ${i === currentPage ? 'bg-indigo-100 text-indigo-700 font-semibold' : 'hover:bg-slate-100 text-slate-600'}" data-page="${i}">
                    ${i}
                </button>`;
            }

            html += `
            <button class="px-2 py-1 rounded-lg hover:bg-slate-100 text-slate-500 ${currentPage === lastPage ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${currentPage + 1}">
                <i data-lucide="chevron-right" class="w-5 h-5"></i>
            </button>`;

            ul.innerHTML = html;
            lucide.createIcons(); // refresh ikon
        };

        const fetchData = (page = 1) => {
            showLoading();
            axios.get("{{ route('admin.transactions.withdraw.search') }}", {
                params: {
                    tab: activeTab,
                    search: searchQuery,
                    page
                }
            }).then(res => {
                renderTable(res.data.data);
                renderPagination(res.data.current_page, res.data.last_page, res.data.total, res.data.per_page);
            }).catch(() => {
                document.getElementById('tableBody').innerHTML = `
                <tr><td colspan="8" class="text-center text-red-500 py-3">Gagal memuat data</td></tr>`;
            });
        };

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.tab-link').forEach(tab => {
                tab.addEventListener('click', e => {
                    e.preventDefault();
                    document.querySelectorAll('.tab-link').forEach(t => t.classList.remove(
                        'bg-white', 'shadow-sm', 'text-slate-800', 'font-semibold'));
                    tab.classList.add('bg-white', 'shadow-sm', 'text-slate-800', 'font-semibold');
                    activeTab = tab.dataset.tab;
                    updateURL();
                    fetchData(1);
                });
            });

            document.getElementById('searchInput').addEventListener('input', e => {
                clearTimeout(debounceTimer);
                searchQuery = e.target.value;
                debounceTimer = setTimeout(() => {
                    updateURL();
                    fetchData(1);
                }, 300);
            });

            document.getElementById('pagination').addEventListener('click', e => {
                const btn = e.target.closest('button[data-page]');
                if (btn) {
                    const page = parseInt(btn.dataset.page);
                    if (!isNaN(page)) fetchData(page);
                }
            });

            fetchData();
        });
    </script>
@endpush