@extends('admin.layouts.app')
@section('content')
<div class="row">
    <div class="col">
        <h5 class="text-primary fw-bold d-flex align-items-center">
            <i class="fa fa-comments me-2"></i> Events Feedback
        </h5>
        <div class="accordion mt-3" id="accordionExample">
            @forelse ($feedback as $key => $item)
            <div class="card accordion-item {{ $key == 0 ? 'active' : '' }}">
                <h2 class="accordion-header" id="headingOne">
                    <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#feedback-{{ $item->id }}" aria-expanded="true" aria-controls="accordionOne">
                        {{ $item->event->name }}
                    </button>
                </h2>

                <div id="feedback-{{ $item->id }}" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="row">
                            <div class="col-4 mb-3">
                                <p class="mb-1">Punctuality:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->punctuality }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Professionalism:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->professionalism }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Communication Skills:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->communication_skills }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Attitude and Enthusiasm:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->attitude_and_enthusiasm }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Adaptability:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->adaptability }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Customer Interaction:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->customer_interaction }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Problem Solving:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->problem_solving }}"></div>
                                </div>
                            </div>
                            <div class="col-4 mb-3">
                                <p class="mb-1">Overall Performance:</p>
                                <div class="star-rating">
                                    <div class="read-only-ratings" data-rateyo-read-only="true" data-rateyo-rating="{{ $item->overall_performance }}"></div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <p class="mb-1">Hire Again:</p>
                                <div class="star-rating">
                                    @if($item->hire_again == 1)
                                    <i class="fa fa-check-circle text-success display-5"></i>
                                    @else
                                    <i class="fa fa-times-circle text-danger display-5"></i>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <p class="mb-1">Notes:</p>
                                <div class="notes-section">
                                    <p class="mb-0">
                                        {{ $item->notes }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center mt-5">
                <img src="https://example.com/path/to/no-feedback.png" alt="No Feedback" class="img-fluid" style="max-width: 200px;">
                <p class="mt-3">No feedback available at the moment.</p>
            </div>
            @endforelse
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    readOnlyRatings = $('.read-only-ratings');
    readOnlyRatings.rateYo({
        rtl: isRtl
        , spacing: '8px'
    });

</script>
@endsection