{% extends "layout_public.html.twig" %}
{% set loader_nr = request.loader | default("8") %}
{% set loader_url = ('img/assets/loaders/loader'~loader_nr~'.gif') %}
{% block meta_title %}{{ 'Order'|trans }}{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12">
        <div class="card border-0" id="orderbutton" style="margin-bottom: 0">
            <div class="card-body p-1">
                <div id="orderManager" class="accordion">

                    {{ include('mod_orderbutton_choose_product.html.twig') }}

                    {{ include('mod_orderbutton_product_configuration.html.twig') }}

                    {% if not client %}
                        {{ include('mod_orderbutton_client.html.twig') }}
                    {% endif %}

                    {{ include('mod_orderbutton_checkout.html.twig') }}

                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#payment-html" aria-expanded="false" aria-controls="payment-html">
                                <svg class="svg-icon me-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path
                                        d="M20,8H4V6H20M20,18H4V12H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"/>
                                </svg>
                                {{ 'Payment'|trans }}
                            </button>
                        </h2>
                        <div id="payment-html" class="accordion-collapse collapse" data-bs-parent="#orderManager">
                            <div class="accordion-body">
                                <div class="accordion-inner" id="payment-html-inner"></div>
                            </div>
                        </div>
                    </div>

                </div>
                {% if guest.extension_is_on({"mod":'branding'}) %}
                    <div class="d-flex justify-content-center small text-muted pt-3 pb-2">
                        <span>{{ 'Powered by'|trans }}</span>&nbsp;<a href="https://fossbilling.org"
                                                                      title="Billing Software" target="_blank">FOSSBilling
                            Community</a>
                    </div>
                {% endif %}

            </div>
        </div>
    </div>
</div>
<div class="loading"
     style="display: none; background: rgba(0,0,0,.5) no-repeat; width:100%; height:100%; position:fixed; top:0; left:0; z-index:999;">
    <img src="{{ loader_url | mod_asset_url('orderbutton') }}"
         style="display: block; margin-left: auto; margin-right: auto;position: relative; top : 50%">
</div>
{% endblock %}
{% block js %}
<script>
    $(function () {
        $('.accordion-body').on('shown', function () {
            $('#popup-iframe').height($('body').height());
        });

        $('#show-promo-field').on('click', function (event) {
            $('#apply-promo').show();
            $(this).hide();
            $('#promocode').focus();
        });

        $('.register-login a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

    });

    function onOrderCheckout(result){
        if (result.invoice_hash) {
            bb.post('guest/invoice/payment', {
            hash: result.invoice_hash,
            gateway_id: result.gateway_id,
            auto_redirect: true
            }, function (r) {
                let checkoutEl = document.getElementById('checkout');
                let paymentHtmlEl = document.getElementById('payment-html');
                if (r.iframe) {
                    $('#payment-html-inner').html(r.result);
                    bootstrap.Collapse.getOrCreateInstance(checkoutEl).hide();
                    $('#checkout').remove();
                    bootstrap.Collapse.getOrCreateInstance(paymentHtmlEl).show();
                } else {
                    var link = '{{ "invoice/banklink"|link }}' + '/' + result.invoice_hash + '/' + result.gateway_id;
                    $('#payment-html-inner').html('<a href="' + link + '" target="_parent" id="redirect-to-gateway">Redirect to payment gateway</a>');
                    bootstrap.Collapse.getOrCreateInstance(checkoutEl).hide();
                    $('#checkout-inner').remove();
                    bootstrap.Collapse.getOrCreateInstance(paymentHtmlEl).show();
                    $('#redirect-to-gateway')[0].click();
                }
            });
        } else {
            window.top.location.href = ('{{ "order/service/manage"|link }}' + '/' + result.order_id);
        }
    }

    function onLogin(result){
        FOSSBilling.message("{{ 'You logged in successfully'|trans }}");
        let registerEl = document.getElementById('register');
        new bootstrap.Collapse('#register').hide();
        document.querySelector("#checkoutButton").hidden = false;
        document.querySelector("#loginMessage").hidden = true;
        setTimeout(() => {
            registerEl.parentElement.remove();
            new bootstrap.Collapse('#checkout').show();
        }, 500);
    }

    function onAccountCreate(result){
        //login after registration
        var login_details = {
            email: $('#reg-email').val(),
            password: $('#reg-password').val()
        };
        bb.post(
            'guest/client/login',
            login_details,
            function (result) {
                FOSSBilling.message("{{ 'You logged in successfully'|trans }}");
                let registerEl = document.getElementById('register');
                new bootstrap.Collapse('#register').hide();
                document.querySelector("#checkoutButton").hidden = false;
                document.querySelector("#loginMessage").hidden = true;
                setTimeout(() => {
                    registerEl.parentElement.remove();
                    new bootstrap.Collapse('#checkout').show();
                    }, 500);
            }
        );
    }
</script>
{% endblock %}
