@if(count($received_feedbacks) > 0)
<style>
    /* Styles for the slider container */
  

    /* Styles for the slides */
    .fd-slide {
        display: none;
        width: 100%;
    }

    /* Styles for the navigator */
    .navigator {
        text-align: center;
        margin-top: 10px;
    }

    .navigator span {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #999;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .navigator span.active {
        background-color: #333;
    }
</style>


    <div class="fd-slider-container">
        <!-- Navigation Buttons -->
        <div class="text-right mb-2">
            <button id="prevBtn" class="btn btn-primary btn-xs" title="Previous"><i class="fa-solid fa-angle-left"></i></button>
            <button id="nextBtn" class="btn btn-primary btn-xs" title="Next"><i class="fa-solid fa-angle-right"></i></button>
        </div>
        <!-- Slides -->
       
        @foreach($received_feedbacks as $recFeed)
        
            <div class="card mb-2 fd-slide">
                <div class="card-body">
                    <div class="ul-widget__body">
                        <div class="ul-widget3">
                            <div class="ul-widget3-item">
                                <div class="ul-widget3-header">
                                    <div class="ul-widget3-img">
                                        {!! profile_info(['elementClass'=>'','height'=>'50px','width'=>'50px','user'=>$recFeed["feedback_from"]]) !!}
                                        <span class="t-font-bolder">{{$recFeed["feedbackFromName"]}}</span>
                                        <span class="text-bold m-4 t-font-boldest"> To </span>
                                        {!! profile_info(['elementClass'=>'','height'=>'50px','width'=>'50px','user'=>$recFeed["feedback_to"]]) !!}
                                        <span class="t-font-bolder">{{$recFeed["feedbackToName"]}}</span>
                                    </div>
                                </div>
                                <div class="ul-widget3-body">
                                    <p class="ul-widget3-text text-mute">
                                        {!!$recFeed["feedback_message"]!!}
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        
    </div>

    <script>
        $(document).ready(function () {
            // Initialize the slider
            var currentSlide = 0;
            showSlide(currentSlide);

            // Event listeners for navigation buttons
            $("#prevBtn").click(function () {
                showSlide(currentSlide -= 1);
            });

            $("#nextBtn").click(function () {
                showSlide(currentSlide += 1);
            });



            // Function to display the current slide
            function showSlide(n) {
                var slides = $(".fd-slide");

                if (n >= slides.length) {
                    currentSlide = 0;
                } else if (n < 0) {
                    currentSlide = slides.length - 1;
                }

                slides.hide();
                slides.eq(currentSlide).fadeIn();
            }
        });
    </script>
@endif