@include('layouts.sidebar')


        <!-- =============== Left side End ================-->
		
		
        <div class="main-content-wrap sidenav-open d-flex flex-column">
            <!-- ============ Body content start ============= -->
            <div class="main-content">
            @if(Session::has('message'))
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
            @endif				
 
                <div class="row">
				<div class="card text-left">
               <div class="card-body">
			   
			   <div class="row">
			    <div class="col-md-8">
	              <h4 class="card-title mb-3"> Users </h4> 
				 <p> {{$count}} Users </p>			
				</div>
				
			   <div class="col-md-4">			   
				<div class="btn-group">
							   
                 <!--  <button class="btn btn-secondary btn-lg dropdown-toggle" id="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">   Actions  </button> -->
                <!--  <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another Action</a><a class="dropdown-item" href="#">Something Else Here</a></div>
				 
                  <button class="btn btn-secondary btn-lg" id="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">   Import  </button>		 -->		 
				 
				  <!--  <a href="{{url('users/create')}}" class="btn btn-danger" type="button" aria-haspopup="true" aria-expanded="false">Create User</a> -->
                  </div>
				</div>
				</div>
				
				
                           <ul class="nav nav-tabs" id="myIconTab" role="tablist">
                                    <li class="nav-item"><a class="nav-link active show" id="home-icon-tab" data-toggle="tab" href="#homeIcon" role="tab" aria-controls="homeIcon" aria-selected="true"><i class="nav-icon i-Pen-2 mr-1"></i> All Users </a></li>
                                    <!-- <li class="nav-item"><a class="nav-link" id="profile-icon-tab" data-toggle="tab" href="#profileIcon" role="tab" aria-controls="profileIcon" aria-selected="false"><i class="nav-icon i-Pen-2 mr-1"></i> My Contacts </a></li>
                                    <li class="nav-item"><a class="nav-link" id="contact-icon-tab" data-toggle="tab" href="#contactIcon" role="tab" aria-controls="contactIcon" aria-selected="false"><i class="nav-icon i-Pen-2 mr-1"></i> Unsigned Contact</a></li>
									
                                    <li class="nav-item"><a class="nav-link" id="contact-icon-tab" data-toggle="tab" href="#contactIcon" role="tab" aria-controls="contactIcon" aria-selected="false">  + Add View </a></li>
                                    <li class="nav-item"><a class="nav-link" id="contact-icon-tab" data-toggle="tab" href="#contactIcon" role="tab" aria-controls="contactIcon" aria-selected="false">  View All</a></li>	 -->								
									
                                </ul>
								
								
                                <div class="tab-content" id="myIconTabContent">
                                    <div class="tab-pane fade active show" id="homeIcon" role="tabpanel" aria-labelledby="home-icon-tab">
									
			<div class="row" style="margin-bottom:15px">
			    <div class="col-md-2">
	             <div class="search-bar">
                    <input type="text" id="search_user" placeholder="Search" autocomplete="off" style="padding: 5px;border-radius: 4px;background: #f6f8fc;">
                </div> 			
				</div>
           
        </div>
         <div id="searchUser">
               @include('users.users_ajax')
           </div>
                                </div>
								
						 
                                </div>
                            </div>
							</div>
                </div>
				
            </div><!-- Footer Start -->
            <div class="flex-grow-1"></div>
			
			
			
			
			
			
            <!-- <div class="app-footer">
                <div class="footer-bottom border-top pt-3 d-flex flex-column flex-sm-row align-items-center">
                     
					 <p><strong> 2020 &copy; Admin ! All rights reserved</strong></p>
					 
                    <span class="flex-grow-1"></span>
                    <div class="d-flex align-items-center">
                        <div>
                            <p class="m-0"> design by techsaga </p>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- fotter end -->
        </div>
    </div><!-- ============ Search UI Start ============= -->
 
    <!-- ============ Search UI End ============= -->
    <style type="text/css">
        .col {
    margin-left: 46px!important;
}
    </style>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('js/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('js/script.min.js') }}"></script>
    <script src="{{ asset('js/sidebar.large.script.min.js') }}"></script>
    <script src="{{ asset('js/echarts.min.js') }}"></script>
    <script src="{{ asset('js/echart.options.min.js') }}"></script>
    <script src="{{ asset('js/dashboard.v1.script.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.1/jquery-confirm.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>


 <script type="text/javascript">
 $(document).on('keyup',"#search_user", function(){ getPCode(0); });

 $(document).on('click', '.records .pagination a',function(event){
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getPCode(page);
 });


function getPCode(page){

    var search  =    $("#search_user").val();   

    $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });             
            
    
    $.ajax(
    {
        url: "{{route('users.index')}}",
        type: "get",
        data: {'page':page,'search':search},
        datatype: "html",
    })
    .done(function(data)
    {
        $("#searchUser").empty().html(data);
        //debug to check page number
        location.hash = page;
    })
    .fail(function(jqXHR, ajaxOptions, thrownError)
    {
        alert('No response from server');

    });

}
  
        function confirmAction(table_name, id) {
            $.confirm({
                title: 'Alert!',
                content: 'Are you sure you want to delete this?',
                buttons: {
                    confirm: function () {
                        takeAction(table_name, id);
                        $.alert({
                            title: 'Alert!',
                            content: 'Done!',
                            buttons: {
                                ok: function () {
                                    setTimeout("window.parent.location = ''", 50);
                                }
                            }
                        });
                    },
                    cancel: function () {
                        $.alert('Canceled!');
                    }
                }
            });
        }
        function takeAction(table_name, id) {
            if (table_name != '' && id != '') {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "POST",
                    url: '/takeAction',
                    dataType: 'json',
                    data: {'table_name':table_name, 'id': id},
                    success: function (data) {
                    },
                    complete: function () {
                    },
                    error: function () {
                    }
                });
            }

        }
    </script>
</body>

</html>