@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="orders_pg section">
            <div class="container">
                <h2 class="sec_title bb text-center fw-bold mb-5"> {{__('web.my_orders')}}  </h2>
                <div class="col-lg-10 m-auto">
                    <div class="">
                        <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" onclick="showOrder(this)"  data-id="all" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                    {{__('web.all')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" onclick="showOrder(this)" data-id="new" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                    {{__('orders.new')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" onclick="showOrder(this)" data-id="progress" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                                    {{__('orders.progress')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" onclick="showOrder(this)" data-id="shipping" id="pills-tab4-tab" data-bs-toggle="pill" data-bs-target="#pills-tab4" type="button" role="tab" aria-controls="pills-tab4" aria-selected="false">
                                    {{__('orders.shipping')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" onclick="showOrder(this)" data-id="recieved" id="pills-tab5-tab" data-bs-toggle="pill" data-bs-target="#pills-tab5" type="button" role="tab" aria-controls="pills-tab5" aria-selected="false">
                                    {{__('orders.recieved')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" onclick="showOrder(this)" data-id="canceled" id="pills-tab6-tab" data-bs-toggle="pill" data-bs-target="#pills-tab6" type="button" role="tab" aria-controls="pills-tab6" aria-selected="false">
                                    {{__('orders.canceled')}}
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                                <div class="tab-wrapper" id="all">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                                <div class="tab-wrapper" id="new">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                                <div class="tab-wrapper" id="progress">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab4" role="tabpanel" aria-labelledby="pills-tab4-tab">
                                <div class="tab-wrapper" id="shipping">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab5" role="tabpanel" aria-labelledby="pills-tab5-tab">
                                <div class="tab-wrapper" id="recieved">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab6" role="tabpanel" aria-labelledby="pills-tab6-tab">
                                <div class="tab-wrapper" id="canceled">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </main>
@section('inject_js')
    <script>
        let url_fetch_show_order = "{{url(getCurrentLocale().'/order/status')}}";
    </script>
    <script>
        setTimeout(function(){
            $('#pills-tab1-tab').click();
        }, 200);
        function showOrder(elem)
        {
            let status = $(elem).attr('data-id')
            let target = $(elem).attr('data-bs-target')
            $.ajax
            ({
                url : url_fetch_show_order,
                type: 'GET',
                data: 'status='+status,
                success:function(data)
                {
                    $(target).html(data)
                }
            })
        }
    </script>
@endsection
@stop