{{-- ============================================================
     resources/views/user/wallet/index.blade.php
     ============================================================ --}}
@extends('layouts.app')
@section('title','My Wallet')

@section('content')
<div class="page-header">
    <div style="display:flex;align-items:center;justify-content:space-between;">
        <div><h2>💳 My Wallet</h2><p>Manage your points & withdrawals</p></div>
        <a href="{{ route('buy-points.index') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Buy Points</a>
    </div>
</div>

{{-- Balance Cards --}}
<div class="section">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
        <div class="card card-body text-center" style="background:linear-gradient(135deg,#1A73E8,#1557B0);color:#fff;border:none;">
            <div style="font-size:11px;opacity:.8;">Point Balance</div>
            <div style="font-size:28px;font-weight:800;">{{ number_format($user->points) }}</div>
            <div style="font-size:12px;opacity:.9;">pts</div>
        </div>
        <div class="card card-body text-center" style="background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;border:none;">
            <div style="font-size:11px;opacity:.8;">Cedis Value</div>
            <div style="font-size:28px;font-weight:800;">{{ number_format($cedisValue,2) }}</div>
            <div style="font-size:12px;opacity:.9;">GH₵</div>
        </div>
    </div>
    <div class="card card-body" style="padding:14px;font-size:12px;color:var(--text-muted);text-align:center;">
        Rate: 1000 pts = GH₵{{ number_format((float)\App\Models\Setting::get('points_to_cedis_rate',0.001)*1000,2) }} &nbsp;|&nbsp; Min withdrawal: GH₵{{ $minWithdraw }}
    </div>
</div>

{{-- Promo Code --}}
<div class="section">
    <div class="card card-body">
        <div style="font-weight:700;margin-bottom:10px;">🎟 Apply Promo Code</div>
        <div style="display:flex;gap:8px;">
            <input type="text" id="promo-input" class="form-control" placeholder="Enter code" style="text-transform:uppercase;flex:1;">
            <button class="btn btn-primary" onclick="applyPromo()">Apply</button>
        </div>
    </div>
</div>

{{-- Withdraw Form --}}
<div class="section">
    <div class="section-title">Withdraw Funds</div>
    <div class="card card-body">
        @if($errors->any())
        <div class="alert alert-danger"><i class="fa fa-circle-exclamation"></i> {{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('wallet.redeem') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="form-label">Amount (GH₵)</label>
                <input type="number" name="amount" class="form-control" placeholder="Min {{ $minWithdraw }}" step="0.01" min="{{ $minWithdraw }}" max="{{ \App\Models\Setting::get('max_daily_withdrawal',500) }}" value="{{ old('amount') }}" required>
            </div>
            <div class="form-group">
                <label class="form-label">Payment Method</label>
                <select name="method" class="form-control" required id="method-select" onchange="toggleBank()">
                    <option value="">— Select method —</option>
                    @foreach($methods as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div id="bank-fields" style="display:none;">
                <div class="form-group">
                    <label class="form-label">Bank Name</label>
                    <input type="text" name="bank_name" class="form-control" placeholder="e.g. GCB Bank">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Account Number / Mobile Number</label>
                <input type="text" name="account_number" class="form-control" placeholder="024xxxxxxx" required>
            </div>
            <div class="form-group">
                <label class="form-label">Account Name</label>
                <input type="text" name="account_name" class="form-control" placeholder="Name on account" required>
            </div>
            <div class="form-group">
                <label class="form-label">Payment Screenshot (optional)</label>
                <input type="file" name="screenshot" class="form-control" accept="image/*">
                <small style="color:var(--text-muted);font-size:11px;">Upload if you've already made payment for verification</small>
            </div>
            <button type="submit" class="btn btn-primary btn-block btn-lg" onclick="return confirm('Confirm withdrawal request?')">
                <i class="fa fa-arrow-right"></i> Submit Withdrawal
            </button>
        </form>
    </div>
</div>

{{-- Withdrawal History --}}
<div class="section">
    <div class="section-title">Withdrawal History</div>
    @forelse($withdrawals as $w)
    <div class="card card-body" style="margin-bottom:8px;padding:14px;">
        <div style="display:flex;align-items:center;justify-content:space-between;">
            <div>
                <div style="font-weight:600;font-size:14px;">GH₵{{ number_format($w->net_amount,2) }}</div>
                <div style="font-size:12px;color:var(--text-muted);">{{ strtoupper($w->method) }} • {{ $w->account_number }}</div>
                <div style="font-size:11px;color:var(--text-muted);">{{ $w->created_at->format('d M Y, h:i A') }}</div>
            </div>
            <span class="badge {{ match($w->status){ 'pending'=>'badge-warning','approved'=>'badge-primary','paid'=>'badge-success',default=>'badge-danger' } }}">
                {{ ucfirst($w->status) }}
            </span>
        </div>
    </div>
    @empty
    <div class="card card-body text-center text-muted">No withdrawal history yet.</div>
    @endforelse
</div>

{{-- Transaction History --}}
<div class="section">
    <div class="section-title">Transaction History</div>
    <div class="card">
        @forelse($transactions as $tx)
        <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;{{ !$loop->last?'border-bottom:1px solid var(--border);':'' }}">
            <div style="width:38px;height:38px;border-radius:50%;background:{{ $tx->points>0?'#DCFCE7':'#FEE2E2' }};display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">
                {{ match($tx->type){ 'earn'=>'⭐','bonus'=>'🎁','referral'=>'👥','spin'=>'🎡','game'=>'🎮','withdraw'=>'💸','promo'=>'🎟','offerwall'=>'📋',default=>'💰' } }}
            </div>
            <div style="flex:1;">
                <div style="font-size:13px;font-weight:600;">{{ $tx->description }}</div>
                <div style="font-size:11px;color:var(--text-muted);">{{ $tx->created_at->format('d M Y h:i A') }}</div>
            </div>
            <div style="font-weight:700;font-size:14px;color:{{ $tx->points>0?'var(--success)':'var(--danger)' }}">
                {{ $tx->points>0?'+':'' }}{{ number_format($tx->points) }}
            </div>
        </div>
        @empty
        <div style="padding:40px;text-align:center;color:var(--text-muted);">No transactions yet.</div>
        @endforelse
    </div>
    <div style="padding:12px 0;">{{ $transactions->links() }}</div>
</div>
@endsection

@push('scripts')
<script>
function toggleBank(){
    const m = document.getElementById('method-select').value;
    document.getElementById('bank-fields').style.display = m === 'bank' ? 'block' : 'none';
}
async function applyPromo(){
    const code = document.getElementById('promo-input').value.trim().toUpperCase();
    if(!code){ return; }
    try {
        const r = await post('{{ route('wallet.promo') }}', {code});
        if(r.success){ toast(r.message,'success'); setTimeout(()=>location.reload(),1500); }
        else toast(r.error,'error');
    } catch { toast('Failed to apply code','error'); }
}
</script>
@endpush