@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto bg-white p-10 rounded-3xl shadow-sm border border-slate-100">
    <div class="flex items-center justify-between mb-8 border-b pb-6 border-slate-50">
        <div>
            <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase">Edit Profile</h2>
            <p class="text-slate-400 text-xs font-bold italic">Updating details for {{ $employee->name }}</p>
        </div>
        <a href="{{ route('employees.index') }}" class="text-slate-300 hover:text-slate-600 transition"><i class="fas fa-times text-xl"></i></a>
    </div>

    <form action="{{ route('employees.update', $employee->id) }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-8">
        @csrf
        @method('PUT')

        <div class="md:col-span-2 flex items-center space-x-6 bg-slate-50 p-6 rounded-3xl border border-slate-100">
            <img src="{{ $employee->profile_image ? asset('storage/'.$employee->profile_image) : 'https://ui-avatars.com/api/?name='.urlencode($employee->name) }}" class="w-24 h-24 rounded-3xl shadow-lg border-4 border-white">
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Change Photo</label>
                <input type="file" name="profile_image" class="text-xs font-bold text-slate-500">
            </div>
        </div>

        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase mb-2">Employee Name</label>
            <input type="text" name="name" value="{{ $employee->name }}" required class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
        </div>

        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase mb-2">Email Address</label>
            <input type="email" name="email" value="{{ $employee->email }}" required class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
        </div>

        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase mb-2">Department</label>
            <select name="department_id" required class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
                @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-black text-slate-400 uppercase mb-2">Designation</label>
            <input type="text" name="designation" value="{{ $employee->designation }}" required class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
        </div>

        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase mb-2">Salary</label>
            <input type="number" name="salary" value="{{ $employee->salary }}" required class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
        </div>

        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase mb-2">Employee Status</label>
            <select name="status" class="w-full p-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-bold">
                <option value="active" {{ $employee->status == 'active' ? 'selected' : '' }}>ACTIVE</option>
                <option value="inactive" {{ $employee->status == 'inactive' ? 'selected' : '' }}>INACTIVE</option>
            </select>
        </div>

        <div class="md:col-span-2 pt-6">
            <button type="submit" class="w-full bg-slate-900 text-white p-5 rounded-3xl font-black uppercase tracking-[0.2em] text-sm hover:bg-indigo-600 transition shadow-xl shadow-indigo-100">
                Update Employee Data
            </button>
        </div>
    </form>
</div>
@endsection