@extends('advertiser.layout.app')

@section('advertiser_title', trans('landing.titles.my_library'))

@section('advertiser_content')
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('advertiser.home', app()->getLocale()) }}" class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop
<!-- //CONTAINER START// -->
<div class="map_viewBg">
    <img src="{{ asset('advertiser_user/images/map_bg.jpg') }}" alt="map-bg">
</div>

<!-- //CONTAINER START// -->
@php($slot_count=1)
<div class="container">
    <div class="cloud_content">
        <div class="map_view_cldBox">
            <div id="videoupload">
                @php($video_ext = Config('global.video_extensions'))
                @php($image_ext = Config('global.image_extensions'))
                @if(!empty($libraries) && !$libraries->isEmpty())
                @foreach($libraries as $key => $media)
                @php($info = new \SplFileInfo($media->path))
                @php($ext = $info->getExtension())
                <div id="map_view_screen" class="videobox libraies_list clearfix">
                    <div class="map_screenBox selected_value_{{ $media->id }} {{ !empty($media_ids) ? in_array($media->id,$media_ids) ? 'selected_value' : '' : '' }}" data-id="{{ $media->id }}">

                        <div class="upl_wrapBox selected_value_{{ $media->id }}" data-id="{{ $media->id }}">
                            <a class="map_screenImg" data-id="{{ $media->id }}">
                                <div class="map_select_box">
                                    <div class="map_select screen_select_{{ $media->id }} {{ !empty($media_ids) ? in_array($media->id,$media_ids) ? 'screen_selected' : '' : '' }}">

                                        <i data-id="{{ $media->id }}" class="icon select_tick"></i>
                                    </div>
                                </div>
                                @if(in_array($ext,$image_ext))
                                @php($slot_count = 1)
                                @php($video = false)
                                @php($image_size = exif_read_data(public_path('uploads/items/'.$media->path)))
                                @php($width = $image_size['COMPUTED']['Width'])
                                @php($height = $image_size['COMPUTED']['Height'])
                                <div class="libray_image_wrapper">
                                    <img class="backround_image"  src="{{ asset('uploads/items/'.$media->path) }}" width="100%" height="100%"/>
                                    <img class="actual_image {{ ($width > $height+10) ? 'landscape' : 'portrait' }}" src="{{ asset('uploads/items/'.$media->path) }}" width="100%" height="100%"/>
                                </div>
                                @elseif(in_array($ext,$video_ext))
                                {{-- @php($file_size = File::size(public_path('uploads/items/video/'.$media->path)))
                                @php($getID3 = new \getID3)
                                @php($file = $getID3->analyze(public_path('uploads/items/video/'.$media->path))) --}}
                                @php($duration = !empty($media->duration)?date('H:i:s', strtotime($media->duration)):"00:00:00")
                                @php($duration = preg_replace("/^([\d]{1,2})\:([\d]{2})$/", "00:$1:$2", $duration))
                                @php(sscanf($duration, "%d:%d:%d", $hours, $minutes, $seconds))
                                @php($time_seconds = $hours * 3600 + $minutes * 60 + $seconds)
                                @php($duration_actual = (date('i:s', strtotime($duration))))
                                @php($slot_count = $time_seconds/$slot_duration->duration)
                                @php($video = true)    
                                @php($image_size = exif_read_data(public_path('uploads/items/video/thump/'.$media->thumbnail)))
                                @php($width = $image_size['COMPUTED']['Width'])
                                @php($height = $image_size['COMPUTED']['Height'])                           
                                <img class="video_thump_image" src="{{ asset('uploads/items/video/thump/'.$media->thumbnail) }}" alt="{{ $media->title }}">
                                <button class="video_play active" data-id="{{ $media->id }}">play</button>
                                <img class="foregroundVideo {{ ($width > $height+10) ? 'landscape' : 'portrait' }}" data-id="{{ $media->id }}" src="{{ asset('uploads/items/video/thump/'.$media->thumbnail) }}" alt="{{ $media->title }}">
             
                                {{-- <video class="foregroundVideo" preload=”metadata” poster="{{ asset('uploads/items/video/thump/'.$media->thumbnail) }}" width="100%" height="100%" controls disablepictureinpicture controlslist="nodownload" type='video/mp4'></video> --}}
                                @endif
                            </a>
                        </div>
                        <div class="scr_contentBox">
                            <div class="video_topBox">
                                <div class="upl_fileName" data-id="{{ $media->id }}">
                                    <label class="text_label">{{ $media->title }}</label>
                                    <div class="txt_ed_tk edit"></div>
                                    <input class="library_title" type="text" value="{{ $media->title }}" />
                                    <div class="txt_ed_tk tick"></div>
                                </div>
                            </div>
                            
                            <div class="video_midBox">
                                @if(!empty($video))
                                <div class="upl_leftName"><span>{{ trans('messages.video') }}</span></div>
                                <div class="upl_fileDura"><span>{{ $duration_actual }}</span></div>
                                @else
                                <div class="upl_leftName"><span>{{ trans('messages.image') }}</span></div>
                                @endif
                                <div class="upl_fileSolt"> <span>{{ ceil($slot_count) }} {{ ceil($slot_count) > 1 ? trans('confirmation.library.Slots') : trans('confirmation.library.slot') }}</span> </div>

                                {{--  <div class="upl_fileSize" style="display:none">9.24 MB</div>   --}}
                            </div>
                            <div class="video_btmBox">
                                <div class="upl_dlt">
                                    <input type="button" class="delete media_delete_from_library" data-id="{{ $media->id }}" value="cancel">
                                </div>
                                <div class="info_hoverDts info_hoverDelete">
                                    <p>Double click to delete</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>


        <div class="cld_select_wrap">
            <div class="select_container">
                <div class="cld_select_screen">
                    <div class="faq-select-box faq-ques-box">
                        <div class="faq-hd">
                            <h3>{{ trans('confirmation.library.my_library') }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>



</div>
<!-- //CONTAINER END// -->
<!-- Modal -->
<div id="video_modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            
        </div>
  
    </div>
</div>

@stop

@section('advertiser_styles')
    <style>
        .map_select_box {
            z-index: 1000;
        }

        .upl_status{
            font-size: 15px;
            color: #212121;
            font-weight: 600;
            line-height: 28px;
        }
        .upl_fileName .tick {
            display: none;
        }
        #videoupload .scr_contentBox {
            padding: 8px 10px 10px;
        }
        .cld_select_wrap {
            bottom: 0;
            height: 100px;
        }
        video {
            -webkit-border-radius: 6px 6px 0px 0px;
        }
        .backgroundVideo {
            height: 100%;
            width: 100%;
            filter: blur(10px);
            z-index: 0 !important;
            position: relative;
        }
        .foregroundVideo {
            z-index: 0 !important;
            object-fit: contain !important;
            position: relative;
            top: -235px !important;
        }
        .video_thump_image {
            filter: blur(10px);
        }

        /*  */
        .libray_image_wrapper{
            position: relative;
            height: 100%;
            width: 100%;
        }
        .actual_image {
            object-fit: contain !important;
            top: -235px !important;
            position: relative;
        }
        .backround_image {
            filter: blur(10px);
            height: 100%;
            width: 100%;
            filter: blur(10px);
            z-index: 0 !important;
            position: relative;
        }
        #cld_topSearch input[type=search] {
            display: none;
        }
        .actual_image.landscape,.foregroundVideo.landscape {
            object-fit: cover !important;
        }
        .show_fullscreen {
            position: absolute;
            bottom: 38px;
            right: 14px;
            z-index: 9999;
            border: 1px solid red;
            width: 20px;
        }
        
    </style>
    {{-- <link href="http://vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet"> --}}
@stop

@section('advertiser_js')
    @include('advertiser.modules.home.js.my-library')
    
@stop