@extends('layouts.master')
@section('title', 'All Orders')

@section('content')
    <!-- ========================== Page Content ==================================== -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">All Orders</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active">All Orders</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <table id="datatable-buttons" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th style="width: 20px;">
                                            SL
                                        </th>
                                        <th class="align-middle">Placed By</th>
                                        <th class="align-middle">Order Number</th>
                                        <th class="align-middle">Items Qty</th>
                                        <th class="align-middle">Total Price (USD)</th>
                                        <th class="align-middle">Payment Method</th>
                                        <th class="align-middle">Order Date</th>
                                        <th class="align-middle">Action</th>
                                    </tr>
                                </thead>


                                <tbody>
                                @foreach($orders as $key => $order)

                                    
                                    <tr>
                                        <td>
                                            {{ $key + 1 }}
                                        </td>

                                        <td>
                                            {{ $ship['name'] }}
                                        </td>
                                        
                                        <td>
                                            {{ $order->order_number }}
                                        </td>

                                        <td>
                                            {{ $order->items_count }}
                                        </td>

                                        <td>
                                            $ {{ $order->grand_total }}
                                        </td>

                                        <td>
                                            {{ $order->payment_method }}
                                        </td>

                                        <td>
                                            {{ $order->created_at->format('F d, Y') }}
                                        </td>

                                        <td>
                                            <a class="btn btn-dark btn-sm" href="{{ route('invoice.details', $order->id) }}"><i class="bx bx-map-pin me-1" style="position: relative; top: 1px;"></i> View Details <i class="bx bxs-right-arrow bx-fade-right" style="position: relative; top: 1.3px;"></i></a>    
                                        </td>

                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> <!-- end col -->
            </div>

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->                
                
@endsection