{% extends 'base.html.twig' %}
{% block title %}Rate Exchange
{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
	{{encore_entry_link_tags('mainCSS')}}
    {{encore_entry_link_tags('dynaTableCSS')}}
    <style>
        .close-card {
            cursor: pointer
        }
        .dynatable-per-page {
            float: left;
        }
        .dynatable-record-count {
            font-weight: bold;
        }
        th a {
            color: black;
        }
        th a:hover {
            color: #2196F3;
            text-decoration: underline;
        }
        .notice-container {
            padding: 20px;
            border-left: 5px solid #ff9800;
            font-size: 18px;
            margin-top: 30px;
        }
         .btn-submit{background:#2bbbad;color:white;}
    </style>
{% endblock %}
{% block body %}
    {{ include('./components/full-loader-container.html.twig') }}
    {{ include("mx/nav_menu.twig",{ option:'rate-exchange'} ) }}
    <main>
        <div class="row">
            <div class="col-sm-12 col-lg-8 offset-lg-2 mt-2">
                <div class="card-panel white p-4">
                    <h4 class="text-center">Exchange Rate</h4>
                    <div class="line orange"></div>
                    Currency From
                    <form
                        id="payment-form">
                        {#<div class="input-field">
                            <input id="fullName" name="fullName" placeholder="Full Name" type="text"> 
                             <label for="customerName">USD Dollars</label>
                        </div> #}
                        <select disabled id="currency_from" name="currency_from">
                            <option value="USD">USD Dollars
                            </option>
                            <option value="MXN">MXN Pesos
                            </option>
                        </select>
                        To
                        <select disabled id="currency_to" name="currency_to">
                            <option value="MXN">MXN Pesos
                            </option>
                            <option value="USD">USD Dollars
                            </option>
                        </select>
                        <div class="input-field">
                            <input class="form-control" disabled id="effective_date" name="effective" placeholder=" " type="date">
                        </div>
                        <div class="input-field">
                            <input id="currency_value" min="0" name="currency_value" placeholder="$00.00" step="0.01" type="number">
                            <label for="currency_value">Currency Value</label>
                            <span id="availablity"></span>
                        </div>
                        <div class="input-field">
                            <input disabled id="source" name="source" placeholder="DOF" type="text" value="DOF">
                            <label for="source">Source</label>
                        </div>
                        <div class="clearfix"></div><br><br>

                        <div class="text-center">
                            <button class="btn btn-submit btn-large" id="submit" type="button">Submit
                                <i class="material-icons right">send</i>
                            </button>
                        </div>
                        <div class="clearfix"></div><br><br>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block javascripts %}
 <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
     {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
    <script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
    <script type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
<script defer>
    $(document).ready(function () {
        var date = new Date();

        var day = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();

        if (month < 10) 
            month = "0" + month;
        


        if (day < 10) 
            day = "0" + day;
        


        var today = year + "-" + month + "-" + day;
        $("#effective_date").attr("value", today);
    });

    $(function () {
        initForm();
        $("#loader-container").hide();

        $("#payment-form").validate({
            rules: {
                "currency_from": "required",
                "currency_to": "required",
                "effective_date": "required",
                "currency_value": "required",
                "source": "required"
            },
            errorClass: 'invalid',
            errorElement: 'span'
        });

        $("#currency_value").change(function () { 
            $.ajax({
                url: `${getUrlApiByEnvironment(ENV)}/date-validation`,
                method: "POST",
                data: JSON.stringify({
                    effective_date: $("#effective_date").val()
                 })
               }).then( function(resp){ 
                    if (resp.status == 'success') {
                        iziToast.error({
								title: 'Cancelled',
								message: 'Ya se introdujo el tipo de cambio!',
								position:'center',
								timeOut: 2000,
							});
                        $("#submit").prop("disabled", true);
                    } else {
                        $("#submit").prop("disabled", false);
                    }
                });
        });

        $("#close-card").on('click', function () {
            var div = $(this).parent().parent();
            div.hide();
        });

        $("#submit").on('click', function (event) {
            event.preventDefault();
            if ($("#payment-form").valid()) {
                var currency_value = $("#currency_value").val();
                $.ajax({
                    url: `${getUrlApiByEnvironment(ENV)}/exchange-rate`,
                    method: 'POST',
                    data: JSON.stringify({
                        currency_from: $("#currency_from").val(),
                        currency_to: $("#currency_to").val(),
                        effective_date: $("#effective_date").val(),
                        currency_value: parseFloat(currency_value).toFixed(4).toString(),
                        source: $("#source").val()
                    })
                }).fail(function (erro) {
                    console.log(erro)
                    alert('error');
                    $("#loader-container").hide();
                }).done( function(resp){
                    console.log(resp);
                });
               
                 setTimeout(function () {
                        console.log('success');
                        window.location = '/mx/old-exchanges';
                        
                }, 10);
            }
           
        });
    })
</script>{% endblock %}