//echo "Marathon Total Registration";
@extends('layouts.common')
 
@section('title')
   Laiqa | Admin | Dashboard
@endsection
@section('content')



   <div class="page-wrapper">
       <div class="content">
           <div class="row">
               <div class="col-sm-4 col-3">
                   <h4 class="page-title">Users</h4>
               </div>
               <!--<div class="col-sm-8 col-9 text-right m-b-20">
                   <a href="" class="btn btn btn-primary btn-rounded float-right"><i class="fa fa-plus"></i> Add New</a>
               </div>-->
           </div>
           
           <div class="row">
               <div class="col-sm-4 col-3">
               <input type="button" class="btn btn-danger" id="btn_filters" value="Show Filters">
               </div>
           </div>
           <hr>
           <div class="row">
               <div class="col-md-12">
                   <div class="card" id="filters">
                       <div class="card-body">
                           <form class="form search_user" action="" method="POST">
                           <meta name="csrf-token" content="{{ csrf_token() }}">
                           <input type="hidden" name="action" id="action" value="action">
                               
                               <div class="row">
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">Phone Number</label>
                                           <select name="mobile[]" id="mobile" class="form-control selectpicker " multiple >
                                               <option disabled  value="0">Select Option</option>
                                               <option value="1">Has phone number</option>
                                               <option value="2">Blank</option>
                                           </select>
                                       </div>
                                       <input type="hidden" id="mobileselval">
                                   </div>
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">Gender</label>
                                           <select name="gender[]" id="gender" class="form-control selectpicker" multiple >
                                               <option disabled  value="0">Select Gender</option>
                                               <option value="2">Male</option>
                                               <option value="1">Female</option>
                                               <option value="3">Non Binary</option>
                                           </select>
                                       </div>
                                       <input type="hidden" id="genderselval">
                                   </div>
                               </div>
                               <div class="row">
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">Registered with</label>
                                           <select name="registered_with[]" id="registered_with" class="form-control selectpicker" multiple >
                                               <option disabled  value="0"> Select Type</option>
                                               <option value="1">Mobile number</option>
                                               <option value="3">Google</option>
                                               <option value="2">Facebook</option>
                                               <option value="4">Apple</option>
                                           </select>
                                       </div>
                                       <input type="hidden" id="regwithselval">
                                   </div>
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">Registration device</label>
                                           <select name="registered_device[]" id="registered_device" class="form-control selectpicker" multiple >
                                               <option disabled  value="0"> Select Type</option>
                                               <option value="1">Android</option>
                                               <option value="2">iOS</option>
                                               <option value="3">Web</option>
                                           </select>
                                       </div>
                                       <input type="hidden" id="regdevselval">
                                   </div>
                               </div>
                               <div class="row">
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">City</label>
                                           <select name="city" id="city" class="form-control selectpicker" multiple >
                                                                                          </select>
                                       </div>
                                       <input type="hidden" id="cityselval">
                                   </div>
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">State</label>
                                           <select name="state" id="state" class="form-control selectpicker" multiple >
                                                                                          </select>
                                       </div>
                                       <input type="hidden" id="stateselval">
                                   </div>
                               </div>
                               <div class="row">
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label for="name">Status</label>
                                           <select name="status" id="status" class="form-control selectpicker" multiple >
                                               <option disabled  value="0"> Select Type</option>
                                               <option value="1">Registered Users</option>
                                               <option value="2">Unregistered Users</option>
                                           </select>
                                       </div>
                                       <input type="hidden" id="statusselval">
                                   </div>
                               </div>
                               <div class="row">
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label>Active from date</label>
                                           <div class="cal-icon">
                                               <input type="text" name="from_date" class="form-control datetimepicker" id="from_date">
                                           </div>
                                       </div>
                                   </div>
                                   <div class="col-md-6">
                                       <div class="form-group">
                                           <label>Active from time</label>
                                           <div class="cal-icon">
                                               <input type="text" name="to_date" class="form-control datetimepicker" id="to_date">
                                           </div>
                                       </div>
                                   </div>
                               </div>
                                   <div class="">
                                       <button type="button" class="btn btn-primary btn-search">search</button>
                                   </div>
                           </form>
                   </div>
                   </div>
               </div>
           </div>
           

           <div class="row">
               <div class="col-md-12">
               {{ Session::get('user_type')}}
                   <div class="table-responsive">
                       <table id="datatable" class="datatable table table-stripped custom-table" >
                           <thead>
                               <tr>
                                   <th>ID</th>
                                   <th>Name</th>
                                   <th>Email</th>
                                   <th>Phone</th>
                                   <th>Gender</th>
                                   <th>City</th>
                                   <th>State</th>
                                   <th>Registered with</th>
                                   <th>SMS Status</th>
                                   <th>Registered Device</th>
                                   <th>Registered On</th>
                                   <th>View</th>
                                   <th>Status</th>
                                   <!--<th class="text-right">Action</th>-->
                               </tr>
                           </thead>
                           <tbody>
                           
                           </tbody>
                       </table>
                   </div>
               </div>
           </div>
       </div>
     
       <div id="delete_appointment" class="modal fade delete-modal" role="dialog">
           <div class="modal-dialog modal-dialog-centered">
               <div class="modal-content">
                   <div class="modal-body text-center">
                       <img src="assets/img/sent.png" alt="" width="50" height="46">
                       <h3>Are you sure want to delete this Appointment?</h3>
                       <div class="m-t-20"> <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
                           <button type="submit" class="btn btn-danger">Delete</button>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
       
       

@endsection

@section('scripts')

<script>
// $(document).ready(function() {
   // DataTable
 // $('#datatable').DataTable({
    // searching :true 
 // });

$(function () {
       $('.selectpicker').selectpicker();
   });
   
$(document).ready(function() {
 // $(function () {
   $('#filters').hide();
   
   $('#btn_filters').click(function(){
       $('#filters').toggle();
       $(this).val( $(this).val() == 'Hide Filters' ? 'Show Filters' : 'Hide Filters' );
   });
   
   var table = $('.custom-table').DataTable({
       "language": {
               // "processing": '<i class="fa fa-spinner fa-spin" style="font-size:24px;color:rgb(75, 183, 245);"></i>'
               'loadingRecords': '&nbsp;',
               'processing': '<div class="spinner"></div>'
            },
            // dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>"+            "<'row'<'col-xs-12't>>"+"<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
            "dom": '<"top"ip>rt<"bottom"flp><"clear">', //<"top"flp>rt<"bottom"i>
       processing: true,
       serverSide: true,
        responsive: true,
       pageLength: 20,
       ajax:  { 
           url: "{{ route('users.index') }}" ,
            data: function (d) {
               var itemtoRemove = '0';
               $('#mobile').on('change', function() {
                   var values = [];
                   var $selectedOptions = $(this).find('option:selected');
                   $selectedOptions.each(function(){
                       values.push($(this).val());
                   });
                   // values.splice($.inArray(itemtoRemove, values), 1);
                   $('#mobileselval').val(values);
               });
               var mobile_sel_val = $('#mobileselval').val();
                               
               $('#gender').on('change', function() {
                   var values1 = [];
                   var $selectedOptions1 = $(this).find('option:selected');
                   $selectedOptions1.each(function(){
                       values1.push($(this).val());
                   });
                   
                   $('#genderselval').val(values1);
               });
               
               var gender_sel_val = $('#genderselval').val();

               $('#registered_with').on('change', function() {
                   var values2 = [];
                   var $selectedOptions2 = $(this).find('option:selected');
                   $selectedOptions2.each(function(){
                       values2.push($(this).val());
                   });
                   //values2.splice($.inArray(itemtoRemove, values2), 1);
                   
                   $('#regwithselval').val(values2);
               });
               var regwith_sel_val = $('#regwithselval').val();
               
               $('#registered_device').on('change', function() {
                   var values3 = [];
                   var $selectedOptions3 = $(this).find('option:selected');
                   $selectedOptions3.each(function(){
                       values3.push($(this).val());
                   });
                    //values3.splice($.inArray(itemtoRemove, values3), 1);
                   
                   $('#regdevselval').val(values3);
               });
               var regdev_sel_val = $('#regdevselval').val();
               
               $('#city').on('change', function() {
                   var values4 = [];
                   var $selectedOptions4 = $(this).find('option:selected');
                   $selectedOptions4.each(function(){
                       values4.push($(this).val());
                   });
                   
                   $('#cityselval').val(values4);
               });
               var city_sel_val = $('#cityselval').val();
               
               
               $('#state').on('change', function() {
                   var values5 = [];
                   var $selectedOptions5 = $(this).find('option:selected');
                   $selectedOptions5.each(function(){
                       values5.push($(this).val());
                   });
                   
                   $('#stateselval').val(values5);
               });
               var state_sel_val = $('#stateselval').val();
               
               $('#status').on('change', function() {
                   var values6 = [];
                   var $selectedOptions6 = $(this).find('option:selected');
                   $selectedOptions6.each(function(){
                       values6.push($(this).val());
                   });
                   
                   $('#statusselval').val(values6);
               });
               var status_sel_val = $('#statusselval').val();
               
                   
               var from_date = $('#from_date').val();
               var to_date = $('#to_date').val();
               
               
               if(mobile_sel_val !='')
               {
                   mobile_sel_val = mobile_sel_val;
               }else{
                   mobile_sel_val = '';
               }
               if(gender_sel_val !='')
               {
                   gender_sel_val = gender_sel_val;
               }else{
                   gender_sel_val = '';
               }
               
               if(regwith_sel_val !='')
               {
                   regwith_sel_val = regwith_sel_val;
               }else{
                   regwith_sel_val = '';
               }
               if(regdev_sel_val !='')
               {
                   regdev_sel_val = regdev_sel_val;
               }else{
                   regdev_sel_val = '';
               }
               if(city_sel_val !='')
               {
                   city_sel_val = city_sel_val;
               }else{
                   city_sel_val = '';
               }
               if(state_sel_val !='')
               {
                   state_sel_val = state_sel_val;
               }else{
                   state_sel_val = '';
               }
               if(from_date !='')
               {
                   from_date = from_date;
               }else{
                   from_date = '';
               }
               if(to_date !='')
               {
                   to_date = to_date;
               }else{
                   to_date = '';
               }
               if(status_sel_val !='')
               {
                   status_sel_val = status_sel_val;
               }else{
                   status_sel_val = '';
               }
               d.mobile = mobile_sel_val;
               d.gender = gender_sel_val;
               d.regwith = regwith_sel_val;
               d.regdev = regdev_sel_val;
               d.city = city_sel_val;
               d.state = state_sel_val;
               d.from_date = from_date;
               d.to_date = to_date;
               d.status = status_sel_val;
               d.action = '';
           }
       },
       columns: [
           {data: 'DT_RowIndex', name: 'DT_RowIndex'},
           {data: 'user_name', name: 'user_name'},
           {data: 'email', name: 'email'},
           {data: 'user_phone', name: 'user_phone'},
           {data: 'gender', name: 'gender'},
           {data: 'user_city', name: 'user_city'},
           {data: 'user_state', name: 'user_state'},
           {data: 'signup_type', name: 'signup_type'},
           {data: 'sms_status', name: 'sms_status'},
           {data: 'user_reg_device', name: 'user_reg_device'},
           {data: 'created_at', name: 'created_at'},
           {data: 'action', name: 'action'},
           {data: 'user_status', name: 'user_status', orderable: true, searchable: true},
       ]
   });

 // });
 

  function removeValue(list, value) {
     return list.replace(new RegExp(",?" + value + ",?"), function(match) {
         var first_comma = match.charAt(0) === ',',
             second_comma;

         if (first_comma &&
             (second_comma = match.charAt(match.length - 1) === ',')) {
           return ',';
         }
         return '';
       });
   };
       
       $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
             }
         });
 
       // $.noConflict();
       var token = '{{ csrf_token() }}';
       var form = $('.search_user');
       var btnSearch = $('.btn-search');
       
       btnSearch.click(function(e){
           
           table.draw();
           // var dataa = form.serialize()
           // $('.custom-table').DataTable().ajax.reload();
           // $.ajax({
               // type: "POST",
               // url: "{{ url('admin/search') }}",
               // data: dataa+'&_token='+token,
               // success: function (data) {
                       // alert('innn');
                       // console.log(data);
                       // e.preventDefault();
                      // table.draw();
                      // $('.custom-table').DataTable().ajax.reload();
               // }
            // }); //end ajax
       })


       $(document).on('click','.btn-delete',function(){
           if(!confirm("Are you sure?")) return;

           var rowid = $(this).data('rowid')
           var el = $(this)
           if(!rowid) return;

           
           $.ajax({
               type: "POST",
               dataType: 'JSON',
               url: "/" + rowid,
               data: {_method: 'delete',_token:token},
               success: function (data) {
                   if (data.success) {
                       table.row(el.parents('tr'))
                           .remove()
                           .draw();
                   }
               }
            }); //end ajax
       });
   });
</script>

@endsection