<script src="{{CONFIG theme_url}}/js/highcharts/highcharts.js"></script>
<div class="row">
	<div class="col-md-3">
		<div class="settings-sidebar">
			<ul class="list-group">
				<li class="list-group-item">
					<a href="{{LINK dashboard}}" data-load="?link1=dashboard"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg> {{LANG dashboard}}</a>
				</li>
				<li class="list-group-item <?php if (empty($_GET['videos_type']) || $_GET['videos_type'] != 'movies') { echo 'active'; } ?>">
					<a href="{{LINK video_studio}}" data-load="?link1=video_studio"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M16 4a1 1 0 0 1 1 1v4.2l5.213-3.65a.5.5 0 0 1 .787.41v12.08a.5.5 0 0 1-.787.41L17 14.8V19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14zM7.4 8.829a.4.4 0 0 0-.392.32L7 9.228v5.542a.4.4 0 0 0 .542.374l.073-.036 4.355-2.772a.4.4 0 0 0 .063-.624l-.063-.05L7.615 8.89A.4.4 0 0 0 7.4 8.83z"/></svg> {{LANG videos}}</a>
				</li>
				<li class="list-group-item">
					<a href="{{LINK comments}}" data-load="?link1=comments"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zM7 10v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2z"/></svg> {{LANG comments}}</a>
				</li>
				<?php if ($pt->config->usr_v_mon == 'on' || $pt->config->sell_videos_system == 'on' || $pt->config->payed_subscribers == 'on') { ?>
					<li class="list-group-item">
						<a href="{{LINK transactions}}" data-load="?link1=transactions"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M14 2a8 8 0 0 1 3.292 15.293A8 8 0 1 1 6.706 6.707 8.003 8.003 0 0 1 14 2zm-3 7H9v1a2.5 2.5 0 0 0-.164 4.995L9 15h2l.09.008a.5.5 0 0 1 0 .984L11 16H7v2h2v1h2v-1a2.5 2.5 0 0 0 .164-4.995L11 13H9l-.09-.008a.5.5 0 0 1 0-.984L9 12h4v-2h-2V9zm3-5a5.985 5.985 0 0 0-4.484 2.013 8 8 0 0 1 8.47 8.471A6 6 0 0 0 14 4z"></path></svg> {{LANG earnings}}</a>
					</li>
				<?php } ?>
                <?php if ($pt->config->movies_videos == 'on' && PT_IsAdmin()) { ?>
					<li class="list-group-item <?php if (!empty($_GET['videos_type']) && $_GET['videos_type'] == 'movies') { echo 'active'; } ?> ">
						<a href="{{LINK video_studio?videos_type=movies}}" data-load="?link1=video_studio&videos_type=movies"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M18.001 20H20v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.985 9.985 0 0 1-3.999 8zM12 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-4 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-4 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg> {{LANG movies}}</a>
					</li>
                <?php } ?>
			</ul>
		</div>
	</div>
	<div class="col-md-9">
		<div class="user-setting-panel pt_shadow">
			<div class="yp_sett_header">
				<h4><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16 4a1 1 0 0 1 1 1v4.2l5.213-3.65a.5.5 0 0 1 .787.41v12.08a.5.5 0 0 1-.787.41L17 14.8V19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14zM7.4 8.829a.4.4 0 0 0-.392.32L7 9.228v5.542a.4.4 0 0 0 .542.374l.073-.036 4.355-2.772a.4.4 0 0 0 .063-.624l-.063-.05L7.615 8.89A.4.4 0 0 0 7.4 8.83z"></path></svg> {{LANG video_analytics}}</h4>
			</div>
			<div class="mb_50">
				<div class="vid_stud_divider">{{LANG video_analytics}}</div>
				<div class="videos-list related-videos">
                    <div class="video-wrapper side-barlist-wrapper vid_analts_info" data-litsitem-id="{{ID}}" data-video-id="{{VID_ID}}" title="{{TITLE}}"> 
                       <div class="video-thumb pull-left">  
                          <a href="{{URL}}" data-load="?link1=watch&id={{VIDEO_ID_}}">
							<img src="{{THUMBNAIL}}" alt="{{TITLE}}">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#04abf2" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
						  </a>
                       </div>
                       <div class="video-title">
                          <a href="{{URL}}" data-load="?link1=watch&id={{VIDEO_ID_}}">{{TITLE}}</a>
                       </div>
                       <div class="clear"></div>
                    </div>
                </div>
			</div>
			<div class="form-group">
				<div class="row pt_vid_stud_row">
					<div class="col-md-3 col-sm-6">
						<div class="vid_analts_stat" style="background: transparent linear-gradient(309deg, #FE513F 0%, #FE8248 100%) 0% 0% no-repeat padding-box;">
							<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M2 9h3v12H2a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1zm5.293-1.293l6.4-6.4a.5.5 0 0 1 .654-.047l.853.64a1.5 1.5 0 0 1 .553 1.57L14.6 8H21a2 2 0 0 1 2 2v2.104a2 2 0 0 1-.15.762l-3.095 7.515a1 1 0 0 1-.925.619H8a1 1 0 0 1-1-1V8.414a1 1 0 0 1 .293-.707z"/></svg> <h2>{{LANG total_likes}}</h2></div>
							<p>{{LIKES}}</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6">
						<div class="vid_analts_stat" style="background: transparent linear-gradient(309deg, #19AA7D 0%, #35E9B1 100%) 0% 0% no-repeat padding-box;">
							<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M22 15h-3V3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-5.293 1.293l-6.4 6.4a.5.5 0 0 1-.654.047L8.8 22.1a1.5 1.5 0 0 1-.553-1.57L9.4 16H3a2 2 0 0 1-2-2v-2.104a2 2 0 0 1 .15-.762L4.246 3.62A1 1 0 0 1 5.17 3H16a1 1 0 0 1 1 1v11.586a1 1 0 0 1-.293.707z"/></svg> <h2>{{LANG total_dislikes}}</h2></div>
							<p>{{DISLIKES}}</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6">
						<div class="vid_analts_stat" style="background: transparent linear-gradient(308deg, #55479F 0%, #7569B3 100%) 0% 0% no-repeat padding-box;">
							<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg> <h2>{{LANG total_views}}</h2></div>
							<p>{{VIEWS}}</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6">
						<div class="vid_analts_stat" style="background: transparent linear-gradient(309deg, #E95F8A 0%, #FE82A9 100%) 0% 0% no-repeat padding-box;">
							<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M16.8 19L14 22.5 11.2 19H6a1 1 0 0 1-1-1V7.103a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1h-5.2zM2 2h17v2H3v11H1V3a1 1 0 0 1 1-1z"/></svg> <h2>{{LANG total_comments}}</h2></div>
							<p>{{COMMENTS}}</p>
						</div>
					</div>
				</div>
				<br>
				<select id="type" name="type" class="form-control">
					<option value="today" <?php echo ($pt->cat_type == 'today') ? 'selected': '';?>>{{LANG today}}</option>
					<option value="this_week" <?php echo ($pt->cat_type == 'this_week') ? 'selected': '';?>>{{LANG this_week}}</option>
					<option value="this_month" <?php echo ($pt->cat_type == 'this_month') ? 'selected': '';?>>{{LANG this_month}}</option>
					<option value="this_year" <?php echo ($pt->cat_type == 'this_year') ? 'selected': '';?>>{{LANG this_year}}</option>
				</select>
			</div>
			<div id="chart-container"></div>
		</div>
	</div>
</div>
<br>

<script>
    $("select#type").change(function(){
        var type = $('#type').val();
        window.location.href = site_url+"/view_analytics/{{ID}}?type="+type;
    });

   $(function () {
    Highcharts.setOptions({
      colors: ['#4c75a3', '#ce3d3d', '#f2b92b', '#6abd46']
    });
    $('#chart-container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: "<?php echo($pt->chart_title); ?> (Based on UTC timezone)"
        },
        xAxis: {
            <?php if ($pt->cat_type == 'today') { ?>
                categories: [
                    '00 AM',
                    '1 AM',
                    '2 AM',
                    '3 AM',
                    '4 AM',
                    '5 AM',
                    '6 AM',
                    '7 AM',
                    '8 AM',
                    '9 AM',
                    '10 AM',
                    '11 AM',
                    '12 PM',
                    '1 PM',
                    '2 PM',
                    '3 PM',
                    '4 PM',
                    '5 PM',
                    '6 PM',
                    '7 PM',
                    '8 PM',
                    '9 PM',
                    '10 PM',
                    '11 PM'
                ]
            <?php }elseif ($pt->cat_type == 'this_week') { ?>
                categories: [
                    'Saturday',
                    'Sunday',
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday'
                ]
            <?php }elseif ($pt->cat_type == 'this_month') { ?>
                <?php if ($pt->month_days == 31) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                <?php }elseif ($pt->month_days == 30) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                <?php }elseif ($pt->month_days == 29) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
                <?php }elseif ($pt->month_days == 28) {  ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]
                <?php } ?>
            <?php }elseif ($pt->cat_type == 'this_year') { ?>
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            <?php } ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: "<?php echo $pt->chart_text;?>"
            }
        },
        tooltip: {
            headerFormat: "<span style='font-size:10px;color:#fff;'>{point.key}</span><table>",
            pointFormat: "<tr><td style='color:#fff;padding:0'>{series.name}: </td>" +
                "<td style='padding:0;color:#fff;'><b>{point.y}</b></td></tr>",
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: '#444'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: "{{LANG likes}}",
            data: [<?php echo $pt->likes_array;?>]

        }, {
            name: "{{LANG dislikes}}",
            data: [<?php echo $pt->dislikes_array;?>]

        }, {
            name: "{{LANG views}}",
            data: [<?php echo $pt->views_array;?>]

        }, {
            name: "{{LANG comments}}",
            data: [<?php echo $pt->comments_array;?>]

        }]
    });
});
</script>