@extends('layouts.dashboard')
@section('title', $liveClass->title)
@section('page_title', $liveClass->title)

@section('content')
    <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <a href="{{ $room['moderator'] ? route('instructor.liveclasses.index') : route('student.liveclasses.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i>
        </a>
        <span class="badge bg-danger"><i class="bi bi-record-circle me-1"></i>{{ __('Live') }}</span>
        <span class="text-muted small">{{ $liveClass->course?->title }}</span>
        @if($room['moderator'])
            <span class="badge bg-primary-subtle text-primary-emphasis ms-auto">{{ __('You are the moderator') }}</span>
        @endif
    </div>

    <div class="card shadow-sm mb-3">
        <div id="lfRoom" style="height:72vh;background:#111;border-radius:.5rem"></div>
    </div>

    @if($room['moderator'])
        <div class="card shadow-sm">
            <div class="card-header bg-white fw-semibold">{{ __('After the class') }}</div>
            <form method="POST" action="{{ route('liveclass.room.recording', $liveClass) }}" class="card-body">
                @csrf
                <p class="text-muted small">{{ __('Paste the recording link and it becomes a lesson in the course, so anyone who missed the class can watch it.') }}</p>
                <div class="row g-2">
                    <div class="col-md-5">
                        <input type="url" name="recording_url" class="form-control" placeholder="https://…" value="{{ $liveClass->recording_url }}" required>
                    </div>
                    <div class="col-md-3">
                        <select name="section_id" class="form-select" required>
                            @foreach(($liveClass->course?->sections ?? collect()) as $section)
                                <option value="{{ $section->id }}">{{ $section->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="title" class="form-control" placeholder="{{ __('Lesson title (optional)') }}">
                    </div>
                    <div class="col-md-1 d-grid">
                        <button class="btn btn-primary"><i class="bi bi-upload"></i></button>
                    </div>
                </div>
                @if($liveClass->recording_lesson_id)
                    <div class="alert alert-success small mt-3 mb-0">{{ __('A recording lesson is already published for this class.') }}</div>
                @endif
            </form>
        </div>
    @endif
@endsection

@push('scripts')
    <script src="https://{{ $room['domain'] }}/external_api.js"></script>
    <script>
        // The room runs inside the page: video, screen share, chat and the
        // whiteboard. Joining and leaving is reported back so attendance is
        // recorded without anyone ticking a register.
        (function () {
            var cfg = @json($room),
                csrf = '{{ csrf_token() }}',
                joinUrl = '{{ route('liveclass.room.joined', $liveClass) }}',
                leaveUrl = '{{ route('liveclass.room.left', $liveClass) }}';

            if (typeof JitsiMeetExternalAPI === 'undefined') {
                document.getElementById('lfRoom').innerHTML =
                    '<div class="d-flex align-items-center justify-content-center h-100 text-white p-4 text-center">' +
                    '{{ __('The classroom could not load. Check the room domain in Settings, or that this page is served over HTTPS.') }}</div>';
                return;
            }

            var api = new JitsiMeetExternalAPI(cfg.domain, {
                roomName: cfg.room,
                jwt: cfg.jwt || undefined,
                parentNode: document.getElementById('lfRoom'),
                userInfo: { displayName: cfg.display_name, email: cfg.email },
                configOverwrite: {
                    subject: cfg.subject,
                    startWithAudioMuted: !cfg.moderator,
                    startWithVideoMuted: !cfg.moderator,
                    prejoinPageEnabled: false,
                    disableDeepLinking: true
                },
                interfaceConfigOverwrite: { MOBILE_APP_PROMO: false }
            });

            function report(url) {
                return fetch(url, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                    keepalive: true
                });
            }

            api.addListener('videoConferenceJoined', function () { report(joinUrl); });
            api.addListener('videoConferenceLeft', function () { report(leaveUrl); });
            api.addListener('readyToClose', function () {
                report(leaveUrl).finally(function () { window.location.href = '{{ route('dashboard') }}'; });
            });
            window.addEventListener('pagehide', function () { report(leaveUrl); });
        })();
    </script>
@endpush