@extends('setup.layout')
@section('setup-content')
<div class="step-indicator flex items-center mb-8">
    <div class="step done"><div class="step-circle"><i class="fas fa-check text-xs"></i></div><p class="text-xs text-center mt-1.5 text-emerald-400 font-medium">Requirements</p></div>
    <div class="step-line done"></div>
    <div class="step done"><div class="step-circle"><i class="fas fa-check text-xs"></i></div><p class="text-xs text-center mt-1.5 text-emerald-400 font-medium">Database</p></div>
    <div class="step-line done"></div>
    <div class="step active"><div class="step-circle">3</div><p class="text-xs text-center mt-1.5 text-indigo-400 font-medium">Admin</p></div>
    <div class="step-line"></div>
    <div class="step"><div class="step-circle">4</div><p class="text-xs text-center mt-1.5 text-slate-600">Install</p></div>
</div>

<div class="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8">
    <h2 class="text-xl font-bold text-white mb-1">Admin Account</h2>
    <p class="text-sm text-slate-500 mb-6">Create the super administrator account.</p>

    <form method="POST" action="{{ route('setup.postStep3') }}">
        @csrf
        <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-1.5">Full Name <span class="text-red-400">*</span></label>
            <input type="text" name="name" value="{{ old('name') }}" required class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all" placeholder="e.g. John Doe">
            @error('name') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-1.5">Email Address <span class="text-red-400">*</span></label>
            <input type="email" name="email" value="{{ old('email') }}" required class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all" placeholder="admin@example.com">
            @error('email') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-1.5">Phone Number</label>
            <input type="text" name="phone" value="{{ old('phone') }}" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all" placeholder="+252 61 234 5678">
            @error('phone') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-1.5">Password <span class="text-red-400">*</span></label>
                <input type="password" name="password" required class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all" placeholder="Min. 6 characters">
                @error('password') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-1.5">Confirm Password <span class="text-red-400">*</span></label>
                <input type="password" name="password_confirmation" required class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all" placeholder="Repeat password">
            </div>
        </div>

        <div class="flex items-center justify-between pt-6 border-t border-white/[0.06]">
            <a href="{{ route('setup.step2') }}" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors"><i class="fas fa-arrow-left mr-1"></i> Back</a>
            <button type="submit" class="px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 transition-all">
                Continue <i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </form>
</div>
@endsection