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

@section('content')
<!-- 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>

                </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 == '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 -->

<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 type="text/javascript">
    jQuery(document).ready(function($){
        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