@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="info-cont purchased-cont">
                    <div class="sm:hidden">
                        <div class="form-wrapper bg-gray-light">
                            <select class="form-style bg-transparent" name="selectName" onchange="location = this.value;">
                                <option value="{{ mwz_route('frontend.m.info') }}">@lang('frontend.my_account')</option>
                                <option value="{{ mwz_route('frontend.m.repassword') }}">@lang('frontend.member_password')</option>
                                <option selected value="#">@lang('frontend.member_order_list')</option>
                            </select>
                        </div>
                    </div>
                    <div class="portal-switcher switcher-member">
                        <h2 class="title-text uppercase unactives">@lang('frontend.my_account')
                            <a href="{{ mwz_route('frontend.m.info') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_password')
                            <a href="{{ mwz_route('frontend.m.repassword') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase">@lang('frontend.member_order_list')</h2>
                    </div>
                    <div class="row mt-4 pb-2 justify-center mx-0">
                        <div class="col-12">
                            <div class="mmb-pchlst-container dmpurcst">
                                <div class="mmb-wrpp">
                                    <div>
                                        <div class="grid grid-cols-4 w-full px-2">
                                            <div class="pch-col-1 ">@lang('frontend.frnd_59')</div>
                                            <div class="pch-col-2 ">@lang('frontend.purchased_date')</div>
                                            <div class="pch-col-5 ">@lang('frontend.frnd_68')</div>
                                            <div class="pch-col-5 ">@lang('frontend.frnd_69')</div>
                                        </div>
                                    </div>
                                    @if (!empty($Order))
                                        @foreach ($Order as $order)
                                            <div class="mmb-pchlst-row">
                                                <div class="mmb-pchlst-col ">
                                                    <div class="mmb-pchlst-numb">
                                                        <div class="nmb-ico">
                                                            <img src="{{ Module::asset('frontend:img/_default_img/ico-listbox.svg') }}"
                                                                alt="">
                                                        </div>
                                                        <p class="mctnt">{{ $order->order_no ?? '' }}</p>
                                                        <a class="tglk" target="_blank"
                                                            href="{{ mwz_route('frontend.m.purchased-detail', [$order->order_no ?? '']) }}"></a>
                                                    </div>
                                                </div>
                                                <div class="mmb-pchlst-col">
                                                    <p>{{ $order->created_at->format('Y-m-d H:i') ?? '' }}</p>
                                                </div>
                                                <div class="mmb-pchlst-col">
                                                    {{ order_text_status($order->order_status ?? '') }}</div>
                                                <div class="mmb-pchlst-col">{{ $order->shipping_tracking_no ?? '-' }}</div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center py-4">
                        @if ($Order->lastPage() > 1)
                            <ul class="pgntn rounded" role="menubar" aria-label="Pagination">
                                <li><a
                                        href="javascript:change_page({{ $Order->currentPage() }},1,{{ $Order->lastPage() }})">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                                fill="currentColor">
                                                <path fill-rule="evenodd"
                                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </span>
                                    </a>
                                </li>
                                @for ($i = 1; $i <= $Order->lastPage(); $i++)
                                    @if ($Order->lastPage() > 6)
                                        @if ($i == 1 && $Order->currentPage() > 3)
                                            <li class="{{ $i == $Order->currentPage() ? 'current' : '' }}"><a
                                                    href="javascript:change_page({{ $i }})">{{ $i }}</a>
                                            </li>
                                            <li class="skipper"><a href="">...</a></li>
                                        @endif
                                        @if (
                                            $Order->currentPage() - 2 == $i ||
                                                $Order->currentPage() - 1 == $i ||
                                                $Order->currentPage() + 1 == $i ||
                                                $Order->currentPage() + 2 == $i ||
                                                $Order->currentPage() == $i)
                                            <li class="{{ $i == $Order->currentPage() ? 'current' : '' }}"><a
                                                    href="javascript:change_page({{ $i }})">{{ $i }}</a>
                                            </li>
                                        @endif
                                        @if ($Order->lastPage() == $i && $Order->currentPage() < $Order->lastPage() - 2)
                                            <li class="skipper"><a href="">...</a></li>
                                            <li class="{{ $i == $Order->currentPage() ? 'current' : '' }}"><a
                                                    href="javascript:change_page({{ $i }})">{{ $i }}</a>
                                            </li>
                                        @endif
                                    @else
                                        <li class="{{ $i == $Order->currentPage() ? 'current' : '' }}"><a
                                                href="javascript:change_page({{ $i }})">{{ $i }}</a>
                                        </li>
                                    @endif
                                @endfor
                                <li><a
                                        href="javascript:change_page({{ $Order->currentPage() }},2,{{ $Order->lastPage() }})">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                                fill="currentColor">
                                                <path fill-rule="evenodd"
                                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script type="text/javascript">
        function change_page(page, type, last) {
            // next and prev
            if (type == 1) {
                if (page > 1) {
                    page -= 1;
                } else {
                    return false;
                }
            } else if (type == 2) {
                if (page < last) {
                    page += 1;
                } else {
                    return false;
                }
            }

            let url = new URL(document.location.href);
            let result = url.searchParams.get("page");
            let newUrl = '';
            if (result) {
                url.searchParams.set("page", page);
                newUrl = url.href
            } else {
                newUrl = document.location.href + "?page=" + page;
            }
            document.location = newUrl;
        }
    </script>
@endsection