@php($lc = $liveClass ?? null)
<div class="row">
    <div class="col-md-8 mb-3">
        <label class="form-label">{{ __('Title') }}</label>
        <input type="text" name="title" value="{{ old('title', $lc->title ?? '') }}" class="form-control" required>
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">{{ __('Course') }}</label>
        <select name="course_id" class="form-select" required>
            <option value="">{{ __('Select course') }}</option>
            @foreach($courses as $course)
                <option value="{{ $course->id }}" @selected(old('course_id', $lc->course_id ?? '') == $course->id)>{{ $course->title }}</option>
            @endforeach
        </select>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">{{ __('Description') }}</label>
    <textarea name="description" rows="2" class="form-control">{{ old('description', $lc->description ?? '') }}</textarea>
</div>

<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">{{ __('Provider') }}</label>
        <select name="provider" class="form-select" required>
            @foreach(['builtin' => __('Built-in room (recommended)'), 'zoom' => 'Zoom', 'google_meet' => 'Google Meet', 'jitsi' => __('Jitsi link'), 'custom' => __('Custom')] as $val => $label)
                <option value="{{ $val }}" @selected(old('provider', $lc->provider ?? 'builtin') === $val)>{{ $label }}</option>
            @endforeach
        </select>
        <div class="form-text">{{ __('The built-in room runs inside the LMS — video, screen share, chat, whiteboard and automatic attendance.') }}</div>
    </div>
    <div class="col-md-8 mb-3">
        <label class="form-label">{{ __('Join URL') }}</label>
        <input type="url" name="join_url" value="{{ old('join_url', $lc->join_url ?? '') }}" class="form-control" placeholder="https://zoom.us/j/...">
        <div class="form-text" id="lfJoinHint" data-zoom="{{ ($zoomAuto ?? false) ? 1 : 0 }}" data-meet="{{ ($meetAuto ?? false) ? 1 : 0 }}"
             data-hint-builtin="{{ __('Leave empty when using the built-in room.') }}"
             data-hint-zoom-auto="{{ __('Leave empty — a Zoom meeting is created for you (host link appears after saving).') }}"
             data-hint-zoom-manual="{{ __('Paste your Zoom join link. Ask the admin to connect Zoom (Settings → Live classroom) to create meetings automatically.') }}"
             data-hint-meet-auto="{{ __('Leave empty — a Google Meet link is created in your connected Google Calendar.') }}"
             data-hint-meet-manual="{{ __('Paste your Meet link, or connect Google Calendar (Account → Calendar) to create it automatically.') }}"
             data-hint-other="{{ __('Paste the link learners should open.') }}">{{ __('Leave empty when using the built-in room.') }}</div>
        @if(!empty($lc->room_settings['zoom_start_url']))
            <div class="mt-1 small"><i class="bi bi-camera-video text-primary me-1"></i>{{ __('Host link (only you):') }} <a href="{{ $lc->room_settings['zoom_start_url'] }}" target="_blank" rel="noopener">{{ __('Start Zoom meeting') }}</a></div>
        @endif
    </div>
</div>

<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">{{ __('Reminder before start (minutes)') }}</label>
        <input type="number" name="reminder_minutes" min="5" max="1440" value="{{ old('reminder_minutes', $lc->reminder_minutes ?? '') }}" class="form-control" placeholder="{{ __('Default :n', ['n' => (int) setting('live_reminder_minutes', 60)]) }}">
        <div class="form-text">{{ __('Enrolled learners get an e-mail and in-app reminder.') }}</div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var sel = document.querySelector('select[name=provider]'), hint = document.getElementById('lfJoinHint'), link = document.querySelector('input[name=join_url]');
    if (!sel || !hint) return;
    function sync() {
        var p = sel.value, key = 'other';
        if (p === 'builtin') key = 'builtin';
        else if (p === 'zoom') key = hint.dataset.zoom === '1' ? 'zoom-auto' : 'zoom-manual';
        else if (p === 'google_meet') key = hint.dataset.meet === '1' ? 'meet-auto' : 'meet-manual';
        hint.textContent = hint.dataset['hint' + key.replace(/-(\w)/g, function (_, c) { return c.toUpperCase(); }).replace(/^\w/, function (c) { return c.toUpperCase(); })] || '';
        var optional = key === 'builtin' || key === 'zoom-auto' || key === 'meet-auto';
        link.required = !optional;
    }
    sel.addEventListener('change', sync); sync();
})();
</script>
@endpush

<div class="row">
    <div class="col-md-3 mb-3">
        <label class="form-label">{{ __('Meeting ID') }}</label>
        <input type="text" name="meeting_id" value="{{ old('meeting_id', $lc->meeting_id ?? '') }}" class="form-control">
    </div>
    <div class="col-md-3 mb-3">
        <label class="form-label">{{ __('Password') }}</label>
        <input type="text" name="meeting_password" value="{{ old('meeting_password', $lc->meeting_password ?? '') }}" class="form-control">
    </div>
    <div class="col-md-3 mb-3">
        <label class="form-label">{{ __('Start time') }}</label>
        <input type="datetime-local" name="start_time" value="{{ old('start_time', optional($lc->start_time ?? null)->format('Y-m-d\TH:i')) }}" class="form-control" required>
    </div>
    <div class="col-md-3 mb-3">
        <label class="form-label">{{ __('End time') }}</label>
        <input type="datetime-local" name="end_time" value="{{ old('end_time', optional($lc->end_time ?? null)->format('Y-m-d\TH:i')) }}" class="form-control" required>
    </div>
</div>

@isset($liveClass)
    <div class="mb-3">
        <label class="form-label">{{ __('Status') }}</label>
        <select name="status" class="form-select">
            @foreach(['scheduled', 'live', 'completed', 'cancelled'] as $s)
                <option value="{{ $s }}" @selected(old('status', $lc->status) === $s)>{{ status_label($s) }}</option>
            @endforeach
        </select>
    </div>
@endisset