@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h2 class="text-3xl font-black text-gray-900 tracking-tight uppercase">Edit Employee Profile</h2>
    <p class="text-gray-500 mt-1 uppercase text-[10px] font-bold tracking-widest">Modify HR records and system access</p>
</div>

@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">
        <ul class="list-disc pl-5">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 max-w-4xl">
    <form action="{{ route('employees.update', $employee->id) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">First Name</label>
                <input type="text" name="first_name" value="{{ old('first_name', $employee->first_name) }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-gray-50 font-medium">
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Last Name</label>
                <input type="text" name="last_name" value="{{ old('last_name', $employee->last_name) }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-gray-50 font-medium">
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Department</label>
                <select name="department_id" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white font-medium">
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ $employee->department_id == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Direct Manager</label>
                <select name="manager_id" class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white font-medium">
                    <option value="">-- No Manager (Top Level) --</option>
                    @foreach($managers as $mgr)
                        <option value="{{ $mgr->id }}" {{ $employee->manager_id == $mgr->id ? 'selected' : '' }}>{{ $mgr->first_name }} {{ $mgr->last_name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Job Title</label>
                <input type="text" name="job_title" value="{{ old('job_title', $employee->job_title ?? $employee->position) }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-gray-50 font-medium">
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Employee Number</label>
                <input type="text" name="employee_number" value="{{ old('employee_number', $employee->employee_number) }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-gray-50 font-medium font-mono">
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Hiring Date</label>
                <input type="date" name="hiring_date" value="{{ old('hiring_date', $employee->hiring_date ?? $employee->hire_date) }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white font-medium">
            </div>

            <div class="md:col-span-2 mt-4 mb-2 border-b border-gray-100 pb-2">
                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest flex items-center">
                    <svg class="w-4 h-4 mr-2 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                    System Access & Login
                </h3>
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Email Address</label>
                <input type="email" name="email" value="{{ old('email', $employee->user->email ?? '') }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-gray-50 font-medium">
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">System Role</label>
                <select name="role" required class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white font-medium">
                    <option value="Employee" {{ ($employee->user->role ?? '') == 'Employee' ? 'selected' : '' }}>Standard Employee</option>
                    <option value="Manager" {{ ($employee->user->role ?? '') == 'Manager' ? 'selected' : '' }}>Manager / Evaluator</option>
                    <option value="HR" {{ ($employee->user->role ?? '') == 'HR' ? 'selected' : '' }}>HR Administrator</option>
                    <option value="Admin" {{ ($employee->user->role ?? '') == 'Admin' ? 'selected' : '' }}>Super Admin</option>
                </select>
            </div>
            
            <div class="md:col-span-2">
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Reset Password <span class="text-gray-400 font-normal lowercase">(Leave blank to keep current)</span></label>
                <input type="password" name="password" placeholder="••••••••" class="w-full md:w-1/2 px-4 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white font-medium">
            </div>
        </div>

        <div class="flex justify-end space-x-4 pt-6 mt-4 border-t border-gray-100">
            <a href="{{ route('users.index') }}" class="px-6 py-3 border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">Cancel</a>
            <button type="submit" class="px-10 py-3 bg-brand-600 hover:bg-brand-700 text-white font-bold rounded-xl shadow-lg transition">Save Changes</button>
        </div>
    </form>
</div>
@endsection