{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{% block head_javascript %}
    {{ parent() }}
    <script
            src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
{% endblock head_javascript %}

{% block configured_stylesheets %}
    {{ parent() }}
    <style>
        .code{
            background-color: #000000;
            color: #ffffff !important;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            font-family: "Courier New", Courier, monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
        }
        code{
            color: #ffffff !important;
        }

        .btn{
            height: 38px;
            width: 38px;
        }
        .human{
            background-color: #a6a6a6;
            color: #ffffff;
            float: right;
            padding: 10px;
            border-radius: 5px;
        }
        .bot{
            background-color: #e1e1e1;
            float: left;
            padding: 10px;
            border-radius: 5px;
        }
        .input-group-text{
            height: 38px;
        }
    </style>
{% endblock %}

{% block page_title 'Calculadora' %}

{% block page_content %}
    {{ parent() }}
    <div class="container" >
        <div class="row">
        <div class="col-md-4 col-12" >
            {{ form_start(form) }}
            {{ form_widget(form) }}
            {{ form_end(form) }}
            <input type="hidden" id="total">
        </div>
        </div>
    </div>

    <script>
        const totalConvertir = $("#calculator_dollar_total_convertir");
        const dollarValue = $("#calculator_dollar_dollar");
        const dollarResult = $("#calculator_dollar_result");
        const commissionRate = $("#calculator_dollar_commissionRate");
        const commissionAmount = $("#calculator_dollar_commission_amount");

        const loading = $("#loading");
        const spinner = $('#spinner');


        $(()=>{
            totalConvertir.on('change',calcularDollar)
            commissionRate.on('change',calcularCommision)
            dollarValue.on('change',saveDollar)
        })

        const calcularDollar = ()=>{
            let value = (parseFloat(totalConvertir.val())  * parseFloat(dollarValue.val()));
            $("#total").val(value);
            dollarResult.val( value.toLocaleString('es-AR', {
                style: 'currency',
                currency: 'ARS'
            }));
        }
        const calcularCommision = ()=>{
            let value =  parseFloat($("#total").val())  * parseFloat(commissionRate.val()) / 100 ;
            commissionAmount.val(value.toLocaleString('es-AR', {
                style: 'currency',
                currency: 'ARS'
            }));
        }
        const saveDollar = ()=>{
            let dollar = dollarValue.val();
            $.post('api/v1/dollar/save',{
                dollarValue : dollar
                },(d)=>{
                console.log("save", d)
                }
            )
        }
    </script>
{% endblock %}