@extends('admin.layout')
@section('title', 'Dashboard Keuangan')
@section('content')
<style>
    .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(241, 245, 249, 1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbc4d2;
        border-radius: 10px;
    }
</style>

<!-- Dashboard Body -->
<div class="flex-1 flex flex-col gap-6 w-full">
    <!-- Header Row -->
    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Dashboard Keuangan</h2>
            <p class="text-sm text-on-surface-variant mt-1">Laporan keuangan &amp; pendapatan sistem.</p>
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <form method="GET" action="{{ route('admin.keuangan') }}" class="flex items-center bg-surface-container-lowest border border-outline-variant rounded-xl p-2 gap-2">
                <span class="material-symbols-outlined text-on-surface-variant ml-2">calendar_month</span>
                <select name="periode" onchange="this.form.submit()" class="bg-transparent border-none focus:ring-0 font-label-md text-sm text-on-surface-variant pr-4 cursor-pointer">
                    <option value="bulan_ini" {{ ($periode ?? 'bulan_ini') === 'bulan_ini' ? 'selected' : '' }}>Bulan Ini</option>
                    <option value="30_hari" {{ ($periode ?? '') === '30_hari' ? 'selected' : '' }}>30 Hari Terakhir</option>
                    <option value="kuartal_ini" {{ ($periode ?? '') === 'kuartal_ini' ? 'selected' : '' }}>Kuartal Ini</option>
                    <option value="tahun_ini" {{ ($periode ?? '') === 'tahun_ini' ? 'selected' : '' }}>Tahun Ini</option>
                </select>
            </form>
            <div class="flex gap-2">
                <a href="{{ route('admin.keuangan.export', ['format' => 'csv']) }}" class="flex items-center gap-2 px-4 py-2 border border-outline-variant rounded-xl font-label-md text-sm hover:bg-surface-container transition-colors">
                    <span class="material-symbols-outlined text-[18px]">download</span>
                    <span>CSV</span>
                </a>
                <a href="{{ route('admin.keuangan.export', ['format' => 'excel']) }}" class="flex items-center gap-2 px-4 py-2 border border-outline-variant rounded-xl font-label-md text-sm hover:bg-surface-container transition-colors">
                    <span class="material-symbols-outlined text-[18px]">table_view</span>
                    <span>Excel</span>
                </a>
            </div>
        </div>
    </div>

    <!-- KPI Cards Bento Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Card 1: Gross GMV -->
        <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined">payments</span>
                </div>
                <span class="text-[#1B6CA8] font-label-sm text-xs flex items-center bg-[#E1EFFE] px-2 py-0.5 rounded-full">
                    <span class="material-symbols-outlined text-[14px]">trending_up</span> GMV
                </span>
            </div>
            <div>
                <p class="text-on-surface-variant font-label-md text-sm">Gross GMV</p>
                <h3 class="font-headline-md text-xl text-on-surface mt-1">Rp {{ number_format($grossGmv ?? 0, 0, ',', '.') }}</h3>
            </div>
        </div>

        <!-- Card 2: Net Revenue -->
        <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center text-green-700">
                    <span class="material-symbols-outlined">account_balance_wallet</span>
                </div>
                <span class="text-green-700 font-label-sm text-xs">Platform Fee</span>
            </div>
            <div>
                <p class="text-on-surface-variant font-label-md text-sm">Net Revenue</p>
                <h3 class="font-headline-md text-xl text-on-surface mt-1">Rp {{ number_format($netRevenue ?? 0, 0, ',', '.') }}</h3>
            </div>
        </div>

        <!-- Card 3: Payout Mitra -->
        <div class="glass-card p-6 rounded-2xl flex flex-col justify-between border-t-4 border-t-tertiary">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-tertiary-fixed rounded-xl flex items-center justify-center text-tertiary">
                    <span class="material-symbols-outlined">person</span>
                </div>
                <span class="text-tertiary font-label-sm text-xs">Hak Mitra</span>
            </div>
            <div>
                <p class="text-on-surface-variant font-label-md text-sm">Total Payout Mitra</p>
                <h3 class="font-headline-md text-xl text-on-surface mt-1">Rp {{ number_format($payoutMitra ?? 0, 0, ',', '.') }}</h3>
            </div>
        </div>

        <!-- Card 4: Pending -->
        <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600">
                    <span class="material-symbols-outlined">pending_actions</span>
                </div>
                <span class="text-orange-700 font-label-sm text-xs bg-orange-50 px-2 py-0.5 rounded-full">{{ $pendingCount ?? 0 }} Pending</span>
            </div>
            <div>
                <p class="text-on-surface-variant font-label-md text-sm">Pending Disbursement</p>
                <h3 class="font-headline-md text-xl text-on-surface mt-1">Rp {{ number_format($pendingDisbursement ?? 0, 0, ',', '.') }}</h3>
            </div>
        </div>

        <!-- Card 5: Wallet Liabilities -->
        <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600">
                    <span class="material-symbols-outlined">account_balance</span>
                </div>
                <span class="text-purple-700 font-label-sm text-xs">Saldo Dompet</span>
            </div>
            <div>
                <p class="text-on-surface-variant font-label-md text-sm">Wallet Liabilities</p>
                <h3 class="font-headline-md text-xl text-on-surface mt-1">Rp {{ number_format($walletLiabilities ?? 0, 0, ',', '.') }}</h3>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Bar Chart: Revenue Harian -->
        <div class="lg:col-span-8 glass-card p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h4 class="font-headline-md text-xl text-on-surface">Revenue Harian</h4>
                    <p class="text-on-surface-variant font-body-md text-base">Statistik 30 hari terakhir</p>
                </div>
                <div class="flex gap-4">
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-primary"></span>
                        <span class="text-xs font-label-sm">Platform</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-tertiary"></span>
                        <span class="text-xs font-label-sm">Payout</span>
                    </div>
                </div>
            </div>

            <!-- Dynamic Bar Chart -->
            <div class="w-full h-64 flex items-end justify-between px-2 gap-1 overflow-x-auto custom-scrollbar">
                @if(isset($chartDays) && count($chartDays) > 0)
                    @foreach($chartDays as $idx => $day)
                        @php
                            $netHeight = $maxChartVal > 0 ? max(4, round(($day['net'] / $maxChartVal) * 180)) : 4;
                            $payoutHeight = $maxChartVal > 0 ? max(4, round(($day['payout'] / $maxChartVal) * 180)) : 4;
                        @endphp
                        <div class="flex flex-col items-center gap-1 group w-full shrink-0 min-w-[24px]" title="{{ $day['date'] }}: Net Rp {{ number_format($day['net'], 0, ',', '.') }}, Payout Rp {{ number_format($day['payout'], 0, ',', '.') }}">
                            <div class="flex items-end gap-0.5 w-full justify-center">
                                <div class="w-2.5 bg-primary/80 rounded-t-sm group-hover:bg-primary transition-all" style="height: {{ $netHeight }}px"></div>
                                <div class="w-2.5 bg-tertiary/80 rounded-t-sm group-hover:bg-tertiary transition-all" style="height: {{ $payoutHeight }}px"></div>
                            </div>
                            <span class="text-[9px] text-on-surface-variant {{ $idx === count($chartDays) - 1 ? 'font-bold text-primary' : 'opacity-60' }}">{{ $idx === count($chartDays) - 1 ? 'Today' : $day['label'] }}</span>
                        </div>
                    @endforeach
                @else
                    <div class="w-full h-full flex items-center justify-center text-sm text-on-surface-variant">Belum ada data transaksi chart.</div>
                @endif
            </div>
        </div>

        <!-- Donut Chart: Komposisi Pembayaran -->
        <div class="lg:col-span-4 glass-card p-6 rounded-2xl">
            <h4 class="font-headline-md text-xl text-on-surface mb-8">Komposisi Pembayaran</h4>
            <div class="relative w-48 h-48 mx-auto mb-6">
                <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
                    <path class="text-primary-container" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="100, 100" stroke-width="4"></path>
                    <path class="text-primary" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="{{ $paymentChannels['qris']['percent'] ?? 40 }}, 100" stroke-linecap="round" stroke-width="4"></path>
                    <path class="text-tertiary" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="{{ $paymentChannels['bca_va']['percent'] ?? 25 }}, 100" stroke-dashoffset="-{{ $paymentChannels['qris']['percent'] ?? 40 }}" stroke-linecap="round" stroke-width="4"></path>
                    <path class="text-secondary" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="{{ $paymentChannels['bni_va']['percent'] ?? 20 }}, 100" stroke-dashoffset="-{{ ($paymentChannels['qris']['percent'] ?? 40) + ($paymentChannels['bca_va']['percent'] ?? 25) }}" stroke-linecap="round" stroke-width="4"></path>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-xl font-headline-md font-bold">{{ $totalPaymentCount ?? 0 }}</span>
                    <span class="text-xs font-label-sm text-on-surface-variant">Transaksi</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-primary"></span>
                    <span class="text-xs font-label-sm">QRIS ({{ $paymentChannels['qris']['percent'] ?? 40 }}%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-tertiary"></span>
                    <span class="text-xs font-label-sm">VA BCA ({{ $paymentChannels['bca_va']['percent'] ?? 25 }}%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-secondary"></span>
                    <span class="text-xs font-label-sm">VA BNI ({{ $paymentChannels['bni_va']['percent'] ?? 20 }}%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-primary-container"></span>
                    <span class="text-xs font-label-sm">GoPay ({{ $paymentChannels['gopay']['percent'] ?? 15 }}%)</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Table & Sidebar Row -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        <!-- Table Section -->
        <div class="lg:col-span-9 space-y-4">
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white">
                    <div class="flex items-center gap-4">
                        <h4 class="font-headline-md text-xl text-on-surface">Antrian Payout Mitra</h4>
                        <span class="bg-orange-100 text-orange-700 px-3 py-1 rounded-full text-xs font-label-sm">{{ $pendingCount ?? 0 }} Pending</span>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-surface-container-low border-y border-outline-variant">
                            <tr>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider">Mitra</th>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider">Bank</th>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider">No. Rekening</th>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider text-right">Amount</th>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider">Status</th>
                                <th class="px-6 py-4 font-label-md text-sm text-on-surface-variant uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-outline-variant">
                            @forelse($pendingWithdrawals as $withdrawal)
                            <tr class="hover:bg-surface-container-low transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container overflow-hidden shrink-0 flex items-center justify-center font-bold">
                                            @if($withdrawal->user && ($withdrawal->user->selfie_image || $withdrawal->user->avatar))
                                            <img class="w-full h-full object-cover object-[center_20%]" src="{{ asset('storage/' . ($withdrawal->user->selfie_image ?: $withdrawal->user->avatar)) }}" alt="{{ $withdrawal->user->name }}">
                                            @else
                                            <span>{{ strtoupper(substr($withdrawal->user->name ?? 'M', 0, 2)) }}</span>
                                            @endif
                                        </div>
                                        <div>
                                            <p class="font-label-md text-sm text-on-surface font-semibold">{{ $withdrawal->user->name ?? 'Mitra' }}</p>
                                            <p class="text-xs font-label-sm text-on-surface-variant opacity-70">{{ $withdrawal->user->phone ?? '-' }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 font-body-md text-sm">{{ $withdrawal->bank_name ?? '-' }}</td>
                                <td class="px-6 py-4 font-body-md text-sm">{{ $withdrawal->bank_account_number ?? '-' }}</td>
                                <td class="px-6 py-4 font-headline-md text-base font-bold text-right text-on-surface">Rp {{ number_format($withdrawal->amount, 0, ',', '.') }}</td>
                                <td class="px-6 py-4">
                                    @if($withdrawal->status === 'pending')
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-orange-100 text-orange-700 font-label-sm text-xs">
                                        <span class="w-1.5 h-1.5 rounded-full bg-orange-700 animate-pulse"></span> Pending
                                    </span>
                                    @elseif($withdrawal->status === 'processing')
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-100 text-blue-700 font-label-sm text-xs">
                                        <span class="w-1.5 h-1.5 rounded-full bg-blue-700"></span> Processing
                                    </span>
                                    @else
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green-100 text-green-700 font-label-sm text-xs">
                                        <span class="w-1.5 h-1.5 rounded-full bg-green-700"></span> Approved
                                    </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    @if($withdrawal->status === 'pending')
                                    <button type="button" onclick="document.getElementById('approve-form-{{ $withdrawal->id }}').submit()" class="text-primary font-label-md text-sm hover:underline font-bold">Proses</button>
                                    @else
                                    <a href="{{ route('admin.tarik-dana') }}" class="text-on-surface-variant font-label-md text-sm hover:underline">Detail</a>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-center text-sm text-on-surface-variant">Tidak ada antrian penarikan dana pending.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-4 bg-surface-container-low flex items-center justify-between">
                    <p class="text-xs font-label-sm text-on-surface-variant">Menampilkan {{ $pendingWithdrawals->count() }} antrian</p>
                    <div>
                        {{ $pendingWithdrawals->links() }}
                    </div>
                </div>
            </div>

            @foreach($pendingWithdrawals as $w)
                @if($w->status === 'pending')
                <form id="approve-form-{{ $w->id }}" action="{{ route('admin.tarik-dana.approve', $w->id) }}" method="POST" class="hidden">
                    @csrf
                </form>
                @endif
            @endforeach
        </div>

        <!-- Transaction Timeline Sidebar -->
        <div class="lg:col-span-3 space-y-4">
            <div class="glass-card p-6 rounded-2xl">
                <div class="flex items-center justify-between mb-6">
                    <h4 class="font-headline-md text-xl text-on-surface">Timeline Transaksi</h4>
                    <a href="{{ route('admin.tarik-dana') }}" class="text-primary font-label-sm text-xs hover:underline">Lihat Semua</a>
                </div>
                <div class="space-y-6 relative before:content-[''] before:absolute before:left-2 before:top-4 before:bottom-4 before:w-px before:bg-outline-variant">
                    @forelse($recentTransactions as $tx)
                    <div class="relative pl-8">
                        <div class="absolute left-0 top-1 w-4 h-4 {{ $tx->type === 'in' ? 'bg-primary' : 'bg-tertiary' }} rounded-full border-4 border-surface"></div>
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="font-label-md text-sm text-on-surface font-semibold">{{ $tx->type === 'in' ? 'Kredit Saldo' : 'Penarikan Saldo' }}</p>
                                <p class="text-[12px] text-on-surface-variant opacity-70">{{ $tx->user ? $tx->user->name : 'Mitra' }}</p>
                            </div>
                            <p class="font-label-md text-sm {{ $tx->type === 'in' ? 'text-green-600' : 'text-error' }} font-bold">
                                {{ $tx->type === 'in' ? '+' : '-' }}Rp {{ number_format($tx->amount, 0, ',', '.') }}
                            </p>
                        </div>
                        <p class="text-[11px] text-on-surface-variant mt-1">{{ $tx->created_at ? $tx->created_at->diffForHumans() : '-' }}</p>
                    </div>
                    @empty
                    <div class="text-xs text-on-surface-variant py-4 text-center">Belum ada riwayat transaksi.</div>
                    @endforelse
                </div>
            </div>
            <div class="bg-primary/5 border border-primary/10 rounded-2xl p-6">
                <h5 class="font-label-md text-sm text-primary mb-2 font-bold">Butuh Bantuan Keuangan?</h5>
                <p class="text-xs font-label-sm text-on-surface-variant mb-4 leading-relaxed">Konsultasikan kendala rekonsiliasi atau pencairan dana dengan tim teknis kami.</p>
                <a href="mailto:support@terapisku.com" class="text-primary font-bold text-xs hover:underline flex items-center gap-2">
                    Hubungi Support <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
                </a>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    // Micro-interactions for table checkboxes
    const selectAll = document.getElementById('select-all-withdrawals');
    const rowCheckboxes = document.querySelectorAll('.withdrawal-checkbox');

    selectAll?.addEventListener('change', (e) => {
        rowCheckboxes.forEach(cb => {
            cb.checked = e.target.checked;
        });
    });
</script>
@endsection

@endsection