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

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

{% block content %}
<div class="container-fluid d-flex justify-content-center align-items-center" style="min-height: 70vh; grid-column: 1 / -1;">
    
    <div class="premium-modal w-100 p-4" style="max-width: 420px; position: static; transform: none; box-shadow: 0 15px 50px rgba(0,0,0,0.7) !important;">
        
        <div class="text-center mb-4">
            <h2 class="modal-title mb-1">Deposit Funds</h2>
            <p class="modal-subtitle mb-0">Top up your wallet instantly via M-Pesa</p>
        </div>
        
        <div class="form-error mb-3" id="depositError"></div>
        
        <form id="depositForm">
            <div class="mb-3">
                <label class="balance-label d-block mb-2">Amount (KES)</label>
                <input type="number" id="depositAmount" name="amount" class="form-input w-100" placeholder="e.g. 500" required min="50">
            </div>

            <div class="row g-2 mb-4">
                <div class="col-3"><button type="button" class="btn-quick w-100" onclick="document.getElementById('depositAmount').value = 100">100</button></div>
                <div class="col-3"><button type="button" class="btn-quick w-100" onclick="document.getElementById('depositAmount').value = 500">500</button></div>
                <div class="col-3"><button type="button" class="btn-quick w-100" onclick="document.getElementById('depositAmount').value = 1000">1K</button></div>
                <div class="col-3"><button type="button" class="btn-quick w-100" onclick="document.getElementById('depositAmount').value = 5000">5K</button></div>
            </div>

            <div class="mb-4">
                <label class="balance-label d-block mb-2">M-Pesa Phone Number</label>
                <input type="tel" name="phone" id="depositPhone" class="form-input w-100" placeholder="e.g. 07XXXXXXXX" required>
            </div>
            
            <div class="d-grid">
                <button type="submit" class="btn-submit premium-btn bg-green" style="color: #000 !important; font-weight: 900;">Deposit via M-Pesa</button>
            </div>
        </form>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('depositForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        if (!GameApp.User.isLoggedIn && !GameApp.Config.IS_SIMULATION) {
            AuthUI.openModal('loginModal');
            GameApp.Toaster.show('Please login to deposit.', 'error');
            return;
        }

        const btn = e.target.querySelector('.btn-submit');
        const originalText = btn.innerText;
        btn.innerText = "Initiating STK Push...";
        btn.disabled = true;

        setTimeout(() => {
            GameApp.Toaster.show('Check your phone to enter your M-Pesa PIN', 'success');
            
            setTimeout(() => {
                const amount = parseFloat(document.getElementById('depositAmount').value);
                GameApp.User.setBalance(GameApp.User.balance + amount);
                GameApp.Toaster.show(`Success! ${amount} KES added.`, 'success');
                btn.innerText = originalText;
                btn.disabled = false;
                e.target.reset();
            }, 5000);

        }, 1500);
    });
</script>
{% endblock %}