@extends('admin::layouts.master')
@section('htmltitle')
Applications
@endsection
@section('external_styles')
<link href="/css/jquery.dataTables.min.css" rel="stylesheet"/>
@endsection
@section('content')
<style>
    table {
        width:100% !important;
    }
</style>
<div class="widget widget-nopad">
    <div class="widget-header"> <i class="icon-list-alt"></i>
        <h3> Assign Role</h3>
    </div>
    <!-- /widget-header -->
    <div class="widget-content">
        <div class="widget big-stats-container" style="overflow:auto;">
            <div class="widget-content">
                {{-- <h6 class="bigstats">Assign Role</h6> --}}
          
                <form id="frm-example" method="POST" action="{{route('update_role')}}">
                  @csrf
                  <input type="hidden" name="application_id" id="application_id" value="">
                <div id="big_stats" class="cf" style="padding: 2%">
                    {{-- <div class="pull-right">
                         <div class="form-group row">
                          <div class="col-md-6">
                             <select class="form-control" name="screener_id" id="screener_id" required>
                             <option disabled selected>Select Screener</option>
                             @foreach ($users as $item)
                                 <option value="{{$item->user_id}}">{{$item->name}}</option>
                             @endforeach
                           </select>
                          </div>
                           <div class="col-md-6">
                              <button class="btn btn-primary btn-sm" type="submit">Assign Screener</button>
                           </div>
                         </div>
                       

                    </div> --}}
                   
                    <div class="tab-content">
                        <div id="all" class="tab-pane fade in active">
                             <div class="col-md-4">
                             <h3 style="margin-top: 0px;">All Users</h3>
                            </div>
                            <div class="col-md-8">
                              <div class="pull-right">
                         <div class="form-group row">
                          <div class="col-md-6">
                             <select class="form-control" name="user_role" id="user_role" required>
                             <option disabled selected>Select Role</option>
                             @foreach ($users as $item)
                                 <option value="{{$item->id}}">{{$item->name}}</option>
                             @endforeach
                           </select>
                          </div>
                           <div class="col-md-6">
                              <button class="btn btn-primary btn-sm" type="submit">Assign Role</button>
                           </div>
                         </div>
                       

                    </div>
                            </div>
                             {{-- <div class="pull-right col-md-2">
                              <a class="btn btn-primary btn-sm" href="{{route('screener_exportExcel')}}">Export Excel</a>
                            </div> --}}

                            <table class="table table-striped table-bordered table-hover  no-footer" id="datatable">
                                <thead>
                                    <tr>
                                         <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>
                                        <th class="sorting">Name</th>
                                        <th class="sorting">Email</th>
                                        <th class="sorting">City</th>
                                        <th class="sorting">Role</th> 
                                
                                        {{-- <th> Comment </th> --}}
                                    </tr>
                                </thead>
                                <tbody>
                                  @foreach ($applications as $item)
                                  <tr>
                                    <td></td>
                                    <td>{{$item->name}}</td>
                                    <td>{{$item->email}}</td>
                                    <td>{{$item->city}}</td>
                                    <td>{{App\Role::find($item->role_id)->name}}</td>
                                    {{-- <td>{{$item->screener1_status}}</td> --}}
                                    {{-- <td>{{$item->screener_comment}}</td> --}}
                                  </tr>
                                  @endforeach
                                  
                                </tbody>
                            </table>

                        </div>
                       
                    </div>

                </div>
                
                </form>
            </div>
       
            <!-- /widget-content --> 

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

@stop
@section('external_scripts')
<script src="/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
var applicationlist = {!! json_encode($applications) !!}
console.log(applicationlist);

$(document).ready(function (){  
      var table =  $('#datatable').DataTable({
        responsive:true,
          'columnDefs': [{
          'targets': 0,
          'searchable': false,
          'orderable': false,
          'className': 'dt-body-center',
          'render': function (data, type, full, meta){
            
              return '<input type="checkbox" name="id[]" value="' + applicationlist[meta.row].id + '">';
               
          }
        }],
        fnDrawCallback: function() {
            $("#frm-example").trigger("reset");
        }
    });    
    
    // Handle click on "Select all" control
   $('#example-select-all').on('click', function(){
      // Check/uncheck all checkboxes in the table
      var rows = table.rows({ page: 'current' }).nodes();
      $('input[type="checkbox"]', rows).prop('checked', this.checked);
   });

   // Handle click on checkbox to set state of "Select all" control
   $('#datatable tbody').on('change', 'input[type="checkbox"]', function(){
      // If checkbox is not checked
      if(!this.checked){
         var el = $('#example-select-all').get(0);
         // If "Select all" control is checked and has 'indeterminate' property
         if(el && el.checked && ('indeterminate' in el)){
            // Set visual state of "Select all" control 
            // as 'indeterminate'
            el.indeterminate = true;
         }
      }
   });
    
   $('#frm-example').on('submit', function(e){
      var form = this;

      // Iterate over all checkboxes in the table
      table.$('input[type="checkbox"]').each(function(){
         // If checkbox doesn't exist in DOM
         if(!$.contains(document, this)){
            console.log(this.value);
            
            // If checkbox is checked
            // if(this.checked){
            //    // Create a hidden element 
            //    $(form).append(
            //       $('<input>')
            //          .attr('type', 'hidden')
            //          .attr('name', this.name)
            //          .val(this.value)
            //    );
            // }
         } 
      });

      // FOR TESTING ONLY
      
      // Output form data to a console
      $('#example-console').text($(form).serialize()); 
      
       
      form.submit();

      // Prevent actual form submission
      e.preventDefault();
   });
  });
</script>
@endsection