@extends('backend.layouts.app')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; padding: 10px; }
        .camera-box { position: relative; background: black; border-radius: 5px; overflow: hidden; }
        .camera-box video { width: 100%; }
        .camera-header { position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: white; padding: 5px; text-align: left; }
        .status { font-size: 12px; color: yellow; }
        .fullscreen { position: absolute; bottom: 10px; right: 10px; background: white; padding: 5px; cursor: pointer; }
    </style>

    <h1>Live Stream Dashboard</h1>
    <div class="dashboard" id="cameraGrid"></div>

    {{-- To Use WebRTC --}}
    <video id="webrtc-camera-{camera.id}" autoplay playsinline></video>


    <script>
        /* To Use WebRTC */
        function startWebRTCStream(cameraId, streamUrl) {
            let peer = new SimplePeer({ initiator: true, trickle: false });
            peer.on('signal', data => {
                fetch(`/webrtc/${cameraId}/offer`, {
                    method: 'POST', 
                    body: JSON.stringify(data),
                    headers: { 'Content-Type': 'application/json' }
                }).then(response => response.json())
                .then(answer => peer.signal(answer));
            });
            peer.on('stream', stream => {
                document.getElementById(`webrtc-camera-${cameraId}`).srcObject = stream;
            });
        }
        /* End To Use WebRTC */

        function fetchCameras() {
            fetch('/cameras')
                .then(response => response.json())
                .then(cameras => {
                    const grid = document.getElementById('cameraGrid');
                    grid.innerHTML = ''; // Clear grid before updating

                    cameras.forEach(camera => {
                        let streamUrl = camera.rtsp_url.includes('rtsp') ? `/hls/camera_${camera.id}/playlist.m3u8` : camera.rtsp_url;
                        let videoTag = camera.rtsp_url.includes('rtsp')
                            ? `<video-js id="camera-${camera.id}" class="video-js" controls autoplay>
                                <source src="${streamUrl}" type="application/x-mpegURL">
                                </video-js>`
                            : `<iframe src="${streamUrl}" width="100%" height="100%"></iframe>`;

                        grid.innerHTML += `
                            <div class="camera-box">
                                <div class="camera-header">${camera.name} <span class="status">${camera.status}</span></div>
                                ${videoTag}
                                <button class="fullscreen" onclick="toggleFullscreen(this)">⛶</button>
                            </div>
                        `;
                    });

                    // Initialize Video.js for HLS streams
                    document.querySelectorAll('video-js').forEach(video => videojs(video.id));
                });
        }

        function toggleFullscreen(button) {
            let box = button.parentElement;
            if (!document.fullscreenElement) {
                box.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        // Refresh camera grid every 10 seconds
        setInterval(fetchCameras, 10000);
        fetchCameras();
    </script>
@endsection