@extends('advertiser.layout.app')

@section('advertiser_title', trans('confirmation.library.Library'))

@section('advertiser_content')
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('advertiser.select.content', 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// -->
<div class="container">
    <div class="cloud_content">
        <div class="map_view_cldBox">
            <div class="cldMid_contBox">
                <div id="videoupload">
                    @if(!empty($libraries) && !$libraries->isEmpty())
                    @foreach($libraries as $key => $media)
                    @php($info = new \SplFileInfo($media->path))
                    @php($video_ext = Config('global.video_extensions'))
                    @php($image_ext = Config('global.image_extensions'))

                    @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” playsinline src="{{ asset('uploads/items/video/'.$media->path) }}" poster="{{ asset('uploads/items/video/thump/'.$media->thumbnail) }}" width="100%" height="100%" controls disablepictureinpicture controlslist="nodownload" ></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>
        <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') }}<span class="plus-minus" title="Drop Down"></span></h3>
                        </div>
                        <div class="cld_button cld_selectBtn_wrap media_next">
                            <a href="{{ route('advertiser.select.content', app()->getLocale()) }}" class="btn button {{ empty($item_medias)?'disabled' :'' }} btn_nxt active" type="button" value="">{{ trans('confirmation.library.Next') }}</a>
                        </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>
        .tooltip {
            /* position: fixed !important; */
            /* top: -20px !important; */
        }
        .map_select_box {
            z-index: 1000;
        }
        .screen_selected {
            display: block;
        }
        .upl_status{
            font-size: 15px;
            color: #212121;
            font-weight: 600;
            line-height: 28px;
        }
        .upl_fileName .tick {
            display: none;
        }
        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;
        }
        .actual_image.landscape,.foregroundVideo.landscape {
            object-fit: cover !important;
        }
        .backround_image {
            filter: blur(10px);
            height: 100%;
            width: 100%;
            filter: blur(10px);
            z-index: 0 !important;
            position: relative;
        }
        .show_fullscreen {
            position: absolute;
            bottom: 38px;
            right: 14px;
            z-index: 9999;
            border: 1px solid red;
            width: 20px;
        }
    </style>
@stop

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