<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="container-fluid p-0">
        <!-- Review Card -->
        <div class="card border-0 shadow-lg rounded-top-4" style="margin-top: 20px;">
            <div class="card-header bg-dark text-white border-0 rounded-top-4">
                <h4 class="mb-0 fw-bold">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#6F8D3B" class="me-2" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    Rate Your <?php echo e($isCaptain ? 'Passenger' : 'Captain'); ?>

                </h4>
            </div>
            
            <div class="card-body">
                <!-- User Profile -->
                <div class="text-center mb-4">
                    <div class="position-relative d-inline-block">
                        <div class="rounded-circle bg-success d-flex align-items-center justify-content-center mb-3 shadow-sm" 
                             style="width: 100px; height: 100px;">
                            <span class="text-white fw-bold" style="font-size: 2.5rem;">
                                <?php echo e(strtoupper(substr($userToReview->name, 0, 1))); ?>

                            </span>
                        </div>
                        <div class="position-absolute bottom-0 end-0 bg-success rounded-circle p-1 border border-2 border-white">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 16 16">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.79-9.8a.5.5 0 0 1-.02.706L7.122 11.46a.564.564 0 0 1-.393.154.574.574 0 0 1-.393-.154L4.21 9.367a.5.5 0 1 1 .706-.708l1.82 1.82 4.604-4.606a.5.5 0 0 1 .73-.004z"/>
                            </svg>
                        </div>
                    </div>
                    <h5 class="mb-1"><?php echo e($userToReview->name); ?></h5>
                    <p class="text-muted small">Ride #<?php echo e($ride->id); ?></p>
                </div>

                <!-- Review Form -->
                <form action="<?php echo e(route('ride.submit-review', $ride->id)); ?>" method="POST">
                    <?php echo csrf_field(); ?>

                    <!-- Rating -->
                    <div class="mb-4 text-center">
                        <h6 class="fw-bold mb-3">How was your experience?</h6>
                        <div class="star-rating d-flex justify-content-center">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                                <input type="radio" id="star<?php echo e($i); ?>" name="rating" value="<?php echo e($i); ?>"
                                       <?php echo e(old('rating') == $i ? 'checked' : ''); ?>>
                                <label for="star<?php echo e($i); ?>">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="<?php echo e(old('rating') >= $i ? '#FFD700' : '#ddd'); ?>" viewBox="0 0 16 16" class="star-icon">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                </label>
                            <?php endfor; ?>
                        </div>
                        <?php $__errorArgs = ['rating'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="text-danger small mt-2"><?php echo e($message); ?></div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Comments -->
                    <div class="mb-4">
                        <label for="comment" class="form-label fw-bold">Additional comments (optional)</label>
                        <textarea name="comment" id="comment" rows="3" 
                                  class="form-control border-2"><?php echo e(old('comment')); ?></textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-success py-3 fw-bold d-flex align-items-center justify-content-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                            </svg>
                            Submit Review
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>

<style>
    .star-rating {
        direction: ltr; /* Changed to Left-to-Right */
    }
    
    .star-rating input {
        display: none;
    }
    
    .star-rating label {
        display: inline-block;
        padding: 0 5px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .star-rating label:hover,
    .star-rating label:hover ~ label,
    .star-rating input:checked ~ label {
        fill: #FFD700 !important;
    }
    
    .star-icon {
        transition: all 0.2s ease;
    }
    
    .star-icon:hover {
        transform: scale(1.2);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star-rating input');
    const starIcons = document.querySelectorAll('.star-icon');
    
    stars.forEach((star, index) => {
        star.addEventListener('change', function() {
            // Update all star icons
            starIcons.forEach((icon, i) => {
                if (i <= index) {
                    icon.setAttribute('fill', '#FFD700');
                } else {
                    icon.setAttribute('fill', '#ddd');
                }
            });
        });
        
        // Hover effect
        star.addEventListener('mouseover', function() {
            starIcons.forEach((icon, i) => {
                if (i <= index) {
                    icon.setAttribute('fill', '#FFD700');
                }
            });
        });
        
        star.addEventListener('mouseout', function() {
            const checkedStar = document.querySelector('.star-rating input:checked');
            if (!checkedStar) {
                starIcons.forEach(icon => icon.setAttribute('fill', '#ddd'));
            } else {
                const checkedIndex = Array.from(stars).indexOf(checkedStar);
                starIcons.forEach((icon, i) => {
                    if (i <= checkedIndex) {
                        icon.setAttribute('fill', '#FFD700');
                    } else {
                        icon.setAttribute('fill', '#ddd');
                    }
                });
            }
        });
    });
    
    // Initialize stars if there's already a selected rating
    const initialRating = document.querySelector('.star-rating input:checked');
    if (initialRating) {
        const initialIndex = Array.from(stars).indexOf(initialRating);
        starIcons.forEach((icon, i) => {
            if (i <= initialIndex) {
                icon.setAttribute('fill', '#FFD700');
            }
        });
    }
});
</script><?php /**PATH D:\xampp\htdocs\ridek\resources\views/ride/review.blade.php ENDPATH**/ ?>