@extends('dashboard.base')

@section('content')
<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>


        <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>{{ __('Reporting') }}
                      
                    <!-- <a href="/add-plan" class="btn btn-xs btn-info pull-right"  id="addDevicesBtn">Create Plan</a>
                     --><br/> <br/>  
                    <div class="row">
                      <div class="col-md-4">
                        <select class="form-control" type="text" id="filter_user" placeholder="select user" name="filter_user">
                          <option value="0">All Polls</option>
                          <option value="2">Minipol Polls</option>
                          <option value="3">Pinipol Polls</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="container">
                      <table class="table table-bordered display " id="userdoatatable">
                        @csrf
                        <thead>
                          <tr>
                             <th>Poll<br> ID</th>
                              <th>Poll Title</th>
                              <th>Category</th>
                              <th>Poll Owner</th>
                              <th>Created <br>On</th>
                              <th>Start Date</th>
                              <th>End Date</th>
                              <th>Total<br> Votes</th>
                              <th>Reported By</th>
                              <th>Action</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">
                    <style> 
                      #userdoatatable {
                        width: 100% !important;
                      }
                      .org_action{
                        width:235px !important;
                      }
                    </style>
                    <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 () {
                        $(".alert-success").delay(5000).slideUp(300); // hide success alert messages...
                          fill_datatable();
                          function fill_datatable(filter_user = '')
                          {
                            $.fn.dataTable.ext.errMode = 'throw';
                            var dataTable = $('#userdoatatable').DataTable({
                                              "oLanguage": {
                                                "sEmptyTable": "No Data Available"
                                              },

                                              processing: true,
                                              serverSide: true,
                                              responsive: true,
                                              ajax:{
                                                type: "POST",
                                                url: "{{ url('reporting-list')  }}",
                                                data:{"_token": "{{ csrf_token() }}",filter_user:filter_user}
                                              },
                                              columns: [
                                                { data: 'poll_id', name: 'poll_id' },
                                                { data: 'poll_title', name: 'poll_title' },
                                                { data: 'poll_category', name: 'poll_category' },
                                                { data: 'poll_owner', name: 'poll_owner' },
                                                { data: 'created_on', name: 'created_on' },
                                                { data: 'start_date', name: 'start_date' },
                                                { data: 'end_date',   name: 'end_date' },
                                                { data: 'total_votes',name: 'total_votes' },
                                                { data: 'reported_by',name: 'reported_by' },
                                                { data: 'action', name: 'action', orderable: false, searchable: false}
                                              ],
                                              columnDefs: [
                                                {
                                                  
                                                  targets:1,
                                                  render: function ( data, type, row, meta ) {
                                                    if(type === 'display'){
                                                      data = '<a href="/poll-view/' + row.id + '/report">' + data + '</a>';
                                                    }
                                                    return data;
                                                  }
                                                }
                                              ],

                                });
                              }

                              $('#filter_user').on('change',function(){
                                  var filter_user = $('#filter_user').val();
                                  if(filter_user != '')
                                  {
                                      $('table#userdoatatable').DataTable().destroy();
                                      fill_datatable(filter_user);
                                  }
                                });
                                
                                $(document).on('click',".cil-x-circle", function(){
                                  return confirm('Are you sure you want to delete this Poll?');
                                });

                               $(document).on('click',".cil-media-pause", function(){
                                  return confirm('Are you sure you want to Block Poll Owner?');
                                });
                          });
                          $('div.alert').not('.alert-important').delay(4000).fadeOut(500);

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




@endsection


@section('javascript')

@endsection