@extends('dashboard.base')

@section('content')
<style>
canvas{

  width:1000px !important;
  height:450px !important;
}

table#reportdoatatable{

  width:100% !important;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">


                    <div class="card-header">
                    @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                      <strong></strong> {{ session()->get('success') }}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    @endif
                      <i class="fa fa-align-justify"></i>{{ __('Report Management') }}
                      <br><br>
                  


                     <div class="row">

                        <div class="col-md-3">
                        <label class="control-label">From</label>
                                 <input type="date" name="from" id="from" class="form-control">
                        </div>
                         <div class="col-md-3">
                        <label class="control-label">To</label>
                                 <input type="date" name="to" id="to" class="form-control">
                        </div>


                      <div class="col-md-3">
                        <label class="control-label">User Type</label>
                                 <select class="form-control" type="text" id="filter_users" placeholder="User Type" name="filter_users">
                                        <option value="0">All Users</option>
                                        <option value="2">Minipol</option>
                                        <option value="3">Pinipol</option>
                                </select>
                        </div>

                       <div class="col-md-3">
                        <label class="control-label">Category</label>
                                 <select id="category_select" name="category_select" class="form-control ">
        
                                    <option value="">Select Category</option>

                                                   
                                     </select>
                        </div>
                    
                    </div>
                         <br>
               <input type="button" id="search" name="search" value="Search" class="btn btn-primary" style="float:right;">
      
            
            </div>
                    <div class="card-body">
                        <div class="container">
                            <form method="POST" id=""  name="regiration_form" action="{{ route('export_excel.excel') }}" >
                           {{ csrf_field() }}
                                  
                              <input type="hidden" name="filter_users" id="user" value="">
                              <input type="hidden" name="category_select" id="cat" value="">
                              <input type="hidden" name="from_date" id="frommdate" value="">
                              <input type="hidden" name="to_date" id="toodate" value="">
                          <button class="btn btn-success" type="submit" style="float:right;">Download Excel</button><br><br>
                        </form>
                            <table class="table table-bordered display nowrap" id="reportdoatatable">
                              @csrf
                                <thead>
                                <tr>
                                    <th>Poll ID</th>
                                    <th>Poll Title</th>
                                    <th>Category</th>
                                    <th>Poll Owner</th>
                                    <th>Created On</th>
                                   
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Total Votes</th>
                                 
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
                        <link  href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css" rel="stylesheet">


                        <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
                        <script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>

                         <script>
                            $(document).ready( function () {
                                fill_datatable();


                              function fill_datatable(filter_users = '', from_date = '', to_date = '', category_select = '')
                                {


                                     $.fn.dataTable.ext.errMode = 'throw';
                                       var dataTable = $('#reportdoatatable').DataTable({

                                        processing: true,
                                        serverSide: true,
                                        responsive: true,

                                        searching: false, 
                                        //  "scrollX": true,
                                         "oLanguage": {
                                                  "sEmptyTable": "No Data Available"
                                              },

                                      ajax:{
                                          type: "POST",
                                data:{ filter_users:filter_users,from_date:from_date, to_date:to_date, category_select:category_select, _token:"{{ csrf_token() }}"},


                                           url: "{{ url('report-type-list')  }}",
                                  
                                        },
                                    columns: [
                                     
                                        { data: 'poll_id', name: 'poll_id' },
                                        { data: 'poll_title', name: 'poll_title' },
                                        { data: 'cat_name', name: 'cat_name' },
                                        { data: 'owner_name', name: 'owner_name' },
                                        { data: 'poll_type', name: 'poll_type' },
                                    
                                        { data: 'start_date', name: 'start_date' },
                                        { data: 'end_date', name: 'end_date' },
                                        { data: 'total_votes', name: 'total_votes' },
                                    
                                     ],


                                });


                              }



                             $('#search').on('click',function(){
                               var filter_users = $('#filter_users').val();
                                var from_date = $('#from').val();
                                  var to_date = $('#to').val();
                                  var category_select = $('#category_select').val();

                                  $('#user').val(filter_users);
                                  $('#cat').val(category_select);
                                  $('#frommdate').val(from_date);
                                  $('#toodate').val(to_date);
                               
                                if(from_date > to_date){
                                  alert('From date is not greater then To date');
                                  var from_date = $('#from').val('');
                                  var to_date = $('#to').val('');
                                  return false;
                                }

                                if(filter_users != '')
                                {

                                    $('table#reportdoatatable').DataTable().destroy();
                                    fill_datatable(filter_users,from_date, to_date,category_select);
                                    
                                    
                                }
                                

                                 if(from_date != '' &&  to_date != '')
                                  {
                                    
                                    $('table#reportdoatatable').DataTable().destroy();
                                  fill_datatable(filter_users,from_date, to_date,category_select);
                                  }

                                  if(category_select != '')
                                  {
                                    
                                    $('table#reportdoatatable').DataTable().destroy();
                                  fill_datatable(filter_users,from_date, to_date,category_select);
                                  }
                                     $.ajax({
                                      url:"{{ url('graph') }}",
                                      method:"POST",
                                      data:{filter_users:filter_users,from_date:from_date, to_date:to_date, category_select:category_select, _token:"{{ csrf_token() }}"},
                                      success:function(res){
                                       var id = [];
                                       var votes = [];
                                        var json = $.parseJSON(res); 
                                           $(json).each(function(key,value){


                                             id.push(value.poll_id);
                                             votes.push(value.total_votes);
    
                                            });


                                           if(id==''){

                                               $('#myChart3').hide();
                                           }else{
                                             $('#myChart3').show();
                                            barGraph(id,votes);
                                          }

                                       }
                                     });
                                  
                           });


                            });

                                  
                           
                        </script>

                         <canvas id="myChart3" ></canvas>
                        
                    </div>
                </div>

              </div>
            </div>
          </div>
        </div>




@endsection


@section('javascript')
<script>
 $(document).ready(function(){

  var filter_users = $('#filter_users').val();

  var from_date = $('#from').val();
  var to_date = $('#to').val();
  var category_select = $('#category_select').val();
 
 $.ajax({
        url:"{{ url('graph') }}",
        method:"POST",
        data:{filter_users:filter_users,from_date:from_date, to_date:to_date, category_select:category_select, _token:"{{ csrf_token() }}"},
        success:function(res){
        var id = [];
        var votes = [];
        var json = $.parseJSON(res); 
        $(json).each(function(key,value){


        id.push(value.poll_id);
        votes.push(value.total_votes);

        });

            if(id==''){

                 $('#myChart3').hide();
             }else{
               $('#myChart3').show();
              barGraph(id,votes);
            }

        }
    });
  

 });

function barGraph(id_labels,votes){


  
  var MeSeContext = document.getElementById("myChart3").getContext("2d");


  var MeSeData = {
        labels:id_labels,
        datasets: [
            {
                label: "Votes",
                  barPercentage: 0.20,
                  barThickness: 20,
                  maxBarThickness: 20,
                 // minBarLength: ,
                  backgroundColor:'#119966',
                   data:votes,
                // backgroundColor: ["#669911", "#119966" ],
                // hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
            }]
    };

   var MeSeChart = new Chart(MeSeContext, {
    type: 'horizontalBar',

    data: MeSeData,
    options: {

      events:[],
           hover: {
               animationDuration: 0
             },
             animation: {
               onComplete: function() {
                 const chartInstance = this.chart,
                   ctx = chartInstance.ctx;

                 ctx.font = Chart.helpers.fontString(
                   18,
                   Chart.defaults.global.defaultFontStyle,
                 //  Chart.defaults.global.defaultFontFamily
                 );
                 //ctx.textAlign = "center";
                 //ctx.textBaseline = "bottom";

                 this.data.datasets.forEach(function(dataset, i) {
                   const meta = chartInstance.controller.getDatasetMeta(i);
                   meta.data.forEach(function(bar, index) {
                 
                     const data = dataset.data[index];
                    console.log(bar._model.y);
                     ctx.fillStyle = "black";
                     ctx.fillText(data, bar._model.x,bar._model.y);

                   });
                 });
               }
             },  

        scales: {
            xAxes: [{
               
                    ticks: {
                   // min:0,
                     beginAtZero: true,
                      // stepSize:10,
                  //  maxTicksLimit:4,
          callback: function(value) {if (value % 1 === 0) {return value;}}
          },

             scaleLabel: {
                display: true,
                labelString: 'No of votes'
              }
            }],
            yAxes: [{
                stacked: true,
                 scaleLabel: {
                display: true,
                labelString: 'Polls'
              }

            }]
        }
    }


});

}
</script>


<script type = "text/javascript">



     $("#filter_users").on('change',function(){
  var val = $(this).val();

    if(val =='0'){

 
    $.ajax({
     type: "POST",
     url: "{{ url('cat_ajax')  }}",
     data:{name:val,"_token": "{{ csrf_token() }}",},
     async: true,
       success: function(response){

             var category = "<option value=''>All Category</option>";
          $(response).each(function(key,value){
    
                category += "<option value='"+value.id+"'>"+value.cat_name+"</option>";

          });
          $('#category_select').html(category);
       }
    });

  }else{

   $.ajax({
     type: "POST",
     url: "{{ url('cat_ajax')  }}",
     data:{name:val,"_token": "{{ csrf_token() }}",},
     async: true,
       success: function(response){

              var category = "<option value=''>All Category</option>";
          $(response).each(function(key,value){
    
                category += "<option value='"+value.id+"'>"+value.cat_name+"</option>";

          });
          $('#category_select').html(category);
       }
    });





  }
});
$(document).ready(function() {
  
    $('#category_select').select2();
 
   
});

$(document).ready(function() {
    $.ajax({
     type: "POST",
     url: "{{ url('cat_ajax')  }}",
     data:{name:'0',"_token": "{{ csrf_token() }}",},
     async: true,
       success: function(response){

             var category = "<option value=''>All Category</option>";
          $(response).each(function(key,value){

            category += "<option value='"+value.id+"'>"+value.cat_name+"</option>";

          });
          $('#category_select').html(category);
       }
    });

  
  });
</script>

@endsection