@extends('dashboard.base')

@section('content')
<style>textarea {
resize: none;
}
.form-control[readonly] {
    background-color: #FFF;
    opacity: 1;
}

.panel_poll{


  max-width: 100%;
    margin-top: 20px;

}

.vl {
  border-left: 2px solid #d8dbe0;
  height: 500px;
  margin-top: 56px;
}
.custom_div{

  margin-top:47px;
}
select#c_type {
   
    margin-left: 83px;
    width: 56%;

  }
  label.control-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
}

p {
 
    font-size: 16px;
    font-weight: 600;
}
.cond_cls{
  margin-left: 10px;
}


</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>

<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">
                        <h4>Poll Details</h4>
                    </div>
                    <div class="card-body">
                   @foreach (['danger', 'warning', 'success', 'info'] as $key)
                                @if(Session::get($key))
                                    <div class="alert alert-{{ $key }} alert-block">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <strong>{{ Session::get($key) }}</strong>
                                    </div>
                                @endif
                            @endforeach
                           <!--  <div id="msg" style="display:none;"></div> -->
                        <form method="POST" id="myForm" name="myForm" action="" enctype="multipart/form-data">
                            @csrf


                            <div class="form-group row ">

                                 <!--Left part-->
                              <div class="col-sm-5 required">

                                 <a id = "w3s" href="{{env('APP_URL','')}}/poll-management" class="btn btn-primary">Back</a>
                                   
                              <div class="card mb-3 panel_poll">
                                  <div class="card-header"><h5>{{ $final_array[0]['poll_title']}}</h5></div>
                                  <div class="card-body">
                                                                       <p class="card-text">Poll Start Date:  &nbsp {{ $sdatetime }}</p>
                                    <p class="card-text">Poll End Date:  &nbsp {{ $edatetime }}</p>
                                  </div>
                                </div>  

                                <div class="option_head "><h5>{{ $final_array[0]['desc']}}</h5></div>  
                               <br> <div class="row ">

                                                                    

                                
                                    

                                </div>

                               <div class="poll_details ">
                                <div class="poll_details"><br>
                                  <label class="control-label">Poll created on: &nbsp {{ $final_array[0]['created_at']}}</label>

                                </div>
                                <div class="poll_details">
                                  <label class="control-label">Poll Id: &nbsp {{ $final_array[0]['poll_id']}}</label>

                                </div>
                         <!--        <div class="end_date">
                                  <label class="control-label">End Date: &nbsp {{ $final_array[0]['end_date']}}</label>
                                </div>
                                <div class="Deadline">
                                  <label class="control-label">Deadline: &nbsp {{ $final_array[0]['end_date']}}</label>
                                </div> -->
                                <div class="Category">
                                  <label class="control-label">Category: &nbsp {{ $final_array[0]['cat_name']}}</label>
                                </div>
                                <div class="poll_type">
                                  <label class="control-label">Poll type: &nbsp {{ $final_array[0]['poll_type']}}</label>
                                </div>
                                <div class="result_vissible">

                                  <label class="control-label">Result visible: &nbsp {{ $final_array[0]['result_visible'] }}</label>
                                </div>

                              </div>
                                 

                                </div>
                                <div class="col-sm-1 required" style="margin-right:-50px;"> 
                                      <div class="vl"></div>
                              </div>
                              <!--Right part-->
                              <br><br>
                                <div class="col-sm-6 required custom_div"> 
                                                                   @if($final_array[0]['suspend'] == 0 && $final_array[0]['report_poll'] == 1 && $final_array[0]['delete_poll'] != 1)
                                 
                                  <a href="{{url('reporting-delete/'.$final_array[0]['p_id'])}}" id="{{ $final_array[0]['p_id']}}" class="btn btn-primary cond_cls" style="float:right;">Delete Poll</a>
                                  @if($final_array[0]['user_id'] != 1)
                                    <a href="{{url('reporting-unblock/'.$final_array[0]['reported_by'])}}" id="{{ $final_array[0]['reported_by']}}" class="btn btn-primary cond_cls" style="float:right;">Block Poll Owner</a>
                                  @endif 
                                
                                  
                                 @endif 

                                                             {{ csrf_field() }}

                                 <div class="poll_status"><p>Poll Status: &nbsp {{ $final_array[0]['poll_status'] }}</p></div>

                                                                <div class="poll_status"><p>Poll Answered: &nbsp{{  $final_array[0]['total_votes'] }}</p></div>
                                  <br>
                                                                   <div class="chart_type">

                                  <div class="row">
                                    <div class="col-md-6">
                                  <label class="control-label" style="float:left;">Chart Type</label>

                               <select class="form-control filter_chart" type="text" id="c_type" name="c_type">
                                        <option value="1">Pie Chart</option>
                                        <option value="2">Bar Chart</option>
                                        
                                </select>
                              </div>
                               <div class="col-md-5">
                                 <select class="form-control filter_data" type="text"  id="filter" name="filter">
                                        <!-- <option value="">Choose</option> -->
                                        <option value="1">Gender</option>
                                        <option value="2">Religion</option>
                                        <!-- <option value="3">Interest</option> -->
                                        <option value="4">Age</option>
                                        <option value="6">Location</option>
                                        <option value="7">Vote Status</option>
                                      <!--   <option value="7">Occupation</option> -->
                                        
                                </select>
                              </div>
                               <div class="col-md-1">
                                <!-- <button class="btn btn-primary" onclick="poll_filters(this)" type="button">Filter</button> -->
                               </div>
                              </div>

                                 </div><br>
                            




                                                                 <!--  <div class="poll-details-bar-chart barChartdiv" style="display: none;"  >
     <canvas id="barChart" width="400" height="400"></canvas>
     </div>
                            --> 
                             <div id="map_canvas" style="height: 354px; width:713px;display: none;"></div>
  
 <div class="poll-details-pie-chart piechartdiv" >
     </div>
                               <!-- <canvas id="myChart" width="400" height="400" style="display: none;"></canvas> -->
                               
                                 <canvas id="barChart" width="500" height="480" style="display: none;"></canvas>


                                                                     
                                   
                                 

                                </div>
                               
                           
                              </div>

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

@endsection
@section('javascript')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCclCw4xbpW2I0MrQT2YBYdb9AD_F2347E&sensor=false"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


<script>

$(document).ready(function(){
    var val = $('.filter_data').val();
        var chartFilter = $('.filter_chart').val();

   if(val == '6'){
$('.piechartdiv').hide();
$('#barChart').hide();


   } else {
    $('.piechartdiv').show();
   }
  pollresultfilter(val,chartFilter);

});

 var ctx = document.getElementById('barChart').getContext("2d");
        var chart = new Chart(ctx, {
           type: 'bar',
           data: {
              labels: ['Male','Female'],
              datasets:  [{
         label: 'Washing and cleaning',
         data: [0,8],
         backgroundColor: '#22aa99'
      }, {
         label: 'Traffic tickets',
         data: [0,2],
         backgroundColor: '#994499'
      }, {
         label: 'Tolls',
         data: [0,1],
         backgroundColor: '#316395'
      }]
           },
           options: {
              responsive: false,
              legend: {
                 position: 'left' // place legend on the right side of chart
              },
              scales: {
                 xAxes: [{
                    stacked: true,
                     max: 10 // this should be set to make the bars stacked
                 }],
                 yAxes: [{
                    stacked: true,
                     max: 10 // this also..
                 }]
              }
           }
        });
 
    $(document).on('change','.filter_chart',function(){
   
var  filter = $('.filter_data').val();
        var charttype = $(this).val();
      //  alert(val);
        if(charttype == '1'){
          $('.barChartdiv').hide();
          $('.piechartdiv').show();
        //  pollresultfilter(id);
        } else if(charttype == '2'){
        $('.piechartdiv').hide();
          $('#barChart').show();
        }
      pollresultfilter(filter,charttype);
});

   
$(document).on('change','.filter_data',function(){
 // $('#pollDetailsPie').hide();
var val = $(this).val();
var  filter = $('.filter_chart').val();
if(val == '6'){
  $('#map_canvas').show();
   $('.piechartdiv').hide();
          $('.barChartdiv').hide();

           initialize(41.850033,-87.6500523);
       pollresultfilter(val,filter);

} else {
      pollresultfilter(val,filter);
    }
});

var directionsDisplay,
    directionsService,
    map;

function initialize(lat,lng) {
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(lat,lng);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}
//     function initMap() {

//         var minZoomLevel = 5;
//         map = new google.maps.Map(document.getElementById('map'), {
//             zoom: minZoomLevel,
//             center: centerPosition,
//             mapTypeId: google.maps.MapTypeId.ROADMAP //  mapTypeId: 'roadmap' 
//         });
//       map.setOptions({ maxZoom: 15}); //newly added to set zoom level for map set it to 6

//     //  console.log(map);
//         infowindow = new google.maps.InfoWindow({
//             pixelOffset: new google.maps.Size(300, 0),
//         });


    
// }

function pollresultfilter(id,chartType){
 $.ajax({
            type: 'POST',
            url:"{{ route('getpollresultfilter')  }}",
            data: {
                poll_id: "