@extends('layouts.app')
@section('title', 'Departments')
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Departments</h1><p class="text-xs text-gray-400">Manage hospital departments</p></div>
    <button onclick="document.getElementById('addDeptModal').classList.remove('hidden')" class="btn-primary text-xs flex items-center gap-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add Department</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@foreach($departments as $d)
    <div class="bg-white rounded-xl border p-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="text-sm font-bold text-gray-800">{{ $d->name }}</h3>
                <p class="text-xs text-gray-400 font-mono">{{ $d->code }}</p>
                @if($d->description)<p class="text-xs text-gray-500 mt-1">{{ $d->description }}</p>@endif
            </div>
            <div class="text-right">
                <span class="badge {{ $d->is_active ? 'badge-success' : 'badge-gray' }}">{{ $d->is_active ? 'Active' : 'Inactive' }}</span>
                <p class="text-xs text-gray-400 mt-1">{{ $d->users_count }} staff</p>
            </div>
        </div>
    </div>
@endforeach
</div>

<div id="addDeptModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4 p-6">
        <h3 class="font-bold mb-3">Add Department</h3>
        <form method="POST" action="{{ route('admin.departments.store') }}">@csrf
            <div class="space-y-3">
                <div><label class="form-label">Name *</label><input type="text" name="name" required class="form-input"></div>
                <div><label class="form-label">Code *</label><input type="text" name="code" required class="form-input" placeholder="e.g. OPD"></div>
                <div><label class="form-label">Description</label><input type="text" name="description" class="form-input"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('addDeptModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Add</button></div>
        </form>
    </div>
</div>
@endsection