@extends('layouts.admin')

@section('title', 'Salon : ' . $roomName)

@section('content')
<div class="h-[calc(100vh-80px)] w-full relative bg-gray-900 overflow-hidden">
    <!-- Header over Jitsi -->
    <div class="absolute top-0 left-0 right-0 z-10 p-4 flex justify-between items-center pointer-events-none">
        <div class="bg-black/40 backdrop-blur-md px-6 py-2 rounded-full border border-white/10 flex items-center gap-4 pointer-events-auto">
            <span class="text-white font-bold tracking-tight">Salon : {{ $roomName }}</span>
            <div class="flex items-center gap-2">
                <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                <span class="text-[10px] text-white/70 uppercase font-black uppercase tracking-widest">En Direct</span>
            </div>
        </div>
        
        <a href="{{ route('communication.jitsi.index') }}" class="bg-red-500/80 hover:bg-red-600 text-white px-6 py-2 rounded-full font-bold transition-all pointer-events-auto flex items-center gap-2 shadow-lg">
            <i class="fa-solid fa-door-open"></i>
            Quitter
        </a>
    </div>

    <!-- Jitsi Iframe -->
    <div id="jitsi-container" class="w-full h-full bg-gray-900"></div>
</div>

<script src="https://8x8.vc/vpaas-magic-cookie-06e1b7f036574f26b5c00e6c6c5c5c5c/external_api.js" async></script>
<!-- Using public meet.jit.si as fallback if the 8x8 fails or user wants standard -->
<script src="https://meet.jit.si/external_api.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const domain = "meet.jit.si";
        const options = {
            roomName: "SciencesAfrique-{{ $roomName }}-{{ Auth::id() }}",
            width: "100%",
            height: "100%",
            parentNode: document.querySelector('#jitsi-container'),
            userInfo: {
                displayName: "{{ Auth::user()->name }}",
                email: "{{ Auth::user()->email }}"
            },
            configOverwrite: {
                startWithAudioMuted: true,
                startWithVideoMuted: true,
                prejoinPageEnabled: false
            },
            interfaceConfigOverwrite: {
                TOOLBAR_BUTTONS: [
                    'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
                    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
                    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
                    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
                    'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone',
                    'security'
                ],
            }
        };
        const api = new JitsiMeetExternalAPI(domain, options);
    });
</script>
@endsection