@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop
@section('container')
    <div class="page-content">

        <div class="account account-inner">
            <div class="container">
                <div class="account-menu-open">
                    <button type="button" class="open-account">
                        <span>{{ShowLabelById(216)}}</span>
                        <img src="{{asset('front-assets/img/icons/arrow-down.svg')}}" alt="">
                    </button>
                </div>
                <div class="inner">
                    @include('front.pages.cabinet.menu', ['user' => $user, 'childrenList' => $childrenList])
                    <div class="account-content account-orders">
                        <div class="account-content-head h1" style="color: #FF9FBE">{{ShowLabelById(277)}}</div>
                        <div class="account-active-orders">
                            <h1 class="h2">{{ShowLabelById(214)}}</h1>
                            <div class="list">
                                <ul>
                                    @if($activeOrders->isNotEmpty())
                                        @foreach($activeOrders as $order)
                                    <li>
                                        <div class="account-orders-inner-new">
                                           {{-- <div class="account-orders-left">
                                                <div class="account-orders-top">
                                                    <div class="h6">{{ShowLabelById(218)}} #{{$order->id}}</div>
                                                    <div class="date">
                                                        {{ $order->created_at->format('d.m.y') }}
                                                    </div>
                                                </div>
                                                <div class="h4">
                                                    <img src="{{ asset('front-assets/img/icons/' . app('App\Http\Controllers\Front\CabinetController')->statusIcon($order->ordersStatus->id)) }}" alt="Status">
                                                    <span>  {{ app()->getLocale() == 'ro' ? $order->ordersStatus->name_ro : $order->ordersStatus->name_ru }}</span>
                                                </div>
                                                <div class="info">{{ $order->ordersUsers->address ?? $order->ordersUsers->shopsId->itemByLang->name}}</div>
                                            </div>
                                            <div class="account-orders-right">
                                                <div class="account-orders-price">
                                                    <div class="h6">{{ShowLabelById(57)}}:</div>
                                                    <div class="h3">{{ number_format($order->ordersData->total_price, 2, ',', ' ') }}
                                                        {{ShowLabelById(227)}}</div>
                                                </div>
                                                <div class="account-orders-points">+{{ $order->ordersData->gift_card_sum ?? 0 }}
                                                    {{ShowLabelById(217)}}</div>
                                            </div>--}}
                                            <div class="account-orders-mobile">
                                                <div class="account-orders-mobile-details">
                                                    <button type="button" class="account-order-options open-modal" data-id="modal-orders-{{ $order->id }}">
                                                        <span>{{ShowLabelById(278)}} </span>
                                                        <img src="{{asset('front-assets/img/icons/dots-three-outline-rose.svg')}}" alt="">
                                                    </button>
                                                </div>
                                                <div class="date"> {{ $order->created_at->format('d.m.y') }}</div>
                                                <div class="account-orders-mobile-row account-orders-mobile-order">
                                                    <span class="account-orders-mobile-title">{{ShowLabelById(279)}}</span>
                                                    <span class="account-orders-mobile-content">#{{$order->id}} </span>
                                                </div>
                                                <div class="account-orders-mobile-row account-orders-mobile-status">
                                                    <span class="account-orders-mobile-title">{{ShowLabelById(218)}}</span>
                                                    <span class="account-orders-mobile-content">
                                                          <img src="{{ asset('front-assets/img/icons/' . app('App\Http\Controllers\Front\CabinetController')->statusIcon($order->ordersStatus->id)) }}" alt="Status">
                                                        <span>  {{ app()->getLocale() == 'ro' ? $order->ordersStatus->name_ro : $order->ordersStatus->name_ru }}</span>
                                                    </span>
                                                </div>
                                                <div class="account-orders-mobile-row account-orders-mobile-sum">
                                                    <span class="account-orders-mobile-title">{{ShowLabelById(57)}}</span>
                                                    <span class="account-orders-mobile-content">{{ number_format($order->ordersData->total_price, 2, ',', ' ') }} {{ShowLabelById(10)}}</span>
                                                </div>
                                                <div class="account-orders-mobile-row account-orders-mobile-bonuses">
                                                    <span class="account-orders-mobile-title">{{ShowLabelById(280)}}</span>
                                                    <span class="account-orders-mobile-content">
                                                        <span>+{{ $order->ordersData->gift_card_sum ?? 0 }} {{ShowLabelById(217)}}</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="account-orders-bottom">
                                                <div class="products">
                                                    @if($order->basket->count() < 10)
                                                    @foreach($order->basket as $item)
                                                        <a href="{{ route('product', $item->goodsItemId->alias) }}">
                                                            @if($item->oImage)
                                                                <img src="{{ asset('/upfiles/goods-items/' . $item->oImage->img) }}" alt="{{ $item->goodsItemId->itemByLang->name ?? 'Товар' }}">
                                                            @else
                                                                <img src="{{asset('front-assets/img/no-image-news.png')}}" alt="no-image-news">
                                                            @endif
                                                    </a>
                                                    @endforeach
                                                    @else
                                                        @foreach($order->basket->take(9) as $item)
                                                            <a href="{{ route('product', $item->goodsItemId->alias) }}">
                                                                @if($item->oImage)
                                                                    <img src="{{ asset('/upfiles/goods-items/' . $item->oImage->img) }}" alt="{{ $item->goodsItemId->itemByLang->name ?? 'Товар' }}">
                                                                @else
                                                                    <img src="{{asset('front-assets/img/no-image-news.png')}}" alt="no-image-news">
                                                                @endif
                                                            </a>
                                                        @endforeach
                                                        <a class="account-orders-more">
                                                            @if($item->oImage)
                                                                <img src="{{ asset('/upfiles/goods-items/' . $item->oImage->img) }}" alt="{{ $item->goodsItemId->itemByLang->name ?? 'Товар' }}">
                                                            @else
                                                                <img src="{{asset('front-assets/img/no-image-news.png')}}" alt="no-image-news">
                                                            @endif
                                                            <span>+{{$order->basket->count()-9}}</span>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    {{--    <div class="account-orders-btn">
                                          --}}{{--  <form action="{{ route('order.repeat', ['orderId' => $order->id]) }}" method="POST">
                                                @csrf
                                            <button type="submit" class="account-order-repeat" --}}{{----}}{{--data-id="modal-orders-{{ $order->id }}"--}}{{----}}{{-->
                                                <span>{{ShowLabelById(234)}}</span>
                                                <img src="{{asset('front-assets/img/icons/arrow-counter-clockwise.svg')}}" alt="arrow-counter-clockwise">
                                            </button>
                                            </form>--}}{{--
                                            <button type="button" class="account-order-options open-modal" data-id="modal-orders-{{ $order->id }}">
                                                <img src="{{asset('front-assets/img/icons/dots-three-outline-rose.svg')}}" alt="">
                                            </button>
                                        </div>--}}
                                    </li>
                                        @endforeach
                                    @else
                                        {{ShowLabelById(205)}}
                                    @endif

                                </ul>
                            </div>
                        </div>
                        @if($activeOrders->isNotEmpty())
                            @foreach($activeOrders as $order)
                                @include('front.pages.cabinet.modals.order', ['order' => $order, 'user' => $user])
                            @endforeach
                        @endif
                        @if($completedOrders->isNotEmpty())
                            <div class="account-completed-orders">
                                <h2>{{ShowLabelById(229)}}</h2>

                                <div class="list">
                                    <ul id="completed-orders-container">
                                        @include('front.pages.cabinet.components.completed_orders_items', [
                                            'orders' => $completedOrders, 'user' => $user
                                        ])
                                    </ul>
                                </div>

                                @if($completedOrders->hasMorePages())
                                    <div class="account-reviews-link">
                                        <a href="#"
                                           id="load-more-orders"
                                           data-page="2">
                                            <span>{{ShowLabelById(274)}}</span>
                                            <img src="{{asset('front-assets/img/icons/arrow-down-blue.svg')}}" alt="">
                                        </a>
                                    </div>
                                @endif

                            </div>
                            @foreach($completedOrders as $order)
                                @include('front.pages.cabinet.modals.order_completed', ['order' => $order, 'user' => $user])
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop
@push('other-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if(session('toast'))
            Notiflix.Notify.warning("{{ session('toast') }}");
            @endif
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const button = document.getElementById('load-more-orders');

            if (!button) return;

            button.addEventListener('click', function (e) {
                e.preventDefault();

                let page = this.getAttribute('data-page');

                fetch("{{ route('load.more.completed.orders') }}?page=" + page)
                    .then(response => response.json())
                    .then(data => {

                        document
                            .getElementById('completed-orders-container')
                            .insertAdjacentHTML('beforeend', data.html);

                        document
                            .body
                            .insertAdjacentHTML('beforeend', data.modals);

                        if (data.hasMore) {
                            button.setAttribute('data-page', parseInt(page) + 1);
                        } else {
                            button.closest('.account-reviews-link').remove();
                        }
                    });
            });

        });
    </script>
@endpush