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

@section('title')
    {{ __('frontend.all') }} {{ __('frontend.reviews') }}
@endsection

@section('content')
    <div class="review-page section-spacing-bottom px-0">
        <div class="container-fluid">
            <div class="page-title">
                <h4 class="m-0 text-center">{{ __('frontend.all') }} {{ __('frontend.reviews') }}</h4>
            </div>
            <div class="row">
                <div class="col-xl-3">
                    <div class="row">
                        <div class="col-xl-12 col-lg-4 col-sm-5">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="iq-card">
                                        <div class="block-images position-relative w-100">

                                            <a href="{{ $entertainment['type'] == 'tvshow' ? route('tvshow-details', ['id' => $entertainment['slug']]) : route('movie-details', ['id' => $entertainment['slug']]) }}"
                                                class="position-absolute top-0 bottom-0 start-0 end-0 w-100 h-100"></a>

                                            <div class="image-box w-100">

                                                @php
                                                    $current_user_plan = auth()->user()
                                                        ? auth()->user()->subscriptionPackage
                                                        : null;
                                                    $current_plan_level = $current_user_plan->level ?? 0;
                                                    $plan_level = $entertainment['plan_level'];
                                                @endphp




                                                <img src="{{ setBaseUrlWithFileName($entertainment->poster_url, 'image', $entertainment->type) }}"
                                                    alt="movie card" class="img-fluid object-cover w-100 d-block border-0">
                                                @if ($plan_level > $current_plan_level)
                                                    <span class="product-premium"><i class="ph ph-crown-simple"></i></span>
                                                @endif
                                            </div>
                                            <div class="card-details mt-3">
                                                <h4 class="iq-title text-capitalize line-count-1">
                                                    {{ $entertainment->name }}</h4>
                                                <div class="d-flex align-items-center gap-5">
                                                    <div class="movie-time">
                                                        <p class="movie-time-text font-size-18 fw-medium mb-0">
                                                            {{ $entertainment->created_at->format('Y') }}</p>
                                                    </div>
                                                    <div class="movie-language d-flex align-items-center gap-1">
                                                        <i class="ph-fill ph-star text-warning"></i>
                                                        <p class="font-size-18 fw-medium mb-0">
                                                            {{ $entertainment->IMDb_rating }} ({{ __('messages.lbl_IMDb') }})</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12 col-lg-8 col-sm-7">
                            <div class="card">
                                <div class="card-body">
                                    <div class="ratting-card">
                                        <div class="d-flex align-items-center gap-4 mb-4">
                                            <h2 class="m-0">{{ number_format($averageRating, 1) }}</h2>
                                            <div class="data">
                                                <ul class="list-inline m-0 p-0 d-flex align-items-center gap-1">
                                                    <li class="text-warning"><i class="ph-fill ph-star"></i></li>
                                                    <li class="text-warning"><i class="ph-fill ph-star"></i></li>
                                                    <li class="text-warning"><i class="ph-fill ph-star"></i></li>
                                                    <li class="text-warning"><i class="ph-fill ph-star"></i></li>
                                                    <li class="text-warning"><i class="ph-fill ph-star"></i></li>
                                                </ul>
                                                <p class="m-0">{{ __('frontend.individual_rating') }}</p>
                                            </div>
                                        </div>
                                        @foreach (range(5, 1) as $rating)
                                            <div class="row align-items-center g-3">
                                                <div class="col-xl-2 col-lg-1 col-md-2 col-2">
                                                    <span class="d-flex align-items-center gap-2">
                                                        <span class="h6 mb-0">{{ $rating }}</span>
                                                        <i class="ph-fill ph-star text-warning"></i>
                                                    </span>
                                                </div>
                                                <div class="col-xl-7 col-lg-9 col-md-7 col-7">
                                                    @php
                                                        $percentage =
                                                            $ratingCounts[$rating] > 0
                                                                ? ($ratingCounts[$rating] / $reviewCount) * 100
                                                                : 0;
                                                    @endphp
                                                    <div class="progress w-100 progress-ratings" role="progressbar"
                                                        aria-label="Basic example" aria-valuenow="{{ $percentage }}"
                                                        aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar @if ($rating == 5) bg-success @elseif($rating == 4) bg-success @elseif($rating == 3) bg-warning @elseif($rating == 2) bg-warning @else bg-danger @endif"
                                                            style="width: {{ $percentage }}%"></div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-lg-2 col-md-3 col-3 flex-shrink-0">
                                                    <span class="text-body">{{ $ratingCounts[$rating] }}</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 mt-xl-0 mt-5">
                    <div class="mb-2 d-flex align-items-center justify-content-between">
                        <h5>{{ $entertainment->name }}</h5>
                        <select class="form-control w-auto" id="sort-reviews">
                            <option value="newest">{{ __('messages.newest') }}</option>
                            <option value="top_star">{{ __('messages.top_star') }}</option>
                        </select>
                    </div>
                    <ul class="list-inline review-list-inner m-0 p-0" id="review-list">

                    </ul>
                    <div class="card-style-slider shimmer-container">
                        <ul class="list-inline review-list-inner m-0 p-0">
                            @for ($i = 0; $i < 3; $i++)
                                <div class="shimmer-container col mb-3">
                                    <li> @include('components.card_shimmer_rating')</li>
                                </div>
                            @endfor
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/entertainment.min.js') }}" defer></script>

    <script>
        const noDataImageSrc = '{{ asset('img/NoData.png') }}';
        const movie_id = "{{ $entertainment->id ?? '' }}";
        const shimmerContainer = document.querySelector('.shimmer-container');
        const EntertainmentList = document.getElementById('review-list');
        let currentPage = 1;
        let isLoading = false;
        let hasMore = true;
        let actor_id = null;
        let moive_id = movie_id;
        let type = null;
        let per_page = 3;
        const baseUrl = document.querySelector('meta[name="baseUrl"]').getAttribute('content');;
        const apiUrl = `${baseUrl}/api/get-rating`;
        const csrf_token = '{{ csrf_token() }}'
        let currentSortType = 'newest'; // Default sorting state
    </script>
@endsection