@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>{{ __('Poll Management') }}

                      <a href="{{ route('addpoll') }}" class="btn btn-xs btn-info pull-right"  id="addDevicesBtn">Create Poll</a>
                   <br/> <br/>


                     <div class="row">


                       <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">Choose Poll</label>
                                 <select class="form-control" type="text" id="fpoll" placeholder="Choose Poll" name="fpoll">
                                        <option value="0">All Polls</option>
                                        <option value="1" selected="selected">Live Polls</option>
                                        <option value="2">Closed Polls</option>
                                        <option value="3">Scheduled Polls</option>
                                        <option value="4">Premium Polls</option>
                                </select>
                        </div>

                        </div>
                      

                   
                         
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <table class="table table-bordered display nowrap" id="polldoatatable">
                              @csrf
                                <thead>
                                <tr>
                                    <th>Poll ID</th>
                                    <th>Poll Title</th>
                                    <th>Category</th>
                                    <th>Poll Owner</th>
                                    <th>Created On</th>
                                  <!--   <th>Created Date</th> -->
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Total Votes</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">


                        <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(0,1);


                              function fill_datatable(filter_users = '',fpoll = '')
                                {
                                     $.fn.dataTable.ext.errMode = 'throw';
                                       var dataTable = $('#polldoatatable').DataTable({
                                        processing: true,
                                        serverSide: true,
                                        responsive: true,
                                        //  "scrollX": true,
                                         "oLanguage": {
                                                  "sEmptyTable": "No Data Available"
                                              },

                                      ajax:{
                                          type: "POST",
                                data:{ filter_users:filter_users,fpoll:fpoll,_token:"{{ csrf_token() }}"},


                                           url: "{{ url('poll-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: 'created_at', name: 'created_at' },
                                        { data: 'start_date', name: 'start_date' },
                                        { data: 'end_date', name: 'end_date' },
                                        { data: 'total_votes', name: 'total_votes' },
                                        { data:'action', name: 'action', orderable: false, searchable: false}
                                     ],


                                });


                              }

                             $('#filter_users').on('change',function(){
                              var filter_users = $('#filter_users').val();
                              var fpoll = $('#fpoll').val();
                             
                              if(filter_users != '')
                              {
                                  $('table#polldoatatable').DataTable().destroy();
                                  fill_datatable(filter_users,fpoll);
                              }

                           });

                                $('#fpoll').on('change',function(){
                              var fpoll = $('#fpoll').val();
                              var filter_users = $('#filter_users').val();
                              if(fpoll != '')
                              {
                                  $('table#polldoatatable').DataTable().destroy();
                                  fill_datatable(filter_users,fpoll);
                              }

                           });


                              
                               $(document).on('click',".confirmation-del", function(){
                                  return confirm('Are you sure you want to delete this Poll?');
                                });


                            });

                              $('div.alert').not('.alert-important').delay(4000).fadeOut(500);       
                           
                        </script>
                    </div>
                </div>

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




@endsection


@section('javascript')

@endsection