@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto py-12">
    <div class="bg-white rounded-[3.5rem] shadow-2xl shadow-slate-200/50 border border-slate-50 p-12 relative overflow-hidden">
        <div class="absolute -top-12 -right-12 w-32 h-32 bg-purple-50 rounded-full opacity-50"></div>
        
        <h2 class="text-3xl font-black text-slate-800 uppercase italic tracking-tighter mb-2">Edit Department</h2>
        <p class="text-[10px] font-black text-slate-400 uppercase italic tracking-widest mb-10">Update department information</p>
        
        <form action="{{ route('admin.departments.update', $department->id) }}" method="POST" class="space-y-8">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Department Name --}}
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase text-slate-400 italic tracking-widest ml-4 mb-3 block">Department Name</label>
                    <input type="text" name="name" value="{{ $department->name }}" required class="w-full bg-slate-50 border-2 border-slate-50 rounded-[1.5rem] p-5 font-bold italic focus:bg-white focus:border-purple-500 transition-all">
                </div>

                {{-- Department Code --}}
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase text-slate-400 italic tracking-widest ml-4 mb-3 block">Department Code</label>
                    <input type="text" name="code" value="{{ $department->code }}" required class="w-full bg-slate-50 border-2 border-slate-50 rounded-[1.5rem] p-5 font-bold italic focus:bg-white focus:border-purple-500 transition-all">
                </div>

                {{-- Manager --}}
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase text-slate-400 italic tracking-widest ml-4 mb-3 block">Department Manager</label>
                    <select name="manager_id" class="w-full bg-slate-50 border-2 border-slate-50 rounded-[1.5rem] p-5 font-bold text-slate-700 italic focus:bg-white focus:border-purple-500 transition-all appearance-none">
                        <option value="">Choose Manager...</option>
                        @foreach($managers as $manager)
                            <option value="{{ $manager->id }}" {{ $department->manager_id == $manager->id ? 'selected' : '' }}>
                                {{ $manager->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Status --}}
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase text-slate-400 italic tracking-widest ml-4 mb-3 block">Department Status</label>
                    <select name="status" class="w-full bg-slate-50 border-2 border-slate-50 rounded-[1.5rem] p-5 font-bold text-slate-700 italic focus:bg-white focus:border-purple-500 transition-all appearance-none">
                        <option value="active" {{ $department->status == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ $department->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="pt-6">
                <button type="submit" class="w-full bg-slate-900 text-white py-6 rounded-[1.5rem] font-black uppercase italic tracking-widest hover:bg-purple-600 hover:shadow-2xl hover:shadow-purple-200 transition-all duration-300">
                    Update Department
                </button>
                <a href="{{ route('admin.departments.index') }}" class="block text-center mt-6 text-[10px] font-black text-slate-300 uppercase italic hover:text-slate-500 transition-colors">Cancel and Go Back</a>
            </div>
        </form>
    </div>
</div>
@endsection