@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight">Manage Employees</h2>
    <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Build your company hierarchy and link staff to login accounts.</p>
</div>

@if(session('success'))
    <div class="bg-green-50 text-green-700 p-4 rounded-xl border border-green-200 mb-6 font-bold shadow-sm">✅ {{ session('success') }}</div>
@endif
@if($errors->any())
    <div class="bg-red-50 text-red-700 p-4 rounded-xl border border-red-200 mb-6 font-bold shadow-sm">⚠️ {{ $errors->first() }}</div>
@endif

<div class="grid grid-cols-1 xl:grid-cols-4 gap-8">
    <div class="xl:col-span-1">
        <form action="{{ route('employees.store') }}" method="POST" class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            @csrf
            <h3 class="font-black text-gray-800 uppercase tracking-widest text-sm mb-4">Add Employee Profile</h3>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">System Login Account</label>
                    <select name="user_id" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm bg-white">
                        <option value="">-- Select Unassigned User --</option>
                        @foreach($availableUsers as $u)
                            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->email }})</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="flex gap-2">
                    <div class="w-1/2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">First Name</label>
                        <input type="text" name="first_name" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm">
                    </div>
                    <div class="w-1/2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Last Name</label>
                        <input type="text" name="last_name" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm">
                    </div>
                </div>

                <div class="flex gap-2">
                    <div class="w-1/2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Emp Number</label>
                        <input type="text" name="employee_number" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm" placeholder="MOHM-002">
                    </div>
                    <div class="w-1/2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Hiring Date</label>
                        <input type="date" name="hiring_date" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm">
                    </div>
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Job Title</label>
                    <input type="text" name="job_title" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm" placeholder="e.g. Sales Rep">
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Department</label>
                    <select name="department_id" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm bg-white">
                        <option value="">-- Select Department --</option>
                        @foreach($departments as $d)
                            <option value="{{ $d->id }}">{{ $d->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Direct Manager</label>
                    <select name="manager_id" class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-brand-500 outline-none text-sm bg-white">
                        <option value="">-- No Manager (Reports to CEO) --</option>
                        @foreach($managers as $m)
                            <option value="{{ $m->id }}">{{ $m->first_name }} {{ $m->last_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-bold py-3 rounded-xl shadow-lg transition uppercase tracking-widest text-xs mt-6">Create Employee</button>
        </form>
    </div>

    <div class="xl:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Employee</th>
                        <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Role & Dept</th>
                        <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Manager</th>
                        <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($employees as $emp)
                        <tr class="hover:bg-slate-50/50 transition">
                            <td class="px-6 py-4">
                                <div class="font-bold text-gray-900">{{ $emp->first_name }} {{ $emp->last_name }}</div>
                                <div class="text-xs text-gray-500 mt-1 font-mono">{{ $emp->employee_number }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-bold text-gray-800">{{ $emp->job_title }}</div>
                                <div class="text-xs text-brand-600 mt-1">{{ optional($emp->department)->name }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">
                                {{ $emp->manager ? $emp->manager->first_name . ' ' . $emp->manager->last_name : 'CEO' }}
                            </td>
                            <td class="px-6 py-4 text-right">
                                <form action="{{ route('employees.destroy', $emp->id) }}" method="POST" onsubmit="return confirm('Delete this employee? This deletes their evaluations too!');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700 text-xs font-bold uppercase tracking-widest transition"><i class="fas fa-trash-alt"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400">No employees added yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection