<?php $__env->startSection('title', $product->name); ?>
<?php $__env->startSection('meta_description', $product->short_description); ?>

<?php $__env->startSection('extra-styles'); ?>
.gallery-thumb { width:70px;height:70px;object-fit:cover;border:2px solid #eee;border-radius:6px;cursor:pointer;transition:.2s; }
.gallery-thumb:hover,.gallery-thumb.active { border-color:var(--primary); }
.main-product-img { width:100%;height:420px;object-fit:cover;border-radius:10px; }
.variation-btn { border:2px solid #ddd;background:#fff;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:.2s; }
.variation-btn:hover,.variation-btn.selected { border-color:var(--primary);color:var(--primary); }
.price-regular { font-size:28px;font-weight:700;color:var(--primary); }
.price-old { font-size:18px;text-decoration:line-through;color:#999; }
.badge-offer { background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600; }
.qty-btn { width:36px;height:36px;border:1px solid #ddd;background:#f8f9fa;border-radius:6px;font-size:18px;line-height:1;cursor:pointer; }
.qty-input { width:60px;text-align:center;border:1px solid #ddd;border-radius:6px;height:36px;font-weight:600; }
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="container py-5">

    
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?php echo e(route('home')); ?>" class="text-decoration-none">Home</a></li>
            <?php if($product->category): ?>
            <li class="breadcrumb-item"><a href="<?php echo e(route('shop', ['category' => $product->category->slug])); ?>" class="text-decoration-none"><?php echo e($product->category->name); ?></a></li>
            <?php endif; ?>
            <li class="breadcrumb-item active"><?php echo e($product->name); ?></li>
        </ol>
    </nav>

    <div class="row g-5">
        
        <div class="col-lg-5">
            <img id="mainImage" src="<?php echo e($product->thumbnail_url); ?>" alt="<?php echo e($product->name); ?>" class="main-product-img mb-3">
            <?php if($product->images->count() > 0): ?>
            <div class="d-flex gap-2 flex-wrap">
                <img src="<?php echo e($product->thumbnail_url); ?>" alt="Main" class="gallery-thumb active" onclick="changeImage(this, '<?php echo e($product->thumbnail_url); ?>')">
                <?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <img src="<?php echo e($img->image_url); ?>" alt="Gallery" class="gallery-thumb" onclick="changeImage(this, '<?php echo e($img->image_url); ?>')">
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
        </div>

        
        <div class="col-lg-7">
            <?php if($product->category): ?>
            <span class="badge bg-secondary mb-2"><?php echo e($product->category->name); ?></span>
            <?php endif; ?>
            <h1 style="font-size:24px;font-weight:700;color:var(--dark)"><?php echo e($product->name); ?></h1>

            
            <div class="d-flex align-items-center gap-3 my-3">
                <?php if($product->is_on_sale): ?>
                    <span class="price-regular">৳<?php echo e(number_format($product->sale_price, 0)); ?></span>
                    <span class="price-old">৳<?php echo e(number_format($product->regular_price, 0)); ?></span>
                    <?php $discount = round((($product->regular_price - $product->sale_price) / $product->regular_price) * 100); ?>
                    <span class="badge-offer"><?php echo e($discount); ?>% OFF</span>
                <?php else: ?>
                    <span class="price-regular">৳<?php echo e(number_format($product->regular_price, 0)); ?></span>
                <?php endif; ?>
            </div>

            <?php if($product->offer_text): ?>
            <div class="alert alert-warning py-2 d-inline-block">
                <i class="bi bi-tag-fill me-1"></i> <?php echo e($product->offer_text); ?>

            </div>
            <?php endif; ?>

            <?php if($product->short_description): ?>
            <p class="text-muted mb-3"><?php echo e($product->short_description); ?></p>
            <?php endif; ?>

            <div class="mb-2">
                <span class="<?php echo e($product->stock > 0 ? 'text-success' : 'text-danger'); ?> fw-semibold">
                    <i class="bi bi-<?php echo e($product->stock > 0 ? 'check-circle' : 'x-circle'); ?> me-1"></i>
                    <?php echo e($product->stock > 0 ? 'In Stock' : 'Out of Stock'); ?>

                </span>
            </div>

            
            <?php if($product->variations->count() > 0): ?>
            <?php $variationGroups = $product->variations->groupBy('type'); ?>
            <div class="mb-4">
                <?php $__currentLoopData = $variationGroups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type => $variations): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="mb-3">
                    <label class="fw-semibold mb-2 d-block" style="color:var(--dark)"><?php echo e(ucfirst($type)); ?>:</label>
                    <div class="d-flex gap-2 flex-wrap" data-variation-type="<?php echo e($type); ?>">
                        <?php $__currentLoopData = $variations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <button type="button"
                            class="variation-btn"
                            data-variation-id="<?php echo e($v->id); ?>"
                            data-price-adj="<?php echo e($v->price_adjustment); ?>"
                            onclick="selectVariation(this)">
                            <?php echo e($v->value); ?>

                            <?php if($v->price_adjustment > 0): ?> (+৳<?php echo e(number_format($v->price_adjustment,0)); ?>) <?php endif; ?>
                        </button>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>

            
            <div class="mb-4">
                <label class="fw-semibold mb-2 d-block" style="color:var(--dark)">Quantity:</label>
                <div class="d-flex align-items-center gap-2">
                    <button class="qty-btn" onclick="changeQty(-1)">−</button>
                    <input type="number" id="quantity" value="1" min="1" max="<?php echo e($product->stock); ?>" class="qty-input">
                    <button class="qty-btn" onclick="changeQty(1)">+</button>
                </div>
            </div>

            
            <?php if($product->stock > 0): ?>
            <div class="d-flex gap-3 flex-wrap">
                <form action="<?php echo e(route('cart.add')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                    <input type="hidden" name="variation_id" id="cart-variation-id" value="">
                    <input type="hidden" name="quantity" id="cart-quantity" value="1">
                    <button type="submit" class="btn btn-outline-danger btn-lg px-4">
                        <i class="bi bi-cart-plus me-2"></i>Add to Cart
                    </button>
                </form>
                <form action="<?php echo e(route('buy.now')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                    <input type="hidden" name="variation_id" id="buynow-variation-id" value="">
                    <input type="hidden" name="quantity" id="buynow-quantity" value="1">
                    <button type="submit" class="btn btn-danger btn-lg px-4">
                        <i class="bi bi-lightning-fill me-2"></i>Buy Now
                    </button>
                </form>
            </div>
            <?php else: ?>
            <button class="btn btn-secondary btn-lg px-4" disabled>Out of Stock</button>
            <?php endif; ?>

            
            <?php if($product->tags->count() > 0): ?>
            <div class="mt-4">
                <span class="fw-semibold me-2">Tags:</span>
                <?php $__currentLoopData = $product->tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <span class="badge bg-light text-dark border me-1"><?php echo e($tag->name); ?></span>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    
    <?php if($product->description): ?>
    <div class="mt-5">
        <ul class="nav nav-tabs" id="productTabs">
            <li class="nav-item">
                <button class="nav-link active fw-semibold" data-bs-toggle="tab" data-bs-target="#desc">Description</button>
            </li>
        </ul>
        <div class="tab-content border border-top-0 p-4 rounded-bottom">
            <div class="tab-pane fade show active" id="desc">
                <?php echo nl2br(e($product->description)); ?>

            </div>
        </div>
    </div>
    <?php endif; ?>

    
    <?php if($related->count() > 0): ?>
    <div class="mt-5">
        <h3 class="section-title">Related Products</h3>
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
            <?php $__currentLoopData = $related; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="col">
                <div class="product-card h-100">
                    <a href="<?php echo e(route('product.show', $rp->slug)); ?>">
                        <img src="<?php echo e($rp->thumbnail_url); ?>" alt="<?php echo e($rp->name); ?>" loading="lazy">
                    </a>
                    <div class="card-body">
                        <p class="product-title"><?php echo e($rp->name); ?></p>
                        <div class="mb-2">
                            <span style="font-weight:700;color:var(--primary)">৳<?php echo e(number_format($rp->current_price, 0)); ?></span>
                        </div>
                        <form action="<?php echo e(route('buy.now')); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="product_id" value="<?php echo e($rp->id); ?>">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="btn-buy d-block text-center">Buy Now</button>
                        </form>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
    <?php endif; ?>

</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>

<?php if(!empty($settings['facebook_pixel_id'])): ?>
fbq('track', 'ViewContent', {
    content_name:  '<?php echo e(addslashes($product->name)); ?>',
    content_ids:   ['<?php echo e($product->id); ?>'],
    content_type:  'product',
    value:         <?php echo e($product->sale_price ?? $product->regular_price ?? 0); ?>,
    currency:      'BDT'
}, { eventID: '<?php echo e($pixelEventId ?? ""); ?>' });
<?php endif; ?>


<?php if(!empty($settings['facebook_pixel_id'])): ?>
document.addEventListener('DOMContentLoaded', function () {
    const addToCartForms = document.querySelectorAll('form[action*="cart/add"], form[action*="buy-now"]');
    addToCartForms.forEach(function(form) {
        form.addEventListener('submit', function() {
            fbq('track', 'AddToCart', {
                content_name:  '<?php echo e(addslashes($product->name)); ?>',
                content_ids:   ['<?php echo e($product->id); ?>'],
                content_type:  'product',
                value:         <?php echo e($product->sale_price ?? $product->regular_price ?? 0); ?>,
                currency:      'BDT'
            });
        });
    });
});
<?php endif; ?>

let selectedVariationId = null;

function changeImage(el, src) {
    document.getElementById('mainImage').src = src;
    document.querySelectorAll('.gallery-thumb').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

function changeQty(delta) {
    const input = document.getElementById('quantity');
    const max   = parseInt(input.max) || 999;
    let val = parseInt(input.value) + delta;
    if (val < 1)   val = 1;
    if (val > max) val = max;
    input.value = val;
    syncQuantity();
}

document.getElementById('quantity').addEventListener('input', syncQuantity);

function syncQuantity() {
    const q = document.getElementById('quantity').value;
    document.getElementById('cart-quantity').value    = q;
    document.getElementById('buynow-quantity').value  = q;
}

function selectVariation(btn) {
    const group = btn.closest('[data-variation-type]');
    group.querySelectorAll('.variation-btn').forEach(b => b.classList.remove('selected'));
    btn.classList.add('selected');
    selectedVariationId = btn.dataset.variationId;
    document.getElementById('cart-variation-id').value   = selectedVariationId;
    document.getElementById('buynow-variation-id').value = selectedVariationId;
}
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/boguraj1/public_html/udoktaecom/resources/views/frontend/product.blade.php ENDPATH**/ ?>