@extends('admin.layout')

@section('title', 'Tarik Dana')

@section('content')
<div>
    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Tarik Dana</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola permintaan penarikan saldo dari Mitra.</p>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Pending</span>
                <span class="material-symbols-outlined text-[#E8A838]">pending_actions</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ $stats['pending'] }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Permintaan belum diproses</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Hari Ini (Berhasil)</span>
                <span class="material-symbols-outlined text-green-600">check_circle</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ $stats['today_success'] }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Penarikan sukses hari ini</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Total Dana (Hari Ini)</span>
                <span class="material-symbols-outlined text-primary">payments</span>
            </div>
            <p class="text-xl font-bold font-headline-md mt-2">Rp {{ number_format($stats['today_total'], 0, ',', '.') }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Telah ditransfer ke mitra</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Ditolak</span>
                <span class="material-symbols-outlined text-error">cancel</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ $stats['rejected_week'] }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Dalam 7 hari terakhir</p>
        </div>
    </div>

    <!-- Filter & Table -->
    <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
        <!-- Filter Row -->
        <div class="p-4 border-b border-outline-variant/30 flex flex-wrap items-center justify-between gap-4 bg-surface-container-low/50">
            <div class="flex gap-2">
                <a href="{{ route('admin.tarik-dana', ['status' => 'all']) }}" class="px-4 py-1.5 rounded-lg {{ $status === 'all' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium transition-colors' }} text-sm">Semua</a>
                <a href="{{ route('admin.tarik-dana', ['status' => 'pending']) }}" class="px-4 py-1.5 rounded-lg {{ $status === 'pending' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium transition-colors' }} text-sm">Pending</a>
                <a href="{{ route('admin.tarik-dana', ['status' => 'approved']) }}" class="px-4 py-1.5 rounded-lg {{ $status === 'approved' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium transition-colors' }} text-sm">Selesai</a>
                <a href="{{ route('admin.tarik-dana', ['status' => 'rejected']) }}" class="px-4 py-1.5 rounded-lg {{ $status === 'rejected' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium transition-colors' }} text-sm">Ditolak</a>
            </div>
            <div class="flex gap-3">
                <div class="flex items-center gap-xs bg-surface-container px-md py-1.5 rounded-lg">
                    <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                    <span class="text-sm px-2">Bulan Ini</span>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-surface-container-low/50 border-b border-outline-variant/30">
                    <tr>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">ID & Waktu</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Mitra</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Nominal</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Rekening Tujuan</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/20">
                    @forelse($withdrawals as $wd)
                    <tr class="hover:bg-surface-variant/10 transition-colors {{ $wd->status === 'approved' || $wd->status === 'rejected' ? 'opacity-70' : '' }}">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">#WD-{{ str_pad($wd->id, 4, '0', STR_PAD_LEFT) }}</span>
                                <span class="text-xs text-on-surface-variant">{{ $wd->created_at->format('d M Y, H:i') }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container font-bold text-xs">
                                    {{ strtoupper(substr($wd->user->name ?? 'M', 0, 2)) }}
                                </div>
                                <div class="flex flex-col">
                                    <span class="font-bold text-sm">{{ $wd->user->name ?? 'Mitra' }}</span>
                                    <span class="text-xs text-on-surface-variant">Saldo: Rp {{ number_format($wd->user->wallet_balance ?? 0, 0, ',', '.') }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="font-bold text-sm text-primary">Rp {{ number_format($wd->amount, 0, ',', '.') }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="font-bold text-sm">{{ $wd->bank_name }} - {{ $wd->bank_account_number }}</span>
                                <span class="text-xs text-on-surface-variant">A/N {{ $wd->bank_account_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @if($wd->status === 'pending')
                            <span class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold inline-flex items-center gap-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Pending
                            </span>
                            @elseif($wd->status === 'approved')
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold inline-flex items-center gap-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Selesai
                            </span>
                            @else
                            <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold inline-flex items-center gap-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Ditolak
                            </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                @if($wd->status === 'pending')
                                <form action="{{ route('tarik-dana.approve', $wd->id) }}" method="POST" class="inline" onsubmit="return confirm('Yakin ingin menyetujui penarikan ini?')">
                                    @csrf
                                    <button type="submit" class="p-1.5 hover:bg-green-100 text-green-700 rounded-lg transition-colors border border-green-200" title="Setujui">
                                        <span class="material-symbols-outlined text-[18px]">check</span>
                                    </button>
                                </form>
                                <form action="{{ route('tarik-dana.reject', $wd->id) }}" method="POST" class="inline" onsubmit="return confirm('Yakin ingin menolak penarikan ini? Saldo akan dikembalikan ke mitra.')">
                                    @csrf
                                    <button type="submit" class="p-1.5 hover:bg-red-100 text-error rounded-lg transition-colors border border-red-200" title="Tolak">
                                        <span class="material-symbols-outlined text-[18px]">close</span>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Tidak ada data pengajuan penarikan dana.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="px-6 py-4 bg-surface-container-low/50 border-t border-outline-variant/30">
            {{ $withdrawals->links() }}
        </div>
    </div>
</div>
@endsection