{% extends 'base.html' %}
{% load static %}

{% block title %}Withdraw | Crashten{% endblock %}

{% block content %}
<div class="container-fluid py-4" style="grid-column: 1 / -1; max-width: 600px; margin: 0 auto;">
    
    <div class="premium-modal w-100 p-4 mb-4" style="position: static; transform: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;">
        
        <div class="text-center mb-4">
            <h2 class="modal-title mb-1">Withdraw Funds</h2>
            <p class="modal-subtitle mb-0">Minimum withdrawal is 200 KES</p>
        </div>
        
        <div class="profile-balance-card p-3 mb-4 text-center">
            <span class="balance-label d-block">Available Balance</span>
            <span class="balance-amount d-block" id="withdrawAvailableBalance">0.00 KES</span>
        </div>

        <form id="withdrawForm">
            <div class="mb-3">
                <label class="balance-label d-block mb-2">Amount to Withdraw (KES)</label>
                <input type="number" id="withdrawAmount" name="amount" class="form-input w-100" placeholder="e.g. 500" required min="200">
            </div>

            <div class="mb-4">
                <label class="balance-label d-block mb-2">Receiving M-Pesa Number</label>
                <input type="tel" name="phone" class="form-input w-100" placeholder="e.g. 07XXXXXXXX" required>
            </div>
            
            <div class="d-grid">
                <button type="submit" class="btn-submit premium-btn bg-dark-btn">Request Withdrawal</button>
            </div>
        </form>
    </div>

    <div class="premium-modal w-100 p-4" style="position: static; transform: none;">
        <h4 style="font-family: var(--font-family-sans); color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 16px;">Withdrawal History</h4>
        
        <div class="table-wrap">
            <table class="table-core w-100 text-start">
                <thead>
                    <tr>
                        <th class="text-start">Date</th>
                        <th class="text-start">Amount</th>
                        <th class="text-end">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for w in history %}
                    <tr>
                        <td class="text-start" style="font-size: 11px; color: var(--color-text-secondary);">
                            {{ w.created_at|date:"d M, H:i" }}
                        </td>
                        <td class="text-start" style="color: #fff;">{{ w.amount }}</td>
                        <td class="text-end" style="color: var(--color-accent-gold); font-size: 11px; font-weight: 800;">{{ w.status }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3" class="text-center py-4" style="color: var(--color-text-secondary); font-size: 12px;">No withdrawal requests yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
    // Keep balance text synced
    document.addEventListener('DOMContentLoaded', () => {
        const syncBal = setInterval(() => {
            const balEl = document.getElementById('withdrawAvailableBalance');
            if (balEl && GameApp.User) balEl.innerText = GameApp.Utils.formatCurrency(GameApp.User.balance) + ' KES';
        }, 500);
    });

    document.getElementById('withdrawForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const amount = parseFloat(document.getElementById('withdrawAmount').value);
        
        // RULE 4: Frontend Minimum 200 check
        if (amount < 200) {
            GameApp.Toaster.show('Minimum withdrawal is 200 KES', 'error');
            return;
        }
        if (amount > GameApp.User.balance) {
            GameApp.Toaster.show('Insufficient balance', 'error');
            return;
        }

        const btn = e.target.querySelector('.btn-submit');
        const originalText = btn.innerText;
        btn.innerText = "Sending Request...";
        btn.disabled = true;

        try {
            const formData = new FormData(e.target);
            const res = await fetch('/api/withdraw/', { method: 'POST', body: formData });
            const data = await res.json();

            if (data.status === 'success') {
                GameApp.User.setBalance(data.balance);
                
                // RULE 3: Custom 48-Hour Message
                Swal.fire({
                    icon: 'success',
                    title: 'Request Received',
                    text: 'Your withdrawal request has been sent and will be processed within 48 hours.',
                    background: 'rgba(15, 20, 28, 0.95)',
                    color: '#fff',
                    confirmButtonColor: 'var(--color-accent-blue)'
                }).then(() => {
                    window.location.reload(); // Reload to show the new request in the History Table
                });
                
                e.target.reset();
            } else { GameApp.Toaster.show(data.message, 'error'); }
        } catch (err) { GameApp.Toaster.show('Network error.', 'error'); } 
        finally { btn.innerText = originalText; btn.disabled = false; }
    });
</script>
{% endblock %}