<style>
    .icon {width:22px;}
    .icon-big {width:64px;}
     .item{text-align: right; font-size: 16px; padding-top:5px;}
    .headings {text-align: center; vertical-align: middle;}
    .next {margin-top:15px;}
    
    @media (max-width: 991px){
        .icon {width:22px;}
        .item{text-align: left;}
    }

</style>
<div class="wrapper">
    <div class="container">
        
        
        <div class="row">            
            <div class="col-sm-8">
                <div class="project-sort pull-right">
                    <div class="project-sort-item">
                        <form class="form-inline" action="<?php echo base_url();?>feedbackdash" method="Post">
                            <div class="form-group">
                                <label>Month : <?php echo $month;?></label>
                                <select id="selectmonth" name="selectmonth" class="form-control">
                                    <option value="1" <?php if ($month === '01') {
                                    echo "selected";
                                } ?> >January</option>
                                    <option value="2" <?php if ($month === '02') {
                                    echo "selected";
                                } ?>>February</option>
                                    <option value="3" <?php if ($month === '03') {
                                    echo "selected";
                                } ?>>March</option>
                                    <option value="4" <?php if ($month === '04') {
                                    echo "selected";
                                } ?>>April</option>
                                    <option value="5" <?php if ($month === '05') {
                                    echo "selected";
                                } ?>>May</option>
                                    <option value="6" <?php if ($month === '06') {
                                    echo "selected";
                                } ?>>June</option>
                                    <option value="7" <?php if ($month === '07') {
                                    echo "selected";
                                } ?>>July</option>
                                    <option value="8" <?php if ($month === '08') {
                                    echo "selected";
                                } ?>>August</option>
                                    <option value="9" <?php if ($month === '09') {
                                    echo "selected";
                                } ?>>September</option>
                                    <option value="10" <?php if ($month === '10') {
                                    echo "selected";
                                } ?>>October</option>
                                    <option value="11" <?php if ($month === '11') {
                                    echo "selected";
                                } ?>>November</option>
                                    <option value="12" <?php if ($month === '12') {
                                    echo "selected";
                                } ?>>December</option>
                                </select>
                                    
                            </div>
                            
                            <div class="form-group">
                                <label>Year : </label>
                                 <?php $now = new \DateTime('now');  $cyear = $now->format('Y');$yearstart=$cyear-3;?>
                                    <select id="selectyear" name="selectyear" class="form-control">
                                        <?php for($x=$yearstart;$x<=$cyear;$x++){ ?>
                                        <option value="<?php echo $x;?>" <?php if($x==$year){echo "selected";} ?> ><?php echo $x;?></option>
                                        <?php } ?>
                                    </select>
                            </div>
                            <div class="form-group">
                                <button type="submit"  id="btngetfresh" class="btn btn-sm btn-pink">Go</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- end col-->
            
        </div>
        <?php if(sizeof($salon_stats)>0){?>
        <h2>Salon Ratings:</h2>
        <div class="row">
              <div class="col-lg-12">
                <div class="card-box">
                   
                    <div class="row">
                        <div class="col-md-12">
                            
                        <h4>Total Feedbacks: <?php echo $salon_stats[0]['Total Feedbacks'];?></h4>
                        <hr>
                        <div class="col-md-6">
                            <h4 style="font-weight:bold;"> What customer's say about our <span class="text-pink"> "Quality of Service"</span> :  </h4>
                            <hr>
                        </div>   
                        <div class="col-md-6">
                            <h4 style="font-weight: bold;"> 
                                <span style="text-size:14px;"> <?php echo $salon_stats[0]['qos'];?> </span>
                                 <?php if($salon_stats[0]['qos']>=0 && $salon_stats[0]['qos']<1){?>
                                <span class="text-danger"> Pathetic</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                <?php }else if($salon_stats[0]['qos']>=1 && $salon_stats[0]['qos']<2){?>
                                <span class="text-danger">   Poor</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                <?php }else if($salon_stats[0]['qos']>=2 && $salon_stats[0]['qos']<3){?>
                                <span class="text-warning"> Average</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                <?php }else if($salon_stats[0]['qos']>=3 && $salon_stats[0]['qos']<4){?>
                                <span class="text-success">  Good</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                <?php }else if($salon_stats[0]['qos']>=4 && $salon_stats[0]['qos']<=5){?>
                                <span class="text-pink"> Excellent</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                <?php } ?>
                            </h4>
                            <hr>
                        </div>
                        
                        <div class="col-md-6">
                            <h4 style="font-weight: bold;"> How our <span class="text-pink"> "Atmosphere"</span> effected the customers :</h4>
                            <hr>
                        </div>
                        
                        <div class="col-md-6"> 
                            <h4 style="font-weight: bold;"> 
                                <span style="text-size:14px;"> <?php echo $salon_stats[0]['atmosphere'];?> </span>
                                <?php if($salon_stats[0]['atmosphere']>=0 && $salon_stats[0]['atmosphere']<1){?>
                               <span class="text-danger"> Pathetic</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                               <?php }else if($salon_stats[0]['atmosphere']>=1 && $salon_stats[0]['atmosphere']<2){?>
                               <span class="text-danger">   Poor</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                               <?php }else if($salon_stats[0]['atmosphere']>=2 && $salon_stats[0]['atmosphere']<3){?>
                               <span class="text-warning"> Average</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                               <?php }else if($salon_stats[0]['atmosphere']>=3 && $salon_stats[0]['atmosphere']<4){?>
                               <span class="text-success">  Good</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                               <?php }else if($salon_stats[0]['atmosphere']>=4 && $salon_stats[0]['atmosphere']<=5){?>
                               <span class="text-pink"> Excellent</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                               <?php } ?>
                            </h4>                        
                            <hr>
                        </div>
                        <div class="col-md-6"> 
                            <h4 style="font-weight: bold;"> What customers say about their over all <span class="text-pink"> "Experience"</span> :</h4>
                                <hr>
                         </div>
                        <div class="col-md-6">
                            <h4 style="font-weight: bold;"> 
                                <span style="text-size:14px;"> <?php echo $salon_stats[0]['experience'];?> </span>
                                <?php if($salon_stats[0]['experience']>=0 && $salon_stats[0]['experience']<1){?>
                                   <span class="text-danger"> Pathetic</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                   <?php }else if($salon_stats[0]['experience']>=1 && $salon_stats[0]['experience']<2){?>
                                   <span class="text-danger">   Poor</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                   <?php }else if($salon_stats[0]['experience']>=2 && $salon_stats[0]['experience']<3){?>
                                   <span class="text-warning"> Average</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                   <?php }else if($salon_stats[0]['experience']>=3 && $salon_stats[0]['experience']<4){?>
                                   <span class="text-success">  Good</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                   <?php }else if($salon_stats[0]['experience']>=4 && $salon_stats[0]['experience']<=5){?>
                                   <span class="text-pink"> Excellent</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                   <?php } ?>
                            </h4>                        
                            <hr>
                        </div>
                        <div class="col-md-6"> 
                            <h4 style="font-weight: bold;"> How customers rate us on <span class="text-pink"> "Value for Money"</span> : </h4>
                            <hr>
                        </div>
                        <div class="col-md-6">
                            <h4 style="font-weight: bold;"> 
                                <span style="text-size:14px;"> <?php echo $salon_stats[0]['valueformoney'];?> </span>
                                     <?php if($salon_stats[0]['valueformoney']>=0 && $salon_stats[0]['valueformoney']<1){?>
                                    <span class="text-danger"> Pathetic</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                    <?php }else if($salon_stats[0]['valueformoney']>=1 && $salon_stats[0]['valueformoney']<2){?>
                                    <span class="text-danger">   Poor</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                    <?php }else if($salon_stats[0]['valueformoney']>=2 && $salon_stats[0]['valueformoney']<3){?>
                                    <span class="text-warning"> Average</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                    <?php }else if($salon_stats[0]['valueformoney']>=3 && $salon_stats[0]['valueformoney']<4){?>
                                    <span class="text-success">  Good</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                    <?php }else if($salon_stats[0]['valueformoney']>=4 && $salon_stats[0]['valueformoney']<=5){?>
                                    <span class="text-pink"> Excellent</span> <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                    <?php } ?>
                            </h4>                        
                            <hr>
                        </div>
                        <div class="col-md-6">
                            <h4 style="font-weight: bold;"> Our <span class="text-pink"> "Over All Rating"</span> : <span style="text-size:14px;"> <?php echo $salon_stats[0]['Average'];?> </span></h4>       
                            <p style="font-size:32px;">
                                <?php if($salon_stats[0]['valueformoney']>=0 && $salon_stats[0]['Average']<1){?>
                                <span class="text-danger"> Pathetic</span> <img  class="icon-big icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                <?php }else if($salon_stats[0]['Average']>=1 && $salon_stats[0]['Average']<2){?>
                                <span class="text-danger">   Poor</span> <img  class="icon-big icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                <?php }else if($salon_stats[0]['Average']>=2 && $salon_stats[0]['Average']<3){?>
                                <span class="text-warning"> Average</span> <img  class="icon-big icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                <?php }else if($salon_stats[0]['Average']>=3 && $salon_stats[0]['Average']<4){?>
                                <span class="text-success">  Good</span> <img  class="icon-big icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                <?php }else if($salon_stats[0]['Average']>=4 && $salon_stats[0]['Average']<=5){?>
                                <span class="text-pink"> Excellent</span> <img  class="icon-big icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                <?php } ?>
                            </p>             
                            <hr>
                        </div>
                        <div class="col-md-6"> 
                            <p class="text-default">
                                <form method="post" action="<?php echo base_url();?>feedback_listing">
                                    <input type="hidden" name="selectmonth" value="<?php echo $month;?>">
                                    <input type="hidden" name="selectyear"  value="<?php echo $year;?>">
                                     <button type="submit" class="btn btn-pink" >View Customer Feedbacks for <?php echo date('F', mktime(0, 0, 0, $month, 10)).' - '.$year?></button>
                                </form>
                            </p>
                            
                        </div>
                    </div>
                </div>
            </div><!-- end col -->
        </div>
           
        </div>
        
        <h2>Staff Ratings:</h2>
        <div class="row">
            
            <div class="col-lg-8">
                <div class="card-box">
                    <h4 class="header-title m-t-0 m-b-30">Staff Rating on Feedback</h4>

                    <div class="nicescroll" style="height: 355px; overflow: hidden; outline: none;" tabindex="5000">
                        <div class="table-responsive">
                        <table class="table" id="staffperformance">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Staff</th>
                                <th>Total Feedbacks</th>
                                <th>Skill</th>
                                <th>Knowledge</th>
                                <th>Hospitality</th>
                                <th>Satisfaction</th>
                                <th class="text-pink">Overall Rating</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                                <?php foreach($staff_stats as $ss){?>
                                <tr>
                                    <td><img style="width:35px" src="<?php echo base_url();?>assets/images/staff/<?php echo $ss['staff_image'];?>" class="img-circle" alt="" data-pin-nopin="true"></td>
                                    <td><?php echo $ss['staff'];?></td>
                                    <td><?php echo $ss['Total Services'];?></td>
                                    <td><?php echo $ss['skill'];?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{ echo $ss['knowledge']; }?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{ echo $ss['hospitality'];}?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{ echo $ss['satisfaction'];}?></td>
                                    <?php if($ss['feedback_type'] != 'Short'){?>
                                    <td  class="text-pink"><?php echo $ss['Over All Rating'];?></td>
                                    <?php } else {?>
                                    <td  class="text-pink"><?php echo $ss['skill'];?></td>
                                    <?php } ?>
                                    <td>
                                    <?php if($ss['feedback_type'] != 'Short'){?>
                                        <?php if($ss['Over All Rating']<=1){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                        <?php }else if($ss['Over All Rating']>1 && $ss['Over All Rating']<=1.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                        <?php }else if($ss['Over All Rating']>=2 && $ss['Over All Rating']<2.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                        <?php }else if($ss['Over All Rating']>=3 && $ss['Over All Rating']<=4.4){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                        <?php }else if($ss['Over All Rating']>=4.5 && $ss['Over All Rating']<=5){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                        <?php } ?>
                                    <?php } else { ?>
                                        <?php if($ss['skill']<=1){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                        <?php }else if($ss['skill']>1 && $ss['skill']<=1.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                        <?php }else if($ss['skill']>=2 && $ss['skill']<=2.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                        <?php }else if($ss['skill']>=3 && $ss['skill']<=4.4){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                        <?php }else if($ss['skill']>4.5 && $ss['skill']<=5){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                        <?php } ?>    
                                    <?php } ?>
                                    </td>
                                </tr>

                                <?php } ?>
                            </tbody>
                        </table>
                        </div>
                    </div>

                </div>
            </div><!-- end col -->
             <div class='col-md-4'>
                <div class='card-box'>
                    <h4 class="header-title m-t-0 m-b-30">Comments this month</h4>
                    <div class="nicescroll" style="height: 355px; overflow: hidden; outline: none;" tabindex="5000">
                        <table class='table '>
                            <thead>
                                <tr>
                                    <th>Customer</th>
                                    <th>Comment</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($comments as $c){?>
                                <tr>
                                    
                                    <td><?php echo $c['customer_name'];?></td>
                                    <td><?php echo $c['comment'];?></td>
                                   
                                </tr>
                                 <?php } ?>
                            </tbody>
                        </table>
                        
                        
                    </div>
                </div>
            </div>
            
            
        </div>
        
        
        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <div id="container">

                    </div>
                </div>
            </div>
        </div>
        
        
        <h2>Services Ratings:</h2>
        <div class="row">
              <div class="col-lg-12">
                <div class="card-box">
                    <h4 class="header-title m-t-0 m-b-30">Categorized Services Feedback</h4>

                    <div class="nicescroll" style="height: 355px; overflow: hidden; outline: none;" tabindex="5000">
                        <div class="table-responsive">
                        <table class="table" id="categorytable">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Category</th>
                                <th>Total Services</th>
                                <th>Skill</th>
                                <th>Knowledge</th>
                                <th>Hospitality</th>
                                <th>Satisfaction</th>
                                <th class="text-pink">Overall Rating</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                                <?php foreach($category_stats as $ss){?>
                                <tr>
                                    <td><img style="width:35px" src="<?php echo base_url();?>assets/images/category/<?php echo $ss['service_category_image'];?>" class="img-circle" alt="" data-pin-nopin="true"></td>
                                    <td><?php echo $ss['service_category'];?></td>
                                    <td><?php echo $ss['Total Services'];?></td>
                                    <td><?php echo $ss['skill'];?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{ echo $ss['knowledge']; }?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{echo $ss['hospitality'];}?></td>
                                    <td><?php if($ss['feedback_type']=='Short'){ echo '';} else{echo $ss['satisfaction'];}?></td>
                                    <td  class="text-pink"><?php if($ss['feedback_type']=='Short'){ echo $ss['skill'];} else{echo $ss['Over All Rating'];}?></td>
                                    <td>
                                    <?php if($ss['feedback_type']!='Short'){?>
                                        <?php if($ss['Over All Rating']<=1){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                        <?php }else if($ss['Over All Rating']>1 && $ss['Over All Rating']<= 1.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                        <?php }else if($ss['Over All Rating']>=2 && $ss['Over All Rating']<=2.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                        <?php }else if($ss['Over All Rating']>=3 && $ss['Over All Rating']<=4.4){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                        <?php }else if($ss['Over All Rating']>=4.5 && $ss['Over All Rating']<=5){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                        <?php } ?>
                                    <?php } else { ?>
                                        <?php if($ss['skill']<=1){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/angry_80x80.png' alt='pathetic' >
                                        <?php }else if($ss['skill']>1 && $ss['skill']<=1.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/sad-80x80.png' alt='poor' >
                                        <?php }else if($ss['skill']>=2 && $ss['skill']<=2.9){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/puzzled80x80.png' alt='average' >
                                        <?php }else if($ss['skill']>=3 && $ss['skill']<=4.4){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/happy-80x80.png' alt='good' >
                                        <?php }else if($ss['skill']>=4.5 && $ss['skill']<=5){?>
                                            <img  class="icon icon-atmosphere" src='<?php echo base_url();?>assets/images/feedback/celebrity-80x80.png' alt='excellent' >
                                        <?php } ?>        
                                            
                                    <?php } ?>
                                    </td>
                                </tr>

                                <?php } ?>
                            </tbody>
                        </table>
                        </div>
                    </div>

                </div>
            </div><!-- end col -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <div id="container1">
                        
                    </div>
                </div>
            </div>
        </div>   
        
        <?php } else {?>
        
        <h2>NO Ratings Available</h2>
        <?php } ?>
        <script>
            
            $(document).ready(function () {
                
                
                makemonthstaffchart();
                makemonthcategorychart();
                
                
                $('#staffperformance').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true, 
                    
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm"}, {extend: "csv", className: "btn-sm"}, {
                            extend: "excel",
                            className: "btn-sm"
                        }, {extend: "pdf", className: "btn-sm"}, {extend: "print", className: "btn-sm"}],
                    responsive: !0
                });
                
                $('#categorytable').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true, 
                    
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm"}, {extend: "csv", className: "btn-sm"}, {
                            extend: "excel",
                            className: "btn-sm"
                        }, {extend: "pdf", className: "btn-sm"}, {extend: "print", className: "btn-sm"}],
                    responsive: !0
                });
            });
            
            function makemonthstaffchart(){
                
                
               var data = <?php echo json_encode($staff_stats);?>;
               var staff=[];
               var skill=[];
               var knowledge=[];
               var hospitality=[];
               var satisfaction=[];
               var feedbacks=[];
               
               if(data.length>0){
                    for(x=0; x<data.length;x++){                        
                       
                       staff.push(data[x]['staff']);                      
                    }
                }
                console.log(staff);
                
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       skill.push(parseFloat(data[x]['skill']));
                    }
                }
                 console.log(skill);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       knowledge.push(parseFloat(data[x]['knowledge']));
                    }
                }
                console.log(knowledge);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       hospitality.push(parseFloat(data[x]['hospitality']));
                    }
                }
                 console.log(hospitality);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       satisfaction.push(parseFloat(data[x]['satisfaction']));
                    }
                }
                 console.log(satisfaction);
                
                
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       feedbacks.push(parseFloat(data[x]['Total Services']));
                    }
                }
                
                
                Highcharts.chart('container', {
                    title: {
                        text: 'Staff Rating on Feed Back'
                    },
                    credits: false,
                    xAxis: {
                        categories: staff
                    },
                    labels: {
                        items: [{
                            html: 'Customer Feedback',
                            style: {
                                left: '50px',
                                top: '18px',
                                color: ( // theme
                                    Highcharts.defaultOptions.title.style &&
                                    Highcharts.defaultOptions.title.style.color
                                ) || 'black'
                            }
                        }]
                    },
                    colors: ['#f9c851', '#ff8acc', '#59a9f8 ', '#4a59b4', '#ff8acc',  '#10c469', '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
                    series: [{
                        type: 'column',
                        name: 'Skill',
                        data: skill
                    }, {
                        type: 'column',
                        name: 'Knowledge',
                        data: knowledge
                    }, {
                        type: 'column',
                        name: 'Hospitality',
                        data: hospitality
                    }, {
                        type: 'column',
                        name: 'Satisfaction',
                        data: satisfaction
                    }, {
                        type: 'spline',
                        name: 'FeedBacks',
                        data: feedbacks,
                        marker: {
                            lineWidth: 2,
                            lineColor: '#4a59b4',
                            fillColor: 'white'
                        }
                    }]
                });
            }
            
            function makemonthcategorychart(){
                
                
               var data = <?php echo json_encode($category_stats);?>;
               var service_category=[];
               var skill=[];
               var knowledge=[];
               var hospitality=[];
               var satisfaction=[];
               var feedbacks=[];
               
               if(data.length>0){
                    for(x=0; x<data.length;x++){                        
                       
                       service_category.push(data[x]['service_category']);                      
                    }
                }
             
                
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       skill.push(parseFloat(data[x]['skill']));
                    }
                }
                 console.log(skill);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       knowledge.push(parseFloat(data[x]['knowledge']));
                    }
                }
                console.log(knowledge);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       hospitality.push(parseFloat(data[x]['hospitality']));
                    }
                }
                 console.log(hospitality);
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       satisfaction.push(parseFloat(data[x]['satisfaction']));
                    }
                }
                 console.log(satisfaction);
                
                
                if(data.length>0){
                    for(x=0; x<data.length;x++){      
                       feedbacks.push(parseFloat(data[x]['Total Services']));
                    }
                }
                
                
                Highcharts.chart('container1', {
                    title: {
                        text: 'Categorized Services Feed Back'
                    },
                    credits: false,
                    xAxis: {
                        categories: service_category
                    },
                    labels: {
                        items: [{
                            html: 'Customer Feedback',
                            style: {
                                left: '50px',
                                top: '18px',
                                color: ( // theme
                                    Highcharts.defaultOptions.title.style &&
                                    Highcharts.defaultOptions.title.style.color
                                ) || 'black'
                            }
                        }]
                    },
                    colors: ['#f9c851', '#ff8acc', '#59a9f8 ', '#4a59b4', '#ff8acc',  '#10c469', '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
                    series: [{
                        type: 'column',
                        name: 'Skill',
                        data: skill
                    }, {
                        type: 'column',
                        name: 'Knowledge',
                        data: knowledge
                    }, {
                        type: 'column',
                        name: 'Hospitality',
                        data: hospitality
                    }, {
                        type: 'column',
                        name: 'Satisfaction',
                        data: satisfaction
                    }, {
                        type: 'spline',
                        name: 'FeedBacks',
                        data: feedbacks,
                        marker: {
                            lineWidth: 2,
                            lineColor: '#4a59b4',
                            fillColor: 'white'
                        }
                    }]
                });
            }
            
        </script>