<app-toaster-container></app-toaster-container>
<section>
    <div class="modal_bg" *ngIf="is_modal_visible_chat" id="modal_chat" data-target="#staticBackdrop">
        <div class="overlay"></div>
        <div class="modal-dialog-box">
            <div class="modal-content">
                <button type="button" *ngIf="showchatval" class="close" data-dismiss="modal" aria-label="Close"
                    (click)="onCloseModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <form id="loginForm">
                    <div class="video-section" [ngClass]="showchatval || showparticipantval  ? 'video-section75' : 'video-section'">
                        <div *ngIf="showchatval">
                            <div class="chat-section">
                                <h3>Comments</h3>
                                <div class="messagecol_fix" id="end">
                                    <div class="col-sm-12 messagecol" *ngFor="let msg of msgcollectionlist">
                                        <div class="bg"
                                            *ngIf="msg.message!='' && msg.message!=undefined && msg.message !=null">
                                            <img *ngIf="msg.profile!='' && msg.profile!=undefined && msg.profile !=null"
                                                src="{{msg.profile}}">
                                            <img *ngIf="msg.profile=='' || msg.profile==undefined || msg.profile ==null"
                                                src="assets/img/user.png">
                                            <!-- <img *ngIf="msg.message.isRequesProfile" src="{{msg.message.profile}}">
                                            <img *ngIf="!msg.message.isRequesProfile" src="assets/img/user.png"> -->
                                            <h4>{{msg.name}}({{msg.id}})</h4>
                                            <p>{{msg.message}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row messagebox">
                                    <div class="input-field channel-padding newone">
                                        <!-- <label for="channelMessage" class="active">Channel Message</label> -->
                                        <input type="text" placeholder="Enter Comment" [(ngModel)]="channelMessage"
                                            class="newinput" name="channelMessage" spellcheck="true" autocomplete="off" (keyup.enter)="send_channel_message()">
                                        <img src="assets/img/send_icon.png"
                                            (click)="send_channel_message()">
                                        <!-- <button class="btn primary fixed float-right sub" id="send_channel_message" (click)="send_channel_message()">SEND</button> -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div *ngIf="showparticipantval">
                            <div class="chat-section">
                                <h3>Participants</h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                    (click)="onCloseModal()">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <div class="messagecol_fix">
                                    <div class="col-sm-12 messagecol" *ngFor="let list of ulist">
                                        {{displaystatus}}
                                        <div class="bg_" [ngClass]="list.displaystatus =='active' ? 'activedisplay' : 'inactivedisplay'">
                                            <img src="{{list.profile}}">
                                            <p>{{list.smpin}} - {{list.fname}} {{list.lname}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="fullrow">
                            <div class="fullrow placeholder_class">
                                <div class="video-view" id="client_view_display">
                                </div>
                                <div class="video-view" id="host_view_display">
                                    <div id="local_stream" class="video-placeholder"></div>
                                    <div id="local_video_info" class="video-profile hide"></div>
                                    <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
                                </div>
                            </div>

                            <div class="icon">
                                <div class="name">
                                    <div class="heading_name">
                                        <p><img src="{{channel_profile}}"><span>{{channel_userName}}</span></p>
                                    </div>
                                    <div class="timer">
                                        <div class="with_eye">
                                            <p><img src="assets/img/eye.png">{{mChannelMemberCount}}</p>
                                        </div>
                                        <div class="with_time">
                                            <p>{{minutesdisplay}}:{{secondsdisplay}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="sec_div" [ngClass]="showchatval || showparticipantval  ? 'sec_div75' : 'sec_div'">
                                    <div class="req_layout" *ngIf="showrequestlayout_dse">
                                        <p>Request permission to presenter</p>
                                        <button (click)="onreqType('0')" type="button"
                                            [ngClass]="req_text == 'Requested' ? 'requested_class' : ''"
                                            class="btn primary fixed float-right sub">{{req_text}}</button>
                                    </div>
                                    <div class="req_display_layout" *ngIf="showreq_acceptlayout_dse">
                                        <p>{{getrequest_details.name}}({{getrequest_details.id}}) wants to present</p>
                                        <button (click)="onreqType('2')" type="button"
                                            class="btn primary fixed float-right sub decline">DECLINE
                                            ({{timeLeft}})</button>
                                        <button (click)="onreqType('1')" type="button"
                                            class="btn primary fixed float-right sub">ACCEPT</button>
                                    </div>
                                    <div class="req_display_layout stop" *ngIf="stoppresent_layout">
                                        <button (click)="onreqType('3')" type="button"
                                            class="btn primary fixed float-right sub dismiss">STOP PRESENTING</button>
                                    </div>
                                    <div class="req_display_layout" id="req_display_layout_id"
                                        *ngIf="startpresent_layout">
                                        <p>Dismiss {{getrequest_details.name}}({{getrequest_details.id}}) presentation
                                        </p>
                                        <button (click)="onreqType('2')" type="button"
                                            class="btn primary fixed float-right sub dismiss">DISMISS</button>
                                    </div>
                                </div>

                                <div class="bottom_icon">
                                    <div class="" [ngClass]="broadcastercast == 'host'  ? 'inner' : 'inner_1'" [ngStyle]="{'width' : showmute_presenter_audio || showunmute_presenter_audio ? '300px' : '142px'}">
                                        <div class="first" *ngIf="broadcastercast == 'host'"
                                            [ngClass]="showparticipantval  ? 'active' : 'inactive'" data-toggle="tooltip" title="Participants">
                                            <img src="assets/images/team_color.png" (click)="showparticipant()">
                                        </div>
                                        <div class="second" *ngIf="showmuteaudio && broadcastercast == 'host'" data-toggle="tooltip" title="Mute">
                                            <img src="assets/images/mic_Color.png" (click)="muteaudio()">
                                        </div>
                                        <div class="second" *ngIf="showunmuteaudio && broadcastercast == 'host'"
                                            [ngClass]="showunmuteaudio  ? 'active' : 'inactive'" data-toggle="tooltip" title="Unmute"> 
                                            <img src="assets/images/Mic_Cut_Color.png" (click)="unmuteaudio()">
                                        </div>
                                        <div class="second" *ngIf="showmutevideo && broadcastercast == 'host'" data-toggle="tooltip" title="Video Mute">
                                            <img src="assets/images/btn_video_enabled.png" (click)="mutevideo()">
                                        </div>
                                        <div class="second" *ngIf="showunmutevideo && broadcastercast == 'host'"
                                            [ngClass]="showunmutevideo  ? 'active' : 'inactive'" data-toggle="tooltip" title="Video unmute">
                                            <img src="assets/images/btn_video_disabled.png" (click)="unmutevideo()">
                                        </div>

                                         <!-- for presenter -->
                                        <div class="second" *ngIf="showmute_presenter_audio" data-toggle="tooltip" title="Mute">
                                            <img src="assets/images/mic_Color.png" (click)="mute_presenter_audio()">
                                        </div>
                                        <div class="second" *ngIf="showunmute_presenter_audio"
                                            [ngClass]="showunmute_presenter_audio  ? 'active' : 'inactive'" data-toggle="tooltip" title="Unmute"> 
                                            <img src="assets/images/Mic_Cut_Color.png" (click)="unmute_presenter_audio()">
                                        </div>
                                        <div class="second" *ngIf="showmute_presenter_video" data-toggle="tooltip" title="Video Mute">
                                            <img src="assets/images/btn_video_enabled.png" (click)="mute_presenter_video()">
                                        </div>
                                        <div class="second" *ngIf="showunmute_presenter_video"
                                            [ngClass]="showunmute_presenter_video  ? 'active' : 'inactive'" data-toggle="tooltip" title="Video unmute">
                                            <img src="assets/images/btn_video_disabled.png" (click)="unmute_presenter_video()">
                                        </div>

                                        <div class="third" [ngClass]="showchatval  ? 'active' : 'inactive'" data-toggle="tooltip" title="Comments">
                                            <img src="assets/images/chat_color.png" (click)="showchat()">
                                            <span class="dot" *ngIf="chatdot"></span>
                                        </div>
                                        <div class="third" *ngIf="broadcastercast == 'host'"
                                            [ngClass]="share_screen  ? 'active' : 'inactive'" data-toggle="tooltip" title="Screen Share">
                                            <img src="assets/images/Share_color.png" (click)="sharescreen()">
                                        </div>
                                        <div class="last" data-toggle="tooltip" title="Disconnect">
                                            <img src="assets/images/close_Color.png" (click)="leavechannel_popup()">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal_bg_next" *ngIf="is_modal_list_chat">
        <div class="overlay"></div>
        <div class="modal-dialog-box">
            <div class="modal-content">
                <button type="button" *ngIf="singledselist.broadcaster && singledselist.btnstatus && singledselist.cmd == 'Yet to be Start'" class="addcls" (click)="enableaddsmpin()">
                    <span aria-hidden="true">Add</span>
                </button>
                <button type="button" *ngIf="singledselist.broadcaster && singledselist.btnstatus && singledselist.cmd == 'Join' && singledselist.btn_enable" class="addcls" (click)="enableaddsmpin()">
                    <span aria-hidden="true">Add</span>
                </button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="CloseModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="participant">
                    <div class="head">
                        <h4>Participants</h4>
                    </div>
                    <div class="participant_list" *ngFor="let participant of participant_list;let i=index;">
                        <img src="{{participant.profile}}" class="img_class">
                        <p *ngIf="singledselist.cmd == 'Join' && participant.timerlist.length == 0 && !singledselist.btn_enable">{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Join' && participant.timerlist.length == 0 && !singledselist.btn_enable" class="green_cmd">Ongoing</p>

                        <p *ngIf="singledselist.cmd == 'Join' && participant.timerlist.length != 0"  (click)="showtiming(i,participant)" style="cursor: pointer;">{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Join' && participant.timerlist.length != 0" class="green_cmd" (click)="showtiming(i,participant)" style="cursor: pointer;">Ongoing</p>

                        <p *ngIf="singledselist.cmd == 'Yet to be Start'">{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Yet to be Start'" class="blue_cmd">Not Started</p>

                        <p *ngIf="singledselist.cmd == 'Join' && singledselist.btn_enable">{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Join' && singledselist.btn_enable" class="blue_cmd">Not Started</p>

                        <p *ngIf="singledselist.cmd == 'Ended' && participant.timerlist.length == 0" >{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Ended' && participant.timerlist.length == 0" class="red_cmd">Not Attended</p>

                        <p *ngIf="singledselist.cmd == 'Ended' && participant.timerlist.length != 0" (click)="showtiming(i,participant)" style="cursor: pointer;">{{participant.smpin}} - {{participant.fname}} {{participant.lname}}</p>
                        <p *ngIf="singledselist.cmd == 'Ended' && participant.timerlist.length != 0" class="black_cmd" (click)="showtiming(i,participant)" style="cursor: pointer;">{{participant.start_from | date:'shortTime'}} to {{participant.to_from| date:'shortTime'}}<span class="timespan">{{participant.totaltimetaken}}</span></p>

                        <div class="close"
                            *ngIf="singledselist.broadcaster && singledselist.btnstatus && singledselist.cmd == 'Yet to be Start'"
                            (click)="removesmpin(participant.userid)"><img src="assets/img/delete.png">
                        </div>
                        <div class="close"
                            *ngIf="singledselist.broadcaster && singledselist.btnstatus && singledselist.cmd == 'Join' && singledselist.btn_enable"
                            (click)="removesmpin(participant.userid)"><img src="assets/img/delete.png">
                        </div>
                        <div *ngIf="active_product==i" class="timingclass">
                            <div *ngFor="let timing of totaltimelist" class="time_1">
                                <p class="timedisplay">{{timing.fromtime | date:'mediumTime'}} - {{timing.totime | date:'mediumTime'}}</p>
                                <p class="secdisplay">{{timing.totaltimeformat}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="wid100"
                    *ngIf="singledselist.broadcaster && singledselist.btnstatus && singledselist.cmd == 'Yet to be Start'">
                    <div class="plus" (click)="enableaddsmpin()">
                        <p>+</p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

    <div class="modal_add_paraticipant" *ngIf="is_modal_addparticipant">
        <div class="overlay"></div>
        <div class="modal-dialog-box">
            <div class="modal-content">
                <button type="button" class="close participate_close" data-dismiss="modal" aria-label="Close"
                    (click)="CloseaddparticipantModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <p class="title_head">Training Title : {{singledselist.title}} </p>
                <p class="timer_set">{{singledselist.fromdate | date }}, {{singledselist.fromdate | date:'shortTime'}}
                    to {{singledselist.todate
                        | date:'shortTime'}}</p>
                <div class="add_paraticipant_list">
                    <div class="select_rm">
                        <h4>Regional Manager</h4>
                        <div class="col-sm-6" *ngFor="let rm of rm_list;let i=index;">
                            <input type="checkbox" value="{{rm.rm_email}}" (change)='Changerm($event,i)'>
                            <label for="{{rm.rm_name}}"> {{rm.rm_name}}</label>
                        </div>
                    </div>
                    <div class="select_rm" *ngIf="showam">
                        <h4>Area Manager</h4>
                        <div class="col-sm-6" *ngFor="let am of am_list;let i=index;">
                            <input type="checkbox" value="{{am.am_email}}" (change)='Changeam($event,i)'>
                            <label for="{{am.am_name}"> {{am.am_name}}</label>
                        </div>
                    </div>
                  
                    <div class=" select_rm" *ngIf="showdealer">
                        <h4>Dealer</h4>
                        <div class="col-sm-6" *ngFor="let dealer of dealer_list;let i=index">
                            <input type="checkbox" value="{{dealer.dealer_code}}"
                            (change)='Changedealer($event,i)'>
                            <label class="dealer_names" for="{{dealer.dealer_name}}">{{dealer.dealer_code}} - {{dealer.dealer_name}}</label>
                        </div>
                    </div>
                    <div class="select_rm" *ngIf="showdse">
                        <h4>DSE</h4>
                        <div class="col-sm-6" *ngFor="let dse of dse_list;let i=index;">
                            <input type="checkbox" value="{{dse.userid}}" (change)='Changedse($event,i)'>
                            <label for=" {{dse.fname}}">{{dse.smpin}} - {{dse.fname}} {{dse.lname}}</label>
                        </div>
                    </div>
                    <h4 class="other_cls">Others</h4>
                    <div class="select_rm" *ngIf="showzmuser">
                        <h4>Zonal Manager</h4>
                        <div class="col-sm-6" *ngFor="let zm of zm_userlist;let i=index;">
                            <input type="checkbox" value="{{zm.userid}}" (change)='Changezmuser($event,i)'>
                            <label for="{{zm.smpin}}"> {{zm.smpin}} - {{zm.fname}} {{zm.lname}}</label>
                        </div>
                    </div>
                    <div class="select_rm" *ngIf="showrmuser">
                        <h4>Regional Manager</h4>
                        <div class="col-sm-6" *ngFor="let rm of rm_userlist;let i=index;">
                            <input type="checkbox" value="{{rm.userid}}" (change)='Changermuser($event,i)'>
                            <label for="{{rm.smpin}}">{{rm.smpin}} - {{rm.fname}} {{rm.lname}}</label>
                        </div>
                    </div>
                    <div class="select_rm" *ngIf="showamuser">
                        <h4>Area Manager</h4>
                        <div class="col-sm-6" *ngFor="let am of am_userlist;let i=index;">
                            <input type="checkbox" value="{{am.userid}}" (change)='Changeamuser($event,i)'>
                            <label for="{{am.smpin}}">{{am.smpin}} - {{am.fname}} {{am.lname}}</label>
                        </div>
                    </div>
                    <div class="p0" *ngIf="totalparticipant_list.length!=0">
                        <h4>DSE Participant list :  <span class="font">{{totalparticipant_list.length}}</span></h4>
                        <div class="row">
                            <div class="col-md-4" *ngFor="let totalparticipant of totalparticipant_list;let i=index;">
                                <div class="participant_list_new">
                                    <div class="profile">
                                        <img src="{{totalparticipant.profile}}">
                                    </div>
                                    <div class="content">
                                        <p class="head">SMPIN : {{totalparticipant.smpin}}</p>
                                        <p class="desc">{{totalparticipant.fname}} {{totalparticipant.lname}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>
                    <div class="p0" *ngIf="totalzmparticipant_list.length!=0">
                        <h4>Zonal Manager Participant list :  <span class="font">{{totalzmparticipant_list.length}}</span></h4>
                        <div class="row">
                            <div class="col-md-4" *ngFor="let totalzmparticipant of totalzmparticipant_list;let i=index;">
                                <div class="participant_list_new">
                                    <div class="profile">
                                        <img src="{{totalzmparticipant.profile}}">
                                    </div>
                                    <div class="content">
                                        <p class="head">SMPIN : {{totalzmparticipant.smpin}}</p>
                                        <p class="desc">{{totalzmparticipant.fname}} {{totalzmparticipant.lname}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>
                    <div class="p0" *ngIf="totalrmparticipant_list.length!=0">
                        <h4>Regional Manager Participant list :  <span class="font">{{totalrmparticipant_list.length}}</span></h4>
                        <div class="row">
                            <div class="col-md-4" *ngFor="let totalrmparticipant of totalrmparticipant_list;let i=index;">
                                <div class="participant_list_new">
                                    <div class="profile">
                                        <img src="{{totalrmparticipant.profile}}">
                                    </div>
                                    <div class="content">
                                        <p class="head">SMPIN : {{totalrmparticipant.smpin}}</p>
                                        <p class="desc">{{totalrmparticipant.fname}} {{totalrmparticipant.lname}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>
                    <div class="p0" *ngIf="totalamparticipant_list.length!=0">
                        <h4>Area Manager Participant list :  <span class="font">{{totalamparticipant_list.length}}</span></h4>
                        <div class="row">
                            <div class="col-md-4" *ngFor="let totalamparticipant of totalamparticipant_list;let i=index;">
                                <div class="participant_list_new">
                                    <div class="profile">
                                        <img src="{{totalamparticipant.profile}}">
                                    </div>
                                    <div class="content">
                                        <p class="head">SMPIN : {{totalamparticipant.smpin}}</p>
                                        <p class="desc">{{totalamparticipant.fname}} {{totalamparticipant.lname}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>
                    <div class="center_add_btn" (click)="addsmpin()">
                        <button class="add_btn">Add Participant</button>
                    </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal_bg_delete" *ngIf="is_modal_delete">
            <div class="overlay"></div>
            <div class="modal-dialog-box modal-dialog-centered logout-content">
                <div class="modal-content">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button> -->
                    <div class="form-container like_sent">
                        <form class="input_box">
                            <h4>Are you sure to remove?</h4>
                            <p class="info_box"></p>
                            <button (click)="onLogType('2')" type="button"
                                class="btn primary def_btn light">NO</button>
                            <button (click)="onLogType('1')" type="button"
                                class="btn primary def_btn light">YES</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal_bg_leave" *ngIf="is_modal_leave_popup">
            <div class="overlay"></div>
            <div class="modal-dialog-box modal-dialog-centered leaveout-content">
                <div class="modal-content">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button> -->
                    <div class="form-container like_sent">
                        <form class="input_box">
                            <h4>Are you sure to leave training?</h4>
                            <p class="info_box"></p>
                            <button (click)="oncancel()" type="button"
                                class="btn primary def_btn light">NO</button>
                            <button (click)="leavechannel()" type="button"
                                class="btn primary def_btn light">YES</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</section>