@extends('layouts.site')

@section('content')
    <style>
        #session-end{
            fill: #f26b4d;
                background: #ff5c5c;
                border-radius: 10px;
                width: 58px;
                height: 44px;
                position: absolute;
                bottom: 17.2%;
                /* z-index: 999999999999999999; */
                right: 2px;
                border: none;
                padding: 10px 0;
                color: #ffffff;
        }
    </style>
<section>
    <div class="lgx-banner lgx-banner-inner">
        <div class="lgx-inner-bg">
            <div class="lgx-inner">
                <div class="container bartopline">
                    <div class="row">
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
    </div>
</section>




<div class="mt-5 mb-5">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="boxing bg-white border">
    <nav id="nav-tool" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="hidden" value="{{ ($type=='therapist')?1:0 }}" id="userHost">
            <input type="hidden" value="{{ \Illuminate\Support\Facades\Crypt::encryptString($session->id) }}" id="userPass">
            <input type="hidden" value="{{ $session->id }}" id="sessionID">
            <input type="hidden" value="{{ $session->meeting_number }}" id="meetingNumber">
            <input type="hidden" value="{{ $session->password }}" id="meetingPassword">
            <div class="col-lg-12" style="padding: 100px 0px;">
                <p style="font-size: 20px;line-height: 35px;" class="text-center">
                    {{trans('home.welcome')}}
                    
                    {{trans('home.thanks-use-new-hayah')}}
                    <span class="d-none" id="counter-down" data-now="{{ $session->start_time }}" data-date="{{ date('Y-m-d H:i:s',strtotime($session->start_time.'+'.(in_array($session->type,[3,30,10])?$session->type+10:$session->type+15).' minutes')) }}"></span>
                </p>
                <div id="session-message" style="height: 45px"></div>
                <div class="form-group text-center mt-5 " id="agreement_secret_notice" @if(hasAgreement($session->visitor_id,$session->therapist_id,$type)) style="display: none" @endif>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input mx-2 agreement_secret_notice" id="agreement_therapist_secret_notice"  value="1" name="agreement">
                        <label class="mx-5" for="exampleCheck1">
                            {{trans('home.agreement-notice')}}
                            <a target="_blank" href="{{  config('app.locale') == "ar" ?  url('الموافقة_المستنيرة_لاخطار_السرية') : url('en/Secrets_of_confidentiality')  }}">هنا</a>
                        </label>
                    </div>
                </div>
                <div class="text-center" id="start_session_after_agreement" @if(!hasAgreement($session->visitor_id,$session->therapist_id,$type)) style="display: none" @endif>
                    @if(startSessionButton($session,$type))
                        {{-- @if($type=='therapist')
                             --}}{{--<a href="{{ $session->start_url }}" target="_blank" style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="startTherapist btn btn-primary"> {{trans('home.start')}} </a>--}}{{--
                             --}}{{--<a href="{{ route('login_create_meeting',['session_id'=>$session->id]) }}" target="_blank" style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="btn btn-primary startTherapist"> {{trans('home.start')}} </a>--}}{{--
                             <a href="{{ ($session->meeting_provider=='zoom')?route('login_create_meeting',['session_id'=>$session->id]):$session->whereby_hostRoomUrl }}" target="_blank" style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="startTherapist btn btn-primary">{{trans('home.start')}}</a>
                         @else
                             <a href="{{ ($session->meeting_provider=='zoom')?$session->join_url:$session->whereby_roomUrl }}" target="_blank" style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="btn btn-primary">{{trans('home.start')}}</a>
                         @endif--}}
                        @if(($session->meeting_provider=='zoom'))
                            <a href="{{ ($type=='therapist')?$session->start_url:$session->join_url }}" target="_blank" style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="startTherapist btn btn-primary">{{trans('home.start')}}</a>
                        @else
                            <a href="{{ ($type=='therapist'?route('therapists_sessions'):route('rate_session',$session->id)) }}" id="session-end">

                                إنهاء  

                                <!-- <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="BaseIcon-3KAM BaseIcon--sized-2utE BaseIcon--meetingRed-3IsO" aria-hidden="true"><path clip-rule="evenodd" d="m7.08412 2.9999c.37131-1.53546 1.91748-2.571085 3.54448-2.222445l8 1.714285c1.3832.2964 2.3714 1.51879 2.3714 2.93341v.57475 12 .5748c0 1.4146-.9882 2.637-2.3714 2.9334l-8 1.7142c-1.627.3487-3.17317-.6869-3.54448-2.2224h-1.08412c-1.65685 0-3-1.3431-3-3v-6.5-.5-5c0-1.65685 1.34315-3 3-3zm-.08412 2h-1c-.55228 0-1 .44772-1 1v5 .5 6.5c0 .5523.44772 1 1 1h1zm4 7c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1s.44772-1 1-1c.5523 0 1 .4477 1 1z" fill-rule="evenodd"></path></svg> -->
                            </a>
                        @if($session->whereby_roomUrl)
                            <iframe src="{{ ($type=='therapist')?$session->whereby_roomUrl:$session->whereby_roomUrl }}?embed&video=off&audio=on&displayName={{ auth()->user()->name }}&participantCount=off&screenshare=on&people=off&chat=on&lang=en" allow="camera;microphone; fullscreen; speaker; display-capture" style="width: 100%;min-height: 500px;"></iframe>
                            @else
                            @endif
                        @endif
                    @else
                        @if(\Carbon\Carbon::create($session->start_time->format('Y-m-d H:i:s'))>\Carbon\Carbon::now())
                            <h3> {{trans('home.session-not-started')}} </h3>
                        @elseif(!\Carbon\Carbon::now()->between(\Carbon\Carbon::create($session->start_time->format('Y-m-d H:i:s')),\Carbon\Carbon::create($session->start_time->format('Y-m-d H:i:s'))->add(((in_array($session->type,[30,3]))?$session->type+10:$session->type+15).' minutes')))
                            <h3> {{trans('home.session-is-End')}}   </h3>
                        @elseif(!$session->therapist_start)
                            <h3> {{trans('home.Therapist not started session yet')}}   </h3>
                        @endif
                    @endif
                    {{--<button style="margin-top: 15px;font-size: 15px;font-weight: bold;padding: 10px 20px;" class="btn btn-primary" id="join_iframe">ابدء جلستك الآن</button>--}}
                </div>
            </div>
            <!--/.navbar-collapse -->
        </div>
    </nav>
                    <div id="zmmtg-root"></div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scriptSection')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.0.3/jquery.countdown.min.js"></script>
    {{--<script src="https://source.zoom.us/1.8.0/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.8.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.8.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.8.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.8.0/lib/vendor/jquery.min.js"></script>
    <script src="https://source.zoom.us/1.8.0/lib/vendor/lodash.min.js"></script>

    <script src="https://source.zoom.us/zoom-meeting-1.8.0.min.js"></script>
    <script src="{{asset('zoom/js/tool.js')}}"></script>
    <script src="{{asset('zoom/js/vconsole.min.js')}}"></script>
    <script src="{{asset('zoom/js/index.js')}}"></script>--}}
    <script>
        // $(document).ready(function(){
        //     $("style:eq(111)").remove();
        // });
        $(document).on('click','#session-end',function(e){
            e.preventDefault();
            href=$(this).attr('href');
            token= '{{ csrf_token() }}';
            $.ajax({
                type: "POST",
                url: "{{ route('session_end',$session->id) }}",
                data: {_token:token},
                success: function (msg) {
                    if(msg.success){
                        window.location.href=href;
                    }
                }
            });
        })
        $("#counter-down").countdown( $("#counter-down").attr('data-date'), function(event) {
            secounds=(parseInt(event.strftime('%H'))*60*60)+(parseInt(event.strftime('%M'))*60)+(parseInt(event.strftime('%S')));
            // if(session_id==6237){
            //     console.log((event.strftime('%D')*24*60*60),(event.strftime('%H')*60*60),(event.strftime('%M')*60),(event.strftime('%S')))
            //     console.log('15 minits check',secounds,(15*60),secounds<=(15*60),"#start-btn-"+session_id)
            // }

            // if(secounds<=(15*60)){
            //     $("#start-btn-"+session_id).removeClass('d-none');
            // }
            // if(session_id==6237) {
            //     console.log('8 hours check',secounds,(8*60*60),secounds<(8*60*60),"#start-btn-"+session_id)
            // }
            /*if(secounds<(8*60*60)){
                $("#cancel-btn-"+session_id).addClass('d-none');
            }*/
            @if(in_array($session->type,[30,3,10]))
                if(secounds<=10*60&&secounds>=1*60){
                    $("#session-message").html('@lang('home.This session will be ended after') '+event.strftime('%M')+' @lang('home.Minutes')').addClass('alert alert-info');

                }
            @else
                if(secounds<=15*60&&secounds>=1*60){
                $("#session-message").html('@lang('home.This session will be ended after') '+event.strftime('%M')+' @lang('home.Minutes')').addClass('alert alert-info');
                }
            @endif
                if(secounds<1*60){
                $("#session-message").html('@lang('home.This session will be ended after less than a minute')').addClass('alert alert-info');
            }
                console.log(secounds);
                if(secounds==0||!secounds||secounds=='0'){
                    $("#session-message").html('@lang('home.This session has been end')').addClass('alert alert-info');
                //   window.location.href='/';
                // href=$("#session-end").attr('href')
                //     $("#session-message").html('').removeClass('alert alert-info')
                // if(href){
                //     $("#counter-down").remove();
                //     $("#start_session_after_agreement iframe").remove();
                //     window.location.href=href;
                // }


            }
            $(this).text(
                event.strftime('%D:%H:%M:%S')

            );
        });
        $(document).on('click','.startTherapist',function(){
            token= '{{ csrf_token() }}';
            $.ajax({
                type: "POST",
                url: "{{ route('session_therapist_start',$session->id) }}",
                data: {_token:token},
                success: function (msg) {
                }
            });
        });

        $(document).on('change', '#agreement_therapist_secret_notice', function () {
            token = '{{ csrf_token() }}';
            var value = $(this).attr('value');
            var session_id =  $("#sessionID").val();
            var statues=$(this).is(':checked');
            // console.log(session_id);
            if(statues)
            {
                $.ajax({
                    type: "POST",
                    url: "{{route('agreement-therapist-secret-notice')}}",
                    data: {"value": value,"id":session_id,_token:token},
                    success: function (msg) {
                        console.log(msg);
                        $("#agreement_secret_notice").css({'display':'none'});
                        $("#start_session_after_agreement").css({'display':'block'});
                    }
                });
                @if($type=='therapist')
                $.ajax({
                    type: "POST",
                    url: "{{ route('session_therapist_start',$session->id) }}",
                    data: {_token:token},
                    success: function (msg) {
                    }
                });
                @endif

            }

        });


    </script>
@endsection