<?php $__env->startSection('title', $product->name . ' - Jasa Printer'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    :root {
        --p-primary: #4f46e5;
        --p-slate-900: #0f172a;
        --p-slate-800: #1e293b;
        --p-slate-600: #475569;
        --p-slate-400: #94a3b8;
        --p-bg: #fdfdfd;
        --p-radius: 28px;
    }

    body {
        background-color: #f8fafc;
        color: var(--p-slate-800);
    }

    .product-container {
        padding: 60px 0;
    }

    .main-product-card {
        background: white;
        border-radius: var(--p-radius);
        box-shadow: 0 20px 50px rgba(0,0,0,0.04);
        border: 1px solid #f1f5f9;
        overflow: hidden;
    }

    /* Left Side: Visual */
    .visual-segment {
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 40px;
        min-height: 100%;
        border-right: 1px solid #f1f5f9;
    }
    .img-showcase {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .img-showcase:hover {
        transform: scale(1.03);
    }
    .img-fluid-main {
        max-width: 100%;
        max-height: 480px;
        object-fit: contain;
        filter: drop-shadow(0 15px 30px rgba(0,0,0,0.06));
    }

    /* Right Side: Info */
    .info-segment {
        padding: 60px;
        display: flex;
        flex-direction: column;
    }

    .category-tag {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--p-primary);
        background: #f5f3ff;
        padding: 6px 14px;
        border-radius: 8px;
        width: fit-content;
        margin-bottom: 24px;
    }

    .p-name {
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--p-slate-900);
        line-height: 1.15;
        letter-spacing: -1.5px;
        margin-bottom: 16px;
    }

    .p-rating-line {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
    }
    .stars-mini { color: #fbbf24; font-size: 14px; }
    .rev-count { font-size: 11px; font-weight: 800; color: var(--p-slate-400); text-transform: uppercase; letter-spacing: 1px; }

    .p-price-row {
        margin-bottom: 40px;
    }
    .price-value {
        font-size: 3.2rem;
        font-weight: 900;
        color: var(--p-primary);
        letter-spacing: -2px;
    }
    .price-symbol { font-size: 1.2rem; font-weight: 800; margin-right: 4px; vertical-align: middle; }

    .feature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }
    .feature-item {
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        padding: 16px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: 0.3s;
    }
    .feature-item:hover { border-color: var(--p-primary); background: white; }
    .feature-icon {
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--p-primary);
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    }
    .feature-text p { margin-bottom: 0; font-weight: 800; font-size: 13px; color: var(--p-slate-800); }
    .feature-text span { font-size: 11px; color: var(--p-slate-400); }

    .description-box {
        background: #f8fafc;
        border-radius: 24px;
        padding: 24px;
        border: 1px solid #f1f5f9;
        margin-bottom: 40px;
    }
    .box-header {
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--p-slate-400);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .box-header::after { content:''; flex: 1; height: 1px; background: #e2e8f0; }
    
    .scroll-desc {
        max-height: 180px;
        overflow-y: auto;
        font-size: 15px;
        line-height: 1.7;
        color: var(--p-slate-600);
        padding-right: 12px;
    }
    .scroll-desc::-webkit-scrollbar { width: 5px; }
    .scroll-desc::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

    /* Action Panel */
    .action-panel {
        margin-top: auto;
        padding-top: 30px;
        border-top: 1px solid #f1f5f9;
    }
    .qty-ui {
        background: #f1f5f9;
        padding: 6px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .qty-btn-p {
        width: 42px;
        height: 42px;
        border: none;
        background: white;
        border-radius: 14px;
        font-weight: 900;
        transition: 0.2s;
        box-shadow: 0 4px 8px rgba(0,0,0,0.04);
    }
    .qty-btn-p:hover { background: var(--p-primary); color: white; }
    .qty-val-p { width: 50px; text-align: center; border: none; background: transparent; font-weight: 800; font-size: 18px; }

    .main-actions {
        display: flex;
        gap: 16px;
        margin-top: 24px;
    }
    .btn-cart-pro {
        width: 68px;
        height: 68px;
        background: white;
        border: 2px solid #f1f5f9;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--p-slate-800);
        transition: 0.3s;
    }
    .btn-cart-pro:hover { border-color: var(--p-primary); color: var(--p-primary); transform: translateY(-4px); }

    .btn-buy-pro {
        flex: 1;
        height: 68px;
        background: var(--p-primary);
        color: white;
        border: none;
        border-radius: 22px;
        font-weight: 800;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
    }
    .btn-buy-pro:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(79, 70, 229, 0.35); }

    /* Fix image not synced: ensure columns match height or wrap correctly */
    @media (max-width: 991px) {
        .visual-segment { border-right: none; border-bottom: 1px solid #f1f5f9; min-height: 400px; }
        .info-segment { padding: 40px; }
        .p-name { font-size: 2.2rem; }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="product-container animate__animated animate__fadeIn">
    <div class="container">
        <div class="main-product-card">
            <div class="row g-0">
                <!-- Visual -->
                <div class="col-lg-5 visual-segment">
                    <div class="img-showcase">
                        <?php if($product->image): ?>
                            <img src="<?php echo e(asset('storage/'.$product->image)); ?>" class="img-fluid-main" alt="<?php echo e($product->name); ?>">
                        <?php else: ?>
                            <div class="text-center opacity-10">
                                <i class="lni lni-package display-1"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Info -->
                <div class="col-lg-7 info-segment">
                    <div class="category-tag"><?php echo e($product->category->name); ?></div>
                    <h1 class="p-name"><?php echo e($product->name); ?></h1>
                    
                    <div class="p-rating-line">
                        <div class="stars-mini">
                            <?php $avgRate = $product->reviews->avg('rating') ?: 0; ?>
                            <?php for($i=1; $i<=5; $i++): ?>
                                <i class="lni lni-star<?php echo e($i <= round($avgRate) ? '-fill' : ''); ?>"></i>
                            <?php endfor; ?>
                        </div>
                        <span class="rev-count">(<?php echo e($product->reviews->count()); ?> ULASAN PEMBELI)</span>
                        <span class="ms-auto badge <?php echo e($product->stock > 0 ? 'bg-success' : 'bg-danger'); ?> rounded-pill px-3 py-2">
                            <?php echo e($product->stock > 0 ? 'STOK: ' . $product->stock : 'STOK HABIS'); ?>

                        </span>
                    </div>

                    <div class="p-price-row">
                        <span class="price-value"><small class="price-symbol">Rp</small><?php echo e(number_format($product->price, 0, ',', '.')); ?></span>
                    </div>

                    <div class="feature-grid">
                        <div class="feature-item">
                            <div class="feature-icon"><i class="lni lni-delivery"></i></div>
                            <div class="feature-text">
                                <p>Pengiriman</p>
                                <span>Express Shipping</span>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon"><i class="lni lni-shield"></i></div>
                            <div class="feature-text">
                                <p>Garansi</p>
                                <span>100% Produk Original</span>
                            </div>
                        </div>
                    </div>

                    <div class="description-box">
                        <span class="box-header">Tentang Produk</span>
                        <div class="scroll-desc">
                            <?php echo nl2br(e($product->description)); ?>

                        </div>
                    </div>

                    <div class="action-panel">
                        <form id="proPurchaseForm" class="row g-3 align-items-end">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">

                            <?php if(auth()->user() && auth()->user()->role === 'pelanggan'): ?>
                            <div class="col-auto">
                                <div class="qty-ui">
                                    <button type="button" class="qty-btn-p" onclick="qAdjust(-1)"><i class="lni lni-minus"></i></button>
                                    <input type="number" id="qInputP" name="quantity" value="<?php echo e($product->stock > 0 ? 1 : 0); ?>" min="<?php echo e($product->stock > 0 ? 1 : 0); ?>" max="<?php echo e($product->stock); ?>" readonly class="qty-val-p">
                                    <button type="button" class="qty-btn-p" onclick="qAdjust(1)"><i class="lni lni-plus"></i></button>
                                </div>
                            </div>
                            <div class="col">
                                <div class="main-actions">
                                    <button type="button" id="btnAddCartP" data-url="<?php echo e(route('cart.add', $product->id)); ?>" class="btn-cart-pro">
                                        <i class="lni lni-cart-full"></i>
                                    </button>
                                    <button type="submit" formaction="<?php echo e(route('buy.now', $product->id)); ?>" formmethod="POST" class="btn-buy-pro" <?php echo e($product->stock <= 0 ? 'disabled' : ''); ?>>
                                        <span>BELI SEKARANG</span>
                                        <i class="lni lni-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            <?php elseif(!auth()->user()): ?>
                                <div class="col-12">
                                    <div class="alert bg-indigo-50 border-0 rounded-4 p-4 text-center">
                                        <p class="mb-2 fw-800 text-indigo-900">Ingin memesan sparepart ini?</p>
                                        <a href="<?php echo e(route('login')); ?>" class="btn btn-indigo rounded-pill px-5 fw-800">MASUK SEKARANG</a>
                                    </div>
                                </div>
                            <?php else: ?>
                                <div class="col-12">
                                    <div class="alert bg-slate-50 border-0 rounded-4 p-4 text-center">
                                        <p class="mb-0 text-muted small">Mode Admin: Navigasi belanja dinonaktifkan untuk pengelola toko.</p>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Extra: Reviews & Others -->
        <div class="row mt-5 pt-5 g-5">
            <div class="col-lg-8">
                <h4 class="fw-900 mb-4">Ulasan Produk</h4>
                <?php $__empty_1 = true; $__currentLoopData = $product->reviews->sortByDesc('created_at'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rev): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="bg-white rounded-4 p-4 border border-slate-100 mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-800"><?php echo e($rev->user->name); ?></span>
                        <div class="stars-mini">
                            <?php for($s=1;$s<=5;$s++): ?> <i class="lni lni-star<?php echo e($s <= $rev->rating ? '-fill' : ''); ?>"></i> <?php endfor; ?>
                        </div>
                    </div>
                    <p class="text-slate-600 small mb-0"><?php echo e($rev->komentar ?: 'Produk yang sangat bagus!'); ?></p>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="text-center py-5 opacity-25">
                    <i class="lni lni-comments display-4"></i>
                    <p class="fw-bold mt-2">Belum ada ulasan</p>
                </div>
                <?php endif; ?>
            </div>
            
            <div class="col-lg-4">
                <h4 class="fw-900 mb-4">Produk Terkait</h4>
                <?php $__currentLoopData = $related; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('products.show', $rel->slug)); ?>" class="text-decoration-none group">
                    <div class="bg-white rounded-4 p-3 border border-slate-100 mb-3 d-flex align-items-center gap-3">
                        <div class="bg-light rounded-3 p-2" style="width:60px; height:60px; display:flex; align-items:center; justify-content:center;">
                            <?php if($rel->image): ?> <img src="<?php echo e(asset('storage/'.$rel->image)); ?>" class="img-fluid" style="max-height:40px;"> <?php else: ?> <i class="lni lni-package"></i> <?php endif; ?>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <h6 class="fw-bold text-slate-800 mb-0 text-truncate"><?php echo e($rel->name); ?></h6>
                            <p class="text-indigo-600 fw-800 small mb-0">Rp <?php echo e(number_format($rel->price, 0, ',', '.')); ?></p>
                        </div>
                    </div>
                </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    function qAdjust(amt) {
        const inp = document.getElementById('qInputP');
        const max = parseInt(inp.max);
        let val = parseInt(inp.value) + amt;
        if(val >= 1 && val <= max) inp.value = val;
    }

    $('#btnAddCartP').on('click', function() {
        const url = $(this).data('url');
        const qty = $('#qInputP').val();
        
        // Show minimal success feedback
        $(this).html('<i class="lni lni-checkmark"></i>').addClass('border-success text-success');
        setTimeout(() => $(this).html('<i class="lni lni-cart-full"></i>').removeClass('border-success text-success'), 2000);

        $.ajax({
            url: url,
            method: 'POST',
            data: { _token: '<?php echo e(csrf_token()); ?>', quantity: qty },
            success: function(res) {
                if(res.success) {
                    // Fly-to-cart Animation
                    const btn = $('#btnAddCartP');
                    const cartIcon = $('.cart-trigger-pro');
                    const rect = btn[0].getBoundingClientRect();
                    const flyer = $('<div style="position:fixed; z-index:9999; font-size:24px; transition:all 1s cubic-bezier(0.2,0.9,0.4,1.1);">🛒</div>');
                    flyer.css({ left: rect.left + (rect.width/2), top: rect.top });
                    $('body').append(flyer);
                    
                    setTimeout(() => {
                        const cRect = cartIcon[0].getBoundingClientRect();
                        flyer.css({
                            left: cRect.left + 15,
                            top: cRect.top + 15,
                            opacity: 0,
                            transform: 'scale(0.3) rotate(720deg)'
                        });
                    }, 50);
                    setTimeout(() => flyer.remove(), 1000);

                    // Update global header badge
                    const badge = $('#globalCartBadge');
                    badge.text(res.cart_count).removeClass('empty').addClass('bump');
                    setTimeout(() => badge.removeClass('bump'), 400);

                    // Show modern toast notification
                    if (typeof showToast === "function") {
                        showToast('Berhasil', res.message, 'success');
                    }
                } else {
                    if (typeof showToast === "function") {
                        showToast('Gagal', res.message, 'error');
                    }
                }
            },
            error: function(xhr) { 
                if(xhr.status === 401) {
                    window.location.href = "<?php echo e(route('login')); ?>"; 
                } else {
                    const msg = xhr.responseJSON ? xhr.responseJSON.message : 'Terjadi kesalahan sistem';
                    if (typeof showToast === "function") {
                        showToast('Kesalahan', msg, 'error');
                    }
                }
            }
        });
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.temp', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\jasa_printer\resources\views/orders/show_product.blade.php ENDPATH**/ ?>