@extends('layouts.backend.app')
      @section('content')

      <div class="main-panel">
        <div class="content-wrapper">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Order  List</h4>
              <div class="row">
                <div class="col-12">

                    

                  <div class="table-responsive">
                    <table id="order-listing" class="table">
                      <thead>
                        <tr>
                        <table id="ordersTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>User Name</th>
                                    <th>Total Price</th>
                                    <th>Shipping</th>
                                    <th>Status</th>
                                    <th>Shipping Status</th>
                                    <th>Tracking</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>




<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>

$(function() {
    let table = $('#ordersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('userOrdershow.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'user_name', name: 'user.name'},
            {data: 'total_price', name: 'total_price', orderable:false, searchable:false},
            {data: 'shipping', name: 'shipping', orderable:false, searchable:false},
            {data: 'status', name: 'status', orderable:false, searchable:false},
            {data: 'shipping_status', name: 'shipping_status', orderable:false, searchable:false},
            {data: 'tracking', name: 'tracking', orderable:false, searchable:false},
            {data: 'actions', name: 'actions', orderable:false, searchable:false},
        ]
    });

    // Shipping Status Update
    $(document).on('change','.statusSelect',function(){
        let id = $(this).data('id');
        let status = $(this).val();
        $.get({
            url: "{{ route('orders.show.shipping-status', ':id') }}".replace(':id', id),
            data: {_token:'{{ csrf_token() }}', status:status},
            success: function(){
                Swal.fire({icon:'success',title:'Status Updated',timer:1000,showConfirmButton:false});
            },
            error: function(){
                Swal.fire({icon:'error',title:'Failed'});
            }
        });
    });

    // Track Button
    $(document).on('click','.trackBtn',function(){
        let id = $(this).data('id');
        $.get("{{ route('orders.track', ':id') }}".replace(':id', id), function(res){
            if(res.success){
                Swal.fire({
                    title: 'Tracking Info',
                    html: '<pre style="text-align:left;white-space:pre-wrap">'+JSON.stringify(res.data,null,2)+'</pre>',
                    width: 700
                });
            } else {
                Swal.fire({icon:'error',title: res.message || 'Failed'});
            }
        });
    });
});

</script>
@endsection