<?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([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            <?php echo e(__('Tulis Ulasan')); ?>

        </h2>
     <?php $__env->endSlot(); ?>

    <?php if(session('error')): ?>
        <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <?php echo e(session('error')); ?>

        </div>
    <?php endif; ?>

    <?php if($errors->any()): ?>
        <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <ul class="list-disc pl-5">
                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li><?php echo e($error); ?></li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
        </div>
    <?php endif; ?>

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                
                <div class="flex items-center mb-6 border-b pb-4">
                    <?php 
                        $img = $product->images->first(); 
                    ?>

                    <?php if($img): ?>
                        <img src="<?php echo e(asset('storage/' . $img->image_path)); ?>" class="w-16 h-16 object-cover rounded mr-4">
                    <?php else: ?>
                        <div class="w-16 h-16 bg-gray-100 flex items-center justify-center rounded mr-4 text-2xl">
                            📦
                        </div>
                    <?php endif; ?>
                    
                    <div>
                        <h3 class="text-lg font-bold text-gray-800"><?php echo e($product->name); ?></h3>
                        <p class="text-sm text-gray-500">Order ID: #<?php echo e($order->id); ?></p>
                    </div>
                </div>

                <form action="<?php echo e(route('reviews.store')); ?>" method="POST" enctype="multipart/form-data">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                    <input type="hidden" name="order_id" value="<?php echo e($order->id); ?>">

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">Berikan Rating</label>
                        <div class="flex gap-2 rating-stars">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                                <button type="button" 
                                    class="star-btn focus:outline-none transition-colors duration-200"
                                    data-rating="<?php echo e($i); ?>">
                                    <svg class="w-8 h-8 star-svg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </button>
                            <?php endfor; ?>
                        </div>
                        <input type="hidden" name="rating" id="rating-value" required>
                        <p class="text-sm text-gray-500 mt-1" id="rating-text"></p>
                        <?php $__errorArgs = ['rating'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-sm"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="mb-4">
                        <label for="comment" class="block text-gray-700 text-sm font-bold mb-2">Ulasan Anda</label>
                        <textarea name="comment" id="comment" rows="4" 
                            class="w-full border-gray-300 rounded-md shadow-sm focus:border-orange-500 focus:ring focus:ring-orange-500 focus:ring-opacity-50"
                            placeholder="Bagaimana kualitas produk ini?"></textarea>
                        <?php $__errorArgs = ['comment'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-sm"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">Foto Produk (Opsional)</label>
                        <input type="file" name="images[]" multiple accept="image/*"
                            class="block w-full text-sm text-gray-500
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-full file:border-0
                                file:text-sm file:font-semibold
                                file:bg-orange-500 file:text-white
                                hover:file:bg-orange-600">
                        <?php $__errorArgs = ['images.*'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-sm"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    
                    <div class="flex justify-end gap-4 mt-8">
                        <a href="<?php echo e(url()->previous()); ?>" class="bg-orange-500 text-white px-8 py-3 rounded-full hover:bg-orange-600 transition font-semibold">
                            Batal
                        </a>
                        <button type="submit" class="bg-orange-500 text-white px-8 py-3 rounded-full hover:bg-orange-600 transition font-semibold">
                            Kirim Ulasan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .star-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
        }
        .star-svg {
            color: #d1d5db;
            transition: color 0.2s ease;
        }
        .star-svg.active {
            color: #f97316;
        }
        .star-svg.hover {
            color: #fb923c;
        }
        .rating-stars {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        /* Tambahan untuk mempertebal teks label dan lainnya */
        label {
            font-weight: 700 !important;
        }
        .text-gray-700 {
            font-weight: 600;
        }
        .font-bold {
            font-weight: 700;
        }
        button, a {
            font-weight: 600;
        }
        
        /* Gaya tambahan untuk tombol */
        .rounded-full {
            border-radius: 9999px; /* Membuat tombol sangat melengkung */
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const stars = document.querySelectorAll('.star-btn');
            const ratingInput = document.getElementById('rating-value');
            const ratingText = document.getElementById('rating-text');
            
            let currentRating = 0;
            
            const ratingMessages = {
                1: '★ Sangat Buruk',
                2: '★★ Buruk',
                3: '★★★ Cukup',
                4: '★★★★ Baik',
                5: '★★★★★ Sangat Baik'
            };
            
            function updateStars(rating) {
                stars.forEach((star, index) => {
                    const svg = star.querySelector('.star-svg');
                    if (index < rating) {
                        svg.classList.add('active');
                        svg.classList.remove('hover');
                    } else {
                        svg.classList.remove('active');
                        svg.classList.remove('hover');
                    }
                });
            }
            
            function updateRatingText(rating) {
                if (rating > 0) {
                    ratingText.textContent = ratingMessages[rating] || rating + ' Bintang';
                    ratingText.style.color = '#f97316';
                } else {
                    ratingText.textContent = '';
                }
            }
            
            stars.forEach(star => {
                star.addEventListener('click', function() {
                    const rating = parseInt(this.getAttribute('data-rating'));
                    currentRating = rating;
                    ratingInput.value = rating;
                    updateStars(rating);
                    updateRatingText(rating);
                });
                
                star.addEventListener('mouseenter', function() {
                    const rating = parseInt(this.getAttribute('data-rating'));
                    stars.forEach((s, idx) => {
                        const svg = s.querySelector('.star-svg');
                        if (idx < rating) {
                            svg.classList.add('hover');
                        } else {
                            svg.classList.remove('hover');
                        }
                    });
                });
                
                star.addEventListener('mouseleave', function() {
                    stars.forEach(s => {
                        const svg = s.querySelector('.star-svg');
                        svg.classList.remove('hover');
                    });
                    updateStars(currentRating);
                });
            });
        });
    </script>
 <?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; ?><?php /**PATH C:\laragon\www\toko_pakaian\resources\views/customer/reviews/create.blade.php ENDPATH**/ ?>