<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;

$copuloo_videoroom = "none";
$copuloo_token = "none";
wp_enqueue_script(
    'twilio-video-sdk',
    'https://sdk.twilio.com/js/video/releases/2.22.1/twilio-video.min.js',
    array(),
    '2.22.1',
    true
);
wp_enqueue_script(
    'copuloo-video-js',
    plugins_url( 'public/js/video/video.js', dirname(__FILE__, 3) ),
    array('twilio-video-sdk'),
    '1.0.1',
    true
);
wp_localize_script('copuloo-video-js', 'CopulooVideoCallingVars', array(
    'copulooUrl' => admin_url('admin-ajax.php'),
    'copulooRoom' => wp_get_current_user()->user_login,
    'copulooUser' => wp_get_current_user()->user_login,
    'copulooNonce' => wp_create_nonce('Copuloo')
));
?>
<style>
.participant {
    cursor: pointer;
    position: relative;
}

.participant-video:hover {
    outline: 2px solid #0d6efd; /* bootstrap blue */
}

.participant-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
}

video {
    border-radius: 10px;
}
#mainVideo {
    position: relative;
}
</style>
<div class="content d-flex flex-column flex-column-fluid" id="content">
    <div class="container-xxl" id="content_container">
        <div class="card mb-8">
            <div class="card-body flex-column p-5">
                <div class="d-flex align-items-center h-lg-300px p-5 p-lg-15">
                    <div class="d-flex flex-column align-items-start justift-content-center flex-equal me-5">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <div class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                                <div class="d-flex justify-content-center align-items-center p-10">
                                <span class="menu-bullet">
                                    <span class="fa fa-video text-dark display-1"></span>
                                </span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <div class="d-flex flex-column">
                                        <div class="d-flex align-items-center mb-1">
                                        <a class="text-gray-800 fs-2 fw-bold me-3">Teams Video Calling</a>
                                        </div>
                                        <div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-400">Start and host your own video call or join a video call hosted by someone else. A phone number is not required and not used in video chats.</div>
                                    </div>
                                </div>
                                <div class="d-flex flex-wrap justify-content-start">
                                <div class="d-flex flex-wrap">
                                    <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x fs-6 fw-semibold mt-6 mb-8 gap-2" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link text-active-primary d-flex align-items-center pb-4 active" data-bs-toggle="pill" href="#timeline_widget_2_tab_video" aria-selected="false" role="tab" tabindex="-1">
                                        <i class="fs-5 me-2"><span class="fas fa-video"></span></i>Video Call</a>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link text-active-primary d-flex align-items-center pb-4" data-bs-toggle="pill" href="#timeline_widget_2_tab_settings" aria-selected="false" role="tab" tabindex="-1">
                                        <i class="fs-5 me-2"><span class="fas fa-gear"></span></i>Settings</a>
                                        </a>
                                    </li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-rounded bg-light d-flex flex-stack flex-wrap p-5">
                <ul class="nav flex-wrap border-transparent fw-bold">
                    <li class="nav-item my-1 px-1">
                    <button id="videoFullScreen" type="button" class="btn btn-secondary"><span class="fa fa-expand text-dark"></span></button>
                    </li>
                    <li class="nav-item my-1 px-1">
                    <button id="videoPictureInPicture" type="button" class="btn btn-secondary"><span class="fa fa-arrows-alt text-dark"></span></button>
                    </li>
                    <!--<li class="nav-item my-1 px-1">
                    <button id="videoShareScreen" type="button" class="btn btn-secondary"><span class="fa fa-television text-dark"></span></button>
                    </li>-->
                </ul>
                <button id="getTwilioVideoChatToken" type="button" onclick="this.innerHTML='<span class=&quot;spinner-border spinner-border-sm&quot;></span> Loading...'; this.disabled=true;" class="btn btn-primary fw-bold fs-8 fs-lg-base">Start / Join</button>
                <button style="display:none;" id="disconnectTwilioVideoChat" type="button" onclick="this.innerHTML='<span class=&quot;spinner-border spinner-border-sm&quot;></span> Loading...'; this.disabled=true;" class="btn btn-danger fw-bold fs-8 fs-lg-base">Disconnect</button>    
            </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade active show text-center" id="timeline_widget_2_tab_video" role="tabpanel">
                        <div id="videoRoom">
                            <video id="mainVideo" autoplay muted playsinline style="width: 100%;"></video>
                            <div id="participantBar" class="mt-2 row g-6"></div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="timeline_widget_2_tab_settings" role="tabpanel">
                        <div class="card border border-gray-300 border-dashed rounded">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Room Identification</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">This is the unique identifier of the video call you are in. When joining other video calls input the unique room name to join their room.</span>
                                </h3>
                            </div>
                            <div class="card-body pt-5">
                                <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Room Name</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                    <div class="col-lg-8 ">
                                        <input id="videoRoomName" type="text" name="videoRoomName" class="form-control form-control-lg form-control-solid" placeholder="Video Call Room Name" value="<?php if (is_user_logged_in()) { echo esc_attr(wp_get_current_user()->user_login); } else { echo 'guestroom'; }  ?>">
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <?php if (is_user_logged_in()) { ?>
                            <?php } else { ?>
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Video Chat Username</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">Below you will find your unique guest username.</span>
                                </h3>
                            </div>
                            <div class="card-body pt-5">
                                <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Guest Username</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                    <div class="col-lg-8">
                                        <input readonly id="videoGuestUsername" type="text" name="videoGuestUsername" class="form-control form-control-lg form-control-solid" placeholder="Video Chat Username" value="guest<?php if (!empty($copuloo_guestUsername)) { echo esc_attr($copuloo_guestUsername); } ?>">
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <?php } ?>
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Device Selection</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">Select from the dropdown options which camera and microphone to use during video calls. Device selection must be completed before joining the video call and cannot be changed afterward.</span>
                                </h3>
                            </div>
                            <div class="card-body pt-5">
                                <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Microphone</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                    <div class="col-lg-8 ">
                                        <select id="copuloomicrophoneSelect" class="form-select form-select-solid form-select-lg fw-semibold mb-3 mb-lg-0"></select></div>
                                    </div>
                                </div>
                                </div>
                                <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Speaker</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                    <div class="col-lg-8 ">
                                        <select id="copuloospeakerSelect" class="form-select form-select-solid form-select-lg fw-semibold mb-3 mb-lg-0"></select></div>
                                    </div>
                                </div>
                                </div>
                                <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Camera</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                    <div class="col-lg-8 fv-row">
                                        <select id="copuloocameraSelect" class="form-select form-select-solid form-select-lg fw-semibold mb-3 mb-lg-0"></select></div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div>




