@extends('template.desktop.app')

@section('content')
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <div class="row gy-4 gy-sm-2">
                @php
                    $cards = [
                        [
                            'value' => number_format($stats['total_users']),
                            'label' => 'User Mengajukan',
                            'icon' => 'user',
                            'color' => 'secondary',
                            'text' => 'text-heading',
                        ],
                        [
                            'value' => 'Rp' . number_format($stats['approved_total'], 0, ',', '.'),
                            'label' => 'Withdraw Disetujui',
                            'icon' => 'check',
                            'color' => 'success',
                            'text' => 'text-success',
                        ],
                        [
                            'value' => 'Rp' . number_format($stats['rejected_total'], 0, ',', '.'),
                            'label' => 'Withdraw Ditolak',
                            'icon' => 'x',
                            'color' => 'danger',
                            'text' => 'text-danger',
                        ],
                        [
                            'value' => 'Rp' . number_format($stats['pending_total'], 0, ',', '.'),
                            'label' => 'Withdraw Pending',
                            'icon' => 'clock',
                            'color' => 'warning',
                            'text' => 'text-warning',
                        ],
                    ];
                @endphp

                @foreach ($cards as $card)
                    <div class="col-sm-6 col-lg-3">
                        <div
                            class="d-flex justify-content-between align-items-center {{ !$loop->last ? 'border-end' : '' }} pb-3">
                            <div>
                                <h4 class="mb-0">{{ $card['value'] }}</h4>
                                <small class="text-muted">{{ $card['label'] }}</small>
                            </div>
                            <div class="avatar p-2 me-lg-6">
                                <span class="avatar-initial rounded bg-label-{{ $card['color'] }} {{ $card['text'] }}">
                                    <i class="icon-base ti tabler-{{ $card['icon'] }} icon-26px"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Tabel Transaksi --}}
    <div class="card mb-4">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            {{-- Tabs --}}
            <ul class="nav nav-tabs card-header-tabs" id="tabFilter">
                @foreach (['all' => 'Semua', 'pending' => 'Pending', 'process' => 'Diproses', 'approved' => 'Disetujui', 'rejected' => 'Ditolak'] as $key => $label)
                    <li class="nav-item">
                        <a href="#" class="nav-link tab-link {{ request('tab', 'all') === $key ? 'active' : '' }}"
                            data-tab="{{ $key }}">{{ $label }}</a>
                    </li>
                @endforeach
            </ul>

            {{-- Search --}}
            <div class="input-group search-input" style="max-width:300px;">
                <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                <input type="text" id="searchInput" class="form-control" placeholder="Search..." maxlength="50"
                    value="{{ request('search') }}">
            </div>
        </div>

        {{-- Table --}}
        <div class="table-responsive text-nowrap">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th style="width:40px">No</th>
                        <th>TRX No</th>
                        <th>User</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th>Bukti Transfer</th>
                        <th style="width:90px">Actions</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <tr>
                        <td colspan="7" class="text-center py-4">Memuat data...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Pagination kanan bawah --}}
        <div class="card-footer d-flex justify-content-end">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-google mb-0" id="pagination"></ul>
            </nav>

        </div>
    </div>
@endsection

@push('scripts')
    <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 badgeColor = status => ({
            disetujui: 'success',
            pending: 'warning',
            ditolak: 'danger',
            diproses: 'info'
        } [status] || 'secondary');

        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-4">
                <div class="spinner-border text-primary" role="status"></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-3">Tidak ada transaksi</td></tr>`;
                return;
            }

            tbody.innerHTML = data.map((trx, i) => `
            <tr>
                <td>${i + 1}</td>
                <td>${trx.trx_no}</td>
                <td>${trx.user?.distributor?.full_name ?? '-'}</td>
                <td>${formatCurrency(trx.amount)}</td>
                <td>
                    <span class="badge bg-label-${badgeColor(translateStatus(trx.status).toLowerCase())}">
                        ${translateStatus(trx.status)}
                    </span>
                </td>
                <td>${trx.transaction_date ? formatDate(trx.transaction_date) : '-'}</td>
                <td>
                    ${trx.transfer_proof
                        ? `<a href="${trx.transfer_proof}" target="_blank" class="btn btn-sm btn-outline-info">Lihat</a>`
                        : '<span class="text-muted">Tidak Ada</span>'}
                </td>
                <td>
                    <a href="/admin/transactions/withdraw/${trx.id}/detail" class="btn btn-sm btn-outline-primary">Detail</a>
                </td>
            </tr>
        `).join('');
        };

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

            html += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage - 1}">
                    <i class="icon-base ti tabler-chevron-left icon-18px"></i>
                </a>
            </li>`;

            for (let i = 1; i <= lastPage; i++) {
                html += `
                <li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`;
            }

            html += `
            <li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage + 1}">
                    <i class="icon-base ti tabler-chevron-right icon-18px"></i>
                </a>
            </li>`;

            ul.innerHTML = html;
        };

        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);
            }).catch(() => {
                document.getElementById('tableBody').innerHTML = `
                <tr><td colspan="8" class="text-center text-danger 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(
                        'active'));
                    tab.classList.add('active');
                    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 => {
                if (e.target.closest('a.page-link')) {
                    e.preventDefault();
                    const page = parseInt(e.target.closest('a').dataset.page);
                    if (!isNaN(page)) fetchData(page);
                }
            });

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