@extends('install.layout')

@section('content')
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Step 2: Environment Setup</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Enter database credentials and your application URL. The installer will write them to <span class="font-semibold">.env</span>.</p>
        </div>

        @if ($errors->any())
            <div class="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('install.step2.save') }}" class="space-y-6 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            @csrf
            <div class="grid gap-4 md:grid-cols-2">
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="app_url">App URL</label>
                    <input
                        id="app_url"
                        name="app_url"
                        type="url"
                        required
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('app_url') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="db_host">Database Host</label>
                    <input
                        id="db_host"
                        name="db_host"
                        type="text"
                        required
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('db_host') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="db_port">Database Port (optional)</label>
                    <input
                        id="db_port"
                        name="db_port"
                        type="number"
                        min="1"
                        max="65535"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('db_port', 3306) }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="db_database">Database Name</label>
                    <input
                        id="db_database"
                        name="db_database"
                        type="text"
                        required
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('db_database') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="db_username">Database Username</label>
                    <input
                        id="db_username"
                        name="db_username"
                        type="text"
                        required
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('db_username') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="db_password">Database Password</label>
                    <input
                        id="db_password"
                        name="db_password"
                        type="password"
                        required
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    />
                </div>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <a href="{{ route('install.step1') }}" class="text-sm font-semibold text-[#FF2D20] hover:opacity-90">Back</a>
                <button type="submit" class="rounded-xl bg-[#FF2D20] px-6 py-2.5 text-sm font-semibold text-white hover:opacity-95">
                    Save .env & Continue
                </button>
            </div>
        </form>
    </div>
@endsection