@extends('layouts.app')

@section('content')

<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-shopping-basket mr-2"></i>Orders</b></h3>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="card text-white bg-primary mb-3 m-2" style="width: 14rem; height: 5rem;">
                <div class="card-body">
                    <h3 class="card-title mb-2"><b>{{ $pending_count }}</b><br><small class="ml-4">Pending</small></h3> 
                </div>
            </div>
            <div class="card text-white bg-success mb-3 m-2" style="width: 14rem; height: 5rem;">
                <div class="card-body">
                    <h3 class="card-title mb-2"><b>{{ $processing_count }}</b><br><small class="ml-4">In Process</small></h3>
                </div>
            </div>
            <div class="card text-white bg-info mb-3 m-2" style="width: 14rem; height: 5rem;">
                <div class="card-body">
                    <h3 class="card-title mb-2"><b>{{ $completed_count }}</b><br><small class="ml-4">Shipped</small></h3>
                </div>
            </div>
            <div class="card text-white bg-danger mb-3 m-2" style="width: 14rem; height: 5rem;">
                <div class="card-body">
                    <h3 class="card-title mb-2"><b>{{ $cancelled_count }}</b><br><small class="ml-4">Cancelled</small></h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form action="{{ route('orders.index') }}" method="GET">
            <div class="form-group">
                <input type="text" name="order" class="form-control scan-control" value="{{ Request::has('order')? Request::input('order') : '' }}" placeholder="Search Order">
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
            @if(Request::has('order'))
                <a href="{{ route('orders.index') }}" class="btn btn-primary">Clear</a>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table id="datatable" class="datatable table table-hover table-center mb-0">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Grand Total</th>
                        <th>Courier</th>
                        <th>Status</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td><a href="{{ URL::to("orders/".$order->order_name) }}">{{ $order->order_name }}</a></td>
                        <td>{{ $order->subtotal }}</td>
                        <td>{{ $order->shipping_courier }}</td>
                        <td>{{ $order->status }}</td>
                                                <td>{{ $age }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $orders->links() }}
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    // var table = $('#datatable').DataTable({
    //     processing: true,
    //     serverSide: true,
    //     ajax: "{{ URL::to('orders') }}",
    //     columns: [
    //         {data: 'order_number', name: 'order_number'},
    //         {data: 'subtotal', name: 'subtotal'},
    //         {data: 'shipping_courier', name: 'shipping_courier'},
    //         {data: 'status', name: 'status'},
    //         {data: 'age', name: 'age'},
    //     ]
    // });
</script>
@endsection