{* Domain setup splash — shown when the service has no domain yet. *}
<style>
.puq-domain-card { max-width: 760px; margin: 16px auto; }
.puq-domain-card .panel-heading { background: #f7f9fc; border-bottom: 1px solid #e0e6ee; padding: 14px 18px; }
.puq-domain-card .panel-heading h4 { margin: 0; font-weight: 500; color: #333; }
.puq-domain-card .panel-body { padding: 22px; }
.puq-domain-lead { color: #666; margin-bottom: 18px; }
.puq-domain-input-row { display: flex; gap: 8px; margin-bottom: 4px; }
.puq-domain-input-row input { flex: 1; font-size: 16px; padding: 10px 12px; }
.puq-domain-input-row .btn { padding: 10px 18px; }
.puq-domain-help { color: #888; font-size: 12px; margin-bottom: 18px; }
.puq-domain-pick-label { color: #555; font-weight: 500; margin-bottom: 8px; }
.puq-domain-loading { text-align: center; padding: 26px 10px; color: #999; font-size: 13px; }
.puq-domain-loading .fa-spinner { font-size: 28px; margin-bottom: 8px; color: #5bc0de; }
.puq-domain-chip {
    display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px;
    border: 1px solid #d1d8e0; background: #fff; border-radius: 16px;
    color: #337ab7; cursor: pointer; font-size: 13px; transition: all 0.15s;
}
.puq-domain-chip:hover { background: #337ab7; color: #fff; border-color: #337ab7; }
.puq-domain-chip .puq-chip-source { color: #888; font-size: 11px; margin-left: 4px; }
.puq-domain-chip:hover .puq-chip-source { color: #cce; }
.puq-domain-options { border-top: 1px solid #eef; padding-top: 16px; margin-top: 18px; }
.puq-domain-options .checkbox { margin: 0; }
.puq-ns-hint { background: #eaf4ff; border-left: 3px solid #337ab7; padding: 10px 14px; font-size: 13px; margin-top: 12px; border-radius: 0 3px 3px 0; }
.puq-ns-hint code { background: #fff; padding: 1px 6px; border-radius: 2px; }
.puq-msg { display: inline-block; margin-left: 10px; font-size: 13px; }
</style>

<div class="panel panel-default puq-domain-card">
    <div class="panel-heading">
        <h4><i class="fa fa-globe text-primary"></i> &nbsp;{$L.ms_set_up_your_domain}</h4>
    </div>
    <div class="panel-body">
        <p class="puq-domain-lead">
            {$L.ms_domain_setup_lead}
        </p>

        <div class="puq-domain-input-row">
            <input type="text" class="form-control" id="puq-new-domain" placeholder="yourdomain.com" autocomplete="off" autofocus>
            <button type="button" class="btn btn-primary" id="puq-set-domain-btn">
                <i class="fa fa-rocket"></i> {$L.ms_start_deployment}
            </button>
        </div>
        <div class="puq-domain-help">
            {$L.ms_domain_setup_help}
        </div>

        <div id="puq-domain-pick-section">
            <div class="puq-domain-pick-label">
                <i class="fa fa-bookmark text-muted"></i> {$L.ms_or_pick_from_account}
            </div>
            <div id="puq-existing-domains-list">
                <div class="puq-domain-loading">
                    <div><i class="fa fa-spinner fa-spin"></i></div>
                    <div>{$L.ms_looking_up_domains}</div>
                </div>
            </div>
        </div>

        <div class="puq-domain-options">
            {if $allow_external_dns}
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="puq-external-dns-toggle" {if $external_dns}checked{/if}>
                    <strong>{$L.ms_manage_dns_own_registrar}</strong> &nbsp;<span class="text-muted small">{$L.ms_skip_our_nameservers}</span>
                </label>
                <div class="help-block" style="margin-left:20px;">
                    {$L.ms_external_dns_help}
                </div>
            </div>
            {/if}

            {if $ns_hints}
            <div class="puq-ns-hint" id="puq-ns-hints" {if $external_dns}style="display:none"{/if}>
                <strong><i class="fa fa-info-circle"></i> {$L.ms_if_you_keep_dns_with_us}</strong> {$L.ms_point_nameservers_to}
                <ul style="margin:6px 0 0; padding-left:18px;">
                    {foreach from=$ns_hints item=ns}
                        <li><code>{$ns|escape}</code></li>
                    {/foreach}
                </ul>
            </div>
            {/if}
        </div>

        <div style="margin-top:14px;">
            <span id="puq-set-domain-msg" class="puq-msg"></span>
        </div>
    </div>
</div>

{literal}
<script>
(function(){
    var sid = {/literal}{$service_id|default:0|intval}{literal};
    if (!sid) {
        var m = window.location.search.match(/[?&]id=(\d+)/);
        if (m) sid = parseInt(m[1], 10);
    }
    // This splash renders WITHOUT header.tpl — provide self-contained puqT (from
    // the injected {$L_json} map) and a puqClientAjax fallback so the page never
    // depends on header-only globals.
    var PUQ_T = (window.PUQ_T) || {/literal}{$L_json|default:'{}' nofilter}{literal};
    var puqT = (typeof window.puqT === 'function') ? window.puqT : function(k){ return (PUQ_T && PUQ_T[k] != null) ? PUQ_T[k] : k; };
    var puqClientAjax = (typeof window.puqClientAjax === 'function') ? window.puqClientAjax : function(action, data, cb, method){
        jQuery.ajax({ url: 'clientarea.php?action=productdetails&id=' + sid + '&ajax=' + action,
            method: method || 'POST', contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data || {}), processData: false, dataType: 'json',
            success: function(r){ cb(r); }, error: function(){ cb({status:'error', msg: puqT('ms_network_error')}); } });
    };
    function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){
        return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
    }); }
    function url(action){
        return 'clientarea.php?action=productdetails&id=' + sid + '&ajax=' + action;
    }
    function showMsg(html, kind){
        var $m = $('#puq-set-domain-msg');
        $m.removeClass('text-success text-danger text-muted')
          .addClass(kind === 'success' ? 'text-success' : (kind === 'error' ? 'text-danger' : 'text-muted'));
        $m.html(html);
    }

    function sourceLabel(sources, note){
        var hasReg = sources.indexOf('registered') >= 0;
        var hasHost = sources.indexOf('hosting') >= 0;
        var bits = [];
        if (hasReg) bits.push(puqT('ms_source_registered'));
        if (hasHost) bits.push(puqT('ms_source_hosting'));
        var s = bits.join(' + ');
        if (note) s += ' • ' + note;
        return s;
    }

    // Load domain suggestions (other hosting + tbldomains). The section
    // is visible from the start with a big spinner so the customer knows
    // we're working on it. Hide the whole section when no domains are
    // found so the form stays tidy.
    $.ajax({ url: url('listMyDomains'), dataType: 'json',
        success: function(r){
            if (r.status !== 'success' || !r.data || !r.data.length) {
                $('#puq-domain-pick-section').hide();
                return;
            }
            var html = '';
            r.data.forEach(function(d){
                html += '<span class="puq-domain-chip" data-domain="' + esc(d.domain) + '">' +
                    '<i class="fa fa-globe"></i> ' + esc(d.domain) +
                    '<span class="puq-chip-source">' + esc(sourceLabel(d.sources || [], d.note || '')) + '</span>' +
                '</span>';
            });
            $('#puq-existing-domains-list').html(html);
        },
        error: function(){
            $('#puq-existing-domains-list').html(
                '<div class="text-muted small" style="padding:8px 0;">' +
                '<i class="fa fa-exclamation-circle"></i> ' + esc(puqT('ms_could_not_load_suggestions')) +
                '</div>'
            );
        }
    });

    $('#puq-existing-domains-list').on('click', '.puq-domain-chip', function(){
        $('#puq-new-domain').val($(this).data('domain')).focus();
        showMsg('', '');
    });

    $('#puq-external-dns-toggle').on('change', function(){
        var enabled = $(this).is(':checked') ? 1 : 0;
        // Route through puqClientAjax — form-urlencoded POSTs to clientarea.php
        // get 302'd by WHMCS's anti-forgery layer.
        puqClientAjax('setExternalDns', { enabled: enabled }, function(){}, 'POST');
        $('#puq-ns-hints').toggle(!enabled);
    });

    // Real-time format hint (no AJAX — just regex)
    var domainRe = /^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/;
    $('#puq-new-domain').on('input', function(){
        var v = this.value.toLowerCase().trim();
        if (v === '') { showMsg('', ''); return; }
        if (!domainRe.test(v)) showMsg(puqT('ms_not_valid_domain_format'), 'muted');
        else showMsg('<i class="fa fa-check"></i> ' + puqT('ms_looks_good'), 'success');
    });
    // Enter key triggers submit
    $('#puq-new-domain').on('keypress', function(e){
        if (e.which === 13) { e.preventDefault(); $('#puq-set-domain-btn').click(); }
    });

    $('#puq-set-domain-btn').on('click', function(){
        var $b = $(this);
        var domain = ($('#puq-new-domain').val() || '').trim().toLowerCase();
        if (!domainRe.test(domain)) {
            showMsg(puqT('ms_please_enter_valid_domain'), 'error');
            $('#puq-new-domain').focus();
            return;
        }
        $b.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> ' + puqT('ms_checking_and_saving'));
        showMsg(puqT('ms_saving'), 'muted');
        // Route through puqClientAjax — JSON POST (not form-urlencoded).
        puqClientAjax('setDomain', { domain: domain }, function(r){
            if (r && r.status === 'success') {
                showMsg(r.msg || puqT('ms_saved_reloading'), 'success');
                setTimeout(function(){ window.location.reload(); }, 1200);
            } else {
                $b.prop('disabled', false).html('<i class="fa fa-rocket"></i> ' + puqT('ms_start_deployment'));
                showMsg((r && r.msg) || puqT('ms_failed_generic'), 'error');
            }
        }, 'POST');
    });
})();
</script>
{/literal}
