<x-app-layout title="Add department">
    <div class="mx-auto max-w-lg">
        <h1 class="text-xl font-semibold text-slate-900">Add department</h1>
        <form method="POST" action="{{ route('care.departments.store') }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf
            <div>
                <label class="block text-sm font-medium">Branch</label>
                <select name="branch_id" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div><label class="block text-sm font-medium">Name</label><input type="text" name="name" required class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
            <div>
                <label class="block text-sm font-medium">Type</label>
                <select name="type" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($types as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn-primary w-full">Save</button>
        </form>
    </div>
</x-app-layout>
