@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