{include file="orderforms/hostique/common.tpl"}

<div id="order-standard_cart" class="order-shell order-shell--product-domain-modern">
    <div class="hostique-product-domain-shell">
        <section class="hostique-product-domain-hero">
            <div class="hostique-product-domain-hero__copy">
                <span class="hostique-product-domain-hero__icon" aria-hidden="true">
                    <i class="fas fa-globe"></i>
                </span>
                <div>
                    <h1>{$LANG.domaincheckerchoosedomain}</h1>
                    <p>{$LANG.orderForm.findNewDomain}</p>
                </div>
            </div>
            <a class="hostique-product-domain-hero__cta" href="{$WEB_ROOT}/cart.php?a=view">
                <i class="fas fa-shopping-cart" aria-hidden="true"></i>
                <span>{$LANG.cartreviewcheckout}</span>
            </a>
        </section>

        <form id="frmProductDomain">
            <input type="hidden" id="frmProductDomainPid" value="{$pid}" />

            <section class="domain-selection-options hostique-product-domain-options">
                {if $incartdomains}
                    <div class="option hostique-product-domain-option domain-option" data-domain-option-card="incart">
                        <div class="hostique-product-domain-option__label">
                            <span class="hostique-product-domain-option__radio">
                                <input type="radio" name="domainoption" value="incart" id="selincart"{if $domainoption eq "incart"} checked{/if} />
                            </span>
                            <span class="hostique-product-domain-option__icon" aria-hidden="true"><i class="fas fa-shopping-cart"></i></span>
                            <span class="hostique-product-domain-option__copy">
                                <strong>{$LANG.cartproductdomainuseincart}</strong>
                                <span>Use one of the domains in your cart.</span>
                            </span>
                            <span class="hostique-product-domain-option__chevron" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
                        </div>
                        <div class="domain-input-group hostique-product-domain-option__panel domain-option-panel" id="domainincart" data-domain-panel="incart" hidden>
                            <div class="hostique-product-domain-inline">
                                <select id="incartsld" name="incartdomain" class="form-control hostique-product-domain-select">
                                    {foreach key=num item=incartdomain from=$incartdomains}
                                        <option value="{$incartdomain}">{$incartdomain}</option>
                                    {/foreach}
                                </select>
                                <button type="submit" class="btn btn-primary hostique-product-domain-use-btn">{$LANG.orderForm.use}</button>
                            </div>
                        </div>
                    </div>
                {/if}

                {if $registerdomainenabled}
                    <div class="option hostique-product-domain-option domain-option" data-domain-option-card="register">
                        <div class="hostique-product-domain-option__label">
                            <span class="hostique-product-domain-option__radio">
                                <input type="radio" name="domainoption" value="register" id="selregister"{if $domainoption eq "register"} checked{/if} />
                            </span>
                            <span class="hostique-product-domain-option__icon" aria-hidden="true"><i class="fas fa-plus"></i></span>
                            <span class="hostique-product-domain-option__copy">
                                <strong>{$LANG.cartregisterdomainchoice|sprintf2:$companyname}</strong>
                                <span>Find and register a new domain name.</span>
                            </span>
                            <span class="hostique-product-domain-option__chevron" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
                        </div>
                        <div class="domain-input-group hostique-product-domain-option__panel domain-option-panel{if $showAdvancedSearchOptions} domain-checker-advanced{/if}" id="domainregister" data-domain-panel="register" hidden>
                            {if $showAdvancedSearchOptions}
                                <textarea name="message"
                                          id="message"
                                          title="{lang key='domainSearch.domainOrAiPrompt'}"
                                          data-placement="left"
                                          data-trigger="manual"
                                          placeholder="{lang key='domainSearch.domainOrAiInstruction'}">{$message}</textarea>
                                <div class="hostique-product-domain-advanced-row">
                                    <select name="tlds[]" class="multiselect multiselect-filter" multiple="multiple" data-placeholder="{lang key='domainSearch.tlds'}" data-min-selection="1">
                                        {foreach $tlds as $tld}
                                            <option{if in_array($tld, $selectedTlds)} selected {if count($selectedTlds) <= 1}disabled="disabled"{/if}{/if} value="{$tld}">{$tld}</option>
                                        {/foreach}
                                    </select>
                                    <select name="maxLength" class="multiselect" data-placeholder="{lang key='domainSearch.maxLength'}">
                                        {foreach $searchLengths as $len}
                                            <option value="{$len}" {if $maxLength === $len}selected{/if}>{$len}</option>
                                        {/foreach}
                                    </select>
                                    <label class="hostique-product-domain-checkbox">
                                        <input type="checkbox" name="filter" class="no-icheck" {if $safeSearchSelected}checked{/if}>
                                        <span>{lang key="domainSearch.safeSearch"}</span>
                                    </label>
                                </div>
                            {else}
                                <div class="hostique-product-domain-inline">
                                    <div class="hostique-product-domain-split">
                                        <div class="hostique-product-domain-input-wrap">
                                            <span class="hostique-product-domain-input-icon">WWW.</span>
                                            <input type="text" id="registersld" value="{$sld}" class="form-control" autocapitalize="none" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="{lang key='orderForm.enterDomain'}" />
                                        </div>
                                        <select id="registertld" class="form-control hostique-product-domain-tld">
                                            {foreach from=$registertlds item=listtld}
                                                <option value="{$listtld}"{if $listtld eq $tld} selected="selected"{/if}>{$listtld}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                    <button id="btnCheckAvailability" type="submit" class="btn btn-primary hostique-product-domain-use-btn">
                                        {$LANG.orderForm.check}{if $showAdvancedSearchOptions} <i class="fa-regular fa-sparkles"></i>{/if}
                                    </button>
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                {if $transferdomainenabled}
                    <div class="option hostique-product-domain-option domain-option" data-domain-option-card="transfer">
                        <div class="hostique-product-domain-option__label">
                            <span class="hostique-product-domain-option__radio">
                                <input type="radio" name="domainoption" value="transfer" id="seltransfer"{if $domainoption eq "transfer"} checked{/if} />
                            </span>
                            <span class="hostique-product-domain-option__icon" aria-hidden="true"><i class="fas fa-exchange-alt"></i></span>
                            <span class="hostique-product-domain-option__copy">
                                <strong>{$LANG.carttransferdomainchoice|sprintf2:$companyname}</strong>
                                <span>Transfer your domain from another registrar.</span>
                            </span>
                            <span class="hostique-product-domain-option__chevron" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
                        </div>
                        <div class="domain-input-group hostique-product-domain-option__panel domain-option-panel" id="domaintransfer" data-domain-panel="transfer" hidden>
                            <div class="hostique-product-domain-inline">
                                <div class="hostique-product-domain-split">
                                    <div class="hostique-product-domain-input-wrap">
                                        <span class="hostique-product-domain-input-icon">WWW.</span>
                                        <input type="text" id="transfersld" value="{$sld}" class="form-control" autocapitalize="none" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="{lang key='orderForm.enterDomain'}"/>
                                    </div>
                                    <select id="transfertld" class="form-control hostique-product-domain-tld">
                                        {foreach from=$transfertlds item=listtld}
                                            <option value="{$listtld}"{if $listtld eq $tld} selected="selected"{/if}>{$listtld}</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary hostique-product-domain-use-btn">{$LANG.orderForm.transfer}</button>
                            </div>
                        </div>
                    </div>
                {/if}

                {if $owndomainenabled}
                    <div class="option hostique-product-domain-option domain-option" data-domain-option-card="owndomain">
                        <div class="hostique-product-domain-option__label">
                            <span class="hostique-product-domain-option__radio">
                                <input type="radio" name="domainoption" value="owndomain" id="selowndomain"{if $domainoption eq "owndomain"} checked{/if} />
                            </span>
                            <span class="hostique-product-domain-option__icon" aria-hidden="true"><i class="fas fa-sliders-h"></i></span>
                            <span class="hostique-product-domain-option__copy">
                                <strong>{$LANG.cartexistingdomainchoice|sprintf2:$companyname}</strong>
                                <span>Use an existing domain and update its nameservers.</span>
                            </span>
                            <span class="hostique-product-domain-option__chevron" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
                        </div>
                        <div class="domain-input-group hostique-product-domain-option__panel domain-option-panel" id="domainowndomain" data-domain-panel="owndomain" hidden>
                            <div class="hostique-product-domain-inline">
                                <div class="hostique-product-domain-split">
                                    <div class="hostique-product-domain-input-wrap">
                                        <span class="hostique-product-domain-input-icon">WWW.</span>
                                        <input type="text" id="owndomainsld" value="{$sld}" placeholder="{lang key='yourdomainplaceholder'}" class="form-control" autocapitalize="none" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="{lang key='orderForm.enterDomain'}" />
                                    </div>
                                    <input type="text" id="owndomaintld" value="{$tld|substr:1}" placeholder="{$LANG.yourtldplaceholder}" class="form-control hostique-product-domain-tld-input" autocapitalize="none" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="{lang key='orderForm.required'}" />
                                </div>
                                <button type="submit" class="btn btn-primary hostique-product-domain-use-btn" id="useOwnDomain">{$LANG.orderForm.use}</button>
                            </div>
                        </div>
                    </div>
                {/if}
            </section>

            {if $freedomaintlds}
                <p class="hostique-product-domain-note">* <em>{$LANG.orderfreedomainregistration} {$LANG.orderfreedomainappliesto}: {$freedomaintlds}</em></p>
            {/if}
        </form>

        <form method="post" action="{$WEB_ROOT}/cart.php?a=add&pid={$pid}&domainselect=1" id="frmProductDomainSelections">
            <div id="DomainSearchResults" class="w-hidden">
                <div id="primarySuggestionHeading" class="primary-domain-header"><i class="fa-regular fa-sparkles"></i> {$LANG.domainSearch.topSuggestion}</div>
                <div id="primaryExactHeading" class="primary-domain-header">{$LANG.domainSearch.exactMatch}</div>
                <div id="searchDomainInfo">
                    <p id="primaryLookupSearching" class="domain-lookup-loader domain-lookup-primary-loader domain-searching domain-checker-result-headline">
                        <i class="fas fa-spinner fa-spin"></i>
                        <span class="domain-lookup-register-loader">{lang key='orderForm.checkingAvailability'}...</span>
                        <span class="domain-lookup-transfer-loader">{lang key='orderForm.verifyingTransferEligibility'}...</span>
                        <span class="domain-lookup-other-loader">{lang key='orderForm.verifyingDomain'}...</span>
                    </p>
                    <div id="primaryLookupResult" class="domain-lookup-result domain-lookup-primary-results w-hidden">
                        <div class="domain-unavailable domain-checker-unavailable headline">{lang key='orderForm.domainIsUnavailable'}</div>
                        <div class="domain-available domain-checker-available headline">{$LANG.domainavailablemessage}</div>
                        <div class="btn btn-primary domain-contact-support headline">{$LANG.domainContactUs}</div>
                        <div class="transfer-eligible">
                            <p class="domain-checker-available headline">{lang key='orderForm.transferEligible'}</p>
                            <p>{lang key='orderForm.transferUnlockBeforeContinuing'}</p>
                        </div>
                        <div class="transfer-not-eligible">
                            <p class="domain-checker-unavailable headline">{lang key='orderForm.transferNotEligible'}</p>
                            <p>{lang key='orderForm.transferNotRegistered'}</p>
                            <p>{lang key='orderForm.trasnferRecentlyRegistered'}</p>
                            <p>{lang key='orderForm.transferAlternativelyRegister'}</p>
                        </div>
                        <div class="domain-invalid">
                            <p class="domain-checker-unavailable headline">{lang key='orderForm.domainInvalid'}</p>
                            <p>
                                {lang key='orderForm.domainLetterOrNumber'}<span class="domain-length-restrictions">{lang key='orderForm.domainLengthRequirements'}</span><br />
                                {lang key='orderForm.domainInvalidCheckEntry'}
                            </p>
                        </div>
                        <div id="idnLanguageSelector" class="margin-10 idn-language-selector idn-language w-hidden">
                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 offset-sm-1 offset-lg-2">
                                    <div class="margin-10 text-center">
                                        {lang key='cart.idnLanguageDescription'}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-8 col-lg-6 col-sm-offset-2 col-lg-offset-3 offset-sm-2 offset-lg-3">
                                    <div class="form-group">
                                        <select name="idnlanguage" class="form-control">
                                            <option value="">{lang key='cart.idnLanguage'}</option>
                                            {foreach $idnLanguages as $idnLanguageKey => $idnLanguage}
                                                <option value="{$idnLanguageKey}">{lang key='idnLanguage.'|cat:$idnLanguageKey}</option>
                                            {/foreach}
                                        </select>
                                        <div class="field-error-msg">
                                            {lang key='cart.selectIdnLanguageForRegister'}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="domain-price">
                            <span class="register-price-label">{lang key='orderForm.domainPriceRegisterLabel'}</span>
                            <span class="transfer-price-label w-hidden">{lang key='orderForm.domainPriceTransferLabel'}</span>
                            <span class="price"></span>
                        </div>
                        <p class="domain-error domain-checker-unavailable headline"></p>
                        <input type="hidden" id="resultDomainOption" name="domainoption" />
                        <input type="hidden" id="resultDomain" name="domains[]" />
                        <input type="hidden" id="resultDomainPricingTerm" />
                    </div>
                </div>

                {if $registerdomainenabled}
                    {if $spotlightTlds}
                        <div id="spotlightTlds" class="spotlight-tlds clearfix w-hidden">
                            <div class="spotlight-tlds-container">
                                {foreach $spotlightTlds as $key => $data}
                                    <div class="spotlight-tld-container spotlight-tld-container-{$spotlightTlds|count}">
                                        <div id="spotlight{$data.tldNoDots}" class="spotlight-tld">
                                            {if $data.group}
                                                <div class="spotlight-tld-{$data.group}">{$data.groupDisplayName}</div>
                                            {/if}
                                            {$data.tld}
                                            <span class="domain-lookup-loader domain-lookup-spotlight-loader">
                                                <i class="fas fa-spinner fa-spin"></i>
                                            </span>
                                            <div class="domain-lookup-result">
                                                <button type="button" class="btn unavailable w-hidden" disabled="disabled">
                                                    {lang key='domainunavailable'}
                                                </button>
                                                <button type="button" class="btn invalid w-hidden" disabled="disabled">
                                                    {lang key='domainunavailable'}
                                                </button>
                                                <span class="available price w-hidden">{$data.register}</span>
                                                <button type="button" class="btn btn-add-to-cart product-domain w-hidden" data-whois="0" data-domain="">
                                                    <span class="to-add">{lang key='orderForm.add'}</span>
                                                    <span class="loading">
                                                        <i class="fas fa-spinner fa-spin"></i> {lang key='loading'}
                                                    </span>
                                                    <span class="added"><i class="far fa-shopping-cart"></i> {lang key='domaincheckeradded'}</span>
                                                    <span class="unavailable">{$LANG.domaincheckertaken}</span>
                                                </button>
                                                <button type="button" class="btn btn-primary domain-contact-support w-hidden">
                                                    {lang key='domainChecker.contactSupport'}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}
                            </div>
                        </div>
                    {/if}

                    <div class="suggested-domains w-hidden">
                        <div class="panel-heading card-header">
                            {lang key='orderForm.suggestedDomains'}
                        </div>
                        <div id="suggestionsLoader" class="card-body panel-body domain-lookup-loader domain-lookup-suggestions-loader">
                            <i class="fas fa-spinner fa-spin"></i> {lang key='orderForm.generatingSuggestions'}
                        </div>
                        <div class="panel-body card-body domain-lookup-message domain-lookup-suggestions-message">
                            {lang key='domainSearch.errors.noSuggestions'}
                        </div>
                        <div id="domainSuggestions" class="domain-lookup-result list-group w-hidden">
                            <div class="domain-suggestion list-group-item w-hidden">
                                <span class="domain"></span><span class="extension"></span>
                                <div class="actions">
                                    <button type="button" class="btn btn-add-to-cart product-domain" data-whois="1" data-domain="">
                                        <span class="to-add">{$LANG.addtocart}</span>
                                        <span class="loading">
                                            <i class="fas fa-spinner fa-spin"></i> {lang key='loading'}
                                        </span>
                                        <span class="added">{lang key='domaincheckeradded'}</span>
                                        <span class="unavailable">{$LANG.domaincheckertaken}</span>
                                    </button>
                                    <button type="button" class="btn btn-primary domain-contact-support w-hidden">{lang key='domainChecker.contactSupport'}</button>
                                    <span class="price"></span>
                                    <span class="promo w-hidden"></span>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer card-footer more-suggestions text-center w-hidden">
                            <a id="moreSuggestions" href="#" onclick="loadMoreSuggestions();return false;">{lang key='domainsmoresuggestions'}</a>
                            <span id="noMoreSuggestions" class="no-more small w-hidden">{lang key='domaincheckernomoresuggestions'}</span>
                        </div>
                        <div class="text-center domain-suggestions-warning">
                            <p>{lang key='domainssuggestionswarnings'}</p>
                        </div>
                    </div>
                {/if}
            </div>

            <div class="hostique-product-domain-continue">
                <button id="btnDomainContinue" type="submit" class="btn btn-primary btn-lg w-hidden" disabled="disabled">
                    {$LANG.continue}
                    &nbsp;<i class="fas fa-arrow-circle-right"></i>
                </button>
            </div>
        </form>

        <section class="hostique-product-domain-help hostique-store-footer-strip">
            <div class="hostique-product-domain-help__main hostique-store-footer-strip__support">
                <div class="hostique-product-domain-help__copy">
                    <strong>Need Help?</strong>
                    <p class="hostique-store-footer-strip__eyebrow">Our support team is here to help you.</p>
                    <a class="hostique-store-footer-strip__link" href="{$WEB_ROOT}/submitticket.php">Open a Support Ticket <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="hostique-product-domain-help__trust hostique-store-footer-strip__trust">
                <span class="hostique-store-footer-strip__eyebrow">Trusted by thousands</span>
                <div class="hostique-product-domain-help__stars hostique-store-footer-strip__stars" aria-label="5 star rating">
                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                </div>
            </div>
        </section>
    </div>
</div>

{include file="orderforms/hostique/recommendations-modal.tpl"}

{if $showAdvancedSearchOptions}
    <script>
        $(document).ready(function() {
            jQuery('#frmProductDomain .multiselect').each(function () {
                let enableFiltering = $(this).hasClass('multiselect-filter');
                const minSelection = jQuery(this).data('min-selection');
                $(this).multiselect({
                    onChange: function (element) {
                        const closestSelect = element.closest('select');
                        const selectedOptions = closestSelect.find('option:selected');
                        if (minSelection === undefined) {
                            return;
                        }
                        const atMinOptions = selectedOptions.length <= minSelection;
                        const targetOptions = atMinOptions ? selectedOptions : closestSelect.find('option');
                        targetOptions.each(function () {
                            const inputElement = jQuery('input[value="' + jQuery(this).val() + '"]');
                            inputElement.prop('disabled', atMinOptions ? 'disabled' : false);
                        });
                    },
                    buttonText: function(options, select) {
                        return select.data('placeholder');
                    },
                    maxHeight: 200,
                    includeFilterClearBtn: false,
                    enableCaseInsensitiveFiltering: enableFiltering,
                });
            })
        });
    </script>
{/if}

<script>
document.addEventListener('DOMContentLoaded', function () {
    const options = Array.from(document.querySelectorAll('#frmProductDomain .domain-option'));

    function setActive(option) {
        if (!option) {
            return;
        }

        options.forEach(function (item) {
            item.classList.remove('is-active', 'is-selected');

            const radio = item.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = false;
            }

            const panel = item.querySelector('.domain-option-panel');
            if (panel) {
                panel.hidden = true;
                panel.style.display = 'none';
                panel.classList.remove('is-active');
            }
        });

        option.classList.add('is-active', 'is-selected');

        const activeRadio = option.querySelector('input[type="radio"]');
        if (activeRadio) {
            activeRadio.checked = true;
        }

        const activePanel = option.querySelector('.domain-option-panel');
        if (activePanel) {
            activePanel.hidden = false;
            activePanel.style.display = 'block';
            activePanel.classList.add('is-active');
        }
    }

    function syncFromCheckedRadio() {
        const checked = document.querySelector('#frmProductDomain input[name="domainoption"]:checked');
        if (checked) {
            setActive(checked.closest('.domain-option'));
        } else if (options.length) {
            setActive(options[0]);
        }
    }

    options.forEach(function (option) {
        option.addEventListener('click', function (event) {
            const ignore = event.target.closest('select, button, textarea');
            if (ignore) {
                return;
            }

            setActive(option);
        });

        const radio = option.querySelector('input[type="radio"]');
        if (radio) {
            radio.addEventListener('change', function () {
                setActive(option);
            });
        }
    });

    syncFromCheckedRadio();

    const domainForm = document.getElementById('frmProductDomainSelections') || document.body;
    const observer = new MutationObserver(function () {
        syncFromCheckedRadio();
    });

    observer.observe(domainForm, {
        childList: true,
        subtree: true
    });

    let transferSyncing = false;

    function syncTransferStateBlocks() {
        if (transferSyncing) {
            return;
        }

        const result = document.getElementById('primaryLookupResult');
        if (!result) {
            return;
        }

        const eligible = result.querySelector('.transfer-eligible');
        const notEligible = result.querySelector('.transfer-not-eligible');
        const invalid = result.querySelector('.domain-invalid');
        const price = result.querySelector('.domain-price');

        const isWhmcsVisible = function (el) {
            if (!el) {
                return false;
            }

            const inlineStyle = (el.getAttribute('style') || '').toLowerCase();
            const className = (el.className || '').toLowerCase();

            if (inlineStyle.includes('display: none') || className.includes('w-hidden') || el.hidden) {
                return false;
            }

            if (
                inlineStyle.includes('display: block')
                || inlineStyle.includes('display:block')
                || inlineStyle.includes('display: flex')
                || inlineStyle.includes('display:flex')
                || inlineStyle.includes('display: grid')
                || inlineStyle.includes('display:grid')
            ) {
                return true;
            }

            return false;
        };

        transferSyncing = true;

        try {
            const eligibleVisible = isWhmcsVisible(eligible);
            const notEligibleVisible = !eligibleVisible && isWhmcsVisible(notEligible);
            const invalidVisible = !eligibleVisible && !notEligibleVisible && isWhmcsVisible(invalid);

            [eligible, notEligible, invalid].forEach(function (el) {
                if (el) {
                    el.classList.remove('is-visible');
                }
            });

            if (price) {
                price.classList.remove('is-visible-transfer');
            }

            if (eligibleVisible && eligible) {
                eligible.classList.add('is-visible');
                if (price) {
                    price.classList.add('is-visible-transfer');
                }
            } else if (notEligibleVisible && notEligible) {
                notEligible.classList.add('is-visible');
            } else if (invalidVisible && invalid) {
                invalid.classList.add('is-visible');
            }
        } finally {
            window.requestAnimationFrame(function () {
                transferSyncing = false;
            });
        }
    }

    syncTransferStateBlocks();

    const primaryResult = document.getElementById('primaryLookupResult');
    if (primaryResult) {
        const transferObserver = new MutationObserver(function () {
            syncTransferStateBlocks();
        });

        transferObserver.observe(primaryResult, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['class', 'style', 'hidden']
        });
    }
});
</script>
