@extends('site.layout.layout')

@section('title',__('Store orders'))

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Store orders')}}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4">
            <div class="col-sm-4 col-md-3 mb-3">
                <nav class="setting_nav d-flex d-sm-block">
                    <a href="{{ route('Site.MyOrders') }}">
                        <img src="{{ asset('site/img/light/3d-cube-scan.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/3d-cube-scan.png') }}" data-dark="{{ asset('site/img/dark/3d-cube-scan.png') }}" alt=""> {{ __('My Orders') }}
                    </a>
                    <a href="{{ route('Site.SellMyProducts') }}" class="active">
                        <img src="{{ asset('site/img/buy-crypto.png') }}" alt=""> {{ __('Sell My Products')}}
                    </a>
                    <a href="{{ route('Site.Profile') }}">
                        <img src="{{ asset('site/img/light/profile-circle.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/profile-circle.png') }}" data-dark="{{ asset('site/img/dark/profile-circle.png') }}" alt=""> {{ __('Profile') }}
                    </a>
                    <a href="{{ route('Site.favorites.index') }}">
                        <img src="{{ asset('site/img/light/heart.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/heart.png') }}" data-dark="{{ asset('site/img/dark/heart.png') }}" alt=""> {{ __('Favorites') }}
                    </a>
                    <a href="{{ route('Site.addresses.index') }}">
                        <img src="{{ asset('site/img/light/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/location.png') }}" data-dark="{{ asset('site/img/dark/location.png') }}" alt=""> {{ __('Addresses') }}
                    </a>
                </nav>
            </div>
            <div class="col-sm-8 col-md-9">
                <section class="title_sec d-sm-flex justify-content-between align-items-center mb-4">
                    <h3 class="section_title mb-2 mb-sm-0"> {{ __('Orders') }}</h3>
                    <!-- <a href="{{ route('Site.AddUsedProduct') }}" class="primaryBgBtn" target="_blank">
                        <i class="far fa-square-plus mx-1"></i> {{ __('Add a used product') }}
                    </a> -->
                </section>
                <section class="mb-5">
                    <ul class="nav nav-tabs justify-content-between" id="orderTabs">
                        @php
                            $statuses = [
                                'all' => __('All'),
                                'pending' => __('Pending'),
                                'ready_for_shipping' => __('Ready for shipping'),
                                'shipping_in_progress' => __('Shipping in progress'),
                                'shipped' => __('Shipped')
                            ];
                        @endphp
                        @foreach($statuses as $key => $label)
                            <li class="nav-item">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        data-status="{{ $key }}"
                                        data-bs-toggle="tab"
                                        data-bs-target="#tab_{{ $key }}">
                                    {{ $label }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content py-4 px-3">
                        @foreach($statuses as $key => $label)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab_{{ $key }}">
                                <div class="filter_details d-flex justify-content-between mb-3">
                                    <p id="orderCount_{{ $key }}"></p>
                                    <div class="d-flex align-items-center">
                                        <label class="label mx-1">{{ __('Sort') }}:</label>
                                        <select class="sort-select form-select" data-status="{{ $key }}">
                                            <option value="desc">{{ __('Latest') }}</option>
                                            <option value="asc">{{ __('Oldest') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="orderList" id="orderList_{{ $key }}"></div>
                                <div class="loadMoreContainer text-center mt-4" id="loadMoreContainer_{{ $key }}"></div>
                            </div>
                        @endforeach
                    </div>
                </section>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        $('.sort-select').select2({
            allowClear: false,
            minimumResultsForSearch: Infinity,
            dir: "{{ app()->getLocale() == 'ar' ? 'ltr' : 'rtl' }}",
            width: '150px'
        });

        let orderFilters = {};

        function fetchOrders(status, page = 1, append = false) {
            const sort = $(`.sort-select[data-status="${status}"]`).val() || 'desc';

            $.ajax({
                url: "{{ route('Site.StoreOrders') }}",
                type: 'GET',
                data: {
                    order_product_status: status === 'all' ? null : status,
                    sort: sort,
                    page: page
                },
                beforeSend: function () {
                    if (!append) {
                        $(`#orderList_${status}`).html('<div class="text-center my-3">{{ __("Loading...") }}</div>');
                        $(`#loadMoreContainer_${status}`).html('');
                    }
                },
                success: function (res) {
                    if (append) {
                        $(`#orderList_${status}`).append(res.html);
                    } else {
                        $(`#orderList_${status}`).html(res.html);
                    }

                    $(`#orderCount_${status}`).text(`{{ __('Total Orders') }}: ${res.total}`);

                    if (res.hasMorePages) {
                        $(`#loadMoreContainer_${status}`).html(`
                            <button class="primaryBorderBtn loadMoreBtn" 
                                    data-page="${page + 1}" 
                                    data-status="${status}" 
                                    data-url="${res.nextPageUrl}">
                                {{ __('Show more') }}
                            </button>
                        `);
                    } else {
                        $(`#loadMoreContainer_${status}`).empty();
                    }
                },
                error: function () {
                    toastr.error('{{ __("Something went wrong") }}');
                }
            });
        }

        // Initial load
        $(document).ready(function () {
            $('#orderTabs button.active').each(function () {
                const status = $(this).data('status');
                fetchOrders(status);
            });
        });

        // Tab click
        $('#orderTabs button').on('click', function () {
            const status = $(this).data('status');
            fetchOrders(status);
        });

        // Sort change
        $('.sort-select').on('change', function () {
            const status = $(this).data('status');
            fetchOrders(status);
        });

        // Load more
        $(document).on('click', '.loadMoreBtn', function () {
            const button = $(this);
            const status = button.data('status');
            const page = button.data('page');

            button.prop('disabled', true).text(`{{ __('Loading...') }}`);
            fetchOrders(status, page, true);
        });
    </script>
@endpush