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

    <main>


        <!-- ---------- Start breadcrumb ----------- -->
    @include('web.pages.components.header.header')


    <!-- ---------- profile page ----------- -->
        <section class="profile-pg pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        @include('web.pages.profile.layout.sidebar')
                    </div>
                    <div class="col-lg-9">
                        <div class="orders-pg">
                            <div class="orders-content">
                                <h3 class="mb-3"> {{__('web.your_orders')}} </h3>
                                <div class="filter">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" onclick="showOrder(this)" data-id="valid" 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.orders')}}</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="pills-tab2-tab" onclick="showOrder(this)" data-id="canceled" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">{{__('web.canceled_orders')}}</button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6">
                                            <form id="form" class="form justify-content-lg-end">
                                                <input type="hidden" id="showOrder" name="showOrder" value="valid">
                                                <div class="search-group">
                                                    <button class="icon-btn"> <i class="fal fa-search"></i> </button>
                                                    <input type="text" name="search" onkeyup="calculateOrder()" class="form-control" placeholder="{{__('web.search')}}...">
                                                </div>
                                                <div class="select-group">
                                                    <select onchange="calculateOrder()" name="showLatest" id="" class="form-select form-control">
                                                        <option value="3"> {{__('web.last_3_months')}} </option>
                                                        <option value="6"> {{__('web.last_6_months')}} </option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div id="orders"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        @include('web.layouts.footer_banner')



    </main>

    @include('web.pages.components.rate_model')

@endsection
@section('inject_js')
    <script>
        let url_calculate = "{{route('web.order.fetch')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/order.js"></script>
@endsection