{% extends '__layout__.html' %}
{% block title %}Create Offer{% endblock %}
{% block head %}
<style>
    .text-secondary {
        color: rgb(199, 199, 199) !important;
    }
    .text-robux {
        color: rgb(26, 212, 103) !important;
        font-weight: 600;
    }
    .bg-dark {
        background-color: rgb(30,30,30) !important;
    }
    .form-control:disabled ~ label {
        color: --bs-secondary-bg;
    }
</style>
{% endblock %}
{% block content %}
<div class="container position-relative" style="min-height: 100vh;margin-top: 200px;max-width: 900px;">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div>
        {% for category, message in messages %}
            {% if category == 'error': %}
            <div class="alert border p-2 text-center alert-danger border-danger">
                {{ message }}
            </div>
            {% endif %}
            {% if category == 'success': %}
            <div class="alert border p-2 text-center alert-success border-success">
                {{ message }}
            </div>
            {% endif %}
        {% endfor %}
        </div>
        {% endif %}
    {% endwith %}
    <div class="row">
        <div class="col-8">
            <form method="post">
                <div class="d-flex align-items-center mb-1">
                    <div class="border-top flex-fill me-2"></div>
                    <h5 class="text-secondary">You are offering</h5>
                    <div class="border-top flex-fill ms-2"></div>
                </div>
                <div class="d-flex">
                    <div class="form-floating">
                        <select class="form-control" id="offer-currency-type" name="offer-currency-type" style="min-width: 100px;">
                            <option value="0">Robux</option>
                            <option value="1">Tickets</option>
                        </select>
                        <label for="offer-currency-type">Currency</label>
                    </div>
                    <div class="form-floating ms-2 flex-fill">
                        <input type="number" class="form-control" id="offer-currency-amount" name="offer-currency-amount" placeholder="0" value="0">
                        <label for="offer-currency-amount">Amount</label>
                    </div> 
                </div>
                <div class="d-flex align-items-center mt-3 mb-1">
                    <div class="border-top flex-fill me-2"></div>
                    <h5 class="text-secondary">In exchange for</h5>
                    <div class="border-top flex-fill ms-2"></div>
                </div>
                <div class="d-flex">
                    <div class="form-floating">
                        <select class="form-control" id="exchange-currency-type" name="exchange-currency-type" style="min-width: 100px;" disabled>
                            <option value="0">Robux</option>
                            <option value="1" selected>Tickets</option>
                        </select>
                        <label for="exchange-currency-type disabled">Currency</label>
                    </div>
                    <div class="form-floating ms-2 flex-fill">
                        <input type="number" class="form-control" id="exchange-currency-amount" name="exchange-currency-amount" placeholder="0" value="0">
                        <label for="exchange-currency-amount">Amount</label>
                    </div>
                </div>
                <p class="m-0 mt-2 text-secondary">Robux to Tix Ratio: <span class="fw-bold text-white" id="robux-to-tix-ratio">0:0</span></p>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="submit" class="btn btn-primary btn-sm mt-3 w-100" id="submit-offer">Create Offer</button>
            </form>
        </div>
        <div class="col-4 border-start">
            <a class="text-decoration-none w-100 text-end" style="font-size: 12px;" href="/currency-exchange/">Return to Currency Exchange</a>
            <h3 class="w-100">New Exchange Offer</h3>
            <p class="text-secondary m-0 ms-2">You can create an offer to be placed onto the currency exchange system, this will allow other users to trade for example Robux to Tickets or vice versa.</p>
            
            <p class="text-secondary m-0 mt-2 ms-2">Note: The minimum for Robux to Tix is 1:2 while the maximum is 1:20</p>
        </div>
    </div>
</div>
<div class="position-absolute w-100 h-100" id="transparent-background-top" style="top: 0;left: 0;background-color: rgba(0,0,0,0.5);display: none;"></div>
<script>
    const OfferCurrencyTypeSelect = document.getElementById('offer-currency-type');
    const ExchangeCurrencyTypeSelect = document.getElementById('exchange-currency-type');

    OfferCurrencyTypeSelect.addEventListener('change', () => {
        if (OfferCurrencyTypeSelect.value == 0) {
            ExchangeCurrencyTypeSelect.value = 1;
        } else {
            ExchangeCurrencyTypeSelect.value = 0;
        }
        UpdateRatio();
    });

    const OfferCurrencyAmountInput = document.getElementById('offer-currency-amount');
    const ExchangeCurrencyAmountInput = document.getElementById('exchange-currency-amount');
    const RobuxToTixRatio = document.getElementById('robux-to-tix-ratio');
    const SubmitButton = document.getElementById('submit-offer');
    const TransparentBackgroundTop = document.getElementById('transparent-background-top');

    const DisableButton = () => {
        if ( SubmitButton.disabled ) return;

        SubmitButton.disabled = true;
        SubmitButton.classList.add('disabled');
    }
    const EnableButton = () => {
        if ( !SubmitButton.disabled ) return;

        SubmitButton.disabled = false;
        SubmitButton.classList.remove('disabled');
    }

    const UpdateRatio = () => {
        if (OfferCurrencyTypeSelect.value == 0) {
            var ratio = ExchangeCurrencyAmountInput.value / OfferCurrencyAmountInput.value;
            // Round to 3 decimal places
            ratio = Math.round(ratio * 1000) / 1000;
            RobuxToTixRatio.innerText = `1:${ratio}`;

            if (ratio < 1 || ratio > 50) {
                DisableButton();
            } else {
                EnableButton();
            }

        } else {
            var ratio = ExchangeCurrencyAmountInput.value / OfferCurrencyAmountInput.value;
            // Round to 3 decimal places
            ratio = Math.round(ratio * 1000) / 1000;
            RobuxToTixRatio.innerText = `${ratio}:1`;

            var ActualRatio = OfferCurrencyAmountInput.value / ExchangeCurrencyAmountInput.value;

            if ( ActualRatio < 1 || ActualRatio > 50 ) {
                DisableButton();
            } else {
                EnableButton();
            }
        }
    }

    SubmitButton.addEventListener('click', () => {
        TransparentBackgroundTop.style.display = 'block';
    })

    OfferCurrencyAmountInput.addEventListener('input', () => {
        UpdateRatio();
    });

    ExchangeCurrencyAmountInput.addEventListener('input', () => {
        UpdateRatio();
    });
    DisableButton()
</script>
{% endblock %}