{% extends request.ajax ? 'layout_blank.phtml' : 'layout_default.phtml' %}

{% import 'macro_functions.phtml' as mf %}

{% block meta_title %}{{ product.title }}{% endblock %}

{% block content_before %}
    <h1>{{ product.title }}</h1>
    {# { product.description|bbmd } #}
    {% include '_order-steps.phtml' with { 'selected': 2, 'product': product } %}
{% endblock %}

{% block content %}
    {% set periods = guest.system_periods %}
    {% set pricing = product.pricing %}

<form method="post" class="api-form" data-api-url="guest/cart/add_item" data-api-redirect="{{ 'cart'|link }}">
    {#<h2 class="dark-icon i-services">{{ 'Domain configuration'|trans }}</h2>#}

<div class="row">
    <div class="col">
        <ul class="nav nav-tabs nav-justified mb-3" id="tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="#owndomain" class="nav-link active" data-bs-toggle="tab" rel="owndomain">
                    <i class="fa fa-tree me-2"></i>{{ 'Own'|trans }}</a>
            </li>
            <li class="nav-item">
                <a href="#register" class="nav-link" data-bs-toggle="tab" rel="register">
                    <i class="fa fa-plus me-2"></i>{{ 'Register'|trans }}</a>
            </li>
            <li class="nav-item">
                <a href="#transfer" class="nav-link" data-bs-toggle="tab" rel="transfer">
                    <i class="fa fa-car me-2"></i>{{ 'Transfer'|trans }}</a>
            </li>
        </ul>
    </div>
</div>

<div class="row">
    <div class="tab-content text-center col-md-10 col-xl-8 mx-auto">
        <div class="tab-pane fade show active" id="owndomain">
            <p class="lead text-center">{{ 'I will use my existing domain and update nameservers'|trans }}</p>
            <div class="form-group form-inline">
                <div class="input-group">
                    <input type="text" class="form-control w-50" name="domain[owndomain_sld]" value="{{ request.owndomain_sld }}" placeholder="{{ 'Enter your domain name'|trans }}">
                    <input type="text" class="form-control" name="domain[owndomain_tld]" value="{{ request.owndomain_tld|default('.com') }}">
                </div>
            </div>
        </div>
        <div class="tab-pane fade in" id="register">
            <p class="lead text-center">{{ 'Register new domain'|trans }}</p>
            <div class="input-group">
                <input type="text" class="form-control w-50" name="domain[register_sld]" value="{{ request.register_sld }}" placeholder="{{ 'Enter your domain name'|trans }}">
                {% if product.config.free_domain == 1 %}
                    {% set tlds = guest.serviceHosting_free_tlds({ 'product_id': product.id }) %}
                {% else %}
                    {% set tlds = guest.serviceDomain_tlds({ 'allow_register': 1 })%}
                {% endif %}
                {{ mf.selectboxtld('domain[register_tld]', tlds) }}
                <button class="btn btn-success" type="button" id="domain-check">{{ 'Check'|trans }}</button>
            </div>
            <div id="domain-config" style="display:none;">
                <hr>
                <label class="form-label">{{ 'Period'|trans }}:</label>
                {{ mf.selectbox('domain[register_years]', {}) }}
            </div>
        </div>
        <div class="tab-pane fade in" id="transfer">
            <p class="lead text-center">{{ 'Transfer your domain from another registrar'|trans }}</p>
            <div class="form-group form-horizontal">
                <div class="input-group">
                    <input type="text" class="form-control w-50" name="domain[transfer_sld]" value="{{ request.transfer_sld }}" placeholder="{{ 'Enter your domain name'|trans }}">
                    {{ mf.selectboxtld('domain[transfer_tld]', guest.serviceDomain_tlds({ 'allow_transfer': 1 })) }}
                    <button class="btn btn-success" type="button" id="transfer-check">{{ 'Check'|trans }}</button>
                </div>
            </div>
            <div class="form-group col-md-4 col-md-offset-8">
                <div id="domain-transfer-config" style="display:none;">
                    <hr>
                    <h4>{{ 'Transfer price'|trans }}: <span id="transfer-price"></span></h4>
                     <input type="text" class="form-control" name="domain[transfer_code]" value="{{ request.transfer_code }}" placeholder="{{ 'Enter domain transfer code'|trans }}">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-10 col-xl-8 mx-auto text-center">
        {% include 'partial_currency.phtml' %}
        <hr>
        {% include 'partial_pricing.phtml' with { 'product': product } %}
    </div>
</div>
    {% include 'partial_addons.phtml' with { 'product': product } %}
    
    <input type="hidden" name="domain[action]" value="owndomain" id="domain-action">
    <input type="hidden" name="id" value="{{ product.id }}">
</form>
{% endblock %}

{% block js %}
{% set currency = guest.cart_get_currency %}
<script>
$(function() {
    $('#tabs li a').bind('click', function() {
        $('#domain-action').val($(this).attr('rel'));
    });

    $('#tabs li a:first').click();

    $('#transfer-check').bind('click', function(event) {
        var sld = $('input[name="domain[transfer_sld]"]').val();
        var tld = $('select[name="domain[transfer_tld]"]').val();
        var domain = sld + tld;
        
        bb.post(
            'guest/servicedomain/can_be_transferred',
            { sld: sld, tld: tld },
            function(result) {
                setTransferPricing(tld);
                $('#domain-transfer-config').fadeIn('slow');
            }
        );

        return false;
    });

    $('#domain-check').bind('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 },
            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').change(function() {
        $('.period').hide();
        $('.period.' + $(this).val()).show();
    }).trigger('change');

    $('.addon-period-selector').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 },
            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);
                    s.append(new Option(i + "{{ ' Year/s @ '|trans }}" + price, i));
                }
            }
        );
    }

    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);
            }
        );
    }
});
</script>
{% endblock %}