@extends('layouts.app')

@section('content')

<div class="min-h-screen flex justify-center p-6 pt-10">

    <div class="w-full max-w-xl">

        <div class="bg-white p-6 rounded-2xl shadow border border-slate-200">

            <h2 class="text-xl font-bold mb-6 text-center text-[#1c1d56]">
                Tambah User Baru
            </h2>

            <form method="POST" action="{{ route('admin.users.store') }}">
                @csrf

                <div class="mb-4">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Nama</label>
                    <input type="text" name="name" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition">
                </div>

                <div class="mb-4">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Email</label>
                    <input type="email" name="email" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition">
                </div>

                <div class="mb-4">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Password</label>
                    <input type="password" name="password" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition">
                </div>

                <div class="mb-6">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Role Hak Akses</label>
                    <select name="role"
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition bg-white cursor-pointer">
                        <option value="user">User</option>
                        <option value="staff">Staff</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>

                <div class="flex items-center gap-3">
                    
                    {{-- TOMBOL KEMBALI (YANG LO BUTUHKAN) --}}
                    <a href="{{ route('admin.users.index') }}" 
                       class="w-1/2 bg-slate-200 hover:bg-slate-300 text-slate-700 text-center px-4 py-2.5 rounded-xl font-semibold text-sm transition">
                        Kembali
                    </a>

                    {{-- TOMBOL SIMPAN --}}
                    <button type="submit" 
                            class="w-1/2 bg-[#1c1d56] hover:opacity-90 text-white px-4 py-2.5 rounded-xl font-semibold text-sm transition shadow-sm">
                        Simpan
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection