@extends('advertiser.layout.app')

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

@section('advertiser_content')

<!-- //CONTAINER START// -->
@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
<div class="map_viewBg">
    <img src="{{ asset('advertiser_user/images/map_bg.jpg') }}" alt="map-bg">
</div>
<div class="container">
    <div class="cloud_content calender_wrap">
        <div class="map_view_cldBox">
            <div class="cldMid_box">
                <div class="cld_calendar_wrap">
                    {{-- <div class="cld_calendarBox">
                        <input id="date-range" size="30" value="" type="hidden">
                    </div> --}}

                    <div class="cld_calendarBox calendar_des_view">
                        <input id="date-range" size="40" value="" type="hidden">
                        <div id="choose_date_des"></div>
                    </div>
                    <div class="cld_calendarBox calendar_mob_view">
                        <input id="date-range-mob" size="40" value="" type="hidden">
                        <div id="choose_date_mob"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="warning_wrap">
            <span class="warning_msg">Minimum 14 days</span>
        </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 cld_stDetails clnd_topHead">
                            <div class="cld_stHead faq-hd">
                                <h3>{{ trans('landing.calendar.set_duration') }}</h3>
                                    <span class="right-cont"><span id="screen_count"></span> <i class="plus-minus" title="Drop Down"></i></span>
                            </div>
                            <div class="cld_stDts-select cld_stDetails faq-ans" style="display: none;">
                                {{-- <div class="faq-hd">
                                    <span class="left-cont">{{ trans('landing.screen.selected_screen') }}</span>
                                <span class="right-cont"><span id="screen_count"></span> <i class="plus-minus"
                                        title="Drop Down"></i></span>
                                </div> --}}
                                <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">{{ 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">
                                            @foreach ($venues as $venue)
                                            @if(!empty($venue->venuScreens) && !$venue->venuScreens->isEmpty())

                                            <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">
                                                <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">0</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_stDts_list">
                                    <div class="cld_stDts-camp cld_stDetails">
                                        <span class="left-cont">{{ trans('landing.calendar.campaign_dates') }}</span>
                                        <span class="right-cont dates_from_to">{{ !empty($date) ? $date : '' }}</span>
                                    </div>
                                    <div class="cld_stDts-leng cld_stDetails">
                                        <span class="left-cont">{{ trans('landing.calendar.duration') }} </span>
                                        <span
                                            class="right-cont dates_length">{{ !empty($diff_dates) ? $diff_dates : '' }}</span>
                                    </div>

                                </div>
                            </div>
                            
                            <div class="cld_button cld_selectBtn_wrap">
                                <a disabled href="{{ route('advertiser.select.content', app()->getLocale()) }}"
                                    class="btn button btn_nxt active {{ empty($date) ? 'disabled' : '' }}" type="button"
                                    value="">{{ trans('landing.commen.next') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //CONTAINER END// -->
@stop

@section('advertiser_styles')

<style>
    .screen_selected {
        display: block !important;
    }

    .date-picker-wrapper .month-wrapper table .day.real-today {
        color: #ccc !important;
    }

    table.select_tbl th:last-child,
    table.select_tbl td:last-child {
        width: auto;
        text-align: right;
    }

    li a:hover i.nav_video {
        cursor: not-allowed;
    }

    li a:hover i.nav_cart {
        cursor: not-allowed;
    }

    .date-picker-wrapper .month-wrapper table .day.toMonth.invalid.tmp,
    .date-picker-wrapper .month-wrapper table .day.toMonth.invalid.hovering {
        color: #333 !important;
    }

    div.date-picker-wrapper .month-wrapper table .day.real-today {
        color: #333 !important;
    }

    div.date-picker-wrapper .month-wrapper table .day.real-today.first-date-selected {
        color: #FFF !important;
    }

    .date-picker-wrapper .month-wrapper table .day.toMonth.checked.first-date-selected.invalid {
        color: #FFF !important;
    }

</style>
@stop

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