<x-app-layout title="Schedule meeting">
    <div class="mx-auto max-w-xl">
        <h1 class="text-xl font-semibold text-slate-900">Schedule a meeting</h1>

        <form method="POST" action="{{ route('meet.rooms.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 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" class="mt-1 w-full rounded-lg border-slate-300 text-sm">{{ old('description') }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Date & time (leave empty for instant)</label>
                <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Duration (minutes)</label>
                    <input type="number" name="duration_minutes" value="{{ old('duration_minutes', 60) }}" min="15" max="480" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Timezone</label>
                    <select name="timezone" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                        @foreach (config('meet.schedule_timezones') as $tz)
                            <option value="{{ $tz }}" @selected(old('timezone', $organization->timezone) === $tz)>{{ $tz }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Invite by email (comma-separated)</label>
                <input type="text" name="invite_emails" value="{{ old('invite_emails') }}" placeholder="colleague@example.com" 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">Recurrence</legend>
                <select name="recurrence_rule" class="w-full rounded-lg border-slate-300 text-sm">
                    <option value="">Does not repeat</option>
                    @foreach ($recurrenceRules as $key => $label)
                        <option value="{{ $key }}" @selected(old('recurrence_rule') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs text-slate-500">Interval</label>
                        <input type="number" name="recurrence_interval" value="{{ old('recurrence_interval', 1) }}" min="1" max="12" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs text-slate-500">Repeat until</label>
                        <input type="date" name="recurrence_until" value="{{ old('recurrence_until') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    </div>
                </div>
            </fieldset>

            <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">Options</legend>
                <label class="flex items-start gap-2 text-sm">
                    <input type="checkbox" name="waiting_room" value="1" @checked(old('waiting_room', $defaultSettings['waiting_room'] ?? true)) class="mt-0.5 rounded border-slate-300">
                    <span>
                        <span class="font-medium text-slate-800">Waiting room</span>
                        <span class="mt-0.5 block text-xs text-slate-500">Guests wait until the host admits them. Uncheck to let guests join directly.</span>
                    </span>
                </label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="join_before_host" value="1" @checked(old('join_before_host')) class="rounded border-slate-300"> Allow join before host</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="mute_on_join" value="1" @checked(old('mute_on_join', $defaultSettings['mute_on_join'] ?? true)) class="rounded border-slate-300"> Mute participants on join</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="auto_record" value="1" @checked(old('auto_record')) class="rounded border-slate-300"> Auto-record</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="live_captions" value="1" @checked(old('live_captions')) class="rounded border-slate-300"> Live captions</label>
            </fieldset>

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