@extends('installer.layout')
@section('title', 'Installing...')
@section('content')
<div class="inst-card">
    <div class="inst-progress">
        <div class="s done"></div><div class="s done"></div><div class="s done"></div><div class="s done"></div>
        <div class="s done"></div><div class="s done"></div><div class="s active"></div><div class="s"></div>
    </div>
    <div class="inst-badge">Step 7 of 8</div>
    <h2>Installing...</h2>
    <p class="inst-subtitle" id="installStatus">Preparing installation...</p>
    <div class="install-log" id="installLog"></div>
    <div id="installComplete" style="display:none;">
        <div style="display:flex; gap:10px;">
            <a href="{{ route('install.complete') }}" class="btn btn-primary">Continue →</a>
        </div>
    </div>
    <div id="installFailed" style="display:none;">
        <div class="form-errors" id="installError" style="margin-bottom:12px;"></div>
        <a href="{{ route('install.summary') }}" class="btn btn-secondary">← Back to Summary</a>
    </div>
</div>
<script>
(function(){
    var log = document.getElementById('installLog');
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var token = csrf ? csrf.content : '';

    function addLog(text, cls){
        var div = document.createElement('div');
        if(cls) div.className = cls;
        div.textContent = text;
        log.appendChild(div);
        log.scrollTop = log.scrollHeight;
    }

    addLog('Starting installation...', 'log-info');

    fetch('{{ route("install.install") }}', {
        method: 'POST',
        headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN':token, 'Accept':'application/json' },
        body: JSON.stringify({})
    })
    .then(function(r){ return r.json(); })
    .then(function(json){
        if(json.steps){
            json.steps.forEach(function(step){
                var icon = step.success ? '✓' : '✗';
                var cls = step.success ? 'log-ok' : 'log-err';
                addLog(icon + ' ' + step.name, cls);
                if(step.error) addLog('  Error: ' + step.error, 'log-err');
                if(step.message) addLog('  ' + step.message, '');
                if(step.output) addLog('  ' + step.output, '');
            });
        }
        if(json.success){
            document.getElementById('installStatus').textContent = 'Installation complete!';
            document.getElementById('installStatus').style.color = '#22c55e';
            addLog('✓ Installation completed successfully!', 'log-ok');
            document.getElementById('installComplete').style.display = 'block';
        } else {
            document.getElementById('installStatus').textContent = 'Installation encountered errors.';
            document.getElementById('installStatus').style.color = '#ef4444';
            addLog('✗ Installation failed. Please check errors above.', 'log-err');
            document.getElementById('installFailed').style.display = 'block';
            document.getElementById('installError').textContent = json.message || 'Some steps failed. Check the log for details.';
        }
    })
    .catch(function(err){
        addLog('✗ Network error: ' + err.message, 'log-err');
        document.getElementById('installStatus').textContent = 'Installation failed.';
        document.getElementById('installStatus').style.color = '#ef4444';
        document.getElementById('installFailed').style.display = 'block';
        document.getElementById('installError').textContent = 'Network error: ' + err.message;
    });
})();
</script>
@endsection