<div class="row align-items-center mb-4">
    <div class="col-md-8 col-12 mb-2 mb-md-0">
        <h3 class="fw-bold mb-1">{{ count($extra['reviews']) }} @lang('eventmie-pro::em.review')</h3>
        <div class="d-flex align-items-center">
            <div class="me-2">
                @for ($i = 1; $i <= 5; $i++)
                    <i class="fa fa-star {{ $extra['average_rating'] >= $i ? 'text-warning' : 'text-secondary' }}"></i>
                @endfor
            </div>
            <div class="fs-5">{{ $extra['average_rating'] }} <small class="text-muted">@lang('eventmie-pro::em.out_of_5')</small></div>
        </div>
    </div>
    @if ($extra['take_reviews'])
        <div class="col-md-4 col-12 text-md-end text-start">
            <button type="button" onclick="document.getElementById('review_modal').style.display = 'block';"
                class="btn btn-primary btn-lg px-4 shadow-sm">
                <i class="fas fa-star me-2"></i> @lang('eventmie-pro::em.add_review')
            </button>
        </div>
    @endif
</div>

@if ($extra['reviews']->isNotEmpty())
    <div class="row g-4">
        @foreach ($extra['reviews'] as $key => $item)
            <div class="col-12">
                <div class="card border-0 shadow-sm mb-2">
                    <div class="card-body d-flex align-items-start">
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center mb-1">
                                <h5 class="mb-0 me-2">{{ $item->user['name'] }}</h5>
                                <div>
                                    @for ($i = 1; $i <= 5; $i++)
                                        <i class="fa fa-star {{ $item->rating >= $i ? 'text-warning' : 'text-secondary' }}"></i>
                                    @endfor
                                </div>
                                <div class="ms-2 text-muted small">{{ $item->rating }} / 5</div>
                            </div>
                            <p class="mb-0 text-secondary">{{ $item->review }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="row mt-4">
        <div class="col-12">
            {{ $extra['reviews']->links() }}
        </div>
    </div>
@endif

<div class="modal modal-mask" id="review_modal">
    <div class="modal-dialog modal-container modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h1 class="modal-title fs-3 text-black">@lang('eventmie-pro::em.add_review')</h1> 
                <button type="button" class="btn btn-sm bg-danger text-white close" onclick="document.getElementById('review_modal').style.display = 'none';"><small aria-hidden="true">&times;</small></button>
            </div>

            <form method="POST" action="{{ route('reviews.store') }}">
                @csrf
                <input type="hidden" value="{{ $event->id }}" name="event_id" />
                <input type="hidden" value="{{ Auth::id() }}" name="user_id" />

                <div class="modal-body pt-0">
                    <div class="form-group">
                        <label class="text-black">@lang('eventmie-pro::em.rating')</label>
                        <div class="star-rating pb-0">
                            @for ($i = 5; $i >= 1; $i--)
                                <input id="star-{{ $i }}" type="radio" name="rating" value="{{ $i }}"
                                    {{ !empty($extra['user_reviews']) ? ($extra['user_reviews']['rating'] == $i.'.0' ? 'checked' : '') : '' }} />
                                <label for="star-{{ $i }}" title="{{ $i }} stars">
                                    <i class="active fa fa-star" aria-hidden="true"></i>
                                </label>
                            @endfor
                        </div>
                    </div>
                
                    <div class="form-group">
                        <label for="review" class="text-black">@lang('eventmie-pro::em.review')</label>
                        <textarea class="form-control" id="review" name="review" rows="2" onchange="review(event)" placeholder="@lang('eventmie-pro::em.appreciate_it')">{{ !empty($extra['user_reviews']) ? $extra['user_reviews']->review : '' }}</textarea>
                    </div>

                    <button type="submit" class="btn btn-success w-100 mt-1">@lang('eventmie-pro::em.submit')</button>
                </div>

            </form>
        </div>
    </div>
</div>