@extends('layouts.admin')

@section('title', 'Wallet Withdrawals')

@push('styles')
<style>
    .page-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
    }
    .page-header h1 { font-size: 1.75rem; font-weight: 700; }
    .tab-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .tab-pills a {
        background: var(--bg-card); border: 1px solid var(--border);
        padding: 0.5rem 1rem; border-radius: var(--radius-md);
        font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
        text-decoration: none;
    }
    .tab-pills a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .table-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
    .table-responsive { overflow-x: auto; }
    .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    .admin-table th, .admin-table td {
        padding: 0.75rem 1rem; text-align: left;
        border-bottom: 1px solid var(--border);
    }
    .admin-table thead th {
        background: var(--bg-hover);
        font-weight: 600; color: var(--text-secondary);
        font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .admin-table tbody tr:hover { background: var(--bg-hover); }
    .action-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 6px;
        background: transparent; border: 1px solid var(--border);
        color: var(--text-secondary); margin-right: 0.2rem; cursor: pointer;
    }
    .action-btn.approve { color: var(--success); border-color: var(--success); }
    .action-btn.reject  { color: var(--danger); border-color: var(--danger); }
    .action-btn:hover { background: var(--bg-hover); }
    .amount { font-weight: 700; font-family: monospace; color: var(--text-primary); }
    .muted  { color: var(--text-muted); font-size: 0.8rem; }
    .empty  { padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
    /* Reject-reason modal */
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        display: none; align-items: center; justify-content: center;
        z-index: 1000;
    }
    .modal-overlay.active { display: flex; }
    .modal-box {
        background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius-lg);
        width: min(420px, 95vw); box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    }
    .modal-box h3 { margin-bottom: 0.25rem; }
    .modal-box .muted { margin-bottom: 1rem; }
    .modal-box textarea { width: 100%; min-height: 100px; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); }
    .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
</style>
@endpush

@section('content')
    <div class="page-header">
        <h1><i class="fas fa-money-bill-wave" style="color: var(--accent); margin-right: 0.5rem;"></i> Wallet Withdrawals</h1>
        <div class="tab-pills">
            <a href="{{ route('admin.withdrawals', ['status' => 'pending']) }}"  class="{{ $status === 'pending'  ? 'active' : '' }}">Pending</a>
            <a href="{{ route('admin.withdrawals', ['status' => 'approved']) }}" class="{{ $status === 'approved' ? 'active' : '' }}">Approved</a>
            <a href="{{ route('admin.withdrawals', ['status' => 'rejected']) }}" class="{{ $status === 'rejected' ? 'active' : '' }}">Rejected</a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success" style="margin-bottom: 1rem;">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger" style="margin-bottom: 1rem;">{{ session('error') }}</div>
    @endif

    <div class="table-card">
        <div class="table-responsive">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Amount</th>
                        <th>Bank</th>
                        <th>Status / Description</th>
                        <th>Requested</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($withdrawals as $w)
                        @php
                            $user = $w->wallet->user ?? null;
                            $isPending  = str_contains((string) $w->description, 'pending admin approval');
                            $isApproved = str_contains((string) $w->description, 'approved');
                            $isRejected = str_contains((string) $w->description, 'rejected');
                        @endphp
                        <tr>
                            <td style="font-family: monospace; font-size: 0.8rem; color: var(--text-muted);">#{{ $w->id }}</td>
                            <td>
                                <div style="font-weight: 600;">{{ $user->name ?? 'Unknown' }}</div>
                                <div class="muted">{{ $user->email ?? '—' }}</div>
                            </td>
                            <td class="amount">&#8358;{{ number_format((float) $w->amount, 2) }}</td>
                            <td>
                                <div>{{ \Illuminate\Support\Str::limit((string) $w->description, 50) }}</div>
                            </td>
                            <td>
                                @if ($isPending)
                                    <span class="badge badge-warning">Pending</span>
                                @elseif ($isApproved)
                                    <span class="badge badge-success">Approved</span>
                                @elseif ($isRejected)
                                    <span class="badge badge-danger">Rejected</span>
                                @else
                                    <span class="badge">—</span>
                                @endif
                                @if ($w->reference_id)
                                    <div class="muted" style="margin-top: 0.25rem; font-family: monospace;">{{ $w->reference_id }}</div>
                                @endif
                            </td>
                            <td style="white-space: nowrap; color: var(--text-secondary);">{{ $w->created_at?->format('M d, Y g:i A') }}</td>
                            <td style="white-space: nowrap;">
                                @if ($isPending)
                                    <form method="POST" action="{{ route('admin.withdrawals.approve', $w->id) }}" style="display: inline;"
                                          data-confirm="This debits the platform wallet and sends funds to the user's verified bank account via Paystack. This action cannot be reversed."
                                          data-confirm-type="warning"
                                          data-confirm-title="Approve withdrawal?"
                                          data-confirm-button="Approve & Send">
                                        @csrf
                                        <button type="submit" class="action-btn approve" title="Approve & pay"><i class="fas fa-check"></i></button>
                                    </form>
                                    <button type="button" class="action-btn reject" title="Reject & refund"
                                            onclick="openRejectModal('{{ $w->id }}')" style="cursor: pointer;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                @elseif ($isApproved)
                                    <form method="POST" action="{{ route('admin.withdrawals.refresh', $w->id) }}" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="action-btn" title="Refresh Paystack status"><i class="fas fa-sync"></i></button>
                                    </form>
                                @endif
                            </td>
                        </tr>

                        @if ($isPending)
                            <div class="modal-overlay" id="reject-modal-{{ $w->id }}">
                                <div class="modal-box">
                                    <h3>Reject Withdrawal #{{ $w->id }}</h3>
                                    <p class="muted">Funds will be refunded to {{ $user->name ?? 'the user' }}'s wallet.</p>
                                    <form method="POST" action="{{ route('admin.withdrawals.reject', $w->id) }}">
                                        @csrf
                                        <textarea name="reason" required placeholder="Reason for rejection (visible to user)..."></textarea>
                                        <div class="modal-actions">
                                            <button type="button" class="btn" onclick="closeRejectModal('{{ $w->id }}')">Cancel</button>
                                            <button type="submit" class="btn btn-danger">Reject & Refund</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif
                    @empty
                        <tr><td colspan="7" class="empty">No {{ $status }} withdrawals.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($withdrawals->hasPages())
            <div style="padding: 1rem;">{{ $withdrawals->links() }}</div>
        @endif
    </div>

    <script>
        function openRejectModal(id)  { document.getElementById('reject-modal-' + id).classList.add('active'); }
        function closeRejectModal(id) { document.getElementById('reject-modal-' + id).classList.remove('active'); }
    </script>
@endsection