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

{# Domain configuration settings - default to true for backward compatibility #}
{% set allow_register = product.config.allow_domain_register ?? true %}
{% set allow_transfer = product.config.allow_domain_transfer ?? true %}
{% set allow_own = product.config.allow_domain_own ?? true %}
{% set allow_subdomain = product.config.allow_subdomain ?? false %}
{% set subdomain_base_domain = product.config.subdomain_base_domain ?? null %}

{# Determine which options are actually available #}
{% set can_register = allow_register and tlds is not empty %}
{% set can_transfer = allow_transfer and transfer_tlds is not empty %}
{% set can_own = allow_own %}
{% set can_subdomain = allow_subdomain and subdomain_base_domain %}

{# Only show domain configuration section if at least one option is available #}
{% set show_domain_config = can_register or can_transfer or can_own or can_subdomain %}

{# Determine which option should be active by default #}
{% set default_action = null %}
{% if can_register %}
    {% set default_action = 'register' %}
{% elseif can_transfer %}
    {% set default_action = 'transfer' %}
{% elseif can_own %}
    {% set default_action = 'owndomain' %}
{% elseif can_subdomain %}
    {% set default_action = 'subdomain' %}
{% endif %}

<h5 class="mb-1">{{ product_details }}</h5>

{% if show_domain_config %}
<hr />
<h4 class="mt-4 mb-1"><strong>{{ 'Domain Configuration'|trans }}</strong></h4>

<div class="d-flex mb-3">
    <nav class="nav nav-pills flex-column border-end me-3 gap-2">
        {% if can_register %}
            <a class="nav-link me-3 py-1 px-2 fs-7{% if default_action == 'register' %} active{% endif %}" href="#"
               id="register-tab" data-bs-toggle="tab" data-bs-target="#register-tab-pane"
               role="tab" aria-controls="register-tab-pane" data-action="register">{{ 'Register'|trans }}</a>
        {% endif %}
        {% if can_transfer %}
            <a class="nav-link me-3 py-1 px-2 fs-7{% if default_action == 'transfer' %} active{% endif %}" href="#"
               id="transfer-tab" data-bs-toggle="tab" data-bs-target="#transfer-tab-pane"
               role="tab" aria-controls="transfer-tab-pane" data-action="transfer">{{ 'Transfer'|trans }}</a>
        {% endif %}
        {% if can_own %}
            <a class="nav-link me-3 py-1 px-2 fs-7{% if default_action == 'owndomain' %} active{% endif %}" href="#"
               id="owndomain-tab" data-bs-toggle="tab" data-bs-target="#owndomain-tab-pane"
               role="tab" aria-controls="owndomain-tab-pane" data-action="owndomain">{{ 'Own domain'|trans }}</a>
        {% endif %}
        {% if can_subdomain %}
            <a class="nav-link me-3 py-1 px-2 fs-7{% if default_action == 'subdomain' %} active{% endif %}" href="#"
               id="subdomain-tab" data-bs-toggle="tab" data-bs-target="#subdomain-tab-pane"
               role="tab" aria-controls="subdomain-tab-pane" data-action="subdomain">{{ 'Free subdomain'|trans }}</a>
        {% endif %}
    </nav>

    <div class="tab-content flex-grow-1">
        {% if can_register %}
            <div class="tab-pane{% if default_action == 'register' %} show active{% endif %}" 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" style="max-width: 320px;">
                                <input class="form-control form-control-sm" type="text" name="domain[register_sld]"
                                       value="{{ request.register_sld }}"
                                       placeholder="{{ 'Enter new domain name to register'|trans }}">
                                <select class="form-select form-select-sm" name="domain[register_tld]" style="width: 30%; max-width: 90px;">
                                    {% 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="col-sm-12">
                        <div id="register-config" style="display:none;">
                            <label class="mt-2">
                                <select class="form-select form-select-sm" name="domain[register_years]" id="registration-years"></select>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if can_transfer %}
            <div class="tab-pane{% if default_action == 'transfer' %} 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 your existing domain'|trans }}</label>
                        <div class="d-flex gap-2">
                            <div class="input-group" style="max-width: 320px;">
                                <input class="form-control form-control-sm" type="text" name="domain[transfer_sld]"
                                       value="{{ request.transfer_sld }}"
                                       placeholder="{{ 'Enter your domain name to transfer'|trans }}">
                                <select class="form-select form-select-sm" name="domain[transfer_tld]" style="width: 30%; max-width: 90px;">
                                    {% 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 class="col-sm-12">
                        <div id="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>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if can_own %}
            <div class="tab-pane{% if default_action == 'owndomain' %} show active{% endif %}" id="owndomain-tab-pane"
                 role="tabpanel" aria-labelledby="owndomain-tab" tabindex="0">
                <div class="row">
                    <div class="col-sm-12">
                        <label class="form-label">{{ 'Use your existing domain'|trans }}</label>
                        <div class="input-group" style="max-width: 320px;">
                            <input class="form-control form-control-sm" type="text" name="domain[owndomain_sld]"
                                   value="{{ request.owndomain_sld }}"
                                   placeholder="{{ 'Your existing domain'|trans }}">
                            <input class="form-control form-control-sm" type="text" name="domain[owndomain_tld]"
                                   style="width: 30%; max-width: 90px;"
                                   value="{{ request.owndomain_tld|default('.com') }}"
                                   placeholder=".com">
                        </div>
                        <p class="fs-7 text-muted mt-2">{{ 'You will need to update your nameservers to point to our servers.'|trans }}</p>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if can_subdomain %}
            <div class="tab-pane{% if default_action == 'subdomain' %} show active{% endif %}" id="subdomain-tab-pane"
                 role="tabpanel" aria-labelledby="subdomain-tab" tabindex="0">
                <div class="row">
                    <div class="col-sm-12">
                        <label class="form-label">{{ 'Choose your free subdomain'|trans }}</label>
                        <div class="input-group" style="max-width: 420px;">
                            <input class="form-control form-control-sm" type="text" name="domain[subdomain_sld]"
                                   value="{{ request.subdomain_sld }}"
                                   placeholder="{{ 'Subdomain'|trans }}">
                            <span class="input-group-text input-group-text-sm">.{{ subdomain_base_domain|trim('.') }}</span>
                        </div>
                        <p class="fs-7 text-muted mt-2">{{ 'This free subdomain is provided by us. No domain registration or transfer will be added to this order.'|trans }}</p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<input type="hidden" name="domain[action]" value="{{ default_action }}" id="domain-action">
{% endif %}

{% set currency = guest.cart_get_currency %}
<script>
    function fadeIn(el) {
        el.style.removeProperty('display');
        el.style.opacity = '0';
        el.style.transition = 'opacity 0.15s ease-in';
        requestAnimationFrame(() => el.style.opacity = '1');
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Update domain action when switching tabs
        document.querySelectorAll('.nav-pills .nav-link[data-action]').forEach(tab => {
            tab.addEventListener('click', function() {
                const action = this.getAttribute('data-action');
                const actionInput = document.getElementById('domain-action');
                if (actionInput) {
                    actionInput.value = action;
                }
            });
        });

        const formatCurrency = (price, rate, code, multiply) => {
            let total = parseFloat(price) * parseFloat(rate);
            if (typeof multiply !== 'undefined') {
                total *= multiply;
            }
            return new Intl.NumberFormat(undefined, {
                style: 'currency',
                currency: code,
                currencyDisplay: 'narrowSymbol',
            }).format(total);
        };

        // Domain registration check
        const domainCheck = document.getElementById('domain-check');
        const registerSldInput = document.querySelector('input[name="domain[register_sld]"]');
        const registerTldSelect = document.querySelector('select[name="domain[register_tld]"]');
        let domainChecked = false;

        const resetRegisterCheck = () => {
            if (!domainChecked) {
                return;
            }

            domainChecked = false;
            if (domainCheck) domainCheck.style.display = '';
            const registerConfig = document.getElementById('register-config');
            if (registerConfig) registerConfig.style.display = 'none';
            const yearsSelect = document.getElementById('registration-years');
            if (yearsSelect) yearsSelect.innerHTML = '';
        };

        if (registerSldInput) {
            registerSldInput.addEventListener('input', resetRegisterCheck);
        }

        if (registerTldSelect) {
            registerTldSelect.addEventListener('change', resetRegisterCheck);
        }
        if (domainCheck) {
            domainCheck.addEventListener('click', function(event) {
                event.preventDefault();
                const sld = document.querySelector('input[name="domain[register_sld]"]').value.toLowerCase();
                const tld = document.querySelector('select[name="domain[register_tld]"]').value.toLowerCase();

                FOSSBilling.api.guest.post('servicedomain/check', { sld: sld, tld: tld },
                    function(result) {
                        setRegistrationPricing(tld);
                        const registerConfig = document.getElementById('register-config');
                        if (registerConfig) fadeIn(registerConfig);
                        domainChecked = true;
                        domainCheck.style.display = 'none';
                    },
                );
            });
        }

        // Domain transfer check
        const transferCheck = document.getElementById('transfer-check');
        const transferSldInput = document.querySelector('input[name="domain[transfer_sld]"]');
        const transferTldSelect = document.querySelector('select[name="domain[transfer_tld]"]');
        let transferChecked = false;

        const resetTransferCheck = () => {
            if (!transferChecked) {
                return;
            }
            transferChecked = false;
            if (transferCheck) transferCheck.style.display = '';
            const transferConfig = document.getElementById('transfer-config');
            if (transferConfig) transferConfig.style.display = 'none';
        };

        if (transferSldInput) {
           transferSldInput.addEventListener('input', resetTransferCheck);
        }

        if (transferTldSelect) {
            transferTldSelect.addEventListener('change', resetTransferCheck);
        }

        if (transferCheck) {
            transferCheck.addEventListener('click', function(event) {
                event.preventDefault();
                const sld = document.querySelector('input[name="domain[transfer_sld]"]').value.toLowerCase();
                const tld = document.querySelector('select[name="domain[transfer_tld]"]').value.toLowerCase();

                FOSSBilling.api.guest.post('servicedomain/can_be_transferred', { sld: sld, tld: tld },
                    function(result) {
                        setTransferPricing(tld);
                        const transferConfig = document.getElementById('transfer-config');
                        if (transferConfig) fadeIn(transferConfig);
                        transferChecked = true;
                        transferCheck.style.display = 'none';
                    },
                );
            });
        }

        function setRegistrationPricing(tld) {
            FOSSBilling.api.guest.post('servicedomain/pricing', { tld: tld },
                function(result) {
                    const yearsSelect = document.getElementById('registration-years');
                    if (!yearsSelect) return;
                    yearsSelect.innerHTML = '';

                    const regPrice = Number(result.price_registration);
                    let renewPrice = Number(result.price_renew);

                    if (result.price_renew === null || typeof result.price_renew === 'undefined' || isNaN(renewPrice)) {
                        renewPrice = regPrice;
                    }

                    const yearLabel = "{{ ' Year @ '|trans }}";
                    const yearsLabel = "{{ ' Years @ '|trans }}";

                    for (let i = 1; i <= 5; i++) {
                        const totalPrice = (i === 1) ? regPrice : regPrice + (i - 1) * renewPrice;
                        const priceFormatted = formatCurrency(
                            totalPrice,
                            {{ currency.conversion_rate }},
                            "{{ currency.code }}",
                            1
                        );

                        yearsSelect.append(
                            new Option(i + (i === 1 ? yearLabel : yearsLabel) + priceFormatted, i)
                        );
                    }
                },
            );
        }

        function setTransferPricing(tld) {
            FOSSBilling.api.guest.post('servicedomain/pricing', { tld: tld },
                function(result) {
                    const price = formatCurrency(result.price_transfer, {{ currency.conversion_rate }}, "{{ currency.code }}");
                    const transferPriceEl = document.getElementById('transfer-price');
                    if (transferPriceEl) transferPriceEl.textContent = price;
                },
            );
        }

        // Handle addons visibility
        const addons = document.querySelector('.addons');
        const orderButton = document.getElementById('order-button');

        if (addons && orderButton && getComputedStyle(addons).display === 'none') {
            orderButton.addEventListener('click', function handler(event) {
                event.preventDefault();
                orderButton.style.display = 'none';
                addons.style.display = 'block';
                orderButton.removeEventListener('click', handler);
                return false;
            });
        }
    });
</script>
