{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ 'Order Button settings'|trans }}{% endblock %}

{% set active_menu = 'system' %}


{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home"/>
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Order Button settings'|trans }}</li>
    </ul>
{% endblock %}

{% block content %}
    {% set params = admin.extension_config_get({"ext":"mod_orderbutton"}) %}
    <div class="card-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#tab-index"
                   data-bs-toggle="tab">{{ 'Order window settings'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-popup" data-bs-toggle="tab">{{ 'Advanced settings'|trans }}</a>
            </li>
        </ul>

        <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form"
              data-api-reload="Settings updated">
            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
            <input type="hidden" name="ext" value="mod_orderbutton">
            <div class="card">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                        <div class="card-header border-0">
                            <div>
                                <h3 class="card-title">{{ 'Order popup settings'|trans }}</h3>
                                <p class="card-subtitle">{{ 'Configure how your popup window will look like'|trans }}</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <label class="col-md-3 form-label">{{ 'Theme color'|trans }}</label>
                                <div class="col-md-6">
                                    <select class="form-select" name="theme_color" id="theme_color">
                                        <option value="green" {% if params.theme_color == 'green' %}selected{% endif %}>{{ 'Green'|trans }}</option>
                                        <option value="red" {% if params.theme_color == 'red' %}selected{% endif %}>{{ 'Red'|trans }}</option>
                                        <option value="blue" {% if params.theme_color == 'blue' %}selected{% endif %}>{{ 'Blue'|trans }}</option>
                                        <option value="dark" {% if params.theme_color == 'dark' %}selected{% endif %}>{{ 'Dark'|trans }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary"
                                   onclick="window.onbeforeunload = null;">
                        </div>
                    </div>
                </div>

                <div class="tab-content">
                    <div class="tab-pane fade" id="tab-popup" role="tabpanel">
                        <div class="card-header border-0">
                            <div>
                                <h3 class="card-title">{{ 'Advanced settings'|trans }}</h3>
                                <p class="card-subtitle">{{ 'Configure how your popup window will look like'|trans }}</p>
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="row mb-3">
                                <label class="col-sm-4 col-md-3 col-form-label">{{ 'Sizing'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <div class="row mb-2">
                                        <div class="col">
                                            <label class="col-form-label" for="popup_width">{{ 'Width'|trans }}</label>
                                            <div class="input-group mb-2">
                                                <input class="form-control" type="text" name="popup_width" id="popup_width" value="{{ params.popup_width | default(600) }}" placeholder="600">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <label class="col-form-label" for="border-radius">{{ 'Border radius'|trans }}</label>
                                            <div class="input-group mb-2">
                                                <input class="form-control" type="text" name="border_radius" value="{{ params.border_radius | default('0') }}" id="border-radius">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-4 col-md-3 col-form-label">{{ 'Background'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <div class="row mb-2">
                                        <div class="col">
                                            <label class="col-form-label" for="coloris-picker">{{ 'Color'|trans }}</label>
                                            <div>
                                                <input type="text" class="form-control" name="background_color"
                                                       id="coloris-picker" value="{{ params.background_color | default('#000000') }}">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <label class="col-form-label" for="background_opacity">{{ 'Opacity'|trans }}</label>
                                            <div class="input-group mb-2">
                                                <input type="text" class="form-control" name="background_opacity"
                                                       id="background_opacity" value="{{ params.background_opacity | default(50) }}">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-4 col-md-3 col-form-label">{{ 'Loader (while content of popup is being loaded)'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <div class="d-flex flex-column gap-2">
                                        {% for i in range(1, 9) %}
                                            {% set loader_link = 'img/assets/loaders/loader'~i~'.gif' %}
                                            <label class="form-selectgroup-item flex-fill">
                                                <input type="radio" name="loader" id="loader{{ i }}" value="{{ i }}" {% if params.loader == i %}checked{% endif %} class="form-selectgroup-input">
                                                <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                    <div class="me-3">
                                                        <span class="form-selectgroup-check"></span>
                                                    </div>
                                                    <div>
                                                        <span>loader{{ i }}</span>
                                                        <img class="ms-2" src="{{ loader_link | mod_asset_url('orderbutton') }}"/>
                                                    </div>
                                                </div>
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3 mt-4">
                                <label class="col-sm-4 col-md-3 form-label" for="background-close">{{ 'Close (ESC key by default)'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" id="background-close" type="checkbox" name="background_close" {% if params.background_close %}checked{% endif %}>
                                        <span class="form-check-label">{{ 'Click on background closes popup'|trans }}</span>
                                    </label>
                                </div>
                            </div>

                            {% if guest.extension_is_on({"mod":"formbuilder"}) %}
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-md-3 form-label" for="show-custom-form-values">{{ 'Show values of custom form before checkout'|trans }}</label>
                                    <div class="col-sm-7 col-md-6">
                                        <label class="form-check form-switch">
                                            <input class="form-check-input" id="show-custom-form-values" type="checkbox" name="show_custom_form_values" {% if params.show_custom_form_values %}checked{% endif %}>
                                            <span class="form-check-label">{{ 'User input will be shown before checkout for custom form'|trans }}</span>
                                        </label>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary" onclick="window.onbeforeunload = null;">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title">{{ 'Order Button code'|trans }}</h3>
        </div>
        <form class="">
            <div class="card-body">
                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                <div class="row mb-3">
                    <div class="col">
                        <div class="row align-items-center">
                            <div class="col-sm-auto d-flex align-items-center mb-2">
                                <label>{{ 'Clicking on an HTML element with the classname or ID'|trans }}</label>
                            </div>
                            <div class="col-5 col-sm-auto d-flex align-items-center mb-2">
                                <input class="form-control" type="text" name="bind_selector" id="bind_selector" value="{{ params.bind_selector | default('.order-button') }}" placeholder=".order-button">
                            </div>
                            <div class="col-7 col-sm-auto d-flex align-items-center mb-2">
                                <label>{{ 'will open a popup window for'|trans }}</label>
                            </div>
                            <div class="col-8 col-sm-2 d-flex align-items-center mb-2">
                                {{ mf.selectbox('product_id', admin.product_get_pairs, request.product_id, 0, 'All products'|trans) }}
                            </div>
                            <div class="col-4 col-sm-auto d-flex align-items-center mb-2">
                                <label>{{ 'symbols'|trans }}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        <div class="alert alert-info" role="alert">
                            <h4 class="alert-title">{{ 'IMPORTANT'|trans }}</h4>
                            <div class="text-muted" id="button-info">
                                <span class="d-block mb-2">{{ 'You need to add ID (if you want to use it for one html element) or class (if you want to use it for multiple elements) in order for it to work'|trans }}</span>
                                <div id="button-code-info">
                                    <span class="d-block mb-2">{{ 'Add order-button class to your elements which must call popup. For example:'|trans }}</span>
                                    <div class="col">
                                        <div class="input-group input-group-flat">
                                            <textarea id="html-code" rows="1" class="form-control" onclick="$(this).trigger('select')">&lt;button type=&quot;button&quot;&nbsp;class=&quot;order-button&quot;&gt;Order Now&lt;/button&gt;</textarea>
                                            <span class="input-group-text align-items-start pt-3">
                                                <span class="input-group-link cursor-pointer clipboard-copy" data-clipboard-target="#html-code"
                                                    data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="{{ 'Copy'|trans }}">
                                                    <svg class="icon">
                                                        <use xlink:href="#copy">
                                                    </svg>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <span class="d-block mt-3 mb-2">{{ 'Add data-product attribute to your element to open specific product. For example:'|trans }}</span>
                                <div class="col">
                                    <div class="input-group input-group-flat">
                                        <textarea id="html-code2" rows="1" class="form-control" onclick="$(this).trigger('select')">&lt;button type=&quot;button&quot; class=&quot;order-button" data-product="2"&gt;Order Product#2 Now&lt;/button&gt;</textarea>
                                        <span class="input-group-text align-items-start pt-3">
                                            <span class="input-group-link cursor-pointer clipboard-copy" data-clipboard-target="#html-code2"
                                                data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="{{ 'Copy'|trans }}">
                                                <svg class="icon">
                                                    <use xlink:href="#copy">
                                                </svg>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                                <span class="d-block mt-3">{{ "data-product attribute value will be overridden if popup's product is selected from select-box above"|trans }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="domain-checker-form" class="col-12 form-label">{{ 'Copy this code to your website'|trans }}</label>
                    <div class="col">
                        <div class="input-group input-group-flat">
                            <textarea id="script-code" rows="3" class="form-control" onclick="$(this).trigger('select')"></textarea>
                            <span class="input-group-text align-items-start pt-3">
                                <span class="input-group-link cursor-pointer clipboard-copy" data-clipboard-target="#script-code"
                                      data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="{{ 'Copy'|trans }}">
                                    <svg class="icon">
                                        <use xlink:href="#copy">
                                    </svg>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-end">
                <button type="button" class="btn btn-success" id="load">
                    <span>{{ 'Try your popup'|trans }}</span>
                </button>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            let changed = false;
            window.onbeforeunload = confirmExit;

            function confirmExit() {
                if (changed === true) {
                    return "There are unsaved changes! If you will exit this page they will be lost. You can save them by clicking on UPDATE SETTINGS button.";
                }
            }

            const generate_link = function (selector) {
                selector = (typeof selector === "undefined") ? $('#bind_selector').val() : selector;

                const initial_link = "{{ 'orderbutton/js' | link({'options' : 1}) }}";

                const options = {
                    'width': $('#popup_width').val(),
                    'theme_color': $('#theme_color').val(),
                    'background_color': $('#coloris-picker').val(),
                    'popup_top': $('#popup-top').val(),
                    'popup_left': $('#popup-left').val(),
                    'background_opacity': $('#background-opacity').val(),
                    'background_close': $('#background-close:checked').val(),
                    'show_custom_form_values': $('#show-custom-form-values:checked').val(),
                    'bind_selector': selector,
                    'border_radius': $('#border-radius').val(),
                    'product_id': $('#product_id').val(),
                    'loader': $('[name=loader]:checked').val()
                };

                let options_url = "";
                $.each(options, function (k, v) {
                    if (v !== "" && typeof v !== "undefined") {
                        options_url += "&" + k + "=" + encodeURIComponent(v);
                    }
                });
                return initial_link + options_url;
            };

            const show_link = function () {
                $('#script-code').text('\<script type="text/javascript" src="' + generate_link() + '"\>\<\/script\>')
            };

            show_link();

            $('#background-close, #show-custom-form-values').on('click', function () {
                changed = true;
                show_link();
            });

            $('input').on('input', function () {
                changed = true;
                show_link();
            });

            $('select, #background-color, input:radio').on('change', function () {
                changed = true;
                show_link();
            });

            $('#bind_selector').on('input', function () {
                const selector = $(this).val();
                if (selector[0] !== "." || selector[0] !== "#") {
                    $('#button-info').parent().removeClass('alert-info').addClass('alert-danger');
                    $('#button-code-info').html("<span class=\"d-block mb-2 text-danger\"><b>{{ 'Class name should start with dot (.) or hashtag (#) for ID'|trans }}</b></span>");
                }

                if (selector[0] === ".") {
                    $('#button-info').parent().removeClass('alert-danger').removeClass('alert-info').addClass('alert-info');
                    $('#button-code-info').html("<span class=\"d-block mb-2\">{{ 'Add " + selector + " class to your elements which must call popup. For example: '|trans }}" + '</span><pre>&lt;button type=&quot;button&quot;' + '<span class="text-orange">' + ' class=&quot;' + selector.substring(1) + '</span>' + '&quot; &gt;Order Now&lt;/button&gt;</pre>');
                }

                if (selector[0] === "#") {
                    $('#button-info').parent().removeClass('alert-danger').removeClass('alert-info').addClass('alert-info');
                    $('#button-code-info').html("<span class=\"d-block mb-2\">{{ 'Add " + selector + " ID to your element which must call popup. For example: '|trans }}" + '</span><pre>&lt;button type=&quot;button&quot;' + '<span class="text-orange">' + ' id=&quot;' + selector.substring(1) + '</span>' + '&quot; &gt;Order Now&lt;/button&gt;</pre>');
                }
            });

            $('#load').on('click', function () {
                const s = $('#bind_selector').val() + new Date().getTime();
                $('body>button').remove()
                $.getScript(generate_link(s), function () {
                    const test_button = $('<button/>').css({"display": "none"}).appendTo('body');
                    if (s.charAt(0) === '.') {
                        test_button.attr('class', s.substring(1));
                    } else {
                        test_button.attr('id', s.substring(1));
                    }

                });

                document.addEventListener('OrderButtonEventsReady', function (e) {
                    $(s).trigger('click');
                }, false);
            });
        });
    </script>
{% endblock %}
