{% set periods = guest.system_periods %}
{% set pricing = product.pricing %}
{% set tlds = guest.serviceDomain_tlds({"allow_register":1}) %}

<div class="row">
    <div class="col-md-12">
        <h5 class="mb-1">{{ product_details }}</h5>
        <span class="text-muted">{{ 'Domain configuration'|trans }}</span>
        <div class="mb-2">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="domain[action]" value="owndomain"id="own-domain-check" onclick="selectDomainAction(this);" {% if tlds is empty %} checked {% endif %}>
                <label class="form-check-label" for="own-domain-check">{{ 'I will use my existing domain and update nameservers'|trans }}</label>
            </div>
            {% if tlds is not empty %}
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="domain[action]" value="register" id="domain-register-check" onclick="selectDomainAction(this);">
                    <label class="form-check-label" for="domain-register-check">{{ 'I want to register a new domain'|trans }}</label>
                </div>
            {% endif %}

            <div id="owndomain" class="mt-2 domain_action" {% if tlds is not empty %} style="display: none;" {% endif %}>
                <div class="row">
                    <div class="col-md-8">
                        <div class="d-flex gap-2">
                            <div class="input-group mb-3">
                                <input class="form-control w-75" type="text" name="domain[owndomain_sld]"
                                       value="{{ request.owndomain_sld }}"
                                       placeholder="{{ 'Your existing domain'|trans }}">
                                <input class="form-control" type="text" name="domain[owndomain_tld]"
                                       value="{{ request.owndomain_tld|default('.com') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="register" class="mt-2 domain_action" style="display: none;">
                <div class="row">
                    <div class="col-md-9">
                        <div class="d-flex gap-2">
                            <div class="input-group mb-3">
                                <input class="form-control w-75" type="text" name="domain[register_sld]"
                                       value="{{ request.register_sld }}"
                                       placeholder="{{ 'Your new domain'|trans }}">
                                <select class="form-select" name="domain[register_tld]">
                                    {% for tld in tlds %}
                                        <option value="{{ tld.tld }}" label="{{ tld.tld }}">{{ tld.tld }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <button class="btn btn-dark" type="button" id="domain-check">{{ 'Check'|trans }}</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="domain-config" style="display:none;">
                        <div class="mb-3">
                            <label>
                                <select class="form-select" name="domain[register_years]"></select>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% set currency = guest.cart_get_currency %}
<script type="text/javascript">
    function selectDomainAction(el) {
        $('.domain_action').hide();
        $('#' + $(el).val()).show();
    }

    $(function () {
        $('#domain-check').on('click', function (event) {
            var sld = $('input[name="domain[register_sld]"]').val();
            var tld = $('select[name="domain[register_tld]"]').val();
            var domain = sld + tld;
            bb.post(
                'guest/servicedomain/check',
                {sld: sld, tld: tld, CSRFToken: "{{ CSRFToken }}"},
                function (result) {
                    setRegistrationPricing(tld);
                    $('#domain-config').fadeIn('slow');
                }
            );

            return false;
        });

        if ($(".addons").length && $(".addons").is(':hidden')) {
            $('#order-button').one('click', function () {
                $(this).slideUp('fast');
                $('.addons').slideDown('fast');

                return false;
            });
        }

        $('#period-selector').on('change', function () {
            $('.period').hide();
            $('.period.' + $(this).val()).show();
        }).trigger('change');

        $('.addon-period-selector').on('change', function () {
            var r = $(this).attr('rel');
            $('#' + r + ' span').hide();
            $('#' + r + ' span.' + $(this).val()).fadeIn();
        }).trigger('change');

        function setRegistrationPricing(tld) {
            bb.post(
                'guest/servicedomain/pricing',
                {tld: tld, CSRFToken: "{{ CSRFToken }}"},
                function (result) {
                    var s = $("select[name='domain[register_years]']");

                    s.find('option').remove();

                    for (i = 1; i < 6; i++) {
                        var price = bb.currency(result.price_registration, {{ currency.conversion_rate }}, "{{ currency.code }}", i);
                        if (i === 1) {
                            s.append(new Option(i + "{{ ' year @ '|trans }}" + price, i));
                        } else {
                            s.append(new Option(i + "{{ ' years @ '|trans }}" + price, i));
                        }
                    }
                }
            );
        }
    });
</script>
