@extends('layouts.vertical-individual', ["page_title"=> "Social Feed"])

@section('content')
@php
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
@endphp
<!-- Start Content-->
<div class="container-fluid">
    <div class="row mt-3">
        <div class="col-xl-3 col-lg-6 order-lg-1 order-xl-1">
            <!-- start profile info -->
            <div class="card">
                <div class="card-body">
                    <img src="/assets/images/crest-logo.jpeg" class="img-fluid">
                    <h4 class="page-title">{{$library->title}}</h4>
                    <p>{{$library->description}}</p>
                    <div class="d-flex align-items-start">
                        <h5 class="mt-1 mb-0">Categories</h5>
                    </div>
                    <div class="list-group list-group-flush mt-2 font-15">
                        @foreach($library->library_values as $lib)
                        <a href="/contentlibrary/{{$library->code}}?id={{$lib->id}}" class="list-group-item list-group-item-action text-primary fw-semibold border-0"><i class='mdi mdi-image-filter-black-white font-16 me-1'></i>{{$lib->name}}</a>
                        @endforeach
                    </div>
                    <hr />
                    <h5>Session Details</h5>
                    <div class="hero-content">
                        <h6 class="wow fadeInLeft" data-wow-delay=".5s">{{$session->number}}</h6>
                        @foreach($session->dates->date as $i => $date)
                        <h6 class="wow fadeInLeft" data-wow-delay=".5s">{{date("d M, Y", strtotime($date) )}} <small>{{date("h:iA", strtotime($session->dates->start[$i]) )}}-{{date("h:iA", strtotime($session->dates->end[$i]) )}}</small></h6>
                        @endforeach
                        <h6 class="wow fadeInLeft" data-wow-delay=".5s">Venue: {{$session->venue}}</h6>
                        
                    </div>
                </div>
            </div>
            <!-- end profile info -->

        </div> <!-- end col -->

        <div class="col-xl-9 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body p-2">
                    <h4 class="page-title">{{$content->magazine->name}}</h4>
                    <img src="{{$content->magazine->image}}" class="img-fluid" style="max-height: 100px;">
                    <p class="mt-2">{{$content->magazine->description}}</p>
                </div>
            </div>

            @foreach($content->medias as $media)
            <!-- Story Box-->
            <div class="card media-card" id="{{$media->id}}">
                <div class="card-body">
                    <h5 class="page-title">{{$media->name}}</h5>
                    <p class="font-16 text-dark">{{$media->description}}</p>
                    <div class="row">
                        @if($media->media_type == 'image')
                        <div class="col-sm-8">
                            <img src="{{$media->media_url}}" alt="post-img" class="rounded me-1 mb-3 mb-sm-0 img-fluid reel-image">
                        </div>
                        <!-- <div class="col">
                            <img src="{{asset('assets/images/small/img-1.jpg')}}" alt="post-img" class="rounded me-1 img-fluid mb-3">
                            <img src="{{asset('assets/images/small/img-3.jpg')}}" alt="post-img" class="rounded me-1 img-fluid">
                        </div> -->
                         @elseif($media->media_type == 'pdf')
                        <div class="col-sm-12">
                            @if( $iPod || $iPhone || $iPad )
                            <p><a class="btn btn-primary" download href="{{$media->media_url}}">Download PDF file.</a></p>
                            @else
                            <object data="{{$media->media_url}}" style="width:100%; height:70vh;">
                                <p><a class="btn btn-primary" download href="{{$media->media_url}}">Download PDF file.</a></p>
                            </object>
                            @endif
                        </div>
                        @elseif($media->media_type == 'video')
                        <div class="col-sm-12">
                            <video controls>
                              <source src="{{$media->media_url}}" type="video/mp4">
                              <source src="{{$media->media_url}}" type="video/ogg">
                              Your browser does not support the video tag.
                            </video>
                        </div>
                        @elseif($media->media_type == 'youtube')
                            @php
                            preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $media->media_url, $match);
                            $youtube_id = $match[1];
                            @endphp
                        <div class="col-sm-12">
                            <div class="video">
                                <iframe src="https://www.youtube.com/embed/{{$youtube_id}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
            <!-- Story Box-->
            

            <!-- loader -->
            <div class="text-center mb-3">
                <a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading me-1 font-16"></i> Load more </a>
            </div>
            <!-- end loader -->
        </div>

    </div>
    <!--end row -->

</div> <!-- container -->


<!-- SignIn modal content -->
<div id="login-modal" data-bs-backdrop="static" data-bs-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="text-center mt-2 mb-4">
                    <a href="{{route('any', 'index')}}" class="text-success">
                        <span><img src="/assets/images/crest-logo.jpeg"  height="50"></span>
                    </a>
                </div>
                <p class="error-msg text-danger"></p>
                <form action="/contentlibrarylogin" id="contentlibrarylogin" class="px-3">
                    @csrf
                    <input type="hidden" name="session_code" value="{{$library->session_code}}">
                    <p>Hello Doctor, Please submit your phone number you used to register for the session.</p>
                    <div class="mb-3">
                        <label for="phone" class="form-label">Whatsapp / Mobile number</label>
                        <input type="text" class="form-control" id="phone" name="phone" title="Enter valid 10-digit Mobile Number" pattern="[7-9]{1}[0-9]{9}" required>
                    </div>
                    <div class="mb-2 text-center">
                        <button class="btn btn-rounded btn-primary" type="submit">Submit</button>
                    </div>

                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<style type="text/css">
video, .video iframe {
  width: 100%;
  height: 80vh;
}
video, {
  width: 100%;
  max-height: 80vh;
}
.reel-image {
  max-width: 100%;
  max-height: 80vh;
}
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{ URL::asset('assets/js/timeme.js')}}"></script>
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        @if(!$islogged)
            //$('#login-modal').modal('show')
        @else
            let viewObj = {magazine_id:'{{$content->magazine->id}}', medias:[], library:'{{$library->code}}', contact_id:'{{$library->contact_id}}', session_code:'{{$session->code}}', "_token": "{{ csrf_token() }}" }
            $('.media-card').each(function( index ) {
                viewObj.medias.push($( this ).attr('id'))
            });
            let media_views = {}
            $.ajax({
              type: "POST",
              url: '/analytics/view',
              data: viewObj,
              success: function( data ) {
                media_views = data.data.result
              },
            });
        @endif

        //Detect special conditions devices
        


        $('#contentlibrarylogin').on('submit', function(event){
            event.preventDefault();
            $("#pageloader").fadeIn();
            $.ajax({
                type: "POST",
                url: '/contentlibrarylogin',
                data: new FormData($('#contentlibrarylogin')[0]),
                processData: false,
                contentType: false,
                success: function( data ) {
                    console.log(data)
                    if(data.status == 'success') {
                        $('#login-modal').modal('hide')
                        let viewObj = {magazine_id:'{{$content->magazine->id}}', medias:[], library:'{{$library->code}}', contact_id:data.id, session_code:'{{$session->code}}', "_token": "{{ csrf_token() }}" }
                        $('.media-card').each(function( index ) {
                            viewObj.medias.push($( this ).attr('id'))
                        });
                        let media_views = {}
                        $.ajax({
                          type: "POST",
                          url: '/analytics/view',
                          data: viewObj,
                          success: function( data ) {
                            media_views = data.data.result
                          },
                        });

                    } else {
                        $('.error-msg').html('We are not able to find your phone number in the list of registered doctors. Please check the submitted number or register for the session if you have not yet done so.');
                    }
                },
            });
        });


        // let viewObj = {magazine_id:'{{$content->magazine->id}}', medias:[], library:'{{$library->code}}', "_token": "{{ csrf_token() }}" }
        // $('.media-card').each(function( index ) {
        //     viewObj.medias.push($( this ).attr('id'))
        // });
        // let media_views = {}
        // $.ajax({
        //   type: "POST",
        //   url: '/analytics/view',
        //   data: viewObj,
        //   success: function( data ) {
        //     media_views = data.data.result
        //   },
        // });

        TimeMe.initialize({
            currentPageName: "{{$library->code}}", // current page
            idleTimeoutInSeconds: 10, //seconds
        });

        // setInterval(function(){
        //     console.log(TimeMe.getTimeOnCurrentPageInSeconds())
        //     for(let media of Object.keys(media_views)) {
        //         console.log(media)
        //         let timeSpentOnElement = TimeMe.getTimeOnAllPagesInSeconds(media);
        //         console.log(timeSpentOnElement)
        //     }
        // }, 1000)
        

    });

</script>
<!-- end demo js-->
@endsection