@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('users.index') }}" class="btn btn-ghost btn-sm btn-square">
            <span class="icon-[tabler--arrow-left] size-5"></span>
        </a>
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Add User</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Create a new system user</p>
        </div>
    </div>

    <div class="max-w-xl">
        <div class="card bg-base-100 border border-base-200 shadow-sm">
            <div class="card-body p-6">

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

                    {{-- Name --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Full Name</span>
                        </label>
                        <div class="input w-full @error('name') input-error @enderror">
                            <input type="text" name="name" value="{{ old('name') }}" class="grow" />
                            <span class="icon-[tabler--user] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                        @error('name')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Email --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Email Address</span>
                        </label>
                        <div class="input w-full @error('email') input-error @enderror">
                            <input type="email" name="email" value="{{ old('email') }}" class="grow" />
                            <span class="icon-[tabler--mail] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                        @error('email')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Password --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Password</span>
                        </label>
                        <div class="input w-full @error('password') input-error @enderror">
                            <input type="password" name="password" class="grow" />
                            <span class="icon-[tabler--lock] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                        @error('password')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Confirm Password --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Confirm Password</span>
                        </label>
                        <div class="input w-full">
                            <input type="password" name="password_confirmation" class="grow" />
                            <span
                                class="icon-[tabler--lock-check] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                    </div>

                    <div class="divider text-xs text-base-content/40">Roles</div>

                    {{-- Roles --}}
                    <div>
                        <label class="label mb-2">
                            <span class="label-text font-medium">Assign Roles</span>
                            <span class="label-text-alt text-base-content/40">optional</span>
                        </label>
                        <div class="flex flex-wrap gap-3">
                            @foreach ($roles as $role)
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="roles[]" value="{{ $role->name }}"
                                        class="checkbox checkbox-primary checkbox-sm"
                                        {{ in_array($role->name, old('roles', [])) ? 'checked' : '' }} />
                                    <span class="text-sm capitalize">{{ $role->name }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('roles')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary w-full gap-2">
                        <span class="icon-[tabler--device-floppy] size-4"></span>
                        Create User
                    </button>

                </form>
            </div>
        </div>
    </div>
@endsection