@extends('advertiser.layout.app')
@php($user = Auth::guard('web')->user())
@section('advertiser_title', trans('landing.titles.calender'))

@section('advertiser_content')
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('advertiser.select.date', app()->getLocale()) }}"
                class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop
<div class="map_viewBg">
    <img src="{{ asset('advertiser_user/images/map_bg.jpg') }}" alt="map-bg">
</div>
<div class="progress-bar-proccess" style="display: none">
    <div id="map_view_screen" class="timeline-wrapper videobox">
        <div class="timeline-item map_screenBox">
            <div class="upl_wrapBox">
                <div class="animated-background">
                    <div class="background-masker header-top"></div>
                    <div class="background-masker header-left"></div>
                    <div class="background-masker header-right"></div>
                    <div class="background-masker header-bottom"></div>
                    <div class="background-masker subheader-left"></div>
                    <div class="background-masker subheader-right"></div>
                    <div class="background-masker subheader-bottom"></div>
                    <div class="background-masker content-top"></div>
                    <div class="background-masker content-first-end"></div>
                    <div class="background-masker content-second-line"></div>
                    <div class="background-masker content-second-end"></div>
                    <div class="background-masker content-third-line"></div>
                    <div class="background-masker content-third-end"></div>
                </div>
            </div>
            <div class="scr_contentBox">
                <div class="video_topBox">
                    <div class="upl_fileName" data-id="&nbsp;">
                        <label class="text_label">&nbsp;</label>
                        <div class="txt_ed_tk"></div>
                        <input class="library_title" type="text" value="&nbsp;">
                        <div class="txt_ed_tk tick"></div>
                    </div>
                </div>
                <div class="video_midBox">
                                    <div class="upl_leftName"><span>&nbsp;</span></div>
                                    <div class="upl_fileSolt"> <span>&nbsp;</span> </div>
                </div>
                <div class="video_btmBox">
                    <div class="upl_dlt">
                        <input type="button" class="delete media_delete" data-id="&nbsp;" value="cancel">
                    </div>
                    <div class="info_hoverDts info_hoverDelete" style="display: none;">
                        <p>Double click to delete</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Progress bar -->
{{-- <div class="progress" style="display: none">
    <div class="progress-bar"></div>
</div> --}}
<!-- //CONTAINER START// -->
@php($total_slots=0)
<div class="container">
    <div class="cloud_content cloud_upld_wrap">
        <div class="map_view_cldBox">
            <div class="cldMid_box_figma">
                <div id="video">
                    <form id="frm-upload" method="post" name="frm-uploadVideoImage" enctype="multipart/form-data"
                        action="{{ route('advertiser.upload.media', app()->getLocale()) }}">
                        <input type="file" id="fileuploader" name="item_medias[]" class="fileupldBtn"
                            accept="image/*,video/*" multiple>
                    </form>
                </div>
                <div id="videoupload">
                    @php($video_ext = Config('global.video_extensions'))
                    @php($image_ext = Config('global.image_extensions'))
                    @if(!empty($exist_medias) && !$exist_medias->isEmpty())
                    @foreach ($exist_medias as $key => $exist_media)
                    @php($info = new \SplFileInfo($exist_media->path))
                    @php($ext = $info->getExtension())
                    <div id="map_view_screen" class="videobox">
                        <div class="map_screenBox">
                            <div class="upl_wrapBox">
                                @if(in_array($ext,$image_ext))
                                @php($video = false)
                                @php($slot_count = 1)
                                @php($image_size = exif_read_data(public_path('uploads/items/'.$exist_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/'.$exist_media->path) }}" width="100%" height="100%"/>
                                    <img class="actual_image  {{ ($width > $height+10) ? 'landscape' : 'portrait' }}" src="{{ asset('uploads/items/'.$exist_media->path) }}" width="100%" height="100%"/>
                                </div>
                                @elseif(in_array($ext,$video_ext))
                                    {{-- @php($file_size = File::size(public_path('uploads/items/video/'.$exist_media->path)))
                                    @php($getID3 = new \getID3)
                                    @php($file = $getID3->analyze(public_path('uploads/items/video/'.$exist_media->path))) --}}

                                    @php($duration = !empty($exist_media->duration)?date('H:i:s', strtotime($exist_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/'.$exist_media->thumbnail)))
                                    @php($width = $image_size['COMPUTED']['Width'])
                                    @php($height = $image_size['COMPUTED']['Height'])                               

                                <a class="map_screenImg">
                                    <img class="video_thump_image" src="{{ asset('uploads/items/video/thump/'.$exist_media->thumbnail) }}" alt="{{ $exist_media->title }}">
                                    <button class="video_play active" data-id="{{ $exist_media->id }}">play</button>
                                    <img class="foregroundVideo  {{ ($width > $height+10) ? 'landscape' : 'portrait' }}" data-id="{{ $exist_media->id }}" src="{{ asset('uploads/items/video/thump/'.$exist_media->thumbnail) }}" alt="{{ $exist_media->title }}">
                                    {{-- <video class="foregroundVideo" preload=”metadata” playsinline controls disablepictureinpicture controlslist="nodownload" src="{{ asset('uploads/items/video/'.$exist_media->path) }}" poster="{{ asset('uploads/items/video/thump/'.$exist_media->thumbnail) }}" width="100%" height="100%"></video> --}}
                                </a>
                                @endif
                            </div>
                            <div class="scr_contentBox">
                                
                                <div class="video_topBox">
                                    <div class="upl_fileName" data-id="{{ $exist_media->id }}">
                                        <label class="text_label">{{ $exist_media->title }}</label>
                                        <div class="txt_ed_tk edit"></div>
                                        <input class="library_title" type="text" value="{{ $exist_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>
                                <div class="video_btmBox">
                                    <div class="upl_dlt">
                                        <input type="button" class="delete media_delete" data-id="{{ $exist_media->id }}" value="cancel">
                                    </div>
                                    <div class="info_hoverDts info_hoverDelete">
                                        <p>Double click to delete</p>
                                    </div>
                                </div>
        
                                    {{-- <div class="upl_fileDura">
                                        <span>{{ $slot_duration->duration }}
                                            {{ trans('confirmation.select_screen.seconds') }}</span>
                                    </div>
                                    <div class="upl_fileSolt">
                                        <span>{{ ceil($slot_count) }} {{ trans('confirmation.select_screen.slots') }}</span>
                                    </div>
                                    <div class="upl_fileSize" style="display:none">{{ $file_size }}
                                        {{ trans('confirmation.select_screen.size') }}</div>
                                    <div class="upl_dlt">
                                        <input type="button" class="delete media_delete" data-id="{{ $exist_media->id }}"
                                            value="cancel">
                                    </div> --}}
                            </div>
                        </div>
                    </div>
                    @php($total_slots+=ceil($slot_count))
                    @endforeach
                    @else
                    {{-- <div class="note_figma">
                        <div class="left_tab">
                            <img class="figma_img" src="{{ asset('advertiser_user/images/duration.svg') }}" alt="">
                        </div>
                        <div class="right_tab">
                            {{ trans('confirmation.select_screen.figma_note') }}
                        </div>
                    </div> --}}
                    @if($user->file_upload_message_status == 0)
                    <div style="display: block" class="not_figma_wrap not-alertMsg alert-notice alert-info showSweetAlert visible" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null">
                        <div class="alert_msg_wrap">
                            <h2>{{ trans('confirmation.select_screen.notice') }}</h2>
                            <p class="not_figma_txt" style="display: block;">{{ trans('confirmation.select_screen.figma_note') }}</p>
                            <div class="sa-button-container">
                                <div class="not_confirm_wrap custom-control custom-checkbox mb-3">
                                    <input type="checkbox" class="custom-control-input check_content res_checkbox" id="dont_show_content" name="example1" data-id="">
                                    <label class="custom-control-label" for="dont_show_content">{{ trans('confirmation.select_screen.dont_show') }}</label>
                                </div>
            
                                {{-- <div class="sa-confirm-button-container">
                                    <button class="confirm active" tabindex="1">Dismiss</button>
                                </div>
                                <button class="cancel" tabindex="2" style="display: inline-block; box-shadow: none;">Never show</button> --}}
                            </div>
                        </div>
                    </div>
                    @endif
                    @endif

            </div>

            
        
            <div class="cld_select_wrap">
                <div class="select_container">
                    <div class="cld_select_screen">
                        <div class="cld_stDuration cld_stDts-select cld_stDetails faq-ques-box">
                            <div class="cld_stHead faq-hd">
                                <h3>{{ trans('confirmation.select_screen.upload_content') }}</h3>
                                    <span class="right-cont"><i class="plus-minus"
                                            title="Drop Down"></i></span>
                                </div>
                                <div class="faq-ans" style="display: none;">
                                    <div class="table-responsive selectBox_tbl">
                                        <table class="table select_tbl">
                                            <thead>
                                                <tr>
                                                    <th scope="col">{{ trans('landing.screen.location') }} </th>
                                                    <th scope="col" class="txt_center">{{ trans('landing.screen.screens') }} </th>
                                                    <th scope="col" class="txt_center price_head price_column {{  (!empty($exist_medias) && count($exist_medias) > 0) ? 'price_column_block' : ''}}">{{ trans('landing.screen.price_per_slot_day') }}</th>
                                                    <th scope="col" class="txt_center">{{ trans('landing.screen.viewership_daily') }} </th>
                                                    <th scope="col"></th>
                                                </tr>
                                            </thead>
                                
                                            <tbody id="table_body">
                                                @php($total_screen_discount = 0)
                                                @foreach ($venues as $venue)
                                                @if(!empty($venue->venuScreens) && !$venue->venuScreens->isEmpty())
                                                    @php($total_screens = count($venue->venuScreens))
                                                    {{-- @php($total_screen_price = $venue->venuScreens->sum('slotPrice.slots.price')/$total_screens) --}}
                                                    @php($total_screen_price = (!empty($venue->venuScreens->sum('price')) && $venue->venuScreens->sum('price') > 0) ? ($venue->venuScreens->sum('price')/$total_screens) : ($venue->venuScreens->sum('slotPrice.slots.price')/$total_screens))

                                                    
                                                    
                                                    @php($screen_discount = $venue->venuScreens->sum('discount'))
                                                    @if(!empty($screen_discount) && $screen_discount > 0) 
                                                    @php($total_screen_discount = $screen_discount/$total_screens)
                                                    @php($total_screen_price = ($total_screen_price-$total_screen_discount)*count($venue->venuScreens)) 
                                                    @else
                                                    @php($total_screen_price = ($total_screen_price-$total_screen_discount)*count($venue->venuScreens))
                                                    @endif
                                                    @php($total_screen_price_with_out_content = $total_screen_price*$date_diff)                                          
                                                    @php($total_screen_price = $total_screen_price_with_out_content*$total_slots)                                          
                                                    <tr class="rwd_locationHead">
                                                        <td class="rwd_sub_head">{{ !empty($venue->location) ?  strlen($venue->location) > 30 ? substr($venue->location, 0, 30). '...' : $venue->location : 'NA' }}</td>
                                                    </tr>
                                                    
                                                    <tr class="rwd_locationBody">
                                                        <input type="hidden" class="each_screen_price" name="each_screen_price" id="" value="{{ $total_screen_price_with_out_content }}">

                                                    <th scope="row">{{ !empty($venue->location) ?  strlen($venue->location) > 30 ? substr($venue->location, 0, 30). '...' : $venue->location : 'NA' }}</th>
                                                    <td class="txt_center">{{ !empty($venue->venuScreens) ? count($venue->venuScreens) : '0' }}</td>
                                                    <td class="txt_center price_field price_column {{ (!empty($exist_medias) && count($exist_medias) > 0) ? 'price_column_block' : ''}}">{{ priceFormat($total_screen_price) }}</td>
                                                    <td class="txt_center rwd_repeat_location">{{ thousandsCurrencyFormat($venue->venuScreens->sum('viewer')) }}</td>
                                                    <td class="dlt_icon">
                                                        <a href="#" class="delete-screen" data-id="{{ $venue->id }}"><i class="dlt_ico"></i></a>
                                                        <div class="dlt_hoverDts">
                                                            <p>Double click to delete</p>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="cld_stBody">
                                    <div class="cld_button cld_ftBtn cld_btn_upload">
                                        <div class="cld_upload">
                                            <a href="#" class="btn button btn_apply active from_pc" type="button"
                                                value=""><span class="from-pc">{{ trans('confirmation.select_screen.from_pc') }}</span><span class="from-mobile">{{ trans('confirmation.select_screen.from_mobile') }}</span></a>
                                            <a href="{{ route('advertiser.media.libraries', app()->getLocale()) }}"
                                                class="btn button btn_reset from_library" type="button"
                                                value="">{{ trans('confirmation.select_screen.from_library') }}
                                            </a>
                                        </div>
                                        
                                        <div class="cld_button cld_ftBtn content_next_btn">
                                            <a href="{{ route('advertiser.content.confirmation', app()->getLocale()) }}"
                                                class="btn button btn_nxt active {{ empty($item_medias) ? 'disabled' : '' }} disabled_button" type="button"
                                                value="">{{ trans('confirmation.select_screen.next') }}</a>
                                            <!-- <a href="index16.php" class="btn button btn_nxt btn_disabled disabled" type="button" value="">Next</a> -->
                                        </div>
                                    </div>
                                    <div class="cld_bt_termCond">
                                        <p class="cld_termsConditions">
                                            {{ trans('confirmation.select_screen.condition') }}
                                            <a data-toggle="modal" data-target="#terms_condition" data-href="{{ route('terms.condition', app()->getLocale()) }}">{{ trans('confirmation.select_screen.condition2') }}</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //CONTAINER END// -->

<!-- Subscribe Modal -->
<div class="modal fade" id="terms_condition" tabindex="-1" role="dialog" aria-labelledby="terms_condition">
	<div class="modal-dialog" role="document">
        <div class="modal-header border-0">
            <h4 class="modal-title" id="terms_condition"></h4>
        </div>
		<div class="modal-content">
		</div>
	</div>
</div>

@stop

@section('advertiser_styles')
<style>
    .upl_fileName::after {
        background: none;
    }
    .progress-bar-proccess .timeline-item.map_screenBox {
        display: none;
    }
    .price_column {
        display: none;
    }
    .price_column_block {
        display: block;
    }
    .progress, .progress-bar-proccess {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        background-color: rgba(192, 192, 192, 0.5);
        background-repeat: no-repeat;
        background-position: center;
    }

    .progress-bar {
        height: 30px;
        font-size: 25px;
        background: #0e1d2b;
    }

    /* Progrss */
    .timeline-wrapper {
        /* height: 410px; */
    }
    .timeline-item {
        background: #fff;
        border: 1px solid;
        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
        /* border-radius: 3px; */
        /* padding: 12px; */
        height: 100%;

        /* margin: 0 auto; */
        /* width: 24%; */
    }

    @keyframes placeHolderShimmer {
        0% {
            background-position: -468px 0
        }

        100% {
            background-position: 468px 0
        }
    }

    .animated-background {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 305px;
        position: relative;
    }

    .upl_fileName .tick {
        display: none;
    }
    p.cld_termsConditions a {
        cursor: pointer;

    }
    .from-pc {
        display: block;
    }
    .from-mobile {
        display: none;
    }

    @media (max-width: 767px) {
        .from-pc {
        display: none;
        }
        .from-mobile {
            display: block;
        }
    }


    .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);
    }

    #busyloading .progress_bar.bar{
        
        top: 48.9%;
        position: absolute;
        left: 49%;
        font-weight: bold;
        color: #FFF;
        opacity: 1;
        width: 40px;
        text-align: center;

    }

    /*  */
    .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;
    }

</style>
@stop

@section('advertiser_js')
@include('advertiser.modules.home.js.select_content')
@stop