@extends('layouts.app')


@section('content')
    @if(session()->has('success'))
        <div class="alert alert-success">
            {!! session()->get('success') !!}
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <div class="mb-4 clearfix">
                <h4 class="float-left">Orders</h4>
                <div class="float-right" data-link="{{ route('orders.sync') }}" onclick="syncOrders(this)"><button class="btn btn-primary btn-sm"><i class="fas fa-sync mr-2"></i>Add To Picking List</button></div>
            </div>
            @if(count($orders) > 0)
                <div class="table-responsive">
                    <table class="table">
                        <thead class=" text-primary">
                        <th>Order #</th>
                        <th>Order Name</th>
                        <th>Shipping Method</th>
                        <th>Purchased on</th>
                        <th class="text-right">Action</th>
                        </thead>
                        <tbody>
                        @for($i=0; $i<count($orders); $i++)
                            <tr>
                                <td>{{ $orders[$i]->order_id }}</td>
                                <td>{{ $orders[$i]->order_name }}</td>
                                <td>{{ $orders[$i]->shipping_method }}</td>
                                <td>{{ $orders[$i]->created_at }}</td>
                                <td class="d-flex" @if($i == 0) style="border-top: 0px; " @endif>
                                    <button class="btn btn-link ml-auto" onclick="goToEdit(this)" data-link="{{route('orders.show', $orders[$i]->id)}}"><i class="far fa-eye"></i></button>
                                </td>
                            </tr>
                        @endfor
                        </tbody>
                    </table>
                </div>
            @else
                <h6><i class="fas fa-exclamation-circle"></i> No record found</h6>
            @endif
            {{ $orders->links() }}
        </div>
    </div>
@endsection

@section('script') 
<script>
    function syncOrders(elm){
        $('.overlay').show();
        $.ajax({
            type:'GET',
            url: $(elm).data('link'),
            success:function(data) {
                if(data == 200){
                    $('.overlay').hide();
                    location.reload(true);
                }
            }
        });
    }
</script>
@endsection