@include('layouts.sidebar')


        <!-- =============== Left side End ================-->
		
		
        <div class="main-content-wrap sidenav-open d-flex flex-column">
            <!-- ============ Body content start ============= -->
            <div class="main-content">				
 
                <div class="row">
				<div class="card text-left">
               <div class="card-body">
			   
			   <div class="row">
			    <div class="col-md-8">
	              <h3 class="card-title mb-3"> Orders </h3> 

				 <p> {{$count}} Orders </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>				 
				  -->
				  
                  </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 Orders </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_order" placeholder="Search" autocomplete="off" style="padding: 5px;border-radius: 4px;background: #f6f8fc;">
                </div> 			
				</div>
	
				</div>
			<div id="searchOrder">
               @include('orders.orders_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 type="text/javascript">
    $(document).on('keyup',"#search_order", 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_order").val();   

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

    });

}
</script>
</body>

</html>