<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RemoteMatch Installer</title>
    <style>
        :root{--ink:#0f172a;--muted:#64748b;--line:#dbe7ef;--soft:#f8fafc;--teal:#0f766e;--cyan:#38bdf8;--rose:#e11d48;--amber:#f59e0b}
        *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 8% 0,rgba(20,184,166,.16),transparent 28rem),radial-gradient(circle at 100% 0,rgba(56,189,248,.15),transparent 30rem),linear-gradient(180deg,#f8fdff 0,#eef9fb 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
        .wrap{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:42px 0 64px}
        .hero{display:grid;gap:24px;align-items:end;margin-bottom:24px}
        @media(min-width:860px){.hero{grid-template-columns:1.1fr .9fr}}
        .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(15,118,110,.18);background:#fff;border-radius:999px;padding:8px 12px;color:var(--teal);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 14px 40px rgba(15,23,42,.06)}
        .dot{width:8px;height:8px;border-radius:99px;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.14)}
        h1{margin:18px 0 0;font-size:clamp(34px,6vw,64px);line-height:1.02;letter-spacing:-.055em}
        .lead{max-width:720px;margin:18px 0 0;color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.75}
        .panel,.form-card{border:1px solid rgba(148,163,184,.28);border-radius:30px;background:rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(15,23,42,.09);backdrop-filter:blur(18px)}
        .panel{padding:22px}
        .panel h2,.form-card h2{margin:0;font-size:22px;letter-spacing:-.03em}
        .checks{display:grid;gap:12px;margin-top:18px}
        .check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px}
        .icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-weight:900}
        .ok{background:#d1fae5;color:#047857}.bad{background:#ffe4e6;color:#be123c}
        .check strong{display:block;font-size:14px}.check span{display:block;margin-top:3px;color:var(--muted);font-size:13px;word-break:break-word}
        .form-card{margin-top:24px;overflow:hidden}
        .form-head{padding:24px;background:linear-gradient(135deg,#fff,#ecfeff)}
        .grid{display:grid;gap:18px;padding:24px}
        @media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
        .field label{display:block;margin-bottom:8px;font-size:13px;font-weight:800;color:#334155}
        .field input,.field select{width:100%;min-height:48px;border:1px solid #dbe7ef;border-radius:16px;background:#fff;padding:0 14px;color:var(--ink);font:inherit;outline:none;transition:.18s}
        .field input:focus,.field select:focus{border-color:#14b8a6;box-shadow:0 0 0 5px rgba(20,184,166,.13)}
        .section-title{padding:22px 24px 0;color:#0f766e;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
        .actions{display:flex;flex-direction:column;gap:12px;align-items:stretch;border-top:1px solid #e2e8f0;padding:22px 24px;background:#f8fafc}
        @media(min-width:640px){.actions{flex-direction:row;justify-content:space-between;align-items:center}}
        button{min-height:52px;border:0;border-radius:999px;background:#08111f;color:#fff;padding:0 24px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 18px 40px rgba(15,23,42,.18);transition:.18s}
        button:hover{transform:translateY(-1px);background:#0f766e}
        button:disabled{cursor:not-allowed;opacity:.45;transform:none;background:#64748b}
        .note{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
        .error{margin:0 24px 18px;border:1px solid #fecdd3;border-radius:18px;background:#fff1f2;padding:14px 16px;color:#be123c;font-size:14px;font-weight:700}
        .mini{display:grid;gap:12px;margin-top:18px}
        .mini div{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:16px}
        .mini strong{display:block}.mini span{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.5}
    </style>
</head>
<body>
    <main class="wrap">
        <section class="hero">
            <div>
                <span class="badge"><span class="dot"></span> RemoteMatch setup wizard</span>
                <h1>Install your AI remote job platform from the browser.</h1>
                <p class="lead">Configure the application, connect MySQL, create the first admin, run migrations, seed required records, and lock this copy to your domain.</p>
            </div>
            <aside class="panel">
                <h2>Install flow</h2>
                <div class="mini">
                    <div><strong>1. Server checks</strong><span>PHP extensions and writable folders are verified first.</span></div>
                    <div><strong>2. Database and app setup</strong><span>Enter MySQL, URL, timezone, and admin credentials.</span></div>
                    <div><strong>3. Domain lock</strong><span>After install, this copy is bound to the installed domain.</span></div>
                </div>
            </aside>
        </section>

        <section class="panel">
            <h2>Server requirements</h2>
            <div class="checks">
                @foreach ($checks as $check)
                    <div class="check">
                        <div class="icon {{ $check['passed'] ? 'ok' : 'bad' }}">{{ $check['passed'] ? '✓' : '!' }}</div>
                        <div>
                            <strong>{{ $check['label'] }}</strong>
                            <span>{{ $check['detail'] }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <form method="post" action="{{ route('install.store') }}" class="form-card">
            @csrf
            <div class="form-head">
                <h2>Installation details</h2>
                <p class="lead" style="font-size:15px;margin-top:8px">These values are written to `.env`. Third-party API keys can be configured later from the admin settings panel.</p>
            </div>

            @if ($errors->any())
                <div class="error">
                    {{ $errors->first() }}
                </div>
            @endif

            <p class="section-title">Application</p>
            <div class="grid three">
                <div class="field">
                    <label for="app_name">Application name</label>
                    <input id="app_name" name="app_name" value="{{ old('app_name', 'RemoteMatch') }}" required>
                </div>
                <div class="field">
                    <label for="app_url">Website URL</label>
                    <input id="app_url" name="app_url" type="url" value="{{ old('app_url', request()->getSchemeAndHttpHost()) }}" required>
                </div>
                <div class="field">
                    <label for="timezone">Timezone</label>
                    <select id="timezone" name="timezone" required>
                        @foreach (timezone_identifiers_list() as $timezone)
                            <option value="{{ $timezone }}" @selected(old('timezone', 'UTC') === $timezone)>{{ $timezone }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <p class="section-title">Database</p>
            <div class="grid two">
                <div class="field">
                    <label for="db_host">Database host</label>
                    <input id="db_host" name="db_host" value="{{ old('db_host', '127.0.0.1') }}" required>
                </div>
                <div class="field">
                    <label for="db_port">Database port</label>
                    <input id="db_port" name="db_port" type="number" value="{{ old('db_port', 3306) }}" required>
                </div>
                <div class="field">
                    <label for="db_database">Database name</label>
                    <input id="db_database" name="db_database" value="{{ old('db_database') }}" required>
                </div>
                <div class="field">
                    <label for="db_username">Database username</label>
                    <input id="db_username" name="db_username" value="{{ old('db_username') }}" required>
                </div>
                <div class="field">
                    <label for="db_password">Database password</label>
                    <input id="db_password" name="db_password" type="password" autocomplete="new-password">
                </div>
            </div>

            <p class="section-title">First admin</p>
            <div class="grid two">
                <div class="field">
                    <label for="admin_name">Admin name</label>
                    <input id="admin_name" name="admin_name" value="{{ old('admin_name', 'RemoteMatch Admin') }}" required>
                </div>
                <div class="field">
                    <label for="admin_email">Admin email</label>
                    <input id="admin_email" name="admin_email" type="email" value="{{ old('admin_email') }}" required>
                </div>
                <div class="field">
                    <label for="admin_password">Admin password</label>
                    <input id="admin_password" name="admin_password" type="password" autocomplete="new-password" required>
                </div>
                <div class="field">
                    <label for="admin_password_confirmation">Confirm admin password</label>
                    <input id="admin_password_confirmation" name="admin_password_confirmation" type="password" autocomplete="new-password" required>
                </div>
            </div>

            <div class="actions">
                <p class="note">After install, `/install` is locked and the app is bound to the selected domain.</p>
                <button type="submit" @disabled(! $requirementsPass)>Install RemoteMatch</button>
            </div>
        </form>
    </main>
</body>
</html>
