@extends('installer.layout')
@section('title', 'Create Admin Account — Quickro POS Installer')

@section('content')
<div class="max-w-xl">
    <h1 class="text-3xl font-black text-white">Create Admin Account</h1>
    <p class="mt-3 text-sm leading-7 text-slate-400">
        Set up the primary administrator account. You will use these credentials to
        log in to the Quickro POS admin panel.
    </p>

    @if($errors->any())
        <div class="mt-6 rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4">
            <p class="text-sm font-semibold text-rose-400">Please fix the following errors</p>
            <ul class="mt-2 space-y-1 text-xs text-rose-300">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('install.admin-save') }}" class="mt-8 space-y-5">
        @csrf

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Full Name</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                   placeholder="Admin User"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Email Address</label>
            <input type="email" name="email" value="{{ old('email') }}" required
                   placeholder="admin@yourdomain.com"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Password</label>
            <input type="password" name="password" required minlength="8"
                   placeholder="Minimum 8 characters"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Confirm Password</label>
            <input type="password" name="password_confirmation" required minlength="8"
                   placeholder="Re-enter password"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <button type="submit"
                class="w-full inline-flex items-center justify-center gap-2 rounded-full bg-brand-600 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">
            Create Account &amp; Finish
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        </button>
    </form>
</div>
@endsection