{% set layout = userData.role != 'ROLE_DISTRIBUTOR' ? 'base.html.twig' : 'layout-distributors.html.twig' %}
{% extends layout %}
{% block title %}Payment{% endblock %}
{% block stylesheets %} 
	{{ parent() }} 
    <style type="text/css">
        .mit-box{
            background-color: #f8f9fa;
            margin-top: 30px;
            padding-top: 30px !important;
            border-radius: 4px;
            box-shadow: 1px 1px 5px 1px #2a2a2a;
        }body{
            padding-top: 30px !important;
            background: url("{{ asset('/images/background-2.jpg')}}") no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
        }.little-title{
            color: #444;
            font-weight: bold;
            font-size: 20px;
        }.little-sub-title{
            color: #444;
            font-size: 15px;
        }#content_error{
            margin-left: 20px;
            margin-right: 20px;
        }
    </style>
{% endblock %}
{% block body %}     
    <div class="container mit-box">
        <div class="row">
            <div class="col-12 col-md-4 offset-lg-4 offset-md-4 text-center" >            
                <img src="{{asset('/images/novamar_symbol.png') }}" alt="Icon Novamar Insurance" width="50"><br>
                <label class="little-title">Novamar Insurance System</label><br>
                <label class="little-sub-title">Pay Order</label>
            </div>
        </div>
        <div id="contentIframe" class="row">
            <div class="col-12">
                <center>
                    <iframe id="iframe_pay" src="" width="90%" height="700px" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
                </center>
            </div>
        </div>
        <div id="messageContainer" class="row">
            <div class="col-12" style="padding-bottom: 20px;">
                <center>
                    <p id="content_error"></p>
                    <button id="re_use_link" type="button" class="btn btn-novamar btn-lg m-2">Try again</button>
                    <a href="mailto:info@novamar.net"><button id="mail_to" type="button" class="btn btn-novamar btn-lg m-2">info@novamar.net</button></a><br>
                    <a href='/'><button id="back_to_home" type="button" class="btn btn-novamar btn-lg m-2">Back to home</button></a>
                </center>
            </div>
        </div>
    </div>
{% endblock %}
{% block  javascripts %}
<script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
 {# <script type="text/javascript" src="{{ app.asset_path}}/assets/js/complements/SaveProcessDashboard.js?v{{"now"|date("dmYHis")}}"></script> #}
 <script>  
        var executions = 0;
        var attempts = 0;
        var link = "{{params.url_payment}}";
        var reference = "{{params.reference}}";
        var is_terminal = "{{params.is_terminal}}";
        var freeToExit = false;
        var idProcess ="{{params.idProcess}}";
       // let process = new saveProcess();
    	$(function(){
            $("#contentIframe").css("display","none");
            $("#messageContainer").css("display","none");
            $("#mail_to").css("display","none");
            $("#back_to_home").css("display","none");
            $("#re_use_link").css("display","none");      
            window.addEventListener('beforeunload', function (e) {
                if(!freeToExit)
                {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });
            var checkOrder = function(){
                $.ajax({
                    type: "POST",
                    url : `${getUrlApiByEnvironment(ENV)}/validate-payment`,
                    data: JSON.stringify({
                        reference: reference,
                        processId: idProcess
                    })
                }).then(function(resp){
                    if(resp.status == 'success')
                    {
                        $("#paymentLoading").css("display","none");
                        if(resp.response.found)
                        {
                            //On start view
                            if(executions == 0)
                            {
                                attempts = resp.response.attempt;
                                //Si no ha llegado al limite
                                if(attempts < 3)
                                {
                                    //cargar ifram
                                    $('#contentIframe').css("display","block");
                                    $("#iframe_pay").attr("src",link);
                                }else{
                                    //Generar un cambio
                                    attempts = 2;
                                }
                            }
                            
                            //Continuar buscando si no hay cambio
                            if(attempts == resp.response.attempt)
                            {
                                setTimeout(function(){
                                    checkOrder();
                                },5000);
                            }else{
                                //Detecta el cambio y actualiza el intento
                                attempts = resp.response.attempt;

                                //Evalua
                                if(resp.response.approved)
                                {
                                    //Caso positivo
                                    freeToExit = true;
                                    if(is_terminal == 'true')
                                    {
                                        window.location = "/mx/ecommerce/MIT/"+reference;
                                    }else{
                                        dashboardService(
                                        {  "status": 'in-process',
                                            "msg": 1,
                                            "task": "checkout",
                                            "data":{ ...resp.response.creditCardResponse, attempts}
                                        });
                                        //checkout
										 $.ajax({
											url: `${getUrlApiByEnvironment(ENV)}/${API_SERVICE.CHECKOUT}/${reference}`,
											method: 'GET',
										}).fail(function (resp) {
											swalErrorMessage({
											    message: 'an error occurred',
												position:'center',
											});
										}).then(function (resp) {
											sessionStorage.setItem('dataPurchase', JSON.stringify({ "hash" : resp.response.hash, "idProcess" : self.idProcess}));
											window.location.href= `/${resp.response.purchaseUrl}/purchase/${resp.response.id_client}/${resp.response.email}/${resp.response.certificate_number}/${resp.response.product}/${resp.response.authCode}`
										});
                                    }                                
                                }else{
                                    //Caso negativo                                
                                    //Oculta el ifram
                                    $('#contentIframe').css("display","none");
                                    //Desplegar error en este contenedor con boton
                                    $('#messageContainer').css("display","block");
                                    //Si llego al limite
                                    if(attempts >= 3){
                                        dashboardService(
                                        {  "status": 'fail',
                                            "msg": 2,
                                            "task": "validate-payment",
                                            "data": resp.response
                                        } );
                                        //Muestra el mensaje
                                        //Caso positivo
                                        freeToExit = true;
                                        $("#content_error").text("You have tried to pay too many times, Please contact us or go back to home")
                                        $('#mail_to').css("display","block")
                                        $('#back_to_home').css("display","block")
                                        $('#re_use_link').css("display","none")
                                    }else{
                                        //Muestra el error
                                        $("#content_error").html(resp.response.error)
                                        $('#re_use_link').css("display","block")
                                    }
                                }
                            }
                        }else{
                            //Si la referencia no existe
                            freeToExit = true;
                            if(is_terminal == 'true')
                            {
                                window.location = "/mx/ecommerce/MIT/"+reference;
                            }else{
                                window.location = "/";
                            }
                        }
                        executions++;
                    }
                }).fail(function(err){
                    $('#contentIframe').css("display","none");
                    $('#messageContainer').css("display","block");
                    $("#content_error").text("An error occurred while trying to make the payment, please try again later or contact us: ")
                    $('#mail_to').css("display","block");
                    $('#back_to_home').css("display","block");
                    dashboardService(
                    {  "status": 'fail',
                        "msg": 1,
                        "task": "validate-payment",
                        "error": err,
                        "data": reference
                    } );
                });
            };

            var dashboardService = function( data){
                $.ajax({
                method: 'POST',
                url: `${getUrlApiByEnvironment(ENV)}/dashboard-process`,
                data: JSON.stringify({
                        option: 'saveTask',
                        id:     idProcess,
                        task:   data['task'],
                        status: data['status'],
                        message:data['msg'],
                        data:   data['data'],
                        error : data['error'] ?? '',
                    })
                }).fail(function(error){
                        console.log(error)
                }).then(function(resp){
                    
                });
           
            };

            //Start
            if(link != "" && reference != "")
            {
                dashboardService( 
                    {   "status": 'completed',
                        "msg": 1,
                        "task": 'payment-view',
                        "data": {
                                "reference": reference,
                                "link": link
                                }
                    }  );
                checkOrder();
            }else{
                dashboardService(
                    {  "status": 'fail',
                        "msg": 1,
                        "task": 'payment-view',
                        "error": `Invalid entry. link: ${link} or reference: ${reference}`,
                        "data": {
                                "reference": reference,
                                "link": link
                                }
                    } );
                alert("Invalid entry");
                freeToExit = true;
                if(is_terminal == 'true')
                {
                    window.location = "/mx/ecommerce/MIT/start";
                }else{
                   window.location = "/";
                }
            }

            //Try again button event
            $("#re_use_link").click(function(){
                $("#iframe_pay").attr("src", link);
                $('#contentIframe').css("display","block");
                $('#messageContainer').css("display","none");
                checkOrder();
            });
            
        });
    </script>
   
{% endblock %}