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

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card shadow">
                <div class="card-header bg-warning text-white">
                    <h3 class="card-title mb-0">💵 Convert to USDT</h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6>Conversion Rules:</h6>
                        <ul class="mb-0">
                            <li>Minimum conversion: 20 UNB ($20)</li>
                            <li>Daily limit: ${{ merchant.get_daily_limit }}</li>
                            <li>Weekly limit: ${{ merchant.get_weekly_limit }}</li>
                            <li>Funds must be from product/service sales</li>
                        </ul>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6>Available Balance</h6>
                                    <h4 class="text-success">${{ available_balance }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6>Remaining Weekly</h6>
                                    <h4 class="text-primary">${{ weekly_remaining }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="amount">Amount to Convert ($) *</label>
                            <input type="number" name="amount" class="form-control" id="amount" 
                                   min="{{ min_conversion }}" max="{{ weekly_remaining }}" 
                                   step="0.01" required>
                            <small class="form-text text-muted">
                                Minimum: ${{ min_conversion }} | Maximum: ${{ weekly_remaining }}
                            </small>
                        </div>

                        <div class="form-group">
                            <label>Conversion Details:</label>
                            <div class="card bg-light">
                                <div class="card-body">
                                    <p class="mb-1"><strong>Your BEP20 Wallet:</strong></p>
                                    <code>{{ merchant.wallet_address }}</code>
                                    <p class="mt-2 mb-0 text-muted">
                                        USDT will be sent to this wallet address after admin approval
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-warning btn-lg">
                                Submit Conversion Request
                            </button>
                            <a href="{% url 'merchant_dashboard' %}" class="btn btn-secondary ml-2">Cancel</a>
                        </div>
                    </form>

                    <div class="alert alert-warning mt-4">
                        <h6>⚠️ Important Notes:</h6>
                        <ul class="mb-0">
                            <li>Conversion requests require admin approval</li>
                            <li>Only funds from sales can be converted</li>
                            <li>Processing time: 1-3 business days</li>
                            <li>Make sure your BEP20 wallet address is correct</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const amountInput = document.getElementById('amount');
    const maxAmount = {{ weekly_remaining }};
    const minAmount = {{ min_conversion }};
    
    amountInput.addEventListener('input', function() {
        const value = parseFloat(this.value) || 0;
        
        if (value > maxAmount) {
            this.value = maxAmount;
        }
        
        if (value < minAmount) {
            this.value = minAmount;
        }
    });
});
</script>
{% endblock %}
{% endblock %}