

<?php $__env->startSection('title', 'Detail Produk'); ?>

<?php $__env->startSection('content'); ?>
<div class="container px-4 py-3">
    <a href="<?php echo e(route('product.index')); ?>" class="btn btn-secondary mb-3">
        ← Kembali
    </a>

    
    <div class="card shadow-pink mb-4">
        <div class="row g-0">
            <div class="col-md-5">
                
                <div class="product-gallery">
                    <div class="main-image-container mb-3">
                        <?php
                            $primaryImage = $produk->images->where('is_primary', true)->first();
                            $allImages = $produk->images->sortBy('order');
                        ?>
                        
                        <?php if($primaryImage): ?>
                            <img id="mainProductImage" 
                                 src="<?php echo e(asset('storage/'.$primaryImage->foto)); ?>" 
                                 class="img-fluid rounded-start w-100 main-image"
                                 style="object-fit: cover; height: 400px; cursor: pointer;"
                                 onclick="openImageModal('<?php echo e(asset('storage/'.$primaryImage->foto)); ?>')">
                        <?php elseif($allImages->count() > 0): ?>
                            <img id="mainProductImage" 
                                 src="<?php echo e(asset('storage/'.$allImages->first()->foto)); ?>" 
                                 class="img-fluid rounded-start w-100 main-image"
                                 style="object-fit: cover; height: 400px; cursor: pointer;"
                                 onclick="openImageModal('<?php echo e(asset('storage/'.$allImages->first()->foto)); ?>')">
                        <?php else: ?>
                            <img src="<?php echo e(asset('images/no-image.png')); ?>" 
                                 class="img-fluid rounded-start w-100"
                                 style="object-fit: cover; height: 400px;">
                        <?php endif; ?>
                    </div>
                    
                    
                    <?php if($allImages->count() > 1): ?>
                        <div class="thumbnail-container d-flex gap-2 mt-2 flex-wrap">
                            <?php $__currentLoopData = $allImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="thumbnail-item <?php echo e($index == 0 ? 'active' : ''); ?>" 
                                     onclick="changeMainImage('<?php echo e(asset('storage/'.$image->foto)); ?>', this)">
                                    <img src="<?php echo e(asset('storage/'.$image->foto)); ?>" 
                                         class="img-fluid rounded"
                                         style="width: 80px; height: 80px; object-fit: cover; cursor: pointer; border: 2px solid <?php echo e($index == 0 ? '#ec4899' : 'transparent'); ?>;"
                                         onmouseover="this.style.opacity='0.8'"
                                         onmouseout="this.style.opacity='1'">
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                        
                        
                        <div class="mt-2 text-muted small">
                            <i class="bi bi-images"></i> <?php echo e($allImages->count()); ?> foto produk
                            <?php if($allImages->count() > 1): ?>
                                <span class="ms-2">| Klik foto untuk memperbesar</span>
                            <?php endif; ?>
                        </div>
                    <?php elseif($allImages->count() == 1): ?>
                        <div class="mt-2 text-muted small">
                            <i class="bi bi-image"></i> 1 foto produk | Klik foto untuk memperbesar
                        </div>
                    <?php else: ?>
                        <div class="mt-2 text-muted small">
                            <i class="bi bi-image"></i> Belum ada foto produk
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <div class="col-md-7">
                <div class="card-body">
                    <h4 class="fw-bold text-pink-gradient"><?php echo e($produk->nama_produk); ?></h4>
                    <p><span class="badge bg-pink"><?php echo e($produk->kategori->nama_kategori ?? 'Tanpa Kategori'); ?></span></p>
                    <p class="fs-3 fw-bold text-pink">Rp <?php echo e(number_format($produk->harga, 0, ',', '.')); ?></p>
                    <p>Stok: <span class="fw-semibold <?php echo e($produk->stok <= 5 ? 'text-danger' : 'text-success'); ?>"><?php echo e($produk->stok); ?></span></p>
                    <p>Terjual: <span class="fw-semibold"><?php echo e($produk->terjual ?? 0); ?></span></p>
                    <p>Kadaluarsa: <?php echo e($produk->tanggal_kadaluarsa ? \Carbon\Carbon::parse($produk->tanggal_kadaluarsa)->format('d/m/Y') : '-'); ?></p>
                    
                    <?php if(auth()->guard()->check()): ?>
                        <?php if(Auth::user()->role == 'pengguna'): ?>
                            <form action="<?php echo e(route('cart.add', $produk->produk_id)); ?>" method="POST" class="mt-3">
                                <?php echo csrf_field(); ?>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <label class="form-label mb-0">Jumlah:</label>
                                    </div>
                                    <div class="col-auto">
                                        <input type="number" name="jumlah" value="1" min="1" max="<?php echo e($produk->stok); ?>" class="form-control" style="width: 80px;" required <?php echo e($produk->is_expired ? 'disabled' : ''); ?>>
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-pink-glow" <?php echo e(($produk->stok < 1 || $produk->is_expired) ? 'disabled' : ''); ?>>
                                            <i class="bi bi-cart-plus"></i> <?php echo e($produk->is_expired ? 'Produk Kadaluwarsa' : 'Tambah ke Keranjang'); ?>

                                        </button>
                                    </div>
                                </div>
                                <?php if($produk->is_expired): ?>
                                    <div class="alert alert-danger mt-3 py-2 px-3 border-0 small rounded-3">
                                        <i class="bi bi-exclamation-octagon-fill me-2"></i>
                                        Mohon maaf, produk ini sudah melewati tanggal kadaluwarsa dan tidak dapat dipesan kembali.
                                    </div>
                                <?php endif; ?>
                            </form>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    
    <div class="row mt-4">
        <div class="col-12">
            <div class="reviews-section">
                <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
                    <h4 class="fw-bold text-pink-gradient mb-0">
                        <i class="bi bi-chat-dots-fill me-2"></i>
                        Ulasan Produk
                    </h4>
                    <div class="rating-summary">
                        <span class="fs-2 fw-bold text-warning"><?php echo e(number_format($produk->average_rating, 1)); ?></span>
                        <div class="stars-display d-inline-block ms-2">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                                <?php if($i <= round($produk->average_rating)): ?>
                                    <i class="bi bi-star-fill text-warning"></i>
                                <?php else: ?>
                                    <i class="bi bi-star text-warning"></i>
                                <?php endif; ?>
                            <?php endfor; ?>
                        </div>
                        <span class="text-muted ms-2">(<?php echo e($produk->reviews_count); ?> ulasan)</span>
                    </div>
                </div>
                
                
                <?php if($produk->reviews_count > 0): ?>
                <div class="rating-distribution mb-4">
                    <?php
                        $distribution = $produk->rating_distribution;
                    ?>
                    <?php for($rating = 5; $rating >= 1; $rating--): ?>
                        <?php $count = $distribution[$rating] ?? 0; ?>
                        <?php if($count > 0): ?>
                            <div class="distribution-row d-flex align-items-center gap-2 mb-2">
                                <div class="rating-label" style="width: 45px;"><?php echo e($rating); ?> ★</div>
                                <div class="progress flex-grow-1" style="height: 8px;">
                                    <div class="progress-bar bg-warning" style="width: <?php echo e(($count / $produk->reviews_count) * 100); ?>%"></div>
                                </div>
                                <div class="rating-count" style="width: 45px;"><?php echo e($count); ?></div>
                            </div>
                        <?php endif; ?>
                    <?php endfor; ?>
                </div>
                <?php endif; ?>
                
                
                <div class="reviews-list">
                    <?php
                        $reviews = $produk->reviews()->with('user')->latest()->get();
                    ?>
                    
                    <?php $__empty_1 = true; $__currentLoopData = $reviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="review-card mb-3 p-3 rounded-3 border">
                            <div class="d-flex justify-content-between align-items-start mb-2 flex-wrap gap-2">
                                <div>
                                    <div class="stars-display mb-1">
                                        <?php for($i = 1; $i <= 5; $i++): ?>
                                            <?php if($i <= $review->rating): ?>
                                                <i class="bi bi-star-fill text-warning"></i>
                                            <?php else: ?>
                                                <i class="bi bi-star text-warning"></i>
                                            <?php endif; ?>
                                        <?php endfor; ?>
                                    </div>
                                    <div class="reviewer-info">
                                        <strong><?php echo e($review->user->username ?? 'Pengguna'); ?></strong>
                                        <small class="text-muted ms-2"><?php echo e($review->created_at->diffForHumans()); ?></small>
                                    </div>
                                </div>
                                <?php if(auth()->guard()->check()): ?>
                                    <?php if($review->user_id == Auth::id()): ?>
                                        <span class="badge bg-pink">Ulasan Anda</span>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </div>
                            <?php if($review->komentar): ?>
                                <p class="review-comment mb-0 text-muted"><?php echo e($review->komentar); ?></p>
                            <?php else: ?>
                                <p class="review-comment mb-0 text-muted fst-italic">Tidak ada komentar</p>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="text-center py-5">
                            <i class="bi bi-chat-dots fs-1 text-muted"></i>
                            <p class="text-muted mt-2">Belum ada ulasan untuk produk ini.</p>
                            <small class="text-muted">Jadilah yang pertama memberikan ulasan!</small>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 text-end">
                <button type="button" class="btn btn-light rounded-circle mb-2" data-bs-dismiss="modal" style="position: relative; z-index: 1;">
                    <i class="bi bi-x-lg"></i>
                </button>
                <img id="modalImage" src="" class="img-fluid rounded w-100" style="max-height: 80vh; object-fit: contain;">
            </div>
        </div>
    </div>
</div>

<style>
.text-pink-gradient {
    background: linear-gradient(135deg, #ec4899, #db2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-pink-glow {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-pink-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    color: white;
}

.btn-pink-glow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shadow-pink {
    box-shadow: 0 4px 25px rgba(236, 72, 153, 0.15);
}

.bg-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: white;
}

.text-pink {
    color: #ec4899;
}

.reviews-section {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.review-card {
    transition: all 0.3s ease;
    background: #fafafa;
}

.review-card:hover {
    transform: translateX(5px);
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stars-display i {
    font-size: 0.9rem;
    margin-right: 2px;
}

.rating-distribution {
    max-width: 400px;
}

.progress {
    background-color: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    border-radius: 10px;
    transition: width 0.5s ease;
}

.card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

.card-body {
    padding: 1.5rem;
}

/* Gallery Styles */
.product-gallery {
    padding: 1rem;
    background: #fafafa;
    border-radius: 12px;
    height: 100%;
}

.main-image-container {
    overflow: hidden;
    border-radius: 12px;
    background: #f0f0f0;
}

.main-image {
    transition: transform 0.3s ease;
}

.main-image:hover {
    transform: scale(1.05);
}

.thumbnail-container {
    overflow-x: auto;
    padding-bottom: 5px;
}

.thumbnail-item {
    transition: all 0.2s ease;
}

.thumbnail-item:hover {
    transform: translateY(-2px);
}

.thumbnail-item.active img {
    border-color: #ec4899 !important;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
}

/* Modal Styles */
.modal-content.bg-transparent {
    background: transparent !important;
}

.modal.show .modal-dialog {
    margin: 1.75rem auto;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 1rem;
    }
    
    .rating-summary {
        width: 100%;
    }
    
    .product-gallery {
        padding: 0.5rem;
    }
    
    .main-image {
        height: 300px !important;
    }
    
    .thumbnail-item img {
        width: 60px !important;
        height: 60px !important;
    }
}
</style>

<script>
    // Fungsi untuk mengganti gambar utama
    function changeMainImage(imageUrl, element) {
        // Update gambar utama
        document.getElementById('mainProductImage').src = imageUrl;
        
        // Update active state pada thumbnail
        const thumbnails = document.querySelectorAll('.thumbnail-item');
        thumbnails.forEach(thumb => {
            thumb.classList.remove('active');
            const img = thumb.querySelector('img');
            if (img) {
                img.style.borderColor = 'transparent';
            }
        });
        
        element.classList.add('active');
        const activeImg = element.querySelector('img');
        if (activeImg) {
            activeImg.style.borderColor = '#ec4899';
        }
    }
    
    // Fungsi untuk membuka modal gambar besar
    function openImageModal(imageUrl) {
        const modal = new bootstrap.Modal(document.getElementById('imageModal'));
        document.getElementById('modalImage').src = imageUrl;
        modal.show();
    }
    
    // Keyboard navigation untuk thumbnail (optional)
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modal = bootstrap.Modal.getInstance(document.getElementById('imageModal'));
            if (modal) {
                modal.hide();
            }
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\comca\resources\views/product/show.blade.php ENDPATH**/ ?>