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

{% block title %}Création de votre projet{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/plugins/unitegallery/css/unitegallery.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    <section class="g-bg-izibrick-light-v5">
        <div class="container g-py-100">
            <div class="row justify-content-center">
                <div class="col-sm-12 col-lg-10">
                    <div class="u-shadow-v21 g-bg-white rounded g-py-40 g-px-30">
                        {% include 'bo/order/wizard.html.twig' with {'step': step} %}

                        <div id="nav-1-2-default-hor-left-big-icons" class="tab-content">
                            <div class="tab-pane fade show active" id="nav-1-2-default-hor-left-big-icons--1"role="tabpanel">
                                <div id="wizard-tab1" class="tab-pane">

                                    <div class="media mt20 g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-gray-light-v5 g-rounded-4 g-transition-0_3 g-pa-20">
                                        <div class="media-body">
                                            <blockquote class="lead g-mb-15">
                                                {% if free == true or trialDays > 0 %}
                                                    {{ user.firstname | capitalize }}, afin de valider votre commande, vous devez cliquer sur le bouton Valider.
                                                {% else %}
                                                    {{ user.firstname | capitalize }}, afin de valider votre commande, vous devez effectuer le paiement.<br/>
                                                    A titre d'information, izibrick ne stocke pas les données bancaires et sont traitées directement par notre partenaire bancaire (Stripe : https://stripe.com/fr).
                                                {% endif %}
                                            </blockquote>
                                        </div>
                                    </div>

                                    <div class="mt50">


                                    {% if trialDays <= 0 %}
                                        <section class="container">
                                                <h3>Votre commande :</h3>
                                                <div class="table-responsive">
                                                    <table class="table table-striped">
                                                        <thead class="g-color-white g-bg-primary text-center text-uppercase">
                                                        <tr>
                                                            <th class="g-brd-top-none g-font-weight-500 text-left g-py-15">Description</th>
                                                            <th class="g-brd-top-none g-font-weight-500 g-py-15">Quantité</th>
                                                            <th class="g-brd-top-none g-font-weight-500 g-py-15">Prix unitaire HT</th>
                                                            <th class="g-brd-top-none g-font-weight-500 g-py-15">Total</th>
                                                        </tr>
                                                        </thead>

                                                        <tbody class="text-center">
                                                        <tr>
                                                            <td class="g-max-width-300 text-left g-py-15">
                                                                <h4 class="g-color-gray-dark-v4 g-font-weight-700 g-font-size-16">{{ invoice.title }}</h4>
                                                                <p class="g-color-gray-dark-v5 g-font-size-12 mb-0">{{ invoice.description }}</p>
                                                            </td>
                                                            <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15">1</td>

                                                            {% if free == true %}
                                                                <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15">0 €</td>
                                                                <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15">0 €</td>
                                                            {% else %}
                                                                <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15 text-right">{{ invoice.totalAmount | number_format(2,',',' ') }} €</td>
                                                                <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15 text-right">{{ invoice.totalAmount | number_format(2,',',' ') }} €</td>
                                                            {% endif %}
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2">
                                                                &nbsp;
                                                            </td>
                                                            <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15 text-right">TVA 20% :<br/>Total :</td>
                                                            <td class="g-color-gray-dark-v4 g-font-weight-600 g-py-15 text-right">
                                                                {% if free == true %}
                                                                    <span class="d-inline-block g-min-width-65">0 €<br/>0 €</span>
                                                                {% else %}
                                                                    <span class="d-inline-block g-min-width-65">{{ (invoice.totalAmount * 20 / 100)  | number_format(2,',',' ')}} €<br/>{{ (invoice.totalAmount  + (invoice.totalAmount * 20 / 100)) | number_format(2,',',' ') }} € TTC</span>
                                                                {% endif %}
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                        </section>
                                        <hr/>
                                    {% endif %}

                                        <section class="container">
                                            {% if free == true or trialDays > 0 %}
                                                {% if trialDays > 0 %}
                                                    <h5>Profitez dès maintenant de votre offre d'essai ({{ trialDays }} jours).</h5>
                                                {% endif %}
                                                <div class="col-sm-12 form-group text-right mt20">
                                                    <a href="{{ path('order_valid', {'userId':user.id,'siteId':site.id}) }}" class="btn btn-blue btn-lg">Continuer</a>
                                                </div>
                                            {% else %}
                                                <h3>Votre paiement :</h3>
                                                <form action="/order/{{ site.id }}/{{ user.id }}/payment" method="post" id="payment-form">
                                                    <div class="outcome">
                                                        <div class="error"></div>
                                                        <div class="success">
                                                            <!--Success! Your Stripe token is <span class="token"></span>-->
                                                            <span class="token">Chargement en cours ...</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group g-mb-20">
                                                        <label class="g-mb-10">Titulaire du compte</label>
                                                        <div class="input-group g-brd-primary--focus">
                                                            <input id="inputGroup1_3" class="form-control form-control-md g-brd-right-none rounded-0" required name="name" type="text" placeholder="Titulaire du compte">
                                                            <div class="input-group-append">
                                                                <span class="input-group-text rounded-0 g-color-gray-dark-v5"><i class="icon-user"></i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group g-mb-20">
                                                        <label class="g-mb-10">Carte bancaire</label>
                                                        <div class="input-group g-brd-primary--focus">
                                                            <div id="card-element" class="field"></div>
                                                        </div>
                                                    </div>
                                                    <input id="token" name="tokenId" type="hidden" value="">
                                                    <div class="col-sm-12 form-group text-right mt20">
                                                        <button type="submit" class="btn btn-blue btn-lg">Payer</button>
                                                    </div>
                                                </form>
                                            {% endif %}
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}

    <!-- JS Implementing Plugins -->
    <script  src="{{ asset('assets/bo/js/components/jquery.maskedinput/src/jquery.maskedinput.js') }}"></script>

    <!-- JS Unify -->
    <script  src="{{ asset('assets/bo/js/components/hs.masked-input.js') }}"></script>

    <!-- JS Plugins Init. -->
    <script>
        $(document).on('ready', function () {
            // initialization of forms
            $.HSCore.components.HSMaskedInput.init('[data-mask]');
        });
    </script>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        var stripe = Stripe('{{ stripeKey }}');
        var elements = stripe.elements({
            fonts: [
                {
                    family: 'Open Sans',
                    weight: 400,
                    src: 'local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2")',
                    unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
                },
            ]
        });

        var card = elements.create('card', {
            hidePostalCode: true,
            style: {
                base: {
                    iconColor: '#F99A52',
                    color: '#32315E',
                    lineHeight: '48px',
                    fontWeight: 400,
                    fontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif',
                    fontSize: '15px',

                    '::placeholder': {
                        color: '#25476a',
                    }
                },
            }
        });
        card.mount('#card-element');

        function setOutcome(result) {
            var successElement = document.querySelector('.success');
            var errorElement = document.querySelector('.error');
            successElement.classList.remove('visible');
            errorElement.classList.remove('visible');

            if (result.token) {
                // Use the token to create a charge or a customer
                // https://stripe.com/docs/charges
                //successElement.querySelector('.token').textContent = result.token.id;
                successElement.classList.add('visible');
                $('input[name="tokenId"]').val(result.token.id);
                document.querySelector('form').submit();
            } else if (result.error) {
                errorElement.textContent = result.error.message;
                errorElement.classList.add('visible');
            }
        }

        card.on('change', function(event) {
            setOutcome(event);
        });

        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            var form = document.querySelector('form');
            var extraDetails = {
                name: form.querySelector('input[name=name]').value,
                //address_zip: form.querySelector('input[name=address-zip]').value
            };
            stripe.createToken(card, extraDetails).then(setOutcome);
        });

    </script>

    <style type="text/css">

        .field {
            background: white;
            box-sizing: border-box;
            font-weight: 400;
            border: 1px solid #ccc;
            color: #ccc;
            outline: none;
            flex: 1;
            height: 48px;
            line-height: 48px;
            padding: 0 20px;
            cursor: text;
            border-radius: 0px;
        }

        .field::-webkit-input-placeholder { color: #25476a; }
        .field::-moz-placeholder { color: #25476a; }

        .field:focus,
        .field.StripeElement--focus {
            border-color: #ccc;
        }


        .outcome {
            float: left;
            width: 100%;
            padding-top: 8px;
            min-height: 20px;
            text-align: center;
        }

        .success, .error {
            display: none;
            font-size: 13px;
        }

        .success.visible, .error.visible {
            display: inline;
        }

        .error {
            color: #E4584C;
        }

        .success {
            color: #F8B563;
        }

        .success .token {
            font-weight: 500;
            font-size: 13px;
        }

    </style>

{% endblock %}