{% set periods = guest.system_periods %}
{% set pricing = product.pricing %}
{% set transfer_tlds = guest.serviceDomain_tlds({ "allow_transfer": 1 }) %}
{% set tlds = guest.serviceDomain_tlds({"allow_register":1}) %}
<div class="d-flex mb-3">
    <nav class="nav nav-pills flex-column border-end me-3 gap-2">
        {% if tlds is not empty %}
            <a class="nav-link me-3 py-1 px-2 fs-7 active" href="#" id="register-tab" data-bs-toggle="tab" data-bs-target="#register-tab-pane"
                role="tab" aria-controls="register-tab-pane">Register</a>
        {% endif %}
        {% if transfer_tlds is not empty %}
        <a class="nav-link me-3 py-1 px-2 fs-7 {% if tlds is empty %} active {% endif %}" href="#" id="transfer-tab" data-bs-toggle="tab" data-bs-target="#transfer-tab-pane"
               role="tab" aria-controls="transfer-tab-pane">Transfer</a>
        {% endif %}
    </nav>
    <div class="tab-content">
        {% if tlds is not empty %}
            <div class="tab-pane show active" id="register-tab-pane" role="tabpanel" aria-labelledby="register-tab" tabindex="0">
                <div class="row">
                    <div class="col-sm-12">
                        <label class="form-label">{{ 'Register a new domain'|trans }}</label>
                        <div class="d-flex gap-2">
                            <div class="input-group">
                                <input class="form-control form-control-sm w-75" type="text" name="register_sld"
                                    value="{{ request.register_sld }}"
                                    placeholder="{{ 'Enter new domain name to register'|trans }}">
                                <select class="form-select form-select-sm w-25" name="register_tld">
                                    {% for tld in tlds %}
                                        <option value="{{ tld.tld }}" label="{{ tld.tld }}">{{ tld.tld }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <button class="btn btn-sm btn-dark" type="button" id="domain-check">{{ 'Check'|trans }}</button>
                        </div>
                    </div>
                    <div class="c">
                        <div class="onAfterDomainCheck" style="display:none;">
                            <label class="mt-2">
                                <select class="form-select form-select-sm" name="register_years" id="registration-years"></select>
                            </label>
                            <br/>
                            <div class="form-check form-switch my-3">
                                <input class="form-check-input" type="checkbox" role="switch" id="nameserversCb">
                                <label class="form-check-label text-sm" for="nameserversCb">
                                    {{ 'I want to use my nameservers'|trans }}
                                </label>
                            </div>
                            <div id="nameservers" class="flex-column row" style="display:none;">
                                <div class="mb-2 col-md-6">
                                    <input class="form-control form-control-sm" type="text" name="ns1" value="" placeholder="{{ 'Nameserver 1'|trans }}"/>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <input class="form-control form-control-sm" type="text" name="ns2" value="" placeholder="{{ 'Nameserver 2'|trans }}"/>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <input class="form-control form-control-sm" type="text" name="ns3" value="" placeholder="{{ 'Nameserver 3'|trans }}"/>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <input class="form-control form-control-sm" type="text" name="ns4" value="" placeholder="{{ 'Nameserver 4'|trans }}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if transfer_tlds is not empty %}
            <div class="tab-pane {% if tlds is empty %} show active {% endif %}" id="transfer-tab-pane" role="tabpanel" aria-labelledby="transfer-tab" tabindex="0">
                <div class="row">
                    <div class="col-sm-12">
                        <label class="form-label">{{ 'Transfer a new domain'|trans }}</label>
                        <div class="d-flex gap-2">
                            <div class="input-group">
                                <input class="form-control form-control-sm w-75" type="text" name="transfer_sld"
                                       value="{{ request.transfer_sld }}"
                                       placeholder="{{ 'Enter your domain name to transfer'|trans }}">
                                <select class="form-select form-select-sm w-25" name="transfer_tld">
                                    {% for tld in transfer_tlds %}
                                        <option value="{{ tld.tld }}" label="{{ tld.tld }}">{{ tld.tld }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <button class="btn btn-sm btn-dark" type="button" id="transfer-check">{{ 'Check'|trans }}</button>
                        </div>
                    </div>
                    <div id="domain-transfer-config" style="display:none;">
                        <p class="fs-7 mt-2">{{ 'Transfer price is'|trans }}&nbsp;<span class="fw-bold" id="transfer-price"></span></p>
                        <input class="form-control form-control-sm" type="text" name="transfer_code" value="{{ request.transfer_code }}"
                               style="width: 200px" placeholder="{{ 'Enter domain transfer code'|trans }}">
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<input type="hidden" name="id" value="{{ product.id }}"/>
<input type="hidden" name="action" value="register" id="domain-action"/>

{% set currency = guest.cart_get_currency %}
<script type="text/javascript">
    let nameserversCbEl = document.getElementById('nameserversCb');
    let nameserversEl = document.getElementById('nameservers');
    nameserversCbEl.addEventListener('change', () => {
        if (nameserversCbEl.checked) {
            nameserversEl.style.display = "flex";
        } else {
            nameserversEl.style.display = "none";
        }

    })

    $(function () {
        $('ul.nav.nav-tabs > li.domain-tab a').on('click', function () {
            $('#domain-action').val($(this).attr('rel'));
        });

        $('#config-next').hide();
        $( "#config-next" ).prop( "disabled", true );

        if ($(".addons").length) {
            $('.order-button').one('click', function () {
                $(this).hide();
                $('.addons').slideDown('fast');

                return false;
            });
        }

        $('.addon-period-selector').on('change', function () {
            var r = $(this).attr('rel');

            $('#' + r + ' span').hide();
            $('#' + r + ' span.' + $(this).val()).fadeIn();
        }).trigger('change');

        $('#transfer-check').on('click', function (event) {
            var sld = $('input[name="transfer_sld"]').val();
            var tld = $('select[name="transfer_tld"]').val();
            $('#domain-action').val('transfer');
            var domain = sld + tld;

            bb.post(
                'guest/servicedomain/can_be_transferred',
                {sld: sld, tld: tld},
                function (result) {
                    setTransferPricing(tld);
                    $('#domain-name').text(domain);
                    $('#domain-transfer-config').fadeIn('fast');
                    $('.onAfterDomainCheck').fadeIn('fast');
                    $('#transfer-check').hide();
                    $('#transfer .order-button').show();
                }
            );

            return false;
        });

        $('#domain-check').on('click', function (event) {
            var sld = $('input[name="register_sld"]').val();
            sld = sld.toLowerCase();
            var tld = $('select[name="register_tld"]').val();
            var domain = sld + tld;
            $('#domain-action').val('register');
            bb.post(
                'guest/servicedomain/check',
                {sld: sld, tld: tld},
                function (result) {
                    setPricing(tld);
                    $('#domain-name').text(domain);
                    $('.onAfterDomainCheck').fadeIn('fast');
                    $('#domain-check').hide();
                    $('#register .order-button').show();
                }
            );

            return false;
        });

        function setPricing(tld) {
            bb.post(
                'guest/servicedomain/pricing',
                {tld: tld},
                function (result) {
                    var s = $("#registration-years");
                    s.find('option').remove();
                    for (i = 1; i < 6; i++) {
                        var price = bb.currency(result.price_registration, {{ currency.conversion_rate }}, "{{ currency.code }}", i);

                        s.append(new Option(i + "{{ ' Year/s @ '|trans }}" + price, i));
                    }
                    $('#config-next').show();
                    $( "#config-next" ).prop( "disabled", false );
                }
            );
        }

        function setTransferPricing(tld) {
            bb.post(
                'guest/servicedomain/pricing',
                {tld: tld},
                function (result) {
                    var price = bb.currency(result.price_transfer, {{ currency.conversion_rate }}, "{{ currency.code }}");
                    $('#transfer-price').text(price);
                    $('#config-next').show();
                    $( "#config-next" ).prop( "disabled", false );
                }
            );
        }
    });
</script>
