<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>环境检测 — DBErp 安装向导</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            color-scheme: light;
            --blue:    #2563eb; --blue-d:  #1d4ed8; --blue-dd: #1e40af;
            --blue-bg: #eff6ff; --blue-br: #bfdbfe;
            --green:   #16a34a; --green-d: #15803d; --green-bg: #f0fdf4; --green-br: #bbf7d0;
            --amber:   #d97706; --amber-bg: #fffbeb; --amber-br: #fde68a;
            --red:     #dc2626; --red-d: #b91c1c; --red-bg: #fef2f2; --red-br: #fecaca;
            --s50: #f8fafc; --s100: #f1f5f9; --s200: #e2e8f0; --s300: #cbd5e1;
            --s400: #94a3b8; --s500: #64748b; --s600: #475569; --s700: #334155;
            --s800: #1e293b; --s900: #0f172a;
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            background-color: #eef2ff;
            background-image:
                radial-gradient(ellipse 100% 55% at 0% 0%, rgba(219,234,254,.65) 0%, transparent 55%),
                radial-gradient(ellipse 70% 50% at 100% 100%, rgba(220,252,231,.45) 0%, transparent 55%),
                radial-gradient(circle, rgba(99,102,241,.055) 1px, transparent 1px);
            background-size: auto, auto, 28px 28px;
            background-attachment: fixed;
            color: var(--s900);
            line-height: 1.65;
            min-height: 100vh;
        }
        /* ── Stepper ───────────────────────── */
        .stepper-wrap { max-width: 44rem; margin: 0 auto; padding: 1.375rem 1.5rem .25rem; }
        .stepper { display: flex; align-items: flex-start; }
        .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
        .step-conn { flex: 1; height: 3px; background: var(--s200); margin-top: .875rem; border-radius: 2px; }
        .step-conn.done { background: var(--blue); }
        .step-dot {
            width: 2rem; height: 2rem; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .6875rem; font-weight: 700;
            border: 2px solid var(--s200); background: #fff; color: var(--s400); flex-shrink: 0;
            transition: border-color .2s, background .2s, box-shadow .2s;
        }
        .step.done .step-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
        .step.active .step-dot { background: #fff; border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgba(37,99,235,.13); }
        .step-lbl { font-size: .6875rem; color: var(--s400); text-align: center; white-space: nowrap; line-height: 1.3; }
        .step.done .step-lbl { color: var(--s600); }
        .step.active .step-lbl { color: var(--blue-d); font-weight: 600; }
        /* ── Wrap & Card ───────────────────── */
        .wrap { max-width: 44rem; margin: 0 auto; padding: 1.375rem 1.5rem 3rem; }
        .card {
            background: #fff; border-radius: 1rem; border: 1px solid var(--s200);
            box-shadow: 0 8px 20px -4px rgba(0,0,0,.09), 0 4px 6px -2px rgba(0,0,0,.04);
            overflow: hidden; margin-bottom: 1.25rem;
            position: relative;
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #2563eb 0%, #6366f1 50%, #2563eb 100%);
            z-index: 1;
        }
        .card-hd {
            padding: 1.5rem 1.75rem 1.25rem; border-bottom: 1px solid var(--s100);
            background: linear-gradient(to bottom right, #fbfbff, var(--s50));
        }
        .card-bd { padding: 1.5rem 1.75rem; }
        h1 { font-size: 1.375rem; font-weight: 800; margin-bottom: .45rem; letter-spacing: -.01em; }
        .lead { color: var(--s600); font-size: .9375rem; line-height: 1.65; }
        /* ── Alerts ────────────────────────── */
        .alert {
            display: flex; align-items: flex-start; gap: .75rem;
            padding: .875rem 1.125rem; border-radius: .625rem;
            margin-bottom: 1rem; font-size: .9375rem;
        }
        .alert-err  { background: var(--red-bg);   border: 1px solid var(--red-br);   color: var(--red-d); }
        .alert-warn { background: var(--amber-bg); border: 1px solid var(--amber-br); color: #92400e; }
        .ai { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: .1rem; }
        .alert strong { font-weight: 700; }
        /* ── Check Group ───────────────────── */
        .grp { margin-bottom: 1.25rem; }
        .grp:last-of-type { margin-bottom: 0; }
        .grp-title {
            display: flex; align-items: center; gap: .4375rem;
            font-size: .8125rem; font-weight: 700; color: var(--s500);
            text-transform: uppercase; letter-spacing: .06em;
            margin-bottom: .625rem; padding-bottom: .5rem;
            border-bottom: 1px solid var(--s100);
        }
        .grp-title::before { content: ''; width: 3px; height: .875rem; background: linear-gradient(to bottom, var(--blue), #6366f1); border-radius: 2px; flex-shrink: 0; }
        .chk-row {
            display: flex; align-items: flex-start; gap: .875rem;
            padding: .75rem .5rem;
            border-bottom: 1px solid var(--s50);
            transition: background .1s; border-radius: .375rem;
        }
        .chk-row:last-child { border-bottom: none; }
        .chk-row:hover { background: var(--s50); }
        .badge {
            flex-shrink: 0; width: 1.625rem; height: 1.625rem; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; margin-top: .125rem;
        }
        .badge-ok   { background: #dcfce7; color: #166534; }
        .badge-warn { background: #fef9c3; color: #854d0e; }
        .badge-fail { background: #fee2e2; color: var(--red-d); }
        .chk-body { flex: 1; min-width: 0; }
        .chk-label { font-weight: 600; color: var(--s700); font-size: .9375rem; line-height: 1.4; }
        .chk-summary {
            color: var(--s600); font-size: .8125rem; margin-top: .25rem; line-height: 1.55;
            font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
            word-break: break-all;
        }
        .chk-hint { color: var(--s500); font-size: .875rem; margin-top: .35rem; line-height: 1.5; }
        /* ── Actions ───────────────────────── */
        .actions {
            display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
            margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--s100);
        }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
            padding: .625rem 1.375rem; border-radius: .5rem;
            font-size: .9375rem; font-weight: 600;
            text-decoration: none; border: none; cursor: pointer;
            transition: all .15s; white-space: nowrap; line-height: 1.5;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--blue), #5b50f0); color: #fff;
            box-shadow: 0 2px 6px rgba(37,99,235,.32), 0 1px 2px rgba(37,99,235,.2);
        }
        .btn-primary:hover { background: linear-gradient(135deg, var(--blue-d), var(--blue-dd)); box-shadow: 0 6px 14px rgba(37,99,235,.38); transform: translateY(-1px); }
        .btn-secondary { background: #fff; color: var(--s700); border: 1.5px solid var(--s200); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
        .btn-secondary:hover { background: var(--s50); border-color: var(--s300); }
        .btn-primary:active { transform: translateY(1px) scale(.98); box-shadow: 0 1px 2px rgba(37,99,235,.15); }
        .btn-secondary:active { transform: translateY(1px) scale(.98); background: var(--s100); box-shadow: none; }
        .btn-muted { background: var(--s100); color: var(--s400); cursor: not-allowed; pointer-events: none; border: 1.5px solid var(--s200); }
        .btn-primary.is-install-busy, .btn-secondary.is-install-busy { transform: none; }
    </style>
</head>
<body>

@include('install.partials.install-wizard-header')

<div class="stepper-wrap">
    <div class="stepper">
        <div class="step done">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">欢迎</div>
        </div>
        <div class="step-conn done"></div>
        <div class="step active">
            <div class="step-dot">2</div>
            <div class="step-lbl">环境检测</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">3</div>
            <div class="step-lbl">数据库配置</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">4</div>
            <div class="step-lbl">系统初始化</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">5</div>
            <div class="step-lbl">安装完成</div>
        </div>
    </div>
</div>

<div class="wrap">

    @unless($report['can_continue'])
        <div class="alert alert-err" role="alert">
            <svg class="ai" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>
            <div><strong>无法继续：</strong>下列必要条件未满足。请按提示处理后刷新本页，全部通过后方可进入下一步。</div>
        </div>
    @endunless

    @if($report['has_recommended_warnings'])
        <div class="alert alert-warn" role="status">
            <svg class="ai" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>
            <div><strong>提示：</strong>部分推荐项未启用，不影响继续安装，但可能影响性能或个别功能体验。</div>
        </div>
    @endif

    <div class="card">
        <div class="card-hd">
            <h1>环境检测</h1>
            <p class="lead">以下为安装所需的服务器条件。检测项以中文说明为主，扩展名、路径等必要处保留英文便于对照 php.ini；灰色文字为处理建议，未通过的必要项须修复后刷新本页。</p>
        </div>
        <div class="card-bd">
            @foreach($report['groups'] as $group)
                <div class="grp">
                    <div class="grp-title">{{ $group['title'] }}</div>
                    @foreach($group['items'] as $item)
                        @php
                            if ($item['blocking']) {
                                $badgeClass = $item['ok'] ? 'badge-ok' : 'badge-fail';
                            } else {
                                $badgeClass = $item['ok'] ? 'badge-ok' : 'badge-warn';
                            }
                        @endphp
                        <div class="chk-row">
                            <span class="badge {{ $badgeClass }}" title="{{ $item['ok'] ? '通过' : ($item['blocking'] ? '未通过' : '建议项') }}">
                                @if($item['ok'])
                                    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
                                @elseif($item['blocking'])
                                    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/></svg>
                                @else
                                    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 6a.75.75 0 0 0-.75.75v3.5a.75.75 0 0 0 1.5 0v-3.5A.75.75 0 0 0 8 6Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
                                @endif
                            </span>
                            <div class="chk-body">
                                <div class="chk-label">{{ $item['label'] }}</div>
                                <div class="chk-summary">{{ $item['summary'] }}</div>
                                @if (($item['hint'] ?? '') !== '')
                                    <div class="chk-hint">{{ $item['hint'] }}</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endforeach

            <div class="actions">
                <a class="btn btn-secondary" href="{{ route('install.welcome') }}">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 1.06L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd"/></svg>
                    上一步
                </a>
                @if($report['can_continue'])
                    <a class="btn btn-primary" href="{{ route('install.database') }}">
                        下一步：数据库配置
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>
                    </a>
                @else
                    <span class="btn btn-muted" role="text">请先解决必要条件后再继续</span>
                @endif
            </div>
        </div>
    </div>
</div>

@include('install.partials.official-feedback-entry', ['variant' => 'default', 'compact' => true])

@include('install.partials.wizard-action-feedback')
</body>
</html>
