@extends('layouts.app-admin')
@section('content')


<!-- [ content ] Start -->
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Order history</h4>
    <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}"><i class="feather icon-home"></i></a></li>
            <li class="breadcrumb-item">Order history</li>
            <li class="breadcrumb-item active">Order history</li>
        </ol>
    </div>

       <div class="card">
        <h6 class="card-header bg-dark text-white">Order history
        </h6>

      
        <div class="card-datatable table-responsive">
            <table class="datatables-demo table table-striped table-bordered">
                <thead>
                    <tr>
                    <th width="60px;">Sr. No</th>
                        <th width="160px;">Invoice No</th>
                        <th>Customer</th>
                        
                        <th>Total Amount</th>
                        <th>Payment Method</th>
                        <th>Status</th>
                        <th>By</th>
                          <!-- <th>Payment Status</th> -->
                     
                        <th>Order Date</th>
                        <th>Action</th>
                        
                    </tr>
                </thead>
                <tbody>
                        @forelse($orderlist as $key=>$row)
                       
                        @php
                                        if($row->status == 'Pending'){
                                        $badge = 'badge-info';
                                        }elseif($row->status == 'Returned'){
                                        $badge = 'badge-danger';
                                        }elseif($row->status == 'Failed'){
                                        $badge = 'badge-danger';
                                    }elseif($row->status == 'Cancelled'){
                                        $badge = 'badge-danger';
                                        }elseif($row->status == 'Received'){
                                        $badge = 'badge-success';
                                    }elseif($row->status == 'Shipped'){
                                        $badge = 'badge-warning';
                                        }else{
                                        $badge = 'badge-warning';
                                        }
                                        @endphp
                        <tr>
                           <td>{{$key+1}}</td>
                           <td>#{{$row->reference}}</td>
                           <td>{{@$row->userData->name}}<br/>
                           {{@$row->userData->email}}</td>
                           <td>£ {{$row->totalAmt}}</td>
                           <td>@if($row->paymentStatus!='ONLINE')
                           <span class="badge badge-primary">COD</span>
                           @else 
                           <span class="badge badge-info">ONLINE</span>
                           @endif
                                       </td>

                              <td><span class="badge {{$badge}}">{{$row->status}}</span></td>
                              <td>{{$row->by}}</td>
                         
                           <td>{{date('d M, Y h:i:s',strtotime($row->created_at))}}</td>
                           <td>
                                                        

                           <a data-original-title="View Detail" class="btn btn-info btn-sm orderview" data-toggle="tooltip" data-placement="top" href="{{url('admin/orderview?orderviewId='.\Crypt::encryptString($row->id))}}" style=""><i class="fa fa-eye"></i></a>
                         <a href="{{url('admin/generate-pdf/'.$row->reference)}}" class="btn btn-primary btn-sm " title="Order Invoice Pdf "><i class="fa fa-file-pdf"></i></a>
 
                         
                           </td>
                     
                        </tr>
                      
                   
                       @empty
                        <tr>
                           <td class="text-danger" colspan="8" align="center">No Order Found</td>
                        </tr>
                       @endforelse

                     </tbody>
            </table>

        </div>
    </div>

</div>
<!-- [ content ] End -->

<div class="modal fade" id="view-shipment-modal" tabindex="-1" role="dialog" aria-labelledby="add-address" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
               <div class="modal-header modal-header-success" style="  border-bottom: 1px solid green;    padding-bottom: 11px;">
                  <h5 class="modal-title" id="add-address">Request Shipment</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                  </button>
               </div>
             
               
                  <div class="modal-body">
                  <form action="{{url('createPickup')}}" method="get">
                           @csrf
                     <div class="row">
                        <div class="col-md-12">
                    
                        <h5 class="modal-title" id="add-address">Delivery Address</h5>
                        <br/>
                                    
                           <input type="hidden" name="refernce" id="refernce" />
                           
                                 
                                    <div class="form-group row">
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Expected Delivery Date<span class="error">*</span></label>
                                          <input type="date" class="form-control" name="expected_delivery_date" id="expected_delivery_date" value="{{date('Y-m-d')}}" required>                                          
                                             <p class="expected_delivery_date validationError"></p> 
                                       </div>
                                 
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Customer Name<span class="error">*</span></label>
                                          <input type="text" class="form-control" name="name" id="name" value="" required>                                          
                                             <p class="cust_name validationError"></p> 
                                       </div>
                                    
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Customer Email Address<span class="error">*</span></label>
                                          <input type="email" class="form-control" name="email" id="email" value="" required>                                          
                                             <p class="cust_name validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Company Name <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="company" id="company" value="" required>                                          
                                             <p class="company validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label " style="display: block;">Customer Mobile No. <span class="error">*</span></label>
                                          <select class="form-control phone_code" name="phone_code" style="display: inline-block; width: 33%;" required="">
                                                   <option value="+966">+966 </option>
                                                   <option value="+971">+971</option>
                                             </select>
                                             <input class="form-control border-form-control" name="phone" value="" id="phone" style="width: 65%;display: inline-block;" type="tel" minlength="9" maxlength="12" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" required="">                                         
                                             <p class="phone validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Building Number <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="building_number" id="building_number" value="" required>                                          
                                             <p class="building_number validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Building Name <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="building_name" id="building_name" value="" required>                                          
                                             <p class="building_name validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Floor  <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="floor" id="floor" value="" required>                                          
                                             <p class="floor validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Apartment  <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="apartment" id="apartment" value="" required>                                          
                                             <p class="apartment validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Postal Code  <span class="error">*</span></label>
                                          <input class="form-control border-form-control" name="postcode" value="" type="text" id="postcode" minlength="6" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" required="">                                        
                                             <p class="postcode validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">City  <span class="error">*</span></label>
                                          <select class="form-control cityname" id="city" name="city" placeholder="town/city" required="">
                                               <option value="">Select City</option>
                                                    <option value="Aasiya">Aasiya</option>
                                                    <option value="aba al wuorood">aba al wuorood</option>
                                                    
                                          </select>                                       
                                             <p class="city validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Country Code  <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="country_code" id="country_code" value="SA" required="">                                          
                                             <p class="building_number validationError"></p> 
                                       </div>
                                       <div class="col-md-4 col-sm-4 col-xs-4">
                                          <label class="control-label">Order Total Amount (SAR)  <span class="error">*</span></label>
                                          <input type="text" class="form-control" name="total_amount" id="total_amount" value="SA" required="">                                          
                                             <p class="total_amount validationError"></p> 
                                       </div>

                                    </div>
                                    <div class="form-group">
                                       <div class="col-md-12 col-sm-12 col-xs-12">
                                       <input type="submit" name="submit" value="submit" class="btn btn-sm btn-primary" id="submit">
                                       </div>
                                    </div>  

                                  

                                      
                           
                           </div>
                          
                     </div>
                     </form>

                   
                  </div>
                  
            </div>
         </div>
      </div>

<div class="modal fade" id="view-order-modal" tabindex="-1" role="dialog" aria-labelledby="add-address" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
               <div class="modal-header modal-header-success">
                  <h5 class="modal-title" id="add-address"></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                  </button>
               </div>
               
                  <div class="modal-body">
                     <div class="row">
                        <div class="col-md-6">
                           {{Form::open(array('url'=>'admin/update_order_status','class'=>'form-horizontal form-label-left','method'=>'post','enctype' => 'multipart/form-data', 'id' => 'updateOrder'))}}
                           <table class="table table-striped">
                              <!--  Delivery Details -->
                              <tr>
                                 <th class="text-info" colspan="6">General</th>
                              </tr>
                              
                              <tr>
                                 <td>

                                    @csrf
                                    <div class="form-group">
                                       <div class="col-md-12 col-sm-12 col-xs-12">

                                          <input type="hidden" name="updateStatusOrderId" value="" id="updateStatusOrderId" required="">
                                          <p class="updateStatusOrderId validationError"></p> 

                                          <label class="control-label">Order Status<span class="error">*</span></label>
                                          <select class="form-control" id="updateOrderstatus" required="" name="updateOrderstatus">
                                             <option value="pending">Pending</option>
                                             <option value="processing">Processing</option>
                                             <option value="completed">Completed</option>
                                             <option value="refund">Refunded</option>
                                             <option value="failed">Failed</option>
                                             <option value="delivered">Delivered</option>
                                          </select> 
                                          <p class="updateOrderstatus validationError"></p> 
                                       </div>

                                       <div class="col-md-12 col-sm-12 col-xs-12">

                                          <input type="hidden" name="updateStatusOrderId" value="" id="updateStatusOrderId" required="">
                                          <p class="updateStatusOrderId validationError"></p> 

                                          <label class="control-label">Payment Status<span class="error">*</span></label>
                                          <input class="form-control" id="paymentStatus" required="" name="paymentStatus" value="">
                                            
                                          <p class="paymentStatus validationError"></p> 
                                       </div>

                                    </div>

                                    <div class="form-group">
                                       <div class="col-md-12 col-sm-12 col-xs-12">
                                          <label class="control-label">Expected Delivery Date<span class="error">*</span></label>
                                          <input type="date" class="form-control" name="expected_delivery_date" id="expected_delivery_date">
                                             <p class="expected_delivery_date validationError"></p> 
                                       </div>
                                    </div>

                                    <div class="form-group">
                                       <div class="col-md-12 col-sm-12 col-xs-12">
                                          <label class="control-label">Note<span class="error">*</span></label>
                                          <textarea class="form-control" name="orderNote" id="orderNote"></textarea>
                                             <p class="orderNote validationError"></p> 
                                       </div>
                                    </div>
                                    <div class="form-group">
                                       <div class="col-md-12 col-sm-12 col-xs-12">
                                       <input type="submit" name="submit" value="Update" class="btn btn-sm btn-primary" id="submit">
                                       </div>
                                    </div>  
                                 </td>
                              </tr>
                           
                           </table>

                              {{Form::close()}}
                           
                           </div>
                           <div class="col-md-6">
                           <table class="table table-striped">
                              <!--  Delivery Details -->
                              <tr>
                                 <th class="text-info" colspan="6">Delivery Details</th>
                              </tr>
                              <tr>
                                    <td id="name"></td>
                              </tr>
                              <tr>
                                    <td><span id="phone"></span>  </td>
                              </tr>
                              <tr>
                                    <td><span id="email" style="text-transform: lowercase;"></span> </td>
                              </tr>
                              <tr>
                                    <td id="additional"></td>
                              </tr>
                                 

                              </tr>
                              
                           </table>
                           </div> 
                     </div>
                   

                     <div class="form-row">
                        <div class="tableItems">
                        </div>
                     </div>
                  </div>
                  <div class="modal-footer modal-header-success">
                  </div>
            </div>
         </div>
      </div>
@endsection


@section('script')




<script type="text/javascript">
   $('.orderview').click(function(){
    

      var orderId = this.id;
      $('.tableItems').html('');
      $('.tableitemData').html('');
      $.ajax({
         url : "{{url('admin/order')}}/"+orderId,
         method : "get",
         dataType : "json",
         data : {"_token" : "{{csrf_token()}}","orderid" : orderId },
         success : function(res){
            /* Delivery Address */
            $('#name').text(res.data.delivery_address['name']);
            $('#phone').text(res.data.delivery_address['phone']);
            $('#email').text(res.data.delivery_address['email']);
            $('#address').text(res.data.delivery_address['address']);
            $('#additional').text(res.data.delivery_address['additional']);
            

            /*orderItems*/
            $('.tableItems').append(`<table class="table table-striped tableitemData">
                  <thead>
                     <tr>
                        <th style="width: 244px;">Product</th>
                        <th>Image</th>
                        <th>Quantity</th>
                        <th>Price</th>
                     </tr>
                  </thead>
                    <tfoot>
                         
                           <tr>
                              <th colspan="4" class="tablefoot">Sub Total </th>
                              <td id="orderTotal">{{config('app.currency')}}  `+res.data['subTotal']+`</td>
                            </tr>

             
                            <tr>
                              <th colspan="4" class="tablefoot">Coupon Discount</th>
                               <td id="paidAmt"> {{config('app.currency')}} `+res.data['couponDiscount']+`</td>
                           </tr>
                           <tr>
                              <th colspan="4" class="tablefoot">Tax</th>
                               <td id="paidAmt"> {{config('app.currency')}} `+res.data['tax']+`</td>
                           </tr>
                           <tr>
                              <th colspan="4" class="tablefoot">Shipping Charge</th>
                               <td id="paidAmt"> {{config('app.currency')}} `+res.data['shippingCharge']+`</td>
                           </tr>

                           <tr>
                              <th colspan="4" class="tablefoot">Total Price</th>
                               <td id="paidAmt"> {{config('app.currency')}} `+res.data['totalAmt']+`</td>
                           </tr>

                         </tfoot>
               </table`);
              

            var order_items = res.data.order_items;
            $.each(order_items, function(key,value){
               
               console.log(value);
               $('.tableitemData').append(`<tr>
                     
                     <td>`+value['product']['title']+`</td>
                     <td><img src="../media/product//`+value['product']['productImage']+`" style="width:100px"></td>
                     <td>`+value['qty']+`</td>
                     <td>`+value['price']+`</td>
                     
                     

                  </tr>`);
            });
            
             /* Set Updated Form Data*/
            $('#updateOrderstatus option[value='+res.data['orderStatus']+']').attr('selected','selected');
            $('#updateStatusOrderId').val(res.data['id']);
            $('#orderNote').val(res.data['orderNote']);
            $('#paymentStatus').val(res.data['paymentStatus']);
            $('#expected_delivery_date').val(res.data['expected_delivery_date']);
            
         },
         error : function(e){
            console.log(e);
         }

      });
   });



</script>

<script type="text/javascript">
     $( "#updateOrder" ).submit(function( event ) {  
      $('.validationError').html('').show().delay(5000).fadeOut('slow');
     
      var formData = {
        '_token' : "{{csrf_token()}}",
        'updateStatusOrderId' : $('input[name=updateStatusOrderId]').val(),
        'updateOrderstatus' : $('#updateOrderstatus').val(),
        'paymentStatus'     : $('#paymentStatus').val(),
        'orderNote' : $('#orderNote').val(),
        'expected_delivery_date' : $('#expected_delivery_date').val(),
        
      };  

      $.ajax({
         url : "{{url('admin/update_order_status')}}",
         method : "POST",
         data : formData,
         dataType : 'json',
          beforeSend: function() {
              $('#submit').val('Wating...');
             $("#submit").attr("disabled", true);
          },
         success : function(res){
            if(res.status == false){
               $.each( res.message, function( key, value ) {
                $("."+key).html(value);
               // $("."+key).delay(10000).fadeOut('slow');
               });
            }

            if(res.status == true){
               showAlert(res.message,'reload');               
            }
         },
         completed: function() {
              $('#submit').val('Submit');
              $("#submit").attr("disabled", false);
          },
         error : function(e){
            console.log(e);
         }
      });

      event.preventDefault();    
   });  

   $(document).ready(function(){
    $(".view-shipment-modal").click(function(){
      var refrence=$(this).attr('id');
      $('#refernce').val(refrence);
        $("#view-shipment-modal").modal();
        $.ajax({
            url : "{{url('admin/order-deliveryaddress')}}/"+refrence,
            type : "GET",
            success : function(res){

               $('input[name=name]').val(res.data['name']);
               $('.phone_code').html('');
               if(res.data['phone_code']=='+966'){
                  $('.phone_code').append('<option value="+966" selected>+966 </option>');
                  $('.phone_code').append('<option value="+971">+971</option>');
               }else{
                  $('.phone_code').append('<option value="+966" >+966 </option>');
                  $('.phone_code').append('<option value="+971" selected>+971</option>');
               }
               if(res.data['default_address']=='1'){
                $('#default_address').prop('checked',true);
              }else{
                $('#default_address').prop('checked',false);
              }    
              if(res.data['billing_address']=='1'){
                $('#billing_address').prop('checked',true);
              }else{
                $('#billing_address').prop('checked',false);
              }   

               $('input[name=phone]').val(res.data['phone']);
               $('input[name=email]').val(res.data['email']);
               $('input[name=company]').val(res.data['company']);
               $('input[name=building_number]').val(res.data['building_number']);
               $('input[name=building_name]').val(res.data['building_name']);
               $('input[name=floor]').val(res.data['floor']);
               $('input[name=apartment]').val(res.data['apartment']);
               $('#city').html(res.cityname);
               $('input[name=postcode]').val(res.data['postcode']);
               $('textarea[name=address]').val(res.data['address']);
              
               $('textarea[name=additional]').val(res.data['additional']);
               $('#addressEditId').val(res.data['id']);
               $('input[name=total_amount]').val(res.amount);
              
            },
            error : function(e){
               console.log(e);
            }

         });
    });
});
</script>
<script type="text/javascript">
       function editAddress(id){
         $('#city').html();
         $('#add-address').text('Update Delivery Address');
         $.ajax({
            url : "{{url('user/deliveryaddress')}}/"+id+'/edit',
            type : "GET",
            success : function(res){

               $('input[name=name]').val(res.data['name']);
               $('.phone_code').html('');
               if(res.data['phone_code']=='+966'){
                  $('.phone_code').append('<option value="+966" selected>+966 </option>');
                  $('.phone_code').append('<option value="+971">+971</option>');
               }else{
                  $('.phone_code').append('<option value="+966" >+966 </option>');
                  $('.phone_code').append('<option value="+971" selected>+971</option>');
               }
               if(res.data['default_address']=='1'){
                $('#default_address').prop('checked',true);
              }else{
                $('#default_address').prop('checked',false);
              }    
              if(res.data['billing_address']=='1'){
                $('#billing_address').prop('checked',true);
              }else{
                $('#billing_address').prop('checked',false);
              }   

               $('input[name=phone]').val(res.data['phone']);
               $('input[name=email]').val(res.data['email']);
              // $('input[name=company]').val(res.data['company']);
               $('input[name=building_number]').val(res.data['building_number']);
               $('input[name=building_name]').val(res.data['building_name']);
               $('input[name=floor]').val(res.data['floor']);
               $('input[name=apartment]').val(res.data['apartment']);
               $('#city').html(res.cityname);
               $('input[name=postcode]').val(res.data['postcode']);
               $('textarea[name=address]').val(res.data['address']);
              
               $('textarea[name=additional]').val(res.data['additional']);
               $('#addressEditId').val(res.data['id']);
              
            },
            error : function(e){
               console.log(e);
            }

         });
       }
</script>

@endsection