<x-app-layout title="New display">
    <div class="mx-auto max-w-lg space-y-4">
        <div>
            <a href="{{ route('care.displays.index') }}" class="text-sm text-slate-500 hover:text-slate-800">← Displays</a>
            <h1 class="mt-2 text-2xl font-semibold text-slate-900">New display</h1>
        </div>
        <form method="POST" action="{{ route('care.displays.store') }}" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700">Name</label>
                <input name="name" value="{{ old('name') }}" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Branch</label>
                <select name="branch_id" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($branches as $b)
                        <option value="{{ $b->id }}" @selected(old('branch_id') == $b->id)>{{ $b->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Layout</label>
                <select name="layout" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($layouts as $k => $v)
                        <option value="{{ $k }}" @selected(old('layout', 'standard') === $k)>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Queues on screen</label>
                @forelse ($queues as $q)
                    <label class="mt-2 flex gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="queue_ids[]" value="{{ $q->id }}" @checked(in_array($q->id, old('queue_ids', [])))>
                        {{ $q->name }}
                    </label>
                @empty
                    <p class="mt-2 text-sm text-slate-500">No service queues yet. Leave empty to show all branch queues.</p>
                @endforelse
            </div>
            <button type="submit" class="btn-primary w-full">Create display</button>
        </form>
    </div>
</x-app-layout>
