@extends('layouts.admin')

@section('title', 'Add Staff')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="mb-8 border-b border-gray-100 pb-6 flex items-center justify-between gap-4">
        <div>
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-2 text-[10px] font-bold uppercase tracking-wider">
                    <li><a href="{{ route('admin.dashboard') }}" class="text-gray-400 hover:text-brand transition-colors">Admin</a></li>
                    <li><i class="fas fa-chevron-right text-gray-300 text-[8px]"></i></li>
                    <li><a href="{{ route('admin.staff.index') }}" class="text-gray-400 hover:text-brand transition-colors">Staff</a></li>
                    <li><i class="fas fa-chevron-right text-gray-300 text-[8px]"></i></li>
                    <li class="text-brand">Add</li>
                </ol>
            </nav>
            <h1 class="text-3xl font-black text-gray-900 tracking-tight">Add Staff Member</h1>
            <p class="text-gray-500 text-sm font-medium mt-1">Create a new administrator or staff account with precise access level.</p>
        </div>
        <a href="{{ route('admin.staff.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 text-xs font-semibold text-gray-700 hover:bg-gray-50">
            <i class="fas fa-arrow-left text-[10px]"></i>
            Back to staff list
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 md:p-8">
        <form method="POST" action="{{ route('admin.staff.store') }}" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Full name</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand/40" />
                    @error('name')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Email address</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand/40" />
                    @error('email')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="border-t border-gray-100 pt-4 mt-2">
                <h2 class="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-2">
                    <i class="fas fa-shield-halved text-[11px] text-gray-400"></i>
                    Access rules
                </h2>
                <p class="text-[11px] text-gray-400 mb-3">Choose which parts of the admin panel this user can manage.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach($permissions as $key => $label)
                        <label class="inline-flex items-start gap-3 text-xs text-gray-700 bg-gray-50 rounded-xl px-3 py-2.5 border border-gray-100 hover:border-brand/30 hover:bg-brand/5 transition-colors">
                            <input
                                type="checkbox"
                                name="permissions[]"
                                value="{{ $key }}"
                                class="mt-0.5 rounded border-gray-300 text-brand focus:ring-brand/40"
                                {{ in_array($key, old('permissions', [])) ? 'checked' : '' }}
                            />
                            <span class="flex-1">{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
                @error('permissions')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Role</label>
                    <select name="role" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand/40">
                        @foreach($roles as $key => $label)
                            <option value="{{ $key }}" @selected(old('role') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('role')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Status</label>
                    <div class="flex items-center gap-3 mt-2">
                        <label class="inline-flex items-center gap-2 text-xs text-gray-700">
                            <input type="checkbox" name="is_active" value="1" class="rounded border-gray-300 text-brand focus:ring-brand/40" {{ old('is_active', '1') ? 'checked' : '' }} />
                            <span>Active account</span>
                        </label>
                        <p class="text-[11px] text-gray-400">Inactive users cannot log in.</p>
                    </div>
                    @error('is_active')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Password</label>
                    <input type="password" name="password" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand/40" />
                    @error('password')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-700">Confirm password</label>
                    <input type="password" name="password_confirmation" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand/40" />
                </div>
            </div>

            <div class="pt-4 flex items-center justify-end gap-3 border-t border-gray-100 mt-4">
                <a href="{{ route('admin.staff.index') }}" class="px-4 py-2.5 rounded-xl border border-gray-200 text-xs font-semibold text-gray-700 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-emerald-600 !bg-brand text-white text-xs font-bold shadow-md shadow-brand/20 hover:bg-emerald-700 hover:!bg-brand/90">
                    <i class="fas fa-user-plus text-[10px] mr-1"></i>
                    Create staff account
                </button>
            </div>
        </form>
    </div>
</div>
@endsection
