<?php
session_start();
if(!isset($_SESSION['user'])) {
	header("location: ../index.php");
	exit;
}

include("../header.php");

?>
	
				<div class="row">
					<div class="col-lg-12">
						<div class="row">
		                    <div class="col-sm-6 col-lg-3">
		                        <div class="card text-white bg-primary">
		                            <div class="card-body pb-0">
		                                <h4 class="mb-0 overall-rating"></h4>
		                                <p class="tiles-header">Overall Experience</p>
		                            </div>
		                            <div class="chart-wrapper px-3 overall-rating-star" style="height:70px;">
		                                <!-- <canvas id="card-chart1" class="chart" height="70"></canvas> -->
		                            </div>
		                        </div>
		                    </div>
		                    <!--/.col-->

		                    <div class="col-sm-6 col-lg-3">
		                        <div class="card text-white bg-info">
		                            <div class="card-body pb-0">
		                                <h4 class="mb-0 fb-sent"></h4>
		                                <p class="tiles-header">Feedback Sent</p>
		                            </div>
		                            <div class="chart-wrapper px-3" style="height:70px;">
		                                <canvas id="card-chart2" class="chart" height="70"></canvas>
		                            </div>
		                        </div>
		                    </div>
		                    <!--/.col-->

		                    <div class="col-sm-6 col-lg-3">
		                        <div class="card text-white bg-warning">
		                            <div class="card-body pb-0">
		                                <div class="row">
    										<div class="col-lg-6">
				                                <h4 class="mb-0 fb-done"></h4>
				                                <p class="tiles-header">Delivery FB</p>
				                            </div>
                                            <div class="col-lg-6">
                                                <h4 class="mb-0 fb-dine-done"></h4>
                                                <p class="tiles-header">DineIn FB</p>
                                            </div>
				                            <!-- <div class="col-lg-6">
				                                <h4 class="mb-0 fb-notint"></h4>
				                                <p class="tiles-header">Not Int</p>
				                            </div> -->
				                        </div>
		                            </div>
		                            <div class="chart-wrapper" style="height:70px;">
		                                <canvas id="card-chart3" class="chart" height="70"></canvas>
		                            </div>
		                        </div>
		                    </div>
		                    <!--/.col-->

		                    <div class="col-sm-6 col-lg-3">
		                        <div class="card text-white bg-danger">
		                            <div class="card-body pb-0">
		                                <h4 class="mb-0 fb-done-per"></h4>
		                                <p class="tiles-header">Received Percent</p>
		                            </div>
		                            <div class="chart-wrapper px-3" style="height:70px;">
		                                <canvas id="card-chart4" class="chart" height="70"></canvas>
		                            </div>
		                        </div>
		                    </div>
		                    <!--/.col-->
		                </div>
	                </div>
                </div>
				

				<div class="row">
					<div class="col-lg-12">
						<form>
							<div class="row">
								<div class="col-lg-6 col-sm-6 col-md-6">
									<div class="row">
										<div class="col-lg-3 col-sm-3 col-md-3">
											<div class="form-group">
												<label for="">City</label>
												<select id="city" name="" class="form-control" onchange="selectOutlet( document.getElementById('city').value )">
                                                    <?php
                                                    $arrUnitId = array();
                                                    $qry = mysql_query("SELECT `UnitId` FROM `user_outlet_access` WHERE `LoginName` = '$_SESSION[user]' and `UserLevel` = '$_SESSION[level]'");
                                                    while ($row = mysql_fetch_assoc($qry)) {
                                                        $arrUnitId[] = $row['UnitId'];
                                                    }
                                                    $act_unitid = implode(',', $arrUnitId);
                                                    $ct_qry = mysql_query("SELECT DISTINCT(`city_name`), `city` FROM `feedback_response` WHERE `outlet_id` IN ($act_unitid) AND `city_name` != '' GROUP BY `city`");
                                                    echo '<option value="all">All</option>';
                                                    while ($ct_row = mysql_fetch_array($ct_qry)) {
                                                        ?>
                                                        <option value="<?php echo $ct_row['city']; ?>"><?php echo $ct_row['city_name']; ?></option>
                                                        <?php
                                                    }
                                                    ?>
                                                </select>
                                                <span class="text-danger city-error"></span>
											</div>
										</div>
										
										<div class="col-lg-3 col-sm-3 col-md-3">
											<div class="form-group">
												<label for="">Outlet</label>
												<select id="outlet" name="" class="form-control">
                                                    <option value="all">All</option>
												</select>
                                                <span class="text-danger outlet-error"></span>
											</div>
										</div>
										
										<div class="col-lg-3 col-sm-3 col-md-3">
											<div class="form-group">
												<label for="">Order Type</label>
												<select id="ordertype" name="" class="form-control">
                                                    <option value="all">All</option>
                                                    <?php
                                                    $ot_qry = mysql_query("SELECT DISTINCT(`order_type`) FROM `feedback_response` WHERE `order_type` != ''");
                                                    while ($ot_row = mysql_fetch_array($ot_qry)) {
                                                        ?>
                                                        <option value="<?php echo $ot_row['order_type']; ?>"><?php echo $ot_row['order_type']; ?></option>
                                                        <?php
                                                    }
                                                    ?>
                                                </select>
											</div>
										</div>

										<div class="col-lg-3 col-sm-3 col-md-3">
											<div class="form-group">
												<label for="">Order Source</label>
												<select id="ordersrc" name="" class="form-control">
                                                    <option value="all">All</option>
                                                    <?php
                                                    $os_qry = mysql_query("SELECT DISTINCT(`order_source_name`) FROM `feedback_response` WHERE `order_source_name` != ''");
                                                    while ($os_row = mysql_fetch_array($os_qry)) {
                                                        ?>
                                                        <option value="<?php echo $os_row['order_source_name']; ?>"><?php echo $os_row['order_source_name']; ?></option>
                                                        <?php
                                                    }
                                                    ?>
                                                </select>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-lg-6 col-sm-6 col-md-6">
									<div class="row">
                                        <div class="col-lg-6 col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <label for="">Date Range</label>
                                                <input type="text" class="form-control textbox" id="fdbdatepick">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <button type="button" name="submit-btn" class="btn btn-outline-primary txtbtn-submit" onclick="customDateData('dd',document.getElementById('city').value,document.getElementById('outlet').value,document.getElementById('ordertype').value,document.getElementById('ordersrc').value,document.getElementById('fdbdatepick').value )">Submit</button>
                                            </div>
                                        </div>
                                    </div>
								</div>
							
							</div>
						</form>
					</div>
				</div>

				<div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-5">
                                <h4 class="card-title mb-0">Overall Experience</h4>
                                <div class="small text-muted mnth-yr"></div>
                            </div>
                            <div class="col-sm-7 hidden-sm-down">
                                <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
                                    <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
                                        <div class="col-lg-3 col-sm-3 col-md-3">
                                            <div class="form-group">
                                                <button type="button" name="crnt-month" class="btn btn-outline-primary textbtn" id="crnt-month" onclick="crntMonthData('cm')">This Month</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-sm-3 col-md-3">
                                            <div class="form-group">
                                                <button type="button" name="last-mnth" class="btn btn-outline-primary textbtn" id="last-mnth" onclick="crntMonthData('lm')">Last Month</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-sm-3 col-md-3">
                                            <div class="form-group">
                                                <button type="button" name="Current-yr" class="btn btn-outline-primary textbtn" id="crnt-yr" onclick="crntMonthData('cy')">12 Months</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-sm-3 col-md-3">
                                            <div class="form-group">
                                                <button type="button" name="fn-year" class="btn btn-outline-primary textbtn1" id="fn-year" onclick="crntMonthData('fy')">This FY</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/.col-->
                        </div>
                        <!--/.row-->
                        <div class="chart-wrapper" style="height:300px;margin-top:40px;">
                            <canvas id="main-chart" class="chart" height="300"></canvas>
                        </div>
                    </div>
                </div>
		
				<div class="row" id="dynamic-ques-data">

                </div>
	
<?php include("../footer.php"); ?>

<script type="text/javascript">
$(document).ready(function(){
	var addButton = $('.add_button'); //Add button selector
	var wrapper = $('.field_wrapper'); //Input field wrapper
	var fieldHTML = '<div class="col-lg-4 remove-div"><div class="input-group"><input type="text" id="input-small" name="alert-emails[]" class="form-control" /><span class="input-group-btn remove_button"><button type="button" class="btn btn-custom"><i class="fa fa-times" aria-hidden="true"></button></span></div></div>'; //New input field html 
	$(addButton).click(function(){ //Once add button is clicked
		$(wrapper).append(fieldHTML); // Add field html
	});
	$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
		e.preventDefault();
		$(this).parents('.col-lg-4.remove-div').remove(); //Remove field html
	});
});
</script>

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script>
$('#fdbdatepick').daterangepicker(
	{
	    locale: {
	      format: 'DD/MM/Y'
	    },
        showDropdowns: true,
        maxDate: new Date()
	}
);


$(document).ready(function(){
    $.ajax({
        url:'fb_crnt_mnth_data.php?act=crmonth',
        success : function(data){
            console.log(data);
            var data1 = JSON.parse(data);
            
            var my = data1.mtyr;
            var total = data1.overall;
            var overallstar = data1.overallstar;
            var fbsent = data1.fbsent;
            var sentData = data1.sentData;
            var sentDate = data1.sentDate;
            var fbdone = data1.fbdone;
            var recData = data1.recData;
            var recDate = data1.recDate;

            var dine_fbdone = data1.dine_fbdone;
            var dine_recData = data1.dine_recData;
            var dine_recDate = data1.dine_recDate;

            var notInt = data1.notinterest;
            var fbdoneper = data1.fbdoneper;
            var percentData = data1.percentData;
            var percentDate = data1.percentDate;
            var dyquesdata = data1.dyquesdata;
            $(".mnth-yr").html(my);
            $(".overall-rating").html(total);
            $(".overall-rating-star").html(overallstar);
            $(".fb-sent").html(fbsent);
            $(".fb-done").html(fbdone);
            $(".fb-dine-done").html(dine_fbdone);
            $(".fb-notint").html(notInt);
            $(".fb-done-per").html(fbdoneper);
            $("#dynamic-ques-data").html(dyquesdata);
            
            // Graph for Overall Experience
            var chartdata = {
                labels: data1.date,
                
                datasets: [
                    {
                        label: "Customer Rating",
                        fill: true,
                        lineTension: 0.1,
                        backgroundColor: [
                            'rgba(181, 207, 83, 0.4)'
                            /*'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'*/
                        ],
                        borderColor: [
                            'rgba(111, 126, 54, 1)'
                            /*'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'*/
                        ],
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        borderWidth: 1,
                        data: data1.fbvalue
                    }
                ]
            };
            
            var ctx = $("#main-chart");

            var chart = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                options: {
                    title : {
                        display : false,
                        position : "top",
                        text : "",
                        fontSize : 18,
                        fontColor : "#111"
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            },
                            scaleLabel: {
                                 display: false,
                                 labelString: '',
                                 fontSize: 14 
                              }
                        }]
                    }
                }
            });


            // Graph for Feedback Sent
			var chartdata2 = {
			    labels: data1.sentDate,
			    datasets: [
			      	{
				        label: 'feedback sent',
				        backgroundColor: $.brandInfo,
				        borderColor: 'rgba(255,255,255,.55)',
				        data: data1.sentData
			      	},
			    ]
			};
			var options2 = {
			    maintainAspectRatio: false,
			    legend: {
			      	display: false
			    },
			    scales: {
			      	xAxes: [{
				        gridLines: {
				          	color: 'transparent',
				          	zeroLineColor: 'transparent'
				        },
				        ticks: {
				          	fontSize: 2,
				          	fontColor: 'transparent',
				        }

			     	}],
			      	yAxes: [{
				        display: false,
				        ticks: {
				          	display: false,
				          	/*min: Math.min.apply(Math, data.datasets[0].data) - 5,
				          	max: Math.max.apply(Math, data.datasets[0].data) + 5,*/
				        }
			      	}],
			    },
			    elements: {
			      	line: {
				        tension: 0.00001,
				        borderWidth: 1
			      	},
				    point: {
				        radius: 4,
				        hitRadius: 10,
				        hoverRadius: 4,
			      	},
			    }
			};
			var ctx = $('#card-chart2');
			var cardChart2 = new Chart(ctx, {
			    type: 'line',
			    data: chartdata2,
			    options: options2
			});


			// Graph for Feedback Received
			var options3 = {
			    maintainAspectRatio: false,
			    legend: {
			      	display: false
			    },
			    scales: {
			      	xAxes: [{
			        	display: false
			      	}],
			      	yAxes: [{
			        	display: false
			      	}],
			    },
			    elements: {
			      	line: {
			        	borderWidth: 2
			      	},
			      	point: {
				        radius: 0,
				        hitRadius: 10,
				        hoverRadius: 4,
			      	},
			    }
			};
			var chartdata3 = {
			    labels: data1.recDate,
			    datasets: [
			      	{
				        label: 'Feedback Receive',
				        backgroundColor: 'rgba(255,255,255,.2)',
				        borderColor: 'rgba(255,255,255,.55)',
				        data: data1.recData
			      	},
			    ]
			};
			var ctx = $('#card-chart3');
			var cardChart3 = new Chart(ctx, {
			    type: 'line',
			    data: chartdata3,
			    options: options3
			});


			// Graph for Feedback Received Percentage
			var options4 = {
			    maintainAspectRatio: false,
			    legend: {
			      	display: false
			    },
			    scales: {
			      	xAxes: [{
				        display: false,
				        barPercentage: 0.6,
			      	}],
			      	yAxes: [{
			        	display: false,
			      	}]
			    },

			};
			var chartdata4 = {
			    labels: data1.percentDate,
			    datasets: [
			      	{
				        backgroundColor: 'rgba(255,255,255,.3)',
				        borderColor: 'transparent',
				        data: data1.percentData
			      	},
			    ]
			};
			var ctx = $('#card-chart4');
			var cardChart4 = new Chart(ctx, {
			    type: 'bar',
			    data: chartdata4,
			    options: options4
			});
        }
    });
});
</script>