@extends('layouts.app', ['title' => 'Server & Cache'])
@section('content')

<div class="container-fluid py-4" style="max-width:860px;">

    <div class="d-flex align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-0">Server & Cache</h4>
            <small class="text-muted">Artisan-Befehle direkt ausführen</small>
        </div>
    </div>

    <div class="row g-4">

        {{-- Git Pull --}}
        <div class="col-12">
            <div class="card border-0 shadow-sm border-start border-4 border-success">
                <div class="card-body px-4 py-3 d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <div>
                        <div class="fw-bold"><i class="bi bi-github me-2"></i>Update von GitHub</div>
                        <div class="text-muted small">Holt <code>main</code> Branch – <strong>.env</strong> und <strong>storage/</strong> werden nicht angefasst</div>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge bg-secondary" id="status-git-pull"></span>
                        <button class="btn btn-success fw-bold px-4" onclick="runAction('git-pull')">
                            <i class="bi bi-cloud-download me-1"></i> Update holen
                        </button>
                    </div>
                </div>
                <div id="output-git-pull" class="output-box d-none mx-4 mb-3"></div>
            </div>
        </div>

        {{-- Nach Deploy --}}
        <div class="col-12 col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-3 pb-2 px-4 d-flex align-items-center gap-2">
                    <i class="bi bi-rocket-takeoff-fill text-warning"></i>
                    <strong class="small text-uppercase" style="letter-spacing:.05em;">Nach Deploy ausführen</strong>
                    <span class="badge bg-secondary ms-auto" id="status-clear-all"></span>
                </div>
                <div class="card-body px-4 pb-3">
                    <p class="text-muted small mb-3">
                        Führt <code>migrate</code>, Cache-Clear und alle Cache-Rebuilds aus.<br>
                        Nach jedem GitHub-Deploy hier klicken.
                    </p>
                    <button class="btn btn-warning fw-bold px-4" onclick="runAction('clear-all')">
                        <i class="bi bi-arrow-repeat me-1"></i> Alles neu aufbauen
                    </button>
                    <div id="output-clear-all" class="mt-3 output-box d-none"></div>
                </div>
            </div>
        </div>

        {{-- Einzelne Aktionen --}}
        <div class="col-12 col-lg-5">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-3 pb-2 px-4 d-flex align-items-center gap-2">
                    <i class="bi bi-terminal-fill text-primary"></i>
                    <strong class="small text-uppercase" style="letter-spacing:.05em;">Einzelne Befehle</strong>
                </div>
                <div class="card-body px-4 pb-3 d-flex flex-column gap-2">
                    @php
                        $actions = [
                            ['key' => 'migrate',      'label' => 'Migrate',          'icon' => 'bi-database-fill-up',  'color' => 'success'],
                            ['key' => 'cache-clear',  'label' => 'Cache leeren',      'icon' => 'bi-x-circle-fill',     'color' => 'danger'],
                            ['key' => 'config-cache', 'label' => 'Config cachen',     'icon' => 'bi-gear-fill',          'color' => 'primary'],
                            ['key' => 'route-cache',  'label' => 'Routes cachen',     'icon' => 'bi-diagram-3-fill',    'color' => 'info'],
                            ['key' => 'view-clear',   'label' => 'Views leeren',      'icon' => 'bi-eye-slash-fill',    'color' => 'secondary'],
                        ];
                    @endphp

                    @foreach($actions as $action)
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-outline-{{ $action['color'] }} btn-sm flex-grow-1 text-start"
                                onclick="runAction('{{ $action['key'] }}')">
                            <i class="bi {{ $action['icon'] }} me-2"></i>{{ $action['label'] }}
                        </button>
                        <span class="badge rounded-pill bg-light text-dark" id="status-{{ $action['key'] }}"></span>
                    </div>
                    @endforeach

                    <div id="output-single" class="mt-2 output-box d-none"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
.output-box {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: monospace;
    font-size: .8rem;
    white-space: pre-wrap;
    max-height: 320px;
    overflow-y: auto;
}
.output-box .ok         { color: #6bcb77; }
.output-box .err        { color: #f87171; }
.output-box .step-title { color: #c5ae8f; font-weight: bold; }
</style>

<script>
var lastSingleAction = null;

function runAction(action) {
    var isAll    = (action === 'clear-all');
    var isGit    = (action === 'git-pull');
    var outputEl = document.getElementById(isGit ? 'output-git-pull' : (isAll ? 'output-clear-all' : 'output-single'));
    var statusEl = document.getElementById('status-' + action);

    if (!isAll && !isGit && lastSingleAction && lastSingleAction !== action) {
        document.getElementById('status-' + lastSingleAction).textContent = '';
    }
    lastSingleAction = (isAll || isGit) ? null : action;

    outputEl.classList.remove('d-none');
    outputEl.innerHTML = '<span class="step-title">Wird ausgeführt…</span>';
    if (statusEl) {
        statusEl.className = 'badge ' + (isAll ? 'bg-warning ms-auto' : (isGit ? 'bg-warning' : 'rounded-pill bg-warning text-dark'));
        statusEl.textContent = '…';
    }

    fetch('{{ route("system.server.run") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ action: action })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var html = '';
        data.steps.forEach(function(step) {
            var cls = step.success ? 'ok' : 'err';
            html += '<span class="step-title">' + step.label + '</span>\n';
            html += '<span class="' + cls + '">' + step.output + '</span>\n\n';
        });
        outputEl.innerHTML = html;
        outputEl.scrollTop = outputEl.scrollHeight;

        var allOk = data.steps.every(function(s) { return s.success; });
        if (statusEl) {
            statusEl.className = 'badge ' + ((isAll || isGit) ? '' : 'rounded-pill ') + (allOk ? 'bg-success' : 'bg-danger');
            statusEl.textContent = allOk ? '✓ Erfolgreich' : '✗ Fehler';
        }
    })
    .catch(function() {
        outputEl.innerHTML = '<span class="err">Verbindungsfehler</span>';
    });
}
</script>

@endsection