<x-app-layout title="Schedule webinar">
    <div class="mx-auto max-w-xl">
        <h1 class="text-xl font-semibold text-slate-900">Schedule a webinar</h1>
        <p class="mt-1 text-sm text-slate-500">After creating the webinar, link it to a virtual or hybrid event in Ladill Events for registration, invitations, and QR codes. Billed at GHS {{ number_format(config('meet.billing.price_per_participant_ghs', 0.30), 2) }} per participant when the session ends.</p>

        <form method="POST" action="{{ route('meet.webinars.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</label>
                <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}" required 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">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">Webinar 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">Hold attendees until you admit them.</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 attendees 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>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="panel_discussions" value="1" @checked(old('panel_discussions')) class="rounded border-slate-300"> Enable panel discussions (multi-speaker stage layout)</label>
            </fieldset>

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