@extends('admin.layouts.app')

@section('content')
{{-- Flex container untuk menarik konten ke tengah horizontal --}}
<div class="flex justify-center items-center w-full pb-20">
    
    <div class="w-full max-w-lg"> {{-- max-w-lg membatasi lebar form supaya simetris --}}
        
        <div class="mb-8 text-center">
            <h1 class="text-3xl font-extrabold text-[#0D215C] tracking-tight">Tambah Petugas Baru</h1>
            <p class="text-slate-500 mt-2 font-medium">Buat akun untuk pengawas lapangan</p>
        </div>

        <div class="bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200/60 border border-slate-100 overflow-hidden">
            <div class="p-8 md:p-12">
                
                <form action="{{ route('admin.users.store') }}" method="POST" class="space-y-6">
                    @csrf

                    <div class="space-y-2">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-[2px] ml-1">Nama Lengkap</label>
                        <input type="text" name="name" 
                               class="w-full px-6 py-4 bg-[#F2F5FB] border-none rounded-2xl focus:ring-4 focus:ring-[#0D215C]/10 transition-all outline-none text-slate-700 placeholder:text-slate-300" 
                               placeholder="Contoh: Budi Santoso" required>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-[2px] ml-1">Username</label>
                        <input type="text" name="username" 
                               class="w-full px-6 py-4 bg-[#F2F5FB] border-none rounded-2xl focus:ring-4 focus:ring-[#0D215C]/10 transition-all outline-none text-slate-700 placeholder:text-slate-300" 
                               placeholder="budi_petugas" required>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-[2px] ml-1">Password</label>
                        <input type="password" name="password" 
                               class="w-full px-6 py-4 bg-[#F2F5FB] border-none rounded-2xl focus:ring-4 focus:ring-[#0D215C]/10 transition-all outline-none text-slate-700 placeholder:text-slate-300" 
                               placeholder="Masukkan password" required>
                    </div>

                    <div class="pt-6">
                        <button type="submit" 
                                class="w-full bg-[#0D215C] text-white font-bold py-5 rounded-2xl shadow-xl shadow-blue-900/20 hover:bg-[#081a45] transition-all transform active:scale-95">
                            Simpan Akun Petugas
                        </button>
                    </div>
                </form>

            </div>
        </div>

        <div class="mt-8 text-center">
            <a href="{{ route('admin.users') }}" class="text-sm font-bold text-slate-400 hover:text-[#0D215C] transition-colors flex items-center justify-center">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> KEMBALI KE DAFTAR
            </a>
        </div>

    </div>
</div>
@endsection