{% extends 'base.html.twig' %}

{% block title %}{{ merchant.name }} Payment Page{% endblock %}

{% block stylesheets %}

    {% if pageConfig.tracking_code|default %}{{ pageConfig.tracking_code|raw }}{% endif %}

    <link rel="stylesheet" type="text/css"
          href="https://ecommerce-public.s3.eu-central-1.amazonaws.com/css/payment.css">
    {% if pageConfig.custom_css_file|default(false) %}
        <link rel="stylesheet" type="text/css"
              href="https://ecommerce-public.s3.eu-central-1.amazonaws.com{{ pageConfig.custom_css_file }}">
    {% endif %}

    <style>

        .cvv-align {
            margin: 19px 0 15px 0 !important;
            padding: 11px !important;
        }

        .exp_error {
            display: inline !important;
            list-style-type: none;
        }

        .lds-ring {
            left: 43%;
            top: 39%;
            display: none;
            position: absolute;
            width: 64px;
            height: 64px;
        }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

        .lds-ring-container {
            position: absolute;
            display: none;
            left: 0;
            top: 0;
            background-color: rgba(255, 255, 255, 0.7);
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }

        @keyframes lds-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        input[type="submit"]:disabled {
            pointer-events: none;
            color: rgba(0, 0, 0, .2) !important;
            background: rgba(0, 0, 0, .1) !important;
        }

        .lds-ring div {
            position: absolute;
            box-sizing: border-box;
            display: block;
            width: 51px;
            height: 51px;
            margin: 6px;
            border-radius: 50%;
            border: 6px solid black !important;
            border-color: black transparent transparent transparent !important;
            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        }


        {% if pageConfig.color|default(false) %}

        .lds-ring div {
            border: 6px solid {{pageConfig.color }} !important;
            border-color: {{ pageConfig.color }} transparent transparent transparent !important;
        }

        .resp-tabs-container:hover {
            border-color: {{pageConfig.color }} !important;
        }

        h3 {
            color: {{pageConfig.color }} !important;
        }

        h5 {
            color: {{pageConfig.color }} !important;
        }

        select:hover {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_name:hover {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_pan:hover {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_amount:hover {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_cvv:hover {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_name:focus {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_pan:focus {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_amount:focus {
            border-color: {{pageConfig.color }} !important;
        }

        #pay_cvv:focus {
            border-color: {{pageConfig.color }} !important;
        }

        #privacyPolicy {
            color: {{ pageConfig.color }} !important;
        }

        input[type="submit"] {
            color: {{pageConfig.color }} !important;
        }

        {% endif %}
    </style>

{% endblock %}

{% block body %}
    <div class="content-wrapper">

        <h1>{% if pageConfig.logo|default(false) %}<img
                src="https://ecommerce-public.s3.eu-central-1.amazonaws.com{{ pageConfig.logo|default }}" width="200"
                id="logo">{% else %}{{ app.user.name|default }}{% endif %}</h1>

        <div class="resp-tabs-container">

            <div class="payment-info" style="position: relative;">

                <h3 class="pay-title">{{ 'Card'|trans }}</h3>

                <div class="lds-ring-container">

                    <div class="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>

                </div>

                {{ form_start(form) }}
                <span class="font-sm">{{ form_errors(form) }}</span>


                <div class="tab-for name-on-card">

                    <h5 style="margin: 15px 0 0 0">{{ 'Name_on_Card'|trans }}</h5>
                    {{ form_widget(form.cardholderName,{attr: {class:'pay_name'}}) }}
                    {{ form_errors(form.cardholderName) | striptags | trans }}

                    <h5 style="margin: 15px 0 0 0">{{ 'Card_number'|trans }}</h5>
                    {{ form_widget(form.cardNumber,{attr: {class:'pay_pan'}}) }}
                    {{ form_errors(form.cardNumber) | striptags | trans }}

                </div>

                <div>

                    <div class="tab-form-left user-form exp-date">

                        <h5 style="margin: 15px 0 0 0">{{ 'Expiration'|trans }}</h5>

                        <ul class="date-fields">
                            <li>
                                {{ form_widget(form.cardExpirationMonth, {'attr': {'class': 'text_box'}}) }}
                            </li>
                            <li>
                                {{ form_widget(form.cardExpirationYear, {'attr': {'class': 'text_box'}}) }}
                            </li>
                        </ul>
                        <div class="exp_error">
                            {{ form_errors(form.cardExpirationMonth)| striptags | trans }}
                            {{ form_errors(form.cardExpirationYear) |  striptags | trans }}
                        </div>
                    </div>
                    <div class="tab-form-right user-form cvv">

                        <h5 style="margin: 15px 0 0 0">{{ 'CVV'|trans }}</h5>
                        {{ form_widget(form.cardCvv2,{attr: {class:'pay_cvv'}}) }}
                        {{ form_errors(form.cardCvv2) | striptags | trans }}

                    </div>

                    <div class="clear"></div>
                </div>




                <input type="submit" class="vpos-pay-button" value="{{ 'Save'|trans }}">

                {{ form_widget(form._token) }}
                {{ form_end(form) }}


            </div>

        </div>

    </div>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {

            // Button effects
            $('.vpos-pay-button').on('click', function () {

                if($('#payment_page_card_cardholderName').val() &&
                    $('#payment_page_card_cardNumber').val() &&
                    $('#payment_page_card_cardCvv2').val() &&
                    $('#payment_page_card_cardExpirationMonth').val() &&
                    $('#payment_page_card_cardExpirationYear').val()
                ){
                    $('.lds-ring').css('display', 'inline-block');
                    $('.lds-ring-container').css('display', 'block');
                }


            });
        });
    </script>
{% endblock %}