<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-trainer.php'; ?>

<div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-grid>

        <!-- Sidebar Area -->
        <div class="uk-width-2-6@m uk-visible@m">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <?php include 'trainer-sidebar.php'; ?>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="uk-width-expand@m">

            <div class="profile-container">

                <!-- Ratings & Reviews Header -->
                <div class="profile-header">
                    <h2 class="uk-heading-divider">Ratings & Reviews</h2>
                </div>

                <!-- Rating Summary Section -->
                <div class="rating-summary uk-margin-small uk-margin-medium-bottom">
                    <div class="rating-overview uk-grid" uk-grid>

                        <div class="uk-width-expand@s">
                            <div class="rating-score uk-flex uk-flex-middle gap-16">
                                <span class="score-number f700 uk-text-secondary uk-text-large">4.9</span>
                                <div class="score-stars">
                                    <div class="stars-container star-rate">
                                        <span uk-icon="icon: star-bold; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                                        <span uk-icon="icon: star-bold; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                                        <span uk-icon="icon: star-bold; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                                        <span uk-icon="icon: star-bold; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                                        <span uk-icon="icon: star; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                                    </div>
                                    <p class="reviews-count uk-margin-remove">Based on 127 reviews</p>
                                </div>
                            </div>
                        </div>

                        <div class="uk-width-auto@s uk-text-right uk-text-secondary f600">
                            <div class="session-stats">
                                <div class="stat-item">
                                    <span class="stat-label">Total Sessions:</span>
                                    <span class="stat-value">143</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Completion Rate:</span>
                                    <span class="stat-value">98%</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Recent Reviews Section -->
                <div class="recent-reviews">

                    <div class="profile-sub-header">
                        <h3 class="section-title">Recent Reviews</h3>
                    </div>

                    <div class="reviews-container" id="reviewsContainer">

                        <!-- Review 1 -->
                        <div class="review-card">
                            <div class="review-header">
                                <h4 class="reviewer-name">Sarah M.</h4>
                                <div class="review-stars star-rate">
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div class="review-content">
                                <p>"Excellent trainer! Noor Abdullah provided very specific feedback on my technical interview skills. His mock interview was realistic and helped me identify areas for improvement. Highly recommended!"</p>
                            </div>
                        </div>

                        <!-- Review 2 -->
                        <div class="review-card">
                            <div class="review-header">
                                <h4 class="reviewer-name">Fatima A.</h4>
                                <div class="review-stars star-rate">
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div class="review-content">
                                <p>"Very professional and helpful. Noor Abdullah understood my background and tailored the questions accordingly. Good insights on what companies are looking for."</p>
                            </div>
                        </div>

                        <!-- Review 3 -->
                        <div class="review-card">
                            <div class="review-header">
                                <h4 class="reviewer-name">Sarah M.</h4>
                                <div class="review-stars star-rate">
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                    <span uk-icon="icon: star; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div class="review-content">
                                <p>"Great experience! The session was well-structured and Noor Abdullah gave practical tips that I could apply immediately. The feedback report was detailed and actionable."</p>
                            </div>
                        </div>

                    </div>

                    <!-- Load More Button -->
                    <div class="uk-margin-medium-top">
                        <button type="button" class="uk-button uk-button-default">
                            Load More Reviews
                        </button>
                    </div>
                </div>

            </div>

        </div>

    </div><!-- .uk-grid -->
</div><!-- .uk-container -->

<?php include 'footer.php'; ?>