@extends('install.layout')

@section('content')
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Step 4: Create Super-Admin</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Create the first admin account for the Admin Command Center.</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.step4.admin') }}" 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="name">Full name</label>
                    <input
                        id="name"
                        name="name"
                        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('name') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="email">Email</label>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        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('email') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="password">Password</label>
                    <input
                        id="password"
                        name="password"
                        type="password"
                        required
                        minlength="8"
                        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 class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="password_confirmation">Confirm password</label>
                    <input
                        id="password_confirmation"
                        name="password_confirmation"
                        type="password"
                        required
                        minlength="8"
                        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>

            <button type="submit" class="w-full rounded-xl bg-[#FF2D20] px-5 py-3 text-sm font-semibold text-white hover:opacity-95">
                Create Admin & Finish
            </button>
        </form>

        <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200">
            <div class="font-semibold mb-2">cPanel Production Prep: Document Root Fix</div>
            If your hosting provider cannot set Document Root to <span class="font-semibold">/public</span>, you must move/copy the <span class="font-semibold">index.php</span> and other assets to the project root.
            A helper script is provided at <span class="font-semibold">scripts/public_to_root.sh</span>.
        </div>
    </div>
@endsection