<script src="{{CONFIG theme_url}}/js/highcharts/highcharts.js"></script>
<div class="user-setting-panel pt_shadow">
    <div>
		<div class="upload-head">
			<h4>{{LANG video_analytics}}</h4>
			<ul class="list-unstyled vid_stud_links">
				<li>
				  	<a href="{{LINK dashboard}}" data-load="?link1=dashboard"><svg class="feather feather-layout" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg> {{LANG dashboard}}</a>
				</li>
				<li>
					<a href="{{LINK video_studio}}" data-load="?link1=video_studio"><svg class="feather feather-video" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg> {{LANG videos}}</a>
				</li>
				<li>
					<a href="{{LINK comments}}" data-load="?link1=comments"><svg class="feather feather-message" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></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>
						<a href="{{LINK transactions}}" data-load="?link1=transactions"><svg class="feather feather-dollar-sign" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-reactid="461"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg> {{LANG earnings}}</a>
					</li>
				<?php } ?>
			</ul>
			<div class="clear"></div>
			<hr>
		</div>
        <br>
		<div class="row">
        <div class="form-group row col-lg-12">
            <div class="col-md-9">
                <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="col-md-3">
				<br>
                <select id="type" name="type" class="form-control pull-right">
					<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>
		
		<div class="form-group row col-lg-12 ">
            <div class="col-md-3 col-sm-6">
				<div class="vid_analts_stat" style="background: linear-gradient(135deg, #2196F3 0%,#4c75a3 100%);">
					<svg class="feather" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
					<span>
						<h2>{{LANG total_likes}}</h2>
						<p>{{LIKES}}</p>
					</span>
				</div>
            </div>
			<div class="col-md-3 col-sm-6">
				<div class="vid_analts_stat" style="background: linear-gradient(135deg, #F44336 0%,#ce3d3d 100%);">
					<svg class="feather" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
					<span>
						<h2>{{LANG total_dislikes}}</h2>
						<p>{{DISLIKES}}</p>
					</span>
				</div>
            </div>
			<div class="col-md-3 col-sm-6">
				<div class="vid_analts_stat" style="background: linear-gradient(135deg, #f2b92b 0%,#d89c06 100%);">
					<svg class="feather" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
					<span>
						<h2>{{LANG total_views}}</h2>
						<p>{{VIEWS}}</p>
					</span>
				</div>
            </div>
			<div class="col-md-3 col-sm-6">
				<div class="vid_analts_stat" style="background: linear-gradient(135deg, #6abd46 0%,#4CAF50 100%);">
					<svg class="feather" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
					<span>
						<h2>{{LANG total_comments}}</h2>
						<p>{{COMMENTS}}</p>
					</span>
				</div>
            </div>
        </div>
		</div>
        <br><br>
        
        <div id="chart-container"></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>