@extends('layouts.user-dashboard-layout')
@section('title') User Orders
@endsection
@section('user-dashboard-content')
<style>
    .card-box-shadow{
        transform: none !important;
    }

    .card-box-shadow:hover{
        transform: none !important;
        box-shadow: none !important;
    }
</style>


    <div class="container">
        <div class="container my-3">
            <div class="container d-flex justify-content-between align-items-center mt-5 mb-3">
                <div class="fs-5"><i class="fa-solid fa-clock-rotate-left"></i> &nbsp;My Orders</div>
                <a class="blue" href="#">View All<i class="fa-solid fa-chevron-right"></i></a>
            </div>
            <hr>
            <div class="card card-box-shadow">

                <div class="card-body shadow-small">
                    <h2>User Orders</h2>
                    <table id="example" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                        <tr>
                            <th>S.N.</th>
                            <th>User Name</th>
                            <th>Total Price</th>
                            <th>Tracking No</th>
                            <th>Order Status</th>
                            <th>Action</th>
                        </tr>
                        </thead>

                        <tbody>
                        @foreach($get_orders as  $order)

                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{$order->user->first_name ? : ''}}</td>
                                <td>{{$order->total_price ? : ''}}</td>
                                <td>{{$order->order_number ? : ''}}</td>
                                <td>
                                            <span class="
                                                @if($order->order_status == 'Pending') badge rounded-pill bg-info
                                                @elseif($order->order_status == 'In-progress') badge rounded-pill bg-primary
                                                  @elseif($order->order_status == 'Complete') badge rounded-pill bg-success
                                                @elseif($order->order_status == 'Decline') badge rounded-pill bg-danger
                                                @endif">
                                                {{ $order->order_status }}
                                                </span>

                                </td>

                                <td>
                                    <a href="{{route('user.order.detail',['id'=>$order->id])}}" class="btn btn-primary">Detail View</a>

                                </td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>

                </div>

                <!-- /.card -->
            </div>

        </div>
    </div>



@endsection

@section('script')

    <script>

        $(document).ready(function () {
            $("table").DataTable({
            });
        });

    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function () {
            $(".click_order_cancel").click(function (e) {
                e.preventDefault();
                var order_id = $(this).data('id');

                $.ajax({
                    url: '{{route('user.orderRefund')}}',
                    type: 'post',
                    data: {order_id: order_id},
                    dataType: "json",
                    success: function (response) {
                        location.reload(true);
                        if (response.hasOwnProperty('unsuccess')) {
                            return toastr.error(response.unsuccess);
                        }
                        if (response.hasOwnProperty('success')) {
                            return toastr.success(response.success);
                        }

                    }
                });
            });

        });
    </script>
@endsection