@extends('layouts.app')
@section('title', __('Orders List'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-3 col-xs-12">
         <h3> All Orders </h3>
      </div>
      
   </div>
</section>
<section class="content">
   <div class="row">
      <div class="col-md-12">
         @component('components.filters', ['title' => __('report.filters')])
         <div class="col-md-3">
            <div class="form-group">
               {!! Form::label('date_range', __('report.date_range') . ':') !!}
               <input type="text"  class = 'form-control' name="daterange" value="" id="daterange_id" />
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Stores</label>
               <div >
                  <select class = 'form-control' id="store_id" >
                  <option value='all'>All</option>
                     @foreach($stores as $store)
                     <option value='{{$store->id}}'>{{$store->name}}</option>
                     @endforeach
                 </select>
               </div>
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Order Status</label>
               <div >
                  <select class = 'form-control' id="order_type"  >
                  <option value='all'>All</option>
                  @foreach($orderStatus as $orderSt)
                     <option value="{{$orderSt['value']}}">{{$orderSt['name']}}</option>
                     @endforeach
                     
                  </select>
               </div>
            </div>
         </div>

         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Payment Status</label>
               <div >
                  <select class = 'form-control' id="payment_status" >
                     <option value='all'>All</option>
                     @foreach($paymentStatus as $paymentSt)
                     <option value="{{$paymentSt['value']}}">{{$paymentSt['name']}}</option>
                     @endforeach
                  </select>
               </div>
            </div>
         </div>
       
         <!-- <div class="col-md-3">
            <div class="form-group">
               <label for="status_filter">Reffer By</label>
               <div >
                  <select class = 'form-control' id="reffered_by" >
                     <option value='all'>All</option>
                     @foreach($referredByUsers as $users)
                     <option value='{{$users->ref_code}}'>{{$users->f_name}} </option>
                     @endforeach
                  </select>
               </div>
            </div>
         </div> -->
         <!-- <div class="col-md-8">
            <div class="form-group">
               <div >
                  <input type="text" placeholder="Search By Member ID/ Name/ Mobile No. / Email ID"  id="search_by_val" class = 'form-control' style >
               </div>
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <div >
                  <button type="button" class="btn btn-block btn-info" 
                     data-href=""  data-container=""  id="btnSearch" >
                  <i class="fa fa-search"></i> Search </button>
               </div>
            </div>
         </div> -->
         <!-- <div class="col-md-2">
            <div class="form-group">
               <div >
                  <button type="button" class="btn btn-block btn-primary" 
                     data-href=""  data-container="">
                  <i class="fa fa-plus"></i> Add </button>
               </div>
            </div>
         </div> -->
         @endcomponent
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <!-- Custom Tabs -->
         <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
               <!-- <li class="active">
                  <a href="#output_tax_tab" data-toggle="tab" aria-expanded="true">Wallet Statement Details</a>
               </li> -->
            </ul>
            <div class="tab-content">
               <div class="tab-pane active" id="output_tax_tab">
                  <table class="table table-bordered table-striped" id="output_tax_table" width="100%">
                     <thead>
                        <tr>
                           <th width="50px">SL</th>
                           <th >ORDER ID</th>
                           <th width="150px">ORDER DATE</th>
                           <th>CUSTOMER INFORMATION</th>
                           <th>STORE</th>
                           <th>TOTAL AMOUNT	</th>
                           <th>ORDER STATUS	</th>
                           <!-- <th>ACTIONS	</th> -->
                        </tr>
                     </thead>
                  
                  </table>
               </div>
              
            </div>
         </div>
      </div>
   </div>
</section>
<!-- /.content -->
@stop
@section('javascript')
<script type="text/javascript">
   $(document).ready(function() {
   
       $('input[name="daterange"]').daterangepicker({
       startDate: moment().subtract(1, 'M'),
       endDate: moment()
   });
   
       var i = 1;
           output_tax_datatable = $('#output_tax_table').DataTable({
           processing: true,
           serverSide: true,
           aaSorting: [[0, 'desc']],
           ajax: {
            url: "{{route('order-list')}}",
            "data": function(d) {
                   d.store_id = $('#store_id').val();
                   d.order_type = $('#order_type').val(); 
                   d.payment_status = $('#payment_status').val();                                     
                   d.from_date = $('input[name="daterange"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
                   d.to_date = $('input[name="daterange"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                   //console.log(d.to_date);
                    d = __datatable_ajax_callback(d);
               }
             
           },
           columns: [
            { data: 'DT_Row_Index', name: 'DT_Row_Index' , orderable: false, searchable: false},
           { data: 'id', name: 'id' ,
                   render:function(data, type, row){
                      var orderId =  row.id ;
                       return '<span style="color:#0DB6D3;font-wigth:bold;"> '+ orderId + '</span>';
                      }},
                                
            { data: 'created_at', name: 'created_at' },
            { data: 'full_name', name: 'full_name' },
            { data: 'name', name: 'name' },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'order_status', name: 'order_status' }
       
                 
          ]
  });

  $('#daterange_id,#store_id,#order_type,#payment_status').change( function(){
            
            // alert('hello');
             if ($("#output_tax_tab").hasClass('active')) {
                 output_tax_datatable.ajax.reload();
             }
     });
         
   });
   
   
</script>
<script>
   $(function() {
     $('input[name="daterange"]').daterangepicker({
       opens: 'left'
     }, function(start, end, label) {
       console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
     });
   });
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- 
   <script src="{{ asset('js/report.js?v=' . $asset_v) }}"></script> -->
@endsection