<x-app-layout title="Create room">
    <div class="mx-auto max-w-xl">
        <h1 class="text-xl font-semibold text-slate-900">Create a room</h1>
        <p class="mt-1 text-sm text-slate-500">Audio-only. Pick speakers when you create the room, or invite listeners to speak during the live session from People.</p>

        <form method="POST" action="{{ route('meet.spaces.store') }}" class="mt-6 space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700">Title</label>
                <input type="text" name="title" value="{{ old('title') }}" required placeholder="Weekly leadership check-in" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Description</label>
                <textarea name="description" rows="3" placeholder="What is this room about?" class="mt-1 w-full rounded-lg border-slate-300 text-sm">{{ old('description') }}</textarea>
            </div>

            @if ($members->isNotEmpty())
                <div>
                    <label class="block text-sm font-medium text-slate-700">Assigned speakers</label>
                    <p class="mt-0.5 text-xs text-slate-500">Team members who can speak when the room is live. You are always the host.</p>
                    <div class="mt-2 max-h-40 space-y-2 overflow-y-auto rounded-lg border border-slate-200 p-3">
                        @foreach ($members as $member)
                            <label class="flex items-center gap-2 text-sm">
                                <input type="checkbox" name="speaker_refs[]" value="{{ $member->user_ref }}" @checked(in_array($member->user_ref, old('speaker_refs', []))) class="rounded border-slate-300">
                                <span>{{ $member->user_ref }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endif

            <div>
                <label class="block text-sm font-medium text-slate-700">Invite listeners by email (optional)</label>
                <p class="mt-0.5 text-xs text-slate-500">Comma-separated addresses. Each listener receives a join link by email.</p>
                <input type="text" name="invite_emails" value="{{ old('invite_emails') }}" placeholder="listener@example.com, guest@example.com" class="mt-2 w-full rounded-lg border-slate-300 text-sm">
                @error('invite_emails')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Passcode (optional)</label>
                <input type="text" name="passcode" value="{{ old('passcode') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <fieldset class="space-y-2">
                <legend class="text-sm font-medium text-slate-700">Privacy</legend>
                <label class="flex items-start gap-2 text-sm">
                    <input type="checkbox" name="invite_only" value="1" @checked(old('invite_only', true)) class="mt-0.5 rounded border-slate-300">
                    <span>
                        <span class="font-medium text-slate-800">Private room</span>
                        <span class="mt-0.5 block text-xs text-slate-500">Only invited people or org members with the link can join.</span>
                    </span>
                </label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="mute_listeners" value="1" @checked(old('mute_listeners', true)) class="rounded border-slate-300"> Mute listeners on join (speakers & host can talk)</label>
            </fieldset>

            <button type="submit" class="btn-primary btn-primary-lg w-full">Create room</button>
        </form>
    </div>
</x-app-layout>
