@extends('layouts.portal')

@section('header_title', 'Onboard New Artisan')

@section('content')
<div class="max-w-4xl space-y-8 pb-12">
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-8 md:p-12">
            <div class="mb-10">
                <h3 class="text-2xl font-black text-slate-900 mb-2">Artisan Details</h3>
                <p class="text-slate-500 font-medium">Integrate a new member into the agency ecosystem.</p>
            </div>

            <form action="{{ route('portal.employees.store') }}" method="POST" class="space-y-8">
                @csrf
                
                <!-- Primary Identity -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">FullName</label>
                        <input type="text" name="name" required placeholder="e.g. Leonardo da Vinci" 
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Portal Email</label>
                        <input type="email" name="email" required placeholder="leo@creative-souls.com" 
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                </div>

                <!-- Role & Department -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Portal Role</label>
                        <select name="role" required class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                            <option value="team_member">Team Member</option>
                            <option value="team_leader">Team Leader</option>
                            <option value="manager">Manager</option>
                            <option value="admin">Admin (Executive)</option>
                        </select>
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Department</label>
                        <select name="department_id" required class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                            <option value="">Select Portfolio</option>
                            @foreach($departments as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Designation</label>
                        <input type="text" name="designation" placeholder="e.g. Lead UI Architect" 
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                </div>

                <!-- Administration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Reporting Manager</label>
                        <select name="manager_id" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                            <option value="">Direct to Admin Core</option>
                            @foreach($managers as $manager)
                            <option value="{{ $manager->id }}">{{ $manager->name }} ({{ strtoupper($manager->role) }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Joining Date</label>
                        <input type="date" name="joining_date" required value="{{ date('Y-m-d') }}"
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                </div>

                <div class="pt-8 border-t border-slate-50 flex items-center justify-between">
                    <div class="flex items-center space-x-2 text-amber-500">
                        <i data-lucide="info" class="w-4 h-4"></i>
                        <p class="text-[10px] font-bold uppercase tracking-widest">A temporary password 'password' will be assigned.</p>
                    </div>
                    <button type="submit" class="px-10 py-4 bg-portal-primary text-white font-black rounded-2xl hover:bg-portal-primary-dark transition-all shadow-xl shadow-portal-primary/20">
                        Initiate Onboarding
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection