<script src="{{CONFIG theme_url}}/js/highcharts/highcharts.js"></script>
<script src="{{CONFIG theme_url}}/js/highcharts/exporting.js"></script>
<div class="user-setting-panel pt_shadow">
    <div class="user-ads-list-container">
        <div class="user-ads-list-header margin_bottom_">
            <span class="pointer <?php echo ($pt->page == 'user_ads') ? 'active': '';?>">
            <a href="{{LINK ads}}" data-load="?link1=ads">
                <svg 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" class="feather feather-dollar-sign"><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 ads}}
            </a>
        </span>
        <span class="pointer" title="{{LANG wallet}}">
            <a href="{{LINK wallet}}" data-load="?link1=wallet">
                <svg 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" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg> {{LANG wallet}} ({{CURRENCY}}{{ME wallet}})
            </a>
        </span>
        <span class="create-ad-btn">
            <a href="{{LINK ads/create}}" data-load="?link1=create_ads">
                <svg 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" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> {{LANG create_ad}}
            </a>
        </span>
        </div>
    </div>
    	
	<br>
	<div>
		 <div class="form-group col-lg-12 ">
            <div class="col-md-12">
                <div class="col-md-6">
                	<div class="col-md-6">
                		<div>{{LANG spent}}</div>
	                    <div>{{CURRENCY}}{{TOTAL_SPENT}}</div>
                	</div>
                	<div class="col-md-6">
                		<div>{{TEXT_RESULT}}</div>
	                    <div>{{TOTAL_RESULT}}</div>
                	</div>
                </div>
                <div class="col-md-4">
                    <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 class="col-md-2 pull-right">
                    <button id="submit" name="submit" class="btn btn-main setting-panel-mdbtn pull-right"><svg 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" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> {{LANG view_report}}</button>
                </div>
                
            </div>
        </div>
        <div id="chart-container"></div>
	</div>
	<div class="clear"></div>
</div>
<br>
<script>
    $(document).on('click', '#submit', function(event) {
        var type = $('#type').val();
        window.location.href = site_url+"/ads/analytics/{{ID}}?type="+type;
    });

   $(function () {
    Highcharts.setOptions({
      colors: ['#6abd46', '#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 spent}}',
            data: [<?php echo $pt->array;?>]

	        }, {
            name: '{{TEXT_RESULT}}',
            data: [<?php echo $pt->click_array;?>]

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