@extends('admin.layouts.dashboard')
 @section('content')

<div class="container-fluid">

  <div class="row">

        <div class="col-xl-12 col-lg-12">
             <div class="card shadow mb-4">
                                <!-- Card Header - Dropdown -->
                               
                                <div class="card-body">
                                    <div class=" pb-2">
                                     <div class="inner-bg table-responsive">
                    <div class="element-title mb-2">
                      <h4 class="mb-4">Return Request</h4>
                    </div>
                    <table class="cart-table table table-striped table-hover table-bordered" width="100%" id="example">
                      <thead class="table-dark">
                        <tr>
                          <th>User Name</th>
                          <th>Item</th>
                          <th>Quantity</th>
                          <th>Price</th>                                            

                        </tr>
                      </thead>
                      <tbody>
                       
                              
                          <tr>
                          <td>{{ $view_details->userid->name }}</td>
                              <td>{{ $view_details->orderitem->name }}</td>
                              <td>{{ $view_details->orderitem->qty }}</td>
                              <td>{{ $view_details->orderitem->price * $view_details->orderitem->qty}}</td>
                            </tr>
                        
                      </tbody>
                    </table>
                  </div>    
                               
                            </div>
                        </div>
                        <!-- Area -->
                       
                    </div>
</div>
                       
                    </div>

                    <!-- Content Row -->
                </div>

@endsection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script>

<script>

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        "order": [[ 1, "desc" ]], //or asc 
       "columnDefs" : [{"targets":3, "type":"date-eu"}],
        buttons: [
             'excel',
        ]
    } );
  });

</script>