{% extends '__layout__.html' %}
{% block title %}Manage Currency{% endblock %}
{% block head %}
<link href="/static/css/admin.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div id="main">
    <div class="container" style="max-width: 900px;">
        <a class="mb-2 d-block" href="/admin">← Return to Admin Dashboard</a>
        <div class="d-flex align-items-center mb-3">
            <img height="100px" style="aspect-ratio: 1/1;" class="rounded-2" src="/Thumbs/Head.ashx?userId={{user.id}}&x=100&y=100">
            <div class="ms-3">
                <h1 class="m-0 text-secondary">Manage Currency</h1>
                <p class="text-secondary m-0" style="font-size: 12px;">Admins only. Use the form below to add or remove Robux / Tix.</p>
            </div>
        </div>

        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div>
            {% for message in messages %}
                <div class="alert border border-danger p-2 text-center messagealerts">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        <div class="linebreak"></div>

        <div class="robux-management p-3 border rounded-2" style="background-color: rgba(30,30,30,0.85);">
            <h3 class="mb-3">Currency Control</h3>
            <form method="POST" id="currency-form">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="user-id-input" class="form-label">User ID</label>
                        <input type="number" class="form-control" id="user-id-input" name="userid" placeholder="Leave blank to target current admin" value="{{ user.id }}">
                    </div>
                    <div class="col-md-6">
                        <label for="user-name-input" class="form-label">User Name</label>
                        <input type="text" class="form-control" id="user-name-input" name="username" placeholder="Optional username lookup" value="">
                    </div>
                    <div class="col-md-6">
                        <label for="action-select" class="form-label">Action</label>
                        <select class="form-select" id="action-select" name="action" required>
                            <option value="add">Add</option>
                            <option value="subtract">Subtract</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="currency-type-select" class="form-label">Currency</label>
                        <select class="form-select" id="currency-type-select" name="currency_type" required>
                            <option value="robux">Robux</option>
                            <option value="tix">Tix</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="amount-input" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="amount-input" name="amount" placeholder="Amount" required>
                    </div>
                    <div class="col-md-6">
                        <label for="reason-input" class="form-label">Reason</label>
                        <input type="text" class="form-control" id="reason-input" name="reason" placeholder="Optional note for transaction records">
                    </div>
                </div>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="linebreak"></div>
                <button type="submit" class="btn btn-primary w-100 btn-sm">Apply Currency Change</button>
            </form>
        </div>

        <div class="linebreak"></div>

        <div class="robux-management p-3 border rounded-2" style="background-color: rgba(30,30,30,0.85);">
            <h3 class="mb-3">Builders Club Management</h3>
            <form method="POST" id="bc-form">
                <input type="hidden" name="form_action" value="builders_club">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="bc-user-id-input" class="form-label">User ID</label>
                        <input type="number" class="form-control" id="bc-user-id-input" name="userid" placeholder="Leave blank to target current admin" value="{{ user.id }}">
                    </div>
                    <div class="col-md-6">
                        <label for="bc-user-name-input" class="form-label">User Name</label>
                        <input type="text" class="form-control" id="bc-user-name-input" name="username" placeholder="Optional username lookup" value="">
                    </div>
                    <div class="col-md-6">
                        <label for="bc-type-select" class="form-label">Builders Club</label>
                        <select class="form-select" id="bc-type-select" name="bc_type">
                            <option value="">No change</option>
                            <option value="classic">Classic</option>
                            <option value="turbo">Turbo</option>
                            <option value="outrageous">Outrageous</option>
                            <option value="none">Remove BC</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="bc-duration-input" class="form-label">BC Duration (days)</label>
                        <input type="number" class="form-control" id="bc-duration-input" name="bc_duration" placeholder="0 for no duration" value="0">
                    </div>
                </div>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="linebreak"></div>
                <button type="submit" class="btn btn-primary w-100 btn-sm">Apply Builders Club Change</button>
            </form>
        </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
    const currencyForm = document.getElementById('currency-form');
    const actionSelect = document.getElementById('action-select');
    const amountInput = document.getElementById('amount-input');
    currencyForm.addEventListener('submit', function(event) {
        if (actionSelect.value === 'subtract') {
            amountInput.value = -Math.abs(amountInput.value);
        } else {
            amountInput.value = Math.abs(amountInput.value);
        }
    });
</script>
{% endblock %}
{% endblock %}