<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {{-- <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Include Zoom Meeting SDK -->
    <script src="https://source.zoom.us/zoom-meeting-1.9.6.min.js"></script> --}}

    <script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script>

    <!-- For Client View -->
    <script src="https://source.zoom.us/zoom-meeting-3.1.6.min.js"></script>
</head>
<body>
    <a href="{{ url('/admin/LMS/zoom/start') }}">Make A Zoom Meeting Using Oauth2 And Laravel</a>
    <br/>
    <br/>
    <br/>
    {{ $respond }}

    @php
    // Decode the JSON-encoded Zoom details
    $zoomDetails = json_decode($respond, true);
    @endphp

    @if (@$zoomDetails['access_token'])
        <p>Meeting ID: {{ $zoomDetails['response']['id'] }}</p>
        <p>Meeting Topic: {{ $zoomDetails['response']['topic'] }}</p>
        <p>access_token: {{ $zoomDetails['access_token']}}</p>
        <!-- Add more details as needed -->


        <a href="{{ $zoomDetails['response']['start_url'] }}" target="_blank" class="btn btn-primary">Join Zoom Meeting</a>


        <!-- Create a button to join the meeting -->
        <button id="joinMeetingBtn">Join Meeting</button>

        <script>
            // Initialize the Zoom Web SDK
            ZoomMtg.setZoomJSLib('https://source.zoom.us/zoom-meeting-1.9.6.min.js', '/av'); // Update with the correct version
            ZoomMtg.preLoadWasm();
            ZoomMtg.prepareJssdk();

            // Your Zoom SDK integration code goes here
            document.getElementById('joinMeetingBtn').addEventListener('click', function() {
                // Use the Zoom SDK to join the meeting
                var meetingConfig = {
                    apiKey: {{ $zoomDetails['access_token'] }},
                    meetingNumber: {{ $zoomDetails['response']['id'] }},
                    userName: 'John Doe', // Change this to the user's name
                    passWord: '{{ $zoomDetails['response']['password'] }}',
                    leaveUrl: 'https://your-website.com', // Change this to your website URL
                    role: 0 // 0 for attendee, 1 for host
                };

                ZoomMtg.init({
                    leaveUrl: meetingConfig.leaveUrl,
                    isSupportAV: true,
                    success: function () {
                        ZoomMtg.join({
                            meetingNumber: meetingConfig.meetingNumber,
                            userName: meetingConfig.userName,
                            signature: '{{ $zoomDetails['access_token'] }}',
                            apiKey: meetingConfig.apiKey,
                            passWord: meetingConfig.passWord,
                            success: function (res) {
                                console.log('join meeting success', res);
                            },
                            error: function (res) {
                                console.error('join meeting error', res);
                            }
                        });
                    },
                    error: function (res) {
                        console.error('init error', res);
                    }
                });
            });
        </script>
    @else
        <p>Error: {{ $zoomDetails['msg'] }}</p>
    @endif
</body>
</html>
