@extends('admin.template.layout')

@section('title', 'Videoconferência')

@section('conteudo')

    <script src="https://cdn.metered.ca/sdk/video/1.4.5/sdk.min.js"></script>
    <script>
        window.METERED_DOMAIN = "{{ $METERED_DOMAIN }}";
        window.MEETING_ID = "{{ $MEETING_ID }}";
    </script>

    <style>
        .section-container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }

        .video-box {
            background-color: #111;
            border-radius: 12px;
            padding: 10px;
            text-align: center;
            margin-bottom: 20px;
        }

        .video-box video {
            width: 100%;
            max-height: 300px;
        }

        .btn-group {
            text-align: center;
            margin-top: 10px;
        }

        .btn-group button {
            margin: 5px;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            background-color: #2c3e50;
            color: white;
            cursor: pointer;
        }

        .form-group {
            margin-top: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        select,
        input {
            width: 100%;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .remote-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .participant-box {
            background-color: #222;
            border-radius: 10px;
            padding: 5px;
            width: 150px;
        }
    </style>

    <div class="section-container">
        <div id="waitingArea">
            <h2>Sala de Espera</h2>

            <div class="video-box">
                <video id="waitingAreaLocalVideo" autoplay muted></video>
            </div>

            <div class="btn-group">
                <button id="waitingAreaToggleMicrophone"><i class="fa-solid fa-microphone"></i></button>
                <button id="waitingAreaToggleCamera"><i class="fa-solid fa-camera"></i></button>
            </div>

            <div class="form-group">
                <label for="username">Nome:</label>
                <input type="text" id="username" placeholder="Digite seu nome">
            </div>

            <div class="form-group">
                <label for="cameraSelectBox">Câmera:</label>
                <select id="cameraSelectBox"></select>
            </div>

            <div class="form-group">
                <label for="microphoneSelectBox">Microfone:</label>
                <select id="microphoneSelectBox"></select>
            </div>

            <div class="btn-group">
                <button id="joinMeetingBtn">Entrar na Reunião</button>
            </div>
        </div>

        <div id="meetingView" style="display: none">
            <h2>Videoconferência Ativa</h2>

            <div class="video-box">
                <video id="activeSpeakerVideo" autoplay></video>
                <div id="activeSpeakerUsername" class="hidden"></div>
            </div>

            <div class="participant-box">
                <video id="localVideoTag" autoplay style="width:100%; height:100px;"></video>
                <div id="localUsername" style="text-align:center; color:white;">Eu</div>
            </div>

            <div class="remote-container" id="remoteParticipantContainer"></div>

            <div class="btn-group">
                <button id="toggleMicrophone"></button>
                <button id="toggleCamera"></button>
                <button id="toggleScreen"></button>
                <button id="leaveMeeting" style="background-color: #c0392b;">❌ Sair</button>
            </div>
        </div>

        <div id="leaveMeetingView" style="display: none">
            <h2>Você saiu da reunião!</h2>
            <div style="text-align:center; margin-top:20px;">
                <button onclick="location.reload();">🔄 Voltar à Página Inicial</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const showView = (idToShow) => {
                document.getElementById("waitingArea").style.display = "none";
                document.getElementById("meetingView").style.display = "none";
                document.getElementById("leaveMeetingView").style.display = "none";
                document.getElementById(idToShow).style.display = "block";
            };

            showView("waitingArea");

            window.showMeetingView = function() {
                showView("meetingView");
            }

            window.showLeaveView = function() {
                showView("leaveMeetingView");
            }
        });
    </script>
@endsection