<?php include 'controller/pageCode.php' ?>
<!DOCTYPE html>
<html lang="en">
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <title>Report Summary</title>
    <?php include 'inc/meta_inc.php'; ?>
    <!-- base css -->
    <?php include 'inc/styles_inc.php'; ?>
    <link rel="stylesheet" media="screen, print" href="assets/css/markdown.css">
    <link rel="stylesheet" media="screen, print" href="assets/css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css">
    <link rel="stylesheet" media="screen, print" href="assets/css/statistics/chartjs/chartjs.css">
</head>
    <body class="mod-bg-1 ">
        <!-- DOC: script to save and load page settings -->
        <?php include 'inc/theme_script_inc.php'; ?>
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper" id="app">
            <div class="page-inner">
                <!-- BEGIN Left Aside -->
        <?php include 'inc/aside_inc.php'; ?>
<!-- END Left Aside -->
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Header -->
        <?php include 'inc/header_inc.php'; ?>
<!-- END Page Header -->
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" item_level="main" class="page-content">
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                        </ol>
                        <div class="row">
                            <div class="col-xl-12">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Report Summary <span class="fw-300"><i></i></span>
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="row">
                                                <div class="col-md-3"></div>
                                                <div class="col-md-6">
                                                    <div class="form-group row">
                                                        <label class="col-form-label col-12 col-lg-3 form-label text-lg-right">Range Picker</label>
                                                        <div class="col-12 col-lg-12">
                                                            <div class="input-daterange input-group" id="datepicker-5">
                                                                <input type="text" class="form-control" value="<?php echo $frontend_start ?>" id="start">
                                                                <div class="input-group-append input-group-prepend">
                                                                    <span class="input-group-text fs-xl"><i class="fal fa-ellipsis-h"></i></span>
                                                                </div>
                                                                <input type="text" class="form-control" value="<?php echo $frontend_end ?>" id="end">
                                                                <button id="search" class="btn btn-info form-control">Search</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <center>
                                                    <?php if($items_report_summary): ?>
                                                    <h3 class="color-primary-600 keep-print-font"><?php  $newDate = strtotime($start); echo date('D M j, Y',$newDate) ?> TO <?php  $newDate = strtotime($end); echo date('D M j, Y',$newDate) ?></h3>
                                                    <?php endif ?>
                                                    </center>
                                                </div>
                                                <div class="col-md-3"></div>
                                            </div>
                                        <?php if($items_report_summary): ?>
                                                    <div class="row">
                                                    <?php 
                                                    $total = 0;
                                                    $amount_paid = 0;
                                                    $profit = 0;
                                                    $wholesale = 0;
                                                    $tithe = 0;
                                                    // print_r($items_report_summary);
                                                    foreach($items_report_summary as $key){
                                                        $total = floatval($total)+floatval($key['amount']);
                                                        $amount_paid = $total;
                                                        $wholesale += 0;
                                                    }
                                                    $profit = $total-$wholesale;
                                                    $projected_tithe = $profit/10;
                                                    $percentage_paid = round($amount_paid/$total*100);
                                                    $actual_profit = round($percentage_paid/100*$profit);
                                                    $tithe = $actual_profit/10;
                                                    $income_to_spend = $actual_profit-$tithe;
                                                    ?>
                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-primary-400 rounded overflow-hidden position-relative text-white mb-g">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$total, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">as total amount for <span style="font-weight:bolder;color:#000">
                                                                    the period
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g" style="background-color:#1B3952 !important;">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$profit, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">as Expected profit <span style="font-weight:bolder;color:#000">
                                                                        
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>		
                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-info-400 rounded overflow-hidden position-relative text-white mb-g">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$projected_tithe, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">  as expected tithe for <span style="font-weight:bolder;color:#000">
                                                                        <!-- (<?php //echo $percentage_paid ?>%) -->
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>						
                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-danger-400 rounded overflow-hidden position-relative text-white mb-g">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$amount_paid, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">  as amount paid for <span style="font-weight:bolder;color:#000">
                                                                        <!-- (<?php //echo $percentage_paid ?>%) -->
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-success-400 rounded overflow-hidden position-relative text-white mb-g" style="background-color:#009FC8 !important;">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$actual_profit, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">as profit for <span style="font-weight:bolder;color:#000">
                                                                        the period
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-success-400 rounded overflow-hidden position-relative text-white mb-g" >
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$tithe, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">as tithe for <span style="font-weight:bolder;color:#000">
                                                                        the period
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-3 col-xl-4">
                                                            <div class="p-3 bg-info-400 rounded overflow-hidden position-relative text-white mb-g" style="background-color:#FE6BB0 !important;">
                                                                <div class="">
                                                                    <h4 class="display-4 d-block l-h-n m-0 fw-500">
                                                                    ₵<?php echo number_format((float)$income_to_spend, 2, '.', ''); ?>
                                                                        <small class="m-0 l-h-n">as remaining balance for <span style="font-weight:bolder;color:#000">
                                                                        the period
                                                                        </small>
                                                                    </h4>
                                                                </div>
                                                                <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                        <?php endif ?>
                                        </div>
                        
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div id="panel-1" class="panel">
                                <div class="panel-hdr">
                                    <h2>
                                        Marketing profits
                                    </h2>
                                </div>
                                <div class="panel-container show">
                                    <div class="panel-content bg-subtlelight-fade">
                                        <div id="barlineCombine">
                                            <canvas style="width:100%; height:300px;"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
                    <!-- END Page Content -->
                    <!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<!-- BEGIN Page Footer -->
<?php include 'inc/footer_inc.php' ?>
                </div>
            </div>
        </div>
        <p id="js-color-profile" class="d-none">
    <span class="color-primary-50"></span>
    <span class="color-primary-100"></span>
    <span class="color-primary-200"></span>
    <span class="color-primary-300"></span>
    <span class="color-primary-400"></span>
    <span class="color-primary-500"></span>
    <span class="color-primary-600"></span>
    <span class="color-primary-700"></span>
    <span class="color-primary-800"></span>
    <span class="color-primary-900"></span>
    <span class="color-info-50"></span>
    <span class="color-info-100"></span>
    <span class="color-info-200"></span>
    <span class="color-info-300"></span>
    <span class="color-info-400"></span>
    <span class="color-info-500"></span>
    <span class="color-info-600"></span>
    <span class="color-info-700"></span>
    <span class="color-info-800"></span>
    <span class="color-info-900"></span>
    <span class="color-danger-50"></span>
    <span class="color-danger-100"></span>
    <span class="color-danger-200"></span>
    <span class="color-danger-300"></span>
    <span class="color-danger-400"></span>
    <span class="color-danger-500"></span>
    <span class="color-danger-600"></span>
    <span class="color-danger-700"></span>
    <span class="color-danger-800"></span>
    <span class="color-danger-900"></span>
    <span class="color-warning-50"></span>
    <span class="color-warning-100"></span>
    <span class="color-warning-200"></span>
    <span class="color-warning-300"></span>
    <span class="color-warning-400"></span>
    <span class="color-warning-500"></span>
    <span class="color-warning-600"></span>
    <span class="color-warning-700"></span>
    <span class="color-warning-800"></span>
    <span class="color-warning-900"></span>
    <span class="color-success-50"></span>
    <span class="color-success-100"></span>
    <span class="color-success-200"></span>
    <span class="color-success-300"></span>
    <span class="color-success-400"></span>
    <span class="color-success-500"></span>
    <span class="color-success-600"></span>
    <span class="color-success-700"></span>
    <span class="color-success-800"></span>
    <span class="color-success-900"></span>
    <span class="color-fusion-50"></span>
    <span class="color-fusion-100"></span>
    <span class="color-fusion-200"></span>
    <span class="color-fusion-300"></span>
    <span class="color-fusion-400"></span>
    <span class="color-fusion-500"></span>
    <span class="color-fusion-600"></span>
    <span class="color-fusion-700"></span>
    <span class="color-fusion-800"></span>
    <span class="color-fusion-900"></span>
</p>        
<?php include 'inc/script_inc.php' ?>
<script src="assets/js/datagrid/datatables/datatables.bundle.js"></script>
<script src="assets/js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<!-- Select2 -->
<script src="assets/js/formplugins/select2/select2.bundle.js"></script>
<script src="assets/js/statistics/peity/peity.bundle.js"></script>
<script src="assets/js/statistics/flot/flot.bundle.js"></script>
<script src="assets/js/statistics/chartjs/chartjs.bundle.js"></script>
<script src="assets/js/statistics/easypiechart/easypiechart.bundle.js"></script>

<script type="text/javascript">
    
	var controls = {
		leftArrow: '<i class="fal fa-angle-left" style="font-size: 1.25rem"></i>',
		rightArrow: '<i class="fal fa-angle-right" style="font-size: 1.25rem"></i>'
	}

    /* bar & line combine */
    var barlineCombine = function()
            {
                var barlineCombineData = {
                    labels: ["January", "February", "March", "April", "May", "June", "July","August","September","October","November","December"],
                    datasets: [
                    {
                        type: 'line',
                        label: 'Expected Profit',
                        borderColor: '#37E2D0',
                        pointBackgroundColor:'#CC276B',
                        pointBorderColor:'#FFF',
                        pointBorderWidth: 1,
                        borderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 5,
                        fill: false,
                        data: [<?php echo $chartjs_target_profit ?>]
                    },
                    {
                        type: 'bar',
                        label: 'Profit',
                        backgroundColor: '#FFD274',
                        borderColor: '#FFD274',
                        data: [<?php echo $chartjs_actual_profit ?>],
                        borderWidth: 1
                    },
                    {
                        type: 'bar',
                        label: 'Tithe',
                        backgroundColor: '#18A839',
                        borderColor: '#18A839',
                        data: [<?php echo $chartjs_tithe ?>],
                        borderWidth: 1
                    }]

                };
                var config = {
                    type: 'bar',
                    data: barlineCombineData,
                    options:
                    {
                        responsive: true,
                        legend:
                        {
                            position: 'top',
                        },
                        title:
                        {
                            display: true,
                            text: 'Chart.js Bar Chart'
                        },
                        scales:
                        {
                            xAxes: [
                            {
                                display: true,
                                scaleLabel:
                                {
                                    display: false,
                                    labelString: '6 months forecast'
                                },
                                gridLines:
                                {
                                    display: true,
                                    color: "#f2f2f2"
                                },
                                ticks:
                                {
                                    beginAtZero: true,
                                    fontSize: 11
                                }
                            }],
                            yAxes: [
                            {
                                display: true,
                                scaleLabel:
                                {
                                    display: false,
                                    labelString: 'Profit margin (approx)'
                                },
                                gridLines:
                                {
                                    display: true,
                                    color: "#f2f2f2"
                                },
                                ticks:
                                {
                                    beginAtZero: true,
                                    fontSize: 11
                                }
                            }]
                        }
                    }
                }
                new Chart($("#barlineCombine > canvas").get(0).getContext("2d"), config);
            }
            /* bar & line combine -- end */

	var runDatePicker = function()
	{
		// range picker
		$('#datepicker-5').datepicker(
		{
			todayHighlight: true,
			clearBtn:true,
			templates: controls
		});
	}
	$.fn.digits = function(){ 
		return this.each(function(){ 
			$(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
		})
	}
	$(document).ready(function(){
		runDatePicker();
        barlineCombine();

		var start = '<?php //echo $start ?>';
		var end = '<?php //echo $end ?>';
		//Event Handler
		$('#search').on('click',function(){
			start = $('#start').val();
			end = $('#end').val();
			window.location.replace("marketing_dashboard.php?summary=&&start="+start+"&&end="+end);
		});
		// $("span.numbers").digits();
	});
</script>
<!-- Modal Large -->
    </body>

</html>
