<x-layouts.portal title="Add Staff Member" page-title="Team Management">
    <div class="mb-8">
        <a href="{{ route('portal.staff.index') }}" class="text-[10px] font-bold text-amber-600 uppercase tracking-widest hover:underline flex items-center mb-2">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            Back to Team
        </a>
        <h2 class="text-xl font-bold text-zinc-900 tracking-tight">Add Staff Member</h2>
        <p class="text-xs text-zinc-500 mt-1">Create a new account for your waiter or biller.</p>
    </div>

    <form action="{{ route('portal.staff.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 space-y-6">
                <!-- Basic Information -->
                <x-card title="Basic Information">
                    <div class="space-y-4">
                        <x-input name="name" label="Full Name" placeholder="e.g. John Doe" required />
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <x-input type="email" name="email" label="Email Address" placeholder="john@example.com" required />
                            <x-input name="phone_number" label="Phone Number" placeholder="e.g. +91 9876543210" />
                        </div>

                        <div class="pt-4 border-t border-zinc-100">
                            <label class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-4 block">Assign Role</label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="relative flex items-center p-4 border border-zinc-200 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                                    <input type="radio" name="role" value="waiter" checked class="sr-only peer">
                                    <div class="w-4 h-4 border-2 border-zinc-300 rounded-full mr-3 peer-checked:border-amber-600 peer-checked:bg-amber-600 transition-all flex items-center justify-center">
                                        <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-bold text-zinc-900 leading-none">Waiter</p>
                                        <p class="text-[9px] text-zinc-500 mt-1">Access to Waiter App & KOT</p>
                                    </div>
                                </label>
                                <label class="relative flex items-center p-4 border border-zinc-200 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                                    <input type="radio" name="role" value="biller" class="sr-only peer">
                                    <div class="w-4 h-4 border-2 border-zinc-300 rounded-full mr-3 peer-checked:border-amber-600 peer-checked:bg-amber-600 transition-all flex items-center justify-center">
                                        <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-bold text-zinc-900 leading-none">Biller / POS</p>
                                        <p class="text-[9px] text-zinc-500 mt-1">Access to Billing & Settlements</p>
                                    </div>
                                </label>
                                <label class="relative flex items-center p-4 border border-zinc-200 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                                    <input type="radio" name="role" value="kitchen" class="sr-only peer">
                                    <div class="w-4 h-4 border-2 border-zinc-300 rounded-full mr-3 peer-checked:border-amber-600 peer-checked:bg-amber-600 transition-all flex items-center justify-center">
                                        <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-bold text-zinc-900 leading-none">Kitchen / KDS</p>
                                        <p class="text-[9px] text-zinc-500 mt-1">Access to Live Order Display</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </x-card>

                <!-- Security / Password -->
                <x-card title="Login Security">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <x-input type="password" name="password" label="Initial Password" placeholder="••••••••" required />
                        <x-input type="password" name="password_confirmation" label="Confirm Password" placeholder="••••••••" required />
                    </div>
                    <p class="mt-4 text-[9px] text-zinc-400 font-medium italic">
                        The staff member will use their email and this password to log in to their respective apps.
                    </p>
                </x-card>
            </div>

            <div class="space-y-6">
                <!-- Instructions / Help -->
                <x-card title="Role Guide">
                    <div class="space-y-4">
                        <div>
                            <p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest mb-1">Waiters</p>
                            <p class="text-[10px] text-zinc-500 leading-relaxed">
                                Waiters can take orders, view table status, and generate KOTs. They cannot access billing or settlements.
                            </p>
                        </div>
                        <div class="pt-4 border-t border-zinc-100">
                            <p class="text-[10px] font-bold text-purple-600 uppercase tracking-widest mb-1">Billers</p>
                            <p class="text-[10px] text-zinc-500 leading-relaxed">
                                Billers manage the POS terminal, generate invoices, handle payments, and settle tables.
                            </p>
                        </div>
                        <div class="pt-4 border-t border-zinc-100">
                            <p class="text-[10px] font-bold text-emerald-600 uppercase tracking-widest mb-1">Kitchen</p>
                            <p class="text-[10px] text-zinc-500 leading-relaxed">
                                Kitchen staff use the KDS (Kitchen Display System) to see active KOTs and mark items as ready.
                            </p>
                        </div>
                    </div>
                </x-card>

                <div class="pt-4">
                    <x-button type="submit" class="w-full py-4! text-xs!">
                        Create Staff Account
                    </x-button>
                </div>
            </div>
        </div>
    </form>
</x-layouts.portal>
