<?php if (isset($component)) { $__componentOriginal7f8e1f0528d3ccf02b4e203e537febb53fee9473 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\Main\Header::class, []); ?>
<?php $component->withName('main.header'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal7f8e1f0528d3ccf02b4e203e537febb53fee9473)): ?>
<?php $component = $__componentOriginal7f8e1f0528d3ccf02b4e203e537febb53fee9473; ?>
<?php unset($__componentOriginal7f8e1f0528d3ccf02b4e203e537febb53fee9473); ?>
<?php endif; ?>
<style>
    .discount-notice {
        background-color: #C57E50;
        border: 1px solid #ddd;
        padding: 10px;
        margin-top: 20px;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
    }
</style>
<main>
    <section class="main-details">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6">
                    <!-- Discount Notice -->
                    <div class="discount-notice">
                        <p><strong>Special Offer:</strong> Buy 5 or more of this product and get a $10 discount!</p>
                    </div>
                    <!-- End of Discount Notice -->
                    <div class="silder-mock" element-id="360">
                        <div class="main-silder-car" element-id="359">
                            <div id="sync1" class="owl-carousel owl-theme" element-id="358">
                                <?php
                                $gallery_images = json_decode($pro->product_gallery);
                                ?>
                                <?php if($gallery_images): ?>
                                <?php $__currentLoopData = $gallery_images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="item" element-id="322">
                                    <a href="<?php echo e(asset('storage/images/'.$image)); ?>" data-fancybox="gallery" class="fancybox" element-id="321">
                                        <img src="<?php echo e(asset('storage/images/'.$image)); ?>" class="img-fluid" alt="img" element-id="320">
                                    </a>
                                </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>
                            </div>

                            <?php if(is_array($gallery_images) && !empty($gallery_images)): ?>
                            <div id="sync2" class="owl-carousel owl-theme" element-id="283">
                                <?php $__currentLoopData = $gallery_images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php if($image): ?>
                                <div class="item" element-id="279">
                                    <img src="<?php echo e(asset('storage/images/'.$image)); ?>" class="img-fluid" alt="img" element-id="278">
                                </div>
                                <?php endif; ?>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <?php else: ?>
                            <p>No gallery images available.</p>
                            <?php endif; ?>
                        </div>
                    </div>
                    <!-- <div class="owl-nav disabled" element-id="256"><button type="button" role="presentation" class="owl-prev" element-id="255"><span aria-label="Previous" element-id="254">‹</span></button><button type="button" role="presentation" class="owl-next" element-id="253"><span aria-label="Next" element-id="252">›</span></button>
                    </div> -->
                    <div class="owl-dots disabled" element-id="251"></div>


                </div>


                <div class="col-12 col-md-6">
                    <div class="silder-text">
                        <h2><?php echo e($pro->product_heading); ?></h2>
                        <p><?php echo e($pro->category->category_heading); ?></p>
                    </div>
                    <div class="silder-flex-text">
                        <ul class="mortion">
                            <li class="inverter">
                                <h4>$<?php echo e($pro->product_origional_price); ?></h4>
                                <h5>$<?php echo e($pro->product_selling_price); ?></h5>

                            </li>
                            <li class="start">
                                <ul class="mation">
                                    <div class="review_rating" element-id="124">
                                        <input id="star_rating-5" type="radio" name="star_rating" value="5" element-id="123"><label for="star_rating-5" element-id="122"><i class="fas fa-star" element-id="121"></i></label>
                                        <input id="star_rating-4" type="radio" name="star_rating" value="4" checked="" element-id="120"><label for="star_rating-4" element-id="119"><i class="fas fa-star" element-id="118"></i></label>
                                        <input id="star_rating-3" type="radio" name="star_rating" value="3" element-id="117"><label for="star_rating-3" element-id="116"><i class="fas fa-star" element-id="115"></i></label>
                                        <input id="star_rating-2" type="radio" name="star_rating" value="2" element-id="114"><label for="star_rating-2" element-id="113"><i class="fas fa-star" element-id="112"></i></label>
                                        <input id="star_rating-1" type="radio" name="star_rating" value="1" element-id="111"><label for="star_rating-1" element-id="110"><i class="fas fa-star" element-id="109"></i></label>
                                    </div>
                                    <h4>5 Star Reviews</h4>
                                </ul>
                                <ul class="icon-image">

                                    <li><img src="<?php echo e(asset('asset/front_asset/images/Ellipse15.png')); ?>" class="img-fluid" alt="img"></li>
                                    <li><img src="<?php echo e(asset('asset/front_asset/images/Ellipse16.png')); ?>" class="img-fluid" alt="img"></li>
                                    <li><img src="<?php echo e(asset('asset/front_asset/images/Ellipse18.png')); ?>" class="img-fluid" alt="img"></li>


                                    <h3>+10 Customer Reviews</h3>

                                </ul>


                            </li>
                        </ul>
                    </div>
                    <!-- <div class="nationality">
                        <h2>Choose A Color</h2>
                        <div class="color-radio-container" element-id="186">
                            <ul element-id="185">
                                <li element-id="184">
                                    <input data-imgmain="images/short-2.png" data-imgrolling="images/short-4.png" type="radio" id="color-1" name="color_variant" value="1" check="" element-id="183">
                                    <label for="color-1" style=" background-color: #000;" class="color-radio red" element-id="182"></label>
                                </li>
                                <li element-id="181">
                                    <input data-imgmain="images/short-2.png" data-imgrolling="images/short-4.png" type="radio" id="color-2" name="color_variant" value="2" check="" element-id="180">
                                    <label for="color-2" style=" background-color: #ffff;" class="color-radio red" element-id="179"></label>
                                </li>
                                <li element-id="178">
                                    <input data-imgmain="images/short-2.png" data-imgrolling="images/short-4.png" type="radio" id="color-4" name="color_variant" value="4" check="" element-id="177">
                                    <label for="color-4" style=" background: url(./images/cicrule/background-78.png);
                                            background-position:center center;
                                            " class="color-radio red" element-id="176"></label>
                                </li>
                                <li element-id="175">
                                    <input data-imgmain="images/short-2.png" data-imgrolling="images/short-4.png" type="radio" id="color-7" name="color_variant" value="7" check="" element-id="174">
                                    <label for="color-7" style=" background: url(./images/cicrule/background-78.png);
                                        background-position:center center;" class="color-radio red" element-id="173"></label>
                                </li>
                            </ul>
                        </div>
                    </div> -->
                    <?php if($sizes && count($sizes) > 0): ?>
    <div class="sizes">
        <div class="size-selector">
            <form action="/action_page.php">
                <label for="size" class="inner">Choose A Size:</label>
                <div class="radio-buttons">
                    <?php $__currentLoopData = $sizes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $size): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <input type="radio" id="size-<?php echo e($size->size_id); ?>" name="size" value="<?php echo e($size->size); ?>">
                        <label for="size-<?php echo e($size->size_id); ?>"><?php echo e($size->size); ?></label>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </form>
        </div>
    </div>
<?php endif; ?>
                    <div class="other-opt">
                        <input type="hidden" name="proId" id="proId" value="<?php echo e($pro->product_id); ?>">
                        <div class="quantity">
                            <button class="dec" fdprocessedid="157srp">-</button>
                            <input value="1" min="1" type="number" name="proQuantity" id="proQuantity" fdprocessedid="5xhskf">
                            <button class="inc" fdprocessedid="g66wvf">+</button>
                        </div>
                        <div class="cart-button">
                            <a class="view_cart cart-mart" style="display: none;" href="<?php echo e(url('/cart')); ?>" id="view_cart">VIEWCART<i class="fa-solid fa-arrow-right"></i></a>
                            <!-- <a href="cart.php" class="cart-mart" onclick="choosproducts()">BUY NOW <i class="fa-solid fa-arrow-right"></i></a> -->
                            <a href="javascript:;" class="add-cart cart-mart-1" id="add_cart">ADD TO CART<img src="<?php echo e(asset('asset/front_asset/images/cart-icon.png')); ?>" class="img-fluid" alt="img" element-id="193"></a>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </section>

    <section class="caraoo-products">
        <div class="container">
            <div class="row">
                <div class="products-951 owl-carousel owl-theme">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $pro): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="item">

                        <div class="hosefull">
                            <a href="<?php echo e(url('/product_detail/'.$pro->product_id)); ?>">
                                <img class="img-fluid" src="<?php echo e(asset('storage/images/'.$pro->product_image)); ?>" alt="">
                                <p>$<?php echo e($pro->product_origional_price); ?></p>
                                <span>$<?php echo e($pro->product_selling_price); ?></span>
                                <h6><?php echo e($pro->product_front_title); ?></h6>
                            </a>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </div>
        </div>
    </section>

</main>


<?php if (isset($component)) { $__componentOriginalc4b07cf28b7f1e802225b60d159b9be2061c7516 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\Main\Footer::class, []); ?>
<?php $component->withName('main.footer'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc4b07cf28b7f1e802225b60d159b9be2061c7516)): ?>
<?php $component = $__componentOriginalc4b07cf28b7f1e802225b60d159b9be2061c7516; ?>
<?php unset($__componentOriginalc4b07cf28b7f1e802225b60d159b9be2061c7516); ?>
<?php endif; ?>
<script>

$(document).ready(function() {
    $("#add_cart").on("click", function(e) {
        e.preventDefault();
        console.log('Add to Cart button clicked');
        var ide = $("#proId").val();
        var qty = $("#proQuantity").val();
        var size = $('input[name="size"]:checked').val();
        var sizz = <?php echo json_encode($sizes); ?>;

        console.log('Product ID:', ide);
        console.log('Quantity:', qty);
        console.log('Selected size:', size);
        console.log('Available sizes:', sizz);

        if (sizz.length > 0 && !size) {
            toastr.error("Please Select Size", "Error", { timeOut: 1500 });
            return false;
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: "<?php echo e(url('/add_cart')); ?>",
            method: "POST",
            data: { id: ide, qty: qty, size: size },
            success: function(data) {
                console.log("AJAX success response:", data);
                if (data.loginerror) {
                    toastr.error(data.loginerror, "Error", { timeOut: 1500 });
                    $("#login").modal('show');
                } else if (data.error) {
                    toastr.error(data.error, "Error", { timeOut: 1500 });
                    return false;
                } else if (data.success) {
                    toastr.success(data.success, "Success", { timeOut: 1500 });
                    $("#offcanvasbody").load(location.href + " #offcanvasbody>*", "");
                    $(".view_cart").show();
                }
            },
            error: function(err) {
                console.log("AJAX error response:", err);
                toastr.error("Something Went Wrong", "Error", { timeOut: 1500 });
                return false;
            }
        });
    });
});



    // Comment Work
    $(document).ready(function() {
        $("#comment-form").on('submit', function(e) {
            e.preventDefault();

            var data = new FormData(this);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "<?php echo e(url('post_procomment')); ?>",
                method: "POST",
                data: data,
                datatype: "json",
                contentType: false,
                processData: false,
                cache: false,
                success: function(data) {
                    if (data.proerror) {
                        toastr.error(data.proerror, "Error", {
                            timeOut: 1500
                        });
                        return false;
                    } else if ($.isEmptyObject(data.error)) {
                        toastr.success(data.success, "Added", {
                            timeOut: 1500
                        });
                        $("#showreview").load(location.href + " #showreview>*", "");
                        document.getElementById("comment-form").reset();
                        // 		window.location.reload();

                    } else if (data.error.Comment) {
                        toastr.error(data.error.Comment, "Error", {
                            timeOut: 1500
                        });
                        return false;
                    } else if (data.error.userName) {
                        toastr.error(data.error.userName, "Error", {
                            timeOut: 1500
                        });
                        return false;
                    } else if (data.error.userEmail) {
                        toastr.error(data.error.userEmail, "Error", {
                            timeOut: 1500
                        });
                        return false;
                    }
                },
                error: function() {
                    toastr.error("SomeThing Went Wrong", "Error", {
                        timeOut: 1500
                    });
                    return false;
                },
            });
        });
    });
    // Comment Work End Here
</script>
<?php /**PATH C:\xampp\htdocs\easybuyer\resources\views/product_detail.blade.php ENDPATH**/ ?>