@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')
                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">View Orders</h1>
                                
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                         <li class="breadcrumb-item"><a href="javascript:void(0)">Orders</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">List Order</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                               <!-- Row -->
                        @can('orders-list')
                            <input type="hidden" name="" id="order_id">
                             <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title mb-0">View Orders</h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="grid-margin">
                                            <div class="">
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">
                                                            
                                                            
                                         <ul style="left: 15%;margin-top: 5px;" class=" nav panel-tabs product-sale">
                                          <li style="border: none;" class="px-1">
                                                <div class="btn-list">
                                                    <button style="background: #dcf0c8;" type="button" class="btn btn-sm btn-pill ">Payment Completed</button>

                                                </div>    
                                                </li>
                                                
                                                     <li style="border: none;" class="px-1">
                                                <div class="btn-list">
                                                    <button style="background: #f8d7dd;"  type="button" class="btn  btn-sm btn-pill ">Payment Pending</button>
                                                 
                                                </div>    
                                                </li>

                                              </ul>
                                                            
                                                        </div>
                                                    </div>
                                                    <div class="panel-body tabs-menu-body border-0 pt-0">
                                                        <div class="tab-content">
                                                            <div class="tab-pane active" id="tab5">
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered text-nowrap border-bottom text-primary " style="width: 100% !important;"  id="table_datatable"
                                                                        class="table table-bordered text-nowrap mb-0">
                                                                        <thead class="border-top text-center">
                                                                            <tr>
                                                                                <th class="bg-transparent border-bottom-0"
                                                                                    style="width: 5%;">#</th>
                                                                                <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Order ID</th>
                                                                             
                                                                                <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Customer Name</th>
                                                                                <th class="bg-transparent border-bottom-0">
                                                                                   Mobile</th>
                                                                                <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Amount</th>
                                                                                           <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Status</th>
                                                                                          <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Action</th>
                                                                                    
                                                                            </tr>
                                                                        </thead>
                                                               
                                                                    </table>
                                                                </div>
                                                            </div>
                                                           
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                         {{-- #########################Token Track Modal################################### --}}
                        <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Token Tracking</h5>
                                    <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                </div>
                                <div class="modal-body"  id="view_modal_body">
                                    
                                </div>
                                <div class="modal-footer">
                                    <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- #########################End Of Token Track Modal############################ --}}
                     {{-- #########################Order View Modal################################### --}}
                                    <div class="modal fade" id="extralargemodal" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-xl" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Order Details</h5>
                                    <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                </div>
                                <div class="modal-body" id="order_view_modal_body">
                                 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- #########################End Of Token Track Modal############################ --}}

            {{-- ##################################CANCEL MODAL######################## --}}
               <div class="modal  fade" id="cancelmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Cancel Order</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                     Do you want to cancel the Order <span style="font-weight: bold"   id="modal_order_number"></span> ...?
                                     <input placeholder="Reason (Optional)" type="text" class="form-control" id="cancel_reason">
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                        <button onclick="cancel_order()" class="btn btn-danger">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
            {{-- #############################END OF CANCEL MODAL######################## --}}

                <div class="modal  fade" id="smallmodal_order_tracking" tabindex="-1" role="dialog">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Order Tracking</h5>
                                <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                            </div>
                            <div class="modal-body" id="order_tracking_modal_div">
                              <select onchange="change_traking_status()" id="tracking_dropdown" class="form-control">
                                  <option>--Select Tracking Staus--</option>
                              </select>
                            </div>
                            <div class="modal-footer">
                             <button class="btn custom-btn-success tracking_status_change_btn" data-bs-dismiss="modal">Save Changes</button>
                                <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div> 


            {{-- #########################################print Section ############################## --}}
            <div id="Print_invoice" class="d-none"></div> <!-- print bill data -->
            {{-- ###########################################End Of Print Section######################### --}}
                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var base_url='{{url('/admin')}}';
    var print_url  = '{{url('')}}/admin/order_print';
    var datatable_name="table_datatable";
$('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,4],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,5,6]},
           {"className": "text-left", "targets": [4]},
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/order_view_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "o_id", "name": "o_id"},
                  {"data": "order_unique_id", "name": "order_unique_id"},
                  {"data": "shp_u_name", "name": "shp_u_name"},
                  {"data": "shp_u_contact", "name": "shp_u_contact"},
                  {"data": "o_grand_total", "name": "o_grand_total"},
                  {"data": "o_tracking_status", "name": "o_tracking_status"}, 
                  {"data": "o_id", "name": "o_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var tracking_status = aData.o_tracking_status;
    switch (tracking_status) { 
	case "Cancelled": 
		var status="Cancelled";
        var color="red";
		break;
	case "approved": 
		var status="Approved";
        var color="blue";
		break;
	
	default:
	
		 var status=tracking_status;
         var color="green";
}
            //Pad Not Paid Status
            
             if(aData.o_payment_status=="Paid"){
                 $(nRow).css('background','#dcf0c8');
            }
            else{
                 $(nRow).css('background','#f8d7dd');
            }
            
            

            //Tracking Status
            var status='<span style="color:'+color+';font-weight: bold;">'+status+'</span>';
            //
            


            //View 
            var action=action+'&nbsp;<button title="Track"  onclick=View('+aData.o_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class=" fa fa-eye"> </span></button>'
            
            //Track 
            
            if(!aData.o_tracking_number && aData.o_cancel_status==0){
                    var action=action+'&nbsp;<button title="Track" title="Track Order"  onclick=tracking('+aData.o_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class=" fa fa-truck"> </span></button>'
            }
            //Excel Dwnld
            var action=action+'&nbsp;<a  target="_blank" title="Download Excel" class="btn custom-btn-success btn-sm" href="/admin/order_export/'+aData.order_unique_id+'" ><span class="fa fa-file-excel-o"> </span></a>'
        
            //Cancel Section
            if(aData.o_cancel_status!=1){
            var action=action+'&nbsp;<button title="Cancel" title="cancel" onclick="cancel('+aData.o_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fa fa-ban">  </span></button>';
            }
       
        
            // if(aData.o_invoiced==1 && aData.o_cancel_status==0 && aData.o_payment_status=="Paid"){
            // var action=action+'&nbsp;<button title="View"   id="bEdit" type="button" class="btn btn-sm btn-success">Approved</button>';
            // }
            // else{
            // if(aData.o_cancel_status==0 && aData.o_payment_status=="Paid"){
            // var action=action+'&nbsp;<button title="Invoice" title="Approve" onclick=approve('+aData.o_id+') id="bEdit" type="button" class="btn btn-sm btn-primary"><span class="fa fa-check"> Approve</span></button>';
            // }
            // }
     
            
            $('td:eq(0)', nRow).html(index);
            $('td:eq(4)', nRow).html(aData.o_grand_total).css('text-align','right');
            $('td:eq(5)', nRow).html(status);
            $('td:eq(6)', nRow).html(action);
 }
 });



 function View(id){
           $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/view_order_details',
                        success: function (result) {
                            $('#order_view_modal_body').html(result); 
                            $('#extralargemodal').modal('show');
                        }
                    })

 }
 //Create Invoice Section 
 function approve(id){
        $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/approve_order',
                        success: function (result) {
                         $('#extralargemodal').modal('hide');   
                        toast(result,datatable_name);
                        }
                })
 }

 function print_invoice(id){
var src = print_url+'?id='+id;
$('#Print_invoice').html('<iframe src="'+src+'"></iframe>');
 }






function cancel(id){  
$('#order_id').val(id);
$('#modal_order_number').text();
$('#cancelmodal').modal('show');

}
function cancel_order(){
        var order_id=$('#order_id').val();
        var reason=$('#cancel_reason').val();
          $.ajax({
                        type: 'POST',
                        data: {"_token": token,"order_id": order_id,"reason":reason},
                        url: '/admin/cancel_order',
                        success: function (result) {
                            toast(result,datatable_name);
                            if(result.status==0){
                            $('#cancelmodal').modal('hide');
                            }
                        }
                    })
}




// function track(id){
//             $.ajax({
//                         type: 'POST',
//                         data: {"_token": token,"token_id": id},
//                         url: '/order_tracking',
//                         success: function (result) {
//                                 $('#scrollingmodal').modal('show'); 
//                                 $('#view_modal_body').html(result); 
//                         }
//                     })
// }


  function tracking(id){
      $('#tracking_dropdown').html('');
      $.ajax({
        type: 'POST',
         data: {"_token": token,"id": id},
         url: '/admin/get_tracking',
         success: function (result) {
          $('#order_id').val(id);
          $('#order_tracking_modal_div').html(result);     
          $('#smallmodal_order_tracking').modal('show');    
          
             }
         })
      
    }

$('#order_track_filter').change(function(){
    var tracking_id=$('#order_track_filter').val();
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"tracking_id": tracking_id},
                        url: '/admin/filter_order_tracking',
                        success: function (result) {
                        $("#table_datatable").DataTable().ajax.reload(null, false);
                        }
                    })
});

  $('.tracking_status_change_btn').click(function(){
        var id= $('#order_id').val();
      var tracking_status=$('#tracking_dropdown').val();
      $.ajax({
        type: 'POST',
         data: {"_token": token,"id": id,"tracking_status":tracking_status},
         url: '/admin/change_tracking',
         success: function (result) {
        toast(result,datatable_name);
         }
      });

    });
    



        </script>
        @endsection