{% extends 'base.html.twig' %}
{% block title %}Ecommercer - Terminal{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{encore_entry_link_tags('mainCSS')}}
    <style>
        .close-card{cursor: pointer}
        .browser-default{margin-bottom: 10px;}
        input[type=text]:not(.browser-default){margin-bottom: 0px;}
        .btn-submit{background:#2bbbad;color:white;}
    </style>
{% endblock %}
{% block body %}
    {{ include('./components/full-loader-container.html.twig') }}
    {{ include("mx/nav_menu.twig",{ option:'ecommerce_terminal_mint'} ) }}
    <main>
        <div class="row">
            {% if cardResponse != '' %}
                <div class="col-sm-12 col-lg-8 offset-lg-2">
                    <div class="card-panel {% if cardResponse == 'approved' %} teal {% else %} red darken-1 {% endif %} white-text center-align">
                        <div id="close-card" class="right close-card">
                            <i class="material-icons">close</i>
                        </div>
                        {{ cardResponse|capitalize}}
                    </div>
                </div>
            {% else %}
                <div class="col-sm-12 col-lg-8 offset-lg-2">
                    <div class="card-panel white mt-2 p-2">
                        <h4 class="text-center p-2">Terminal</h4>
                        <div class="line orange"></div>
                        <form id="payment-form" class="row">
                            <div class="col-12">
                                <label for="policyNumber">Policy / Certificate</label>
                                <input type="text" id="policyNumber" name="form[policyNumber]">
                            </div>
                            <div class="col-12" style="margin-top:13px;">
                                <label for="coverage">Coverage</label>
                                <input type="text" id="plan" name="form[plan]">
                            </div>
                            <div class="col-12" style="margin-top:13px;">
                                <label for="currency">Currency</label>
                                <select name="form[currency]" id="currency" class="browser-default">
                                    <option value="Dollars">Dollars</option>
                                    <option value="Pesos">Pesos</option>
                                </select>
                            </div>
                            <div class="col-12" style="margin-top:13px;">
                                <label for="fullName">Insured Name</label>
                                <input type="text" id="fullName" name="form[fullName]" placeholder="">
                            </div>
                            <div class="col-12" style="margin-top:13px;">
                                <label for="email">Insured Email</label>
                                <input type="text" id="email" name="form[email]" placeholder="">
                            </div>
                            <div class="col l6 m6 s12" style="margin-top:13px;">
                                <label for="product">Product</label>
                                <select name="form[product]" id="product" class="browser-default">
                                    {% if email == 'programmer2@novamar.net' or email == 'yei@novamar.net' or email == 'programmer@novamar.net'%}
                                    <option value="">-Select-</option>
                                    <option value="Boat Liability">Boat Liability</option>
                                    <option value="Golf Cart" disabled>Golf Cart</option>
                                    <option value="Homeowners">Homeowners</option>
                                    <option value="Medical Tourism">Medical Tourism</option>
                                    <option value="Tourist Auto" disabled>Tourist Auto</option>
                                    {% else %}
                                    <option value="">-Select-</option>
                                    <option value="Homeowners">Homeowners</option>
                                    {% endif %}
                                </select>
                            </div>
                            <div class="col-md-6 col-sm-12" style="margin-top:13px;">
                                <label for="company">Company</label>
                                <select name="form[company]" id="company" class="browser-default">
                                    {% if email == 'programmer2@novamar.net' or email == 'yei@novamar.net' or email == 'programmer@novamar.net'%}
                                    <option value="">-Select-</option>
                                    <option value="GMX">GMX</option>
                                    <option value="AIG">AIG</option>
                                    <option value="CHUBB">CHUBB</option>
                                    <option value="ZURICH">ZURICH</option>
                                    {% else %}
                                    <option value="">-Select-</option>
                                    <option value="GMX">GMX</option>
                                    {% endif %}
                                </select>
                            </div>
                            <div class="col-12" style="margin-top:13px;">
                                <label for="price">Amount</label>
                                <input type="number" id="price" name="form[price]" placeholder="$00.00" min="0" step="0.01">
                            </div>
                            <div class="col-12 text-center" style="margin-top:13px;">
                                <button type="button" id="submit" class="btn btn-submit btn-large">Submit <i class="material-icons right">send</i></button>
                            </div>
                            <div class="clearfix"></div>
                            <input type="hidden" name="form[beforePayDataReference]" id="form_beforePayDataReference" value="">
                        </form>
                    </div>
                </div>
            {% endif %}
        </div>
    </main>
    {{ include("components/ecommerce-mit.twig") }}
{% 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 type="text/javascript" src="{{asset('js/complements/mitPay.js')}}" defer></script>
    <script defer>
    var cardResponse = "{{cardResponse}}";
    $(function() {
        //Al regresar recargar despues de 5 segundos
        if (cardResponse != '') {
            setTimeout(function() {
                window.location = "/mx/ecommerce/MIT/start"
            }, 5000);
        }
        //Indicar en el formulario de mit que es mit para uso de terminal
        $("#form_is_terminal").val("true");

        //Inicializa el formulatio
        initForm();
        $("#loader-container").hide();
        $("#payment-form").validate({
            rules: {
                "form[policyNumber]": "required",
                "form[currency]": "required",
                "form[fullName]": "required",
                "form[email]": "required",
                "form[product]": "required",
                "form[company]": "required",
                "form[price]": "required"
            },
            errorClass: 'invalid',
            errorElement: 'span',
        });

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

        $("#submit").on('click', function(){
            if ($("#payment-form").valid())
            {
                $("#loader-container").show();
                $.ajax({
                    url: `${getUrlApiByEnvironment(ENV)}/${API_SERVICE.POLICY_ORDER}`,
                    method: 'POST',
                    data: JSON.stringify({
                        currency: $("#currency").val(),
                        firstName: $("#fullName").val().trim(),
                        lastName: '',
                        product: $("#product").val(),
                        price: parseFloat($("#price").val().trim()).toFixed(2).toString(),
                        id_client: 'xxxx',
                    })
                }).fail(function(error) {
                console.log(error)
                    iziToast.error({
							title: 'Error',
							message: 'Error generating the order number!',
							position:'center',
							timeOut: 2000,
					});
                    $("#loader-container").hide();
                }).then(function({response}) {
                    $("#form_beforePayDataReference").val(response.data.orderId);
                    $.ajax({
                        type: 'POST',
                        url : `${getUrlApiByEnvironment(ENV)}/${API_SERVICE.SAVE_SESSION}`,
                        data:  parameterConversionForApi($("#payment-form").serializeArray())
                    }).then(function(resp) {
                        const idProcess = resp.response.process.id_process
                        let objPay = new MitPay();
                        objPay.setOrderId($("#form_beforePayDataReference").val());
                        objPay.setMount($("#price").val());
                        objPay.setCurrency(($("#currency").val() == 'Dollars' ? 'USD' : 'MXN'));
                        objPay.setEmail($("#email").val())
                        objPay.setProductName($("#product").val())
                        objPay.setProcessId(idProcess) 
                        objPay.setPlanName($("#plan").val())
                        objPay.pay(function(link) {
                            $("#form_reference_mit").val($("#form_beforePayDataReference").val());
                            $("#form_url_payment_mit").val(link);
                            $("#form_idProcess").val(idProcess);
                            $("#form_mit").submit();
                        }, function(error) {
                            toastr.error(error);
                            $("#loader-container").hide();
                        });
                    }, function(err) {
                        console.log(err)
                          iziToast.error({
								title: 'Error',
								message: 'Error pre-saving the information!',
								position:'center',
								timeOut: 2000,
					    });
                        $("#loader-container").hide();
                    });
                });
            }
        });
    });
</script>
{% endblock %}