@extends('layouts.super_admin.app')

@section('styles')

@endsection

@section('content')
    <!-- PAGE-HEADER -->
    <div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
        <h1 class="page-title">{{ __('global.active_orders') }}</h1>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">

        <!-- Row -->
        <!-- Container -->
        <div class="card">
            <div class="card-body">
                <div class="container">
                    <ul class="notification">
                        @foreach($activeOrdersArray as $index => $order)
                            <li class="order-item{{ $index >= 5 ? ' d-none' : '' }}">
                                <div class="notification-time">
                                    <span class="date">{{ $order->starts_at_date }}</span>
                                    <span class="time">{{ $order->starts_at_time }}</span>
                                </div>
                                <div class="notification-body">
                                    <div class="media mt-0">
                                        <div class="main-avatar avatar-md offline">
                                            <span class="avatar avatar-md rounded-circle bg-secondary me-3">
                                                @if($order->orderUser)
                                                    <span>{{ substr($order->orderUser->name, 0, 1).substr($order->orderUser->last_name, 0, 1) }}</span>
                                                @else
                                                    <span class="badge bg-danger-transparent">{{ __('global.user_deleted') }}</span>
                                                @endif
                                            </span>
                                        </div>
                                        <div class="media-body ms-3 d-flex">
                                            <div class="me-4">
                                                <a href="#">
                                                    <p class="fs-19 fw-bold mb-2 text-secondary">
                                                        @if($order->orderUser)
                                                            {{ $order->orderUser->name }} {{ $order->orderUser->last_name }}
                                                        @else
                                                            <span class="badge bg-danger-transparent">{{ __('global.user_deleted') }}</span>
                                                        @endif
                                                    </p>
                                                </a>
                                                <p class="fs-15 text-dark fw-bold mb-2">{{ $order->title }}</p>
                                                <p class="mb-1 fs-13 text-dark">{{ __('global.arena') }}: {{ $order->product_title }}</p>
                                                <p class="mb-1 fs-13 text-dark">{{ __('global.players') }}: {{ $order->player_count }}</p>
                                                <p class="mb-1 fs-13 text-dark">{{ __('global.time') }}: {{ $order->start }} - {{ $order->end }}</p>
                                                <p class="mb-3 fs-13 text-dark d-flex align-items-center">{{ __('global.accessories') }}:
                                                    <span class="mx-2">
                                                        <i class="fa fa-remove text-secondary fs-5" data-bs-toggle="tooltip" aria-label="fa fa-check-circle" data-bs-original-title="არა"></i>
                                                    </span>
                                                </p>
                                                <p class="mb-0 fs-16 text-dark d-flex justify-content-start">
                                                    <span>
                                                        {{ __('global.price') }} : {{ $order->transaction }} ₾
                                                    </span>

                                                    <span class="mx-2">
                                                        @if($order->is_paid) 
                                                            - {{ __('global.paid') }} <i class="fa fa-check text-success fs-5 mx-1" data-bs-toggle="tooltip" aria-label="fa fa-check-circle" data-bs-original-title="{{ __('global.paid') }}"></i>
                                                        @else
                                                            - {{ __('global.not_paid') }}<i class="fa fa-remove text-secondary fs-5 mx-2" data-bs-toggle="tooltip" aria-label="fa fa-check-circle" data-bs-original-title="{{ __('global.not_paid') }}"></i>
                                                        @endif
                                                    </span>
                                                 </p>
                                            </div>
                                            <div class="notify-time">
                                                <p class="mb-0 text-muted fs-11">{{ $order->created_at_time }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>

                    @if(count($activeOrdersArray) > 5)
                        <div class="text-center mb-4">
                            <button id="loadMoreBtn" class="btn ripple btn-primary w-md">{{ __('global.load_more') }}</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- End Container -->
        <!-- /Row -->
    </div>
    <!-- CONTAINER CLOSED -->

@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Set the number of orders to show initially and the increment when "Load more" is clicked
            const initialVisible = 5;
            const increment = 5;

            // Show/hide orders based on the initial count
            $('.order-item:lt(' + initialVisible + ')').removeClass('d-none');

            // When "Load more" is clicked, show the next set of orders
            $('#loadMoreBtn').on('click', function() {
                const visibleCount = $('.order-item:not(.d-none)').length;
                $('.order-item:lt(' + (visibleCount + increment) + ')').removeClass('d-none');

                // Hide the "Load more" button if there are no more orders to display
                if ($('.order-item.d-none').length === 0) {
                    $('#loadMoreBtn').hide();
                }
            });
        });
    </script>
@endsection