@extends('front.user.layout')
@section('title', 'Orders')
@section('content')
    <div class="cartSec">
        <div class="container-fluid">
            <div class="main-padingbdy">
                <div class="contentBox">
                    <div class="contentHeader justify-content-xl-between justify-content-center flex-wrap">
                        <h2>order</h2>
                        <form method="get" action="{{ route('user.orders') }}">
                            <div class="contentHeaderBtn">
                                <h3>From</h3>
                                <input type="date" name="start_date" class="btn btn-light"
                                       value="{{request()->get('start_date')}}">

                                <h3>To</h3>
                                <input type="date" name="end_date" class="btn btn-light"
                                       value="{{request()->get('end_date')}}">
                                <button type="submit" class="btnStyle">Filter</button>
                            </div>
                        </form>
                    </div>

                    <div class="table-responsive ">
                        <table class="table order-table">
                            <thead>
                            <tr>
                                <th>Order No</th>
                                <th>Image</th>
                                <th>Products</th>
                                <th>Status</th>
                                <th>Price</th>
                                <th>Actions</th>
                                <th>Details</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($orders) > 0)
                                @forelse($orders as $order)
                                    <tr >
                                        <td>#{{$order->order_no}}</td>
                                        <td class="img">
                                            <img src="{{@productImage($order->orderItems[0]->product->product_image??'')}}"
                                                 alt="" class="img-fluid">
                                        </td>
                                        <td class="name">
                                            @if(count($order->orderItems) > 1)
                                                <h3>{{count($order->orderItems) . ' Products'}}</h3>
                                            @else
                                                <h3>{{$order->orderItems[0]->product->product_name??''}}</h3>
                                                <span>{{$order->orderItems[0]->product->category->name??''}}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn statusCell">
                                                @if($order->order_status == 'pending')
                                                    <span class="btn-secondary"> Pending </span>
                                                @elseif($order->order_status == 'in_process')
                                                    <span class="btn-primary">In Process </span>
                                                @elseif($order->order_status == 'delivered')
                                                    <span class="btn-success">Delivered </span>
                                                @elseif($order->order_status == 'cancelled')
                                                    <span class="btn-danger">Cancelled</span>
                                                @elseif($order->order_status == 'refund')
                                                    <span class="btn-warning">Refunded</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="price">
                                            <span>${{$order->total_amount}}</span>
                                        </td>
                                        <td>
                                            <div class="content">
                                                <a href="javascript:void(0);" class="reorder buttonCart"
                                                   data-toggle="modal"
                                                   data-target="#reorderModal"
                                                   data-id="{{$order->orderItems[0]->product->id??''}}">Re Order</a>
                                                <a href="javascript:void(0);" class="refund"
                                                   data-order_id="{{$order->id}}">Refund</a>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="viewBtn">
                                                <button class="orderDetailBtn" data-order_id="{{$order->id}}">View
                                                </button>
                                                @if (env('APP_ENV') == "production")
                                                    <a class="btn btn-secondary"
                                                       href="{{($order->onfleetTask != null) ? $order->onfleetTask->tracking_url : '#'}}">Track</a>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                @endforelse
                            @else
                                <div class="cell">
                                    <p>Your Order list is empty</p>
                                </div>
                            @endif


                            </tbody>
                        </table>
                        {{$orders->links('vendor.pagination.user-dashboard')}}
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reorderModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2></h2>
                    <p>Product Added in Cart, Please proceed with it.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal">OK</button>
                    <a href="{{url('cart')}}" class="themeBtn">View Cart</a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2>Are you sure?</h2>
                    <p>You will be contacted soon, your request will be denied if the order is delivered</p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal">Cancel</button>
                    <button type="button" id="refundOrder">Confirm</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="invoice" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body" id="invoiceContent">

                </div>
                <div class="modal-footer">
                    <button type="button" onclick="window.print();">Download</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            var order_id;
            $('.orderDetailBtn').on('click', function () {
                order_id = $(this).data('order_id');

                $.ajax({
                    url: "{{ url('getOrderDetail') }}/" + order_id,
                    method: 'GET',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (res) {
                        $('#invoiceContent').empty().append(res.data);
                        $('#invoice').modal('show');
                    }
                })
            });
            $(".refund").on('click', function () {
                order_id = $(this).data('order_id');
                $("#refundModal").modal('show');
            });
            $("#refundOrder").on('click', function () {
                var $this = $(this);
                $.ajax({
                    url: "{{url('order/refund')}}/" + order_id,
                    method: 'POST',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (res) {
                        $("#refundModal").modal('hide');
                        if (res.status == true) {
                            toastr.success(res.msg)
                            $this.parents('.cell').find('.statusCell').empty().append('<span class="btn-warning">Refunded</span>')
                        } else {
                            toastr.error(res.msg)
                        }
                    }
                })
            });
            //
            // $(".reorder").on('click', function (){
            //     var ids = $(this).data('ids');
            //     console.log();
            // });

        });

    </script>

@endsection