@extends('installer.layout')

@section('step_content')
    <div class="border-b border-slate-800 pb-4">
        <h2 class="text-lg sm:text-xl font-extrabold text-white flex items-center gap-2">
            <i class="fa-solid fa-user-shield text-amber-400"></i>
            <span>Step 4: Create Master Super Admin Account</span>
        </h2>
        <p class="text-xs text-slate-400 mt-1">Create your administrator account for managing the platform settings, users, and transactions.</p>
    </div>

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

        <div>
            <label class="block text-xs font-bold text-slate-300 mb-1.5">Administrator Name</label>
            <input type="text" name="name" value="{{ old('name', 'Super Admin') }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white focus:outline-none focus:border-amber-400">
        </div>

        <div>
            <label class="block text-xs font-bold text-slate-300 mb-1.5">Administrator Email Address</label>
            <input type="email" name="email" value="{{ old('email', 'admin@buymeadrink.com') }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Password</label>
                <input type="password" name="password" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Confirm Password</label>
                <input type="password" name="password_confirmation" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex flex-col-reverse sm:flex-row items-center justify-between gap-3">
            <a href="{{ route('install.migrate') }}" class="w-full sm:w-auto text-center py-2.5 text-xs font-bold text-slate-400 hover:text-white transition-colors">
                <i class="fa-solid fa-arrow-left mr-1"></i> Back
            </a>

            <button type="submit" class="w-full sm:w-auto px-8 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs shadow-xl shadow-amber-500/20 transition-all flex items-center justify-center gap-2">
                <span>Create Admin & Complete</span>
                <i class="fa-solid fa-arrow-right"></i>
            </button>
        </div>
    </form>
@endsection