@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h2 class="text-3xl font-black text-gray-900 tracking-tight uppercase">Edit Department</h2>
    <p class="text-gray-500 mt-1 uppercase text-[10px] font-bold tracking-widest">Update department details and description</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-2xl">
    <form action="{{ route('departments.update', $department->id) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="mb-6">
            <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Department Name</label>
            <input type="text" name="name" value="{{ old('name', $department->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 class="mb-6">
            <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Description</label>
            <textarea name="description" rows="4" 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">{{ old('description', $department->description) }}</textarea>
        </div>

        <div class="flex justify-end space-x-4 pt-6 mt-4 border-t border-gray-100">
            <a href="{{ route('departments.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