@extends('crm.layouts.master')
@section('title',  $room->room_name.' room')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .full-screen {
            height: 98vh;
            width: 88vw;
            margin: 0;
            padding: 0;
        }

        .full-screen .site-frame {
            height: 98%;
            width: 100%;
            border: none; /* Optional: Remove iframe border */
        }

    </style>
@endsection
@section('main-content')
    <div class="breadcrumb d-flex justify-content-between">
        <div>
            <h3> {{$room->room_name}} room</h3>
        </div>
        <div>
            <button class="btn btn-primary btn-sm " title="Copy URL" onclick="copyAddress(`{{$room->url}}`)"><i class="fa fs-2 fa-copy"></i></button>

            <button class="btn btn-primary btn-sm mx-2 " id="delete_room_btn" title="Delete Room" onclick="DeleteRoom(`{{$room->id}}`)"><i class="fa fs-2 fa-trash"></i></button>
        </div>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class=" d-flex justify-content-center text-center my-2 text-left">
{{--                <p>{{ $room->agent_url }}</p>--}}
                <div class="full-screen">
                    <!-- Spinner element -->
                    <div id="spinner" class="text-center mt-5">
                        <!-- <i class="fa fa-spinner text-primary fa-spin" style="font-size:50px"></i> -->
                        <p>we are preparing the meeting room for you, the process will take up-to 15 sec</p>
                    </div>

                    <!-- Iframe element with an id -->
                    <iframe id="delayed-iframe" class="site-frame" src="" title="Neko" style="display: none;"></iframe>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-js')

    <script>
        $(document).ready(function() {
            setTimeout(function() {

                $('#delayed-iframe').attr('src', "{{ $room->agent_url }}").on('load', function() {
                    // Hide spinner and show iframe once iframe is loaded
                    $('#spinner').hide();
                    $('#delayed-iframe').show();
                });

            }, 15000); //15 sec
        });


            function copyAddress(address){
                navigator.clipboard.writeText(address);

                Swal.fire({
                    icon: 'success',
                    title: "Success",
                    text: 'URL copied to the clipboard',
                }).then(() => {

                });

            }


    </script>
@endsection