<!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-bg: #f0fdf4; --green-br: #a7f3d0;
            --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; }
        /* ── Section heading ───────────────── */
        .sec-hd {
            display: flex; align-items: center; gap: .4375rem;
            font-size: .9375rem; font-weight: 600; color: var(--s800);
            margin: 1.5rem 0 1rem; padding-bottom: .625rem;
            border-bottom: 1px solid var(--s100);
        }
        .sec-hd::before { content: ''; width: 3px; height: 1rem; background: var(--blue); border-radius: 2px; flex-shrink: 0; }
        .sec-hd:first-of-type { margin-top: 0; }
        /* ── Alerts ────────────────────────── */
        .alert {
            display: flex; align-items: flex-start; gap: .75rem;
            padding: .875rem 1.125rem; border-radius: .625rem;
            margin-bottom: 1rem; font-size: .9375rem;
        }
        .alert-ok  { background: var(--green-bg); border: 1px solid var(--green-br); color: #065f46; }
        .alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
        .alert-err { background: var(--red-bg); border: 1px solid var(--red-br); color: var(--red-d); }
        .ai { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: .1rem; }
        .alert strong { font-weight: 700; }
        /* ── Form ──────────────────────────── */
        .field { margin-bottom: 1.125rem; }
        label { display: block; font-weight: 600; font-size: .875rem; color: var(--s700); margin-bottom: .375rem; }
        input[type="text"], input[type="password"], input[type="url"], select {
            width: 100%; box-sizing: border-box;
            padding: .6875rem .875rem;
            border: 1.5px solid var(--s300); border-radius: .5rem;
            font-size: .9375rem; color: var(--s900); background: #fff;
            outline: none; -webkit-appearance: none; appearance: none;
            transition: border-color .15s, box-shadow .15s;
        }
        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4.427 7.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem;
            padding-right: 2.25rem;
        }
        input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
        .hint { font-size: .8125rem; color: var(--s500); margin-top: .3rem; line-height: 1.5; }
        .err { font-size: .8125rem; color: var(--red-d); margin-top: .3rem; }
        .lbl-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .375rem; }
        .lbl-row label { margin-bottom: 0; }
        .opt { font-size: .75rem; color: var(--s400); font-weight: 400; }
        /* ── 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-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 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 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">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">

    @if (session('status'))
        <div class="alert {{ $databaseState['safe'] ? 'alert-ok' : 'alert-warn' }}" role="status">
            <svg class="ai" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/></svg>
            <div>{{ session('status') }}</div>
        </div>
    @endif

    @if (! empty($databaseStatusMessage))
        @php
            $databaseAlertClass = match (true) {
                $applicationMarkedInstalled, $databaseSituation === \App\Services\Install\WebInstallDatabaseSituation::EmptySafe, $databaseSituation === \App\Services\Install\WebInstallDatabaseSituation::EmptyMigrationsTableOnly => 'alert-ok',
                $databaseSituation === \App\Services\Install\WebInstallDatabaseSituation::PartialInstallation => 'alert-warn',
                default => 'alert-err',
            };
        @endphp
        <div class="alert {{ $databaseAlertClass }}" role="status">
            @if ($databaseAlertClass === 'alert-ok')
                <svg class="ai" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/></svg>
            @elseif ($databaseAlertClass === 'alert-warn')
                <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 5Zm1 9a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" clip-rule="evenodd"/></svg>
            @else
                <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>
            @endif
            <div>{{ $databaseStatusMessage }}</div>
        </div>
    @endif

    @if ($errors->has('install'))
        <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>{{ $errors->first('install') }}</div>
        </div>
    @endif

    @if ($errors->any() && ! $errors->has('install'))
        <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>
                <ul style="margin:.375rem 0 0 1.1rem;">
                    @foreach ($errors->all() as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="card">
        <div class="card-hd">
            <h1>系统初始化</h1>
            <p class="lead">本步骤将初始化系统数据、写入基础资料，并创建首任<strong>系统管理员</strong>账号。完成后安装向导将自动锁定。</p>
        </div>
        <div class="card-bd">
            <form method="post" action="{{ route('install.initialize.store') }}">
                @csrf

                <div class="sec-hd">基本设置</div>

                <div class="field">
                    <label for="system_url">系统访问地址</label>
                    <input id="system_url" type="url" name="system_url" value="{{ old('system_url', $defaults['system_url']) }}" required maxlength="512" placeholder="https://erp.example.com">
                    <div class="hint">请填写浏览器访问管理端的完整网址（需包含 http:// 或 https://）。</div>
                    @error('system_url')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <label for="timezone">时区</label>
                    <select id="timezone" name="timezone" required>
                        @foreach ($timezoneOptions as $tzRow)
                            <option value="{{ $tzRow['value'] }}" @selected(old('timezone', $defaults['timezone']) === $tzRow['value'])>{{ $tzRow['label'] }}</option>
                        @endforeach
                    </select>
                    <div class="hint">用于单据、报表等时间的显示与计算，请按企业所在地选择。</div>
                    @error('timezone')<div class="err">{{ $message }}</div>@enderror
                </div>

                <div class="sec-hd">首任系统管理员</div>

                <div class="field">
                    <label for="admin_name">管理员姓名</label>
                    <input id="admin_name" type="text" name="admin_name" value="{{ old('admin_name', $defaults['admin_name']) }}" required maxlength="80">
                    @error('admin_name')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <label for="login_account">登录账号</label>
                    <input id="login_account" type="text" name="login_account" value="{{ old('login_account', $defaults['login_account']) }}" required maxlength="64" pattern="[a-zA-Z0-9_.-]+" autocomplete="username">
                    <div class="hint">可为字母、数字、下划线、连字符与英文句点；<strong>不必</strong>使用邮箱格式。</div>
                    @error('login_account')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <div class="lbl-row">
                        <label for="admin_email">邮箱</label>
                        <span class="opt">可选</span>
                    </div>
                    <input id="admin_email" type="text" name="admin_email" value="{{ old('admin_email', $defaults['admin_email']) }}" maxlength="255" autocomplete="email">
                    @error('admin_email')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <label for="password">登录密码</label>
                    <input id="password" type="password" name="password" required minlength="8" autocomplete="new-password">
                    <div class="hint">至少 8 位，请牢记该密码，安装完成后凭此登录管理端。</div>
                    @error('password')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <label for="password_confirmation">确认密码</label>
                    <input id="password_confirmation" type="password" name="password_confirmation" required minlength="8" autocomplete="new-password">
                </div>

                @if (! $databaseState['safe'] && ($databaseState['checks']['reinstall_reset_supported'] ?? false))
                    <div class="sec-hd">重新安装（仅限测试库）</div>
                    <div class="field">
                        <label class="lbl-row" style="align-items: flex-start; gap: .5rem; cursor: pointer;">
                            <input type="checkbox" name="reinstall_reset" value="1" style="width: auto; margin-top: .2rem;" @checked(filter_var(old('reinstall_reset'), FILTER_VALIDATE_BOOLEAN))>
                            <span>我已确认此数据库<strong>仅用于测试</strong>，并同意<strong>清空本系统相关数据</strong>（含历史业务与登录账号）后重新安装。</span>
                        </label>
                        <div class="hint">若库中还有其他系统的数据，向导将无法继续；请勿在生产环境勾选。</div>
                        @error('reinstall_reset')<div class="err">{{ $message }}</div>@enderror
                    </div>
                @endif

                <div class="actions">
                    <a class="btn btn-secondary" href="{{ route('install.database') }}">
                        <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>
                    <button type="submit" class="btn btn-primary" @disabled(! $canAttemptInstall)>
                        {{ $databaseState['safe'] ? '点击开始安装' : (($databaseState['checks']['reinstall_reset_supported'] ?? false) ? '确认条件后继续安装' : '数据库状态未通过，暂不可安装') }}
                        <svg width="14" height="14" 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>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

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