<!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;
            --amber-bg: #fffbeb; --amber-br: #fde68a;
            --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-ok  { background: var(--green-bg); border: 1px solid var(--green-br); color: #065f46; }
        .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="number"], 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; }
        /* 2-column row for host + port */
        .frow { display: grid; grid-template-columns: 1fr 7rem; gap: .75rem; align-items: end; }
        .frow .field { margin-bottom: 0; }
        /* ── Divider ───────────────────────── */
        .divider { border: none; border-top: 1px solid var(--s100); margin: 1.25rem 0; }
        .field-label-hint { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .375rem; }
        .field-label-hint label { margin-bottom: 0; }
        .field-label-hint .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 active">
            <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">

    @if (session('status'))
        <div class="alert alert-ok" 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 ($errors->any() && ! $errors->has('connection'))
        <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

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

    <div class="card">
        <div class="card-hd">
            <h1>数据库配置</h1>
            <p class="lead">请填写数据库连接信息。保存前会测试连接并检查目标库是否为空；通过后将保存配置。本步骤不会创建业务数据或管理员账号。</p>
        </div>
        <div class="card-bd">
            <form method="post" action="{{ route('install.database.store') }}">
                @csrf
                <div class="field">
                    <label for="db_connection">数据库类型</label>
                    <select id="db_connection" name="db_connection" required>
                        <option value="mysql" @selected(old('db_connection', $defaults['db_connection']) === 'mysql')>MySQL</option>
                        <option value="mariadb" @selected(old('db_connection', $defaults['db_connection']) === 'mariadb')>MariaDB</option>
                    </select>
                </div>

                <div class="frow">
                    <div class="field">
                        <label for="db_host">主机地址</label>
                        <input id="db_host" type="text" name="db_host" value="{{ old('db_host', $defaults['db_host']) }}" required autocomplete="off" placeholder="127.0.0.1">
                        @error('db_host')<div class="err">{{ $message }}</div>@enderror
                    </div>
                    <div class="field">
                        <label for="db_port">端口</label>
                        <input id="db_port" type="number" name="db_port" min="1" max="65535" value="{{ old('db_port', $defaults['db_port']) }}" required placeholder="3306">
                        @error('db_port')<div class="err">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="field">
                    <label for="db_database">数据库名</label>
                    <input id="db_database" type="text" name="db_database" value="{{ old('db_database', $defaults['db_database']) }}" required autocomplete="off">
                    @error('db_database')<div class="err">{{ $message }}</div>@enderror
                </div>

                <hr class="divider">

                <div class="field">
                    <label for="db_username">用户名</label>
                    <input id="db_username" type="text" name="db_username" value="{{ old('db_username', $defaults['db_username']) }}" required autocomplete="username">
                    @error('db_username')<div class="err">{{ $message }}</div>@enderror
                </div>

                <div class="field">
                    <div class="field-label-hint">
                        <label for="db_password">密码</label>
                        <span class="opt">可为空</span>
                    </div>
                    <input id="db_password" type="password" name="db_password" value="{{ old('db_password', '') }}" autocomplete="new-password">
                    <div class="hint">出于安全考虑，连接失败后重新填写时需再次输入。</div>
                    @error('db_password')<div class="err">{{ $message }}</div>@enderror
                </div>

                <div class="actions">
                    <a class="btn btn-secondary" href="{{ route('install.environment') }}">
                        <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">
                        测试连接并保存
                        <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>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

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