@extends('layouts.user.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">
                    @if(count($orders) > 0)
                        <ul class="notification">
                            @foreach($orders as $index => $order)
                                <li class="order-item {{ $index >= 5 ? ' d-none' : '' }}">
                                    <div class="notification-time">
                                        <span class="date">{{ \Carbon\Carbon::parse($order->start)->diffForHumans() }}</span>
                                        <span class="time">{{ \Carbon\Carbon::parse($order->start)->format('H:i') }}</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">{{ substr($order->orderUser->name, 0, 1).substr($order->orderUser->last_name, 0, 1) }}</span>
                                            </div>
                                            <div class="media-body ms-3 d-flex">
                                                <div class="me-4">
                                                    <p class="fs-19 fw-bold mb-2 text-secondary">{{ $order->orderUser->name }} {{ $order->orderUser->last_name }}</p>
                                                    <p class="fs-15 text-dark fw-bold mb-2">{{ $order->title }}</p>
                                                    <p class="mb-1 fs-13 text-dark">
                                                        {{ __('global.arena') }}:
                                                        
                                                        @if(isset($order->orderProduct->title))
                                                            {{ json_decode($order->orderProduct->title, true)[app()->getLocale()] ?? '' }}
                                                        @else 
                                                            <span class="badge bg-danger-transparent">{{ __('global.product_deleted') }}</span>
                                                        @endif
                                                    </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->price }} ₾
                                                        </span>

                                                        <span class="mx-2">
                                                            @if($order->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">{{ \Carbon\Carbon::parse($order->created_at)->diffForHumans() }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>

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

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const initialVisible = 5;
            const increment = 5;

            $('.order-item:lt(' + initialVisible + ')').removeClass('d-none');

            $('#loadMoreBtn').on('click', function() {
                const visibleCount = $('.order-item:not(.d-none)').length;
                $('.order-item:lt(' + (visibleCount + increment) + ')').removeClass('d-none');

                if ($('.order-item.d-none').length === 0) {
                    $('#loadMoreBtn').hide();
                }
            });
        });
    </script>
@endsection