<div class="panel panel-default" id="puq-deploy-splash">
    <div class="panel-heading">
        <h4 style="margin:0">
            <i class="fa fa-spinner fa-spin"></i>
            {$L.ms_service_being_deployed}
        </h4>
    </div>
    <div class="panel-body">
        <p><strong>{$L.ms_domain}:</strong> {$domain|escape}</p>
        <p>
            <strong>{$L.ms_whats_happening_now}:</strong>
            <span id="puq-deploy-stage">{$L.ms_starting}</span>
        </p>

        <div class="progress" style="height:24px; margin-top:12px;">
            <div id="puq-deploy-bar"
                 class="progress-bar progress-bar-striped active"
                 role="progressbar"
                 style="width:0%"
                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <span id="puq-deploy-bar-label">0%</span>
            </div>
        </div>

        <p class="text-muted" id="puq-deploy-counts" style="margin-top:8px;">
            {$L.ms_initializing}
        </p>

        <hr>
        <p class="text-muted small">
            <i class="fa fa-info-circle"></i>
            {$L.ms_page_refreshes_automatically}
        </p>

        <details style="margin-top:12px;">
            <summary class="text-muted small" style="cursor:pointer;">{$L.ms_recent_activity}</summary>
            <table class="table table-condensed table-striped" style="margin-top:8px; font-size:12px;">
                <thead>
                    <tr>
                        <th>{$L.ms_stage}</th>
                        <th style="width:100px;">{$L.ms_state}</th>
                        <th style="width:160px;">{$L.ms_updated}</th>
                    </tr>
                </thead>
                <tbody id="puq-deploy-recent">
                    <tr><td colspan="3" class="text-muted text-center">{$L.ms_loading}</td></tr>
                </tbody>
            </table>
        </details>
    </div>
</div>

{literal}
<script>
(function(){
    // This splash renders WITHOUT header.tpl, so window.puqT / window.PUQ_T may
    // be undefined here. Define a self-contained puqT from the injected {$L_json}
    // map (EN-base + current language) so the JS never throws on a missing global.
    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 sid = {/literal}{$service_id|default:0|intval}{literal};
    if (!sid) {
        // Fallback if service_id was not exposed by _ClientArea — try to read from current URL
        var m = window.location.search.match(/[?&]id=(\d+)/);
        if (m) sid = parseInt(m[1], 10);
    }
    if (!sid) {
        setTimeout(function(){ window.location.reload(); }, 30000);
        return;
    }

    function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){
        return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
    }); }

    function stateBadge(state){
        var label = (state || '').toString().toLowerCase();
        var cls = 'label-default';
        var human = label;
        switch (label) {
            case 'success':   cls = 'label-success'; human = puqT('ms_state_done'); break;
            case 'running':   cls = 'label-info';    human = puqT('ms_state_in_progress'); break;
            case 'queued':    cls = 'label-default'; human = puqT('ms_state_queued'); break;
            case 'error':     cls = 'label-danger';  human = puqT('ms_state_failed'); break;
            case 'cancelled': cls = 'label-warning'; human = puqT('ms_state_cancelled'); break;
        }
        return '<span class="label ' + cls + '">' + esc(human) + '</span>';
    }

    function fmtRecent(rows){
        if (!rows || !rows.length) return '<tr><td colspan="3" class="text-muted text-center">' + esc(puqT('ms_no_activity_yet')) + '</td></tr>';
        return rows.map(function(r){
            return '<tr>' +
                '<td>' + esc(r.stage || puqT('ms_working')) + '</td>' +
                '<td>' + stateBadge(r.state) + '</td>' +
                '<td>' + esc(r.updated_at) + '</td>' +
            '</tr>';
        }).join('');
    }

    function poll(){
        var url = 'clientarea.php?action=productdetails&id=' + sid + '&ajax=deployProgress&_=' + Date.now();
        fetch(url, { credentials: 'same-origin' })
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (!j || j.status !== 'success') return;
                var d = j.data || {};
                var pct = parseInt(d.percent, 10) || 0;
                var bar = document.getElementById('puq-deploy-bar');
                if (bar) {
                    bar.style.width = pct + '%';
                    bar.setAttribute('aria-valuenow', pct);
                }
                var lbl = document.getElementById('puq-deploy-bar-label');
                if (lbl) lbl.textContent = pct + '%';
                var st = document.getElementById('puq-deploy-stage');
                if (st) {
                    if (d.deploy_status === 'error') {
                        st.innerHTML = '<span class="text-danger"><i class="fa fa-exclamation-triangle"></i> ' + esc(d.deploy_error || puqT('ms_something_went_wrong')) + '</span>';
                    } else if (d.deploy_status === 'active') {
                        st.innerHTML = '<span class="text-success">' + esc(puqT('ms_deployment_finished')) + '</span>';
                    } else {
                        st.textContent = d.current_stage || puqT('ms_working');
                    }
                }
                var c = d.counts || {};
                var cnt = document.getElementById('puq-deploy-counts');
                if (cnt) {
                    cnt.innerHTML = puqT('ms_progress') + ': <strong>' + (c.done||0) + '</strong> ' + puqT('ms_of') + ' <strong>' + (c.total||0) + '</strong> ' + puqT('ms_steps_completed') +
                        (c.running ? ' &nbsp;·&nbsp; <span class="text-info">' + c.running + ' ' + puqT('ms_in_progress') + '</span>' : '') +
                        (c.queued  ? ' &nbsp;·&nbsp; <span class="text-muted">' + c.queued  + ' ' + puqT('ms_pending') + '</span>' : '') +
                        (c.error   ? ' &nbsp;·&nbsp; <span class="text-danger">' + c.error + ' ' + puqT('ms_failed') + '</span>' : '');
                }
                var rec = document.getElementById('puq-deploy-recent');
                if (rec) rec.innerHTML = fmtRecent(d.recent);

                // Transition out of the splash once deploy completes
                if (d.deploy_status === 'active' || d.deploy_status === 'error') {
                    setTimeout(function(){ window.location.reload(); }, 1200);
                }
            })
            .catch(function(){ /* ignore — next tick retries */ });
    }

    poll();
    setInterval(poll, 5000);

    // Hard reload safety net in case AJAX is silently failing
    setTimeout(function(){ window.location.reload(); }, 120000);
})();
</script>
{/literal}
