@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight">Manage Departments</h2>
    <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Add or remove company departments.</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 md:grid-cols-3 gap-8">
    <div class="md:col-span-1">
        <form action="{{ route('departments.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 New Department</h3>
            <div class="mb-4">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Department Name</label>
                <input type="text" name="name" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-brand-500 focus:ring-2 focus:ring-brand-200 outline-none transition" placeholder="e.g. Finance">
            </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">Save Department</button>
        </form>
    </div>

    <div class="md:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <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">Department Name</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($departments as $dept)
                    <tr class="hover:bg-slate-50/50 transition">
                        <td class="px-6 py-4 font-bold text-gray-900">{{ $dept->name }}</td>
                        <td class="px-6 py-4 text-right">
                            <form action="{{ route('departments.destroy', $dept->id) }}" method="POST" onsubmit="return confirm('Delete this department?');">
                                @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 mr-1"></i> Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="2" class="px-6 py-8 text-center text-gray-400">No departments added yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection