<x-main.header />
<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);
                                @endphp
                                @if($gallery_images)
                                @foreach($gallery_images as $key => $image)
                                <div class="item" element-id="322">
                                    <a href="{{ asset('storage/images/'.$image) }}" data-fancybox="gallery" class="fancybox" element-id="321">
                                        <img src="{{ asset('storage/images/'.$image) }}" class="img-fluid" alt="img" element-id="320">
                                    </a>
                                </div>
                                @endforeach
                                @endif
                            </div>

                            @if(is_array($gallery_images) && !empty($gallery_images))
                            <div id="sync2" class="owl-carousel owl-theme" element-id="283">
                                @foreach($gallery_images as $key => $image)
                                @if($image)
                                <div class="item" element-id="279">
                                    <img src="{{ asset('storage/images/'.$image) }}" class="img-fluid" alt="img" element-id="278">
                                </div>
                                @endif
                                @endforeach
                            </div>
                            @else
                            <p>No gallery images available.</p>
                            @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>{{ $pro->product_heading }}</h2>
                        <p>{{ $pro->category->category_heading }}</p>
                    </div>
                    <div class="silder-flex-text">
                        <ul class="mortion">
                            <li class="inverter">
                                <input type="hidden" id="originalPrice" value="{{ $pro->product_origional_price }}" />
                                <h4>${{ $pro->product_origional_price }}</h4>
                                <h5>${{ $pro->product_selling_price }}</h5>

                            </li>
                         
<div id="discount-section">
    <p>{{ isset($discount) && $discount > 0 ? 'Discount Applied: <span id="discountPrice">$' . $discount.'</span>' : 'No discount applied.' }}</p>
</div>
<div id="final-price">
    <p>Final Price: ${{ $final_price ?? $product->product_origional_price }}</p>
</div>






                            <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="{{ asset('asset/front_asset/images/Ellipse15.png') }}" class="img-fluid" alt="img"></li>
                                    <li><img src="{{ asset('asset/front_asset/images/Ellipse16.png') }}" class="img-fluid" alt="img"></li>
                                    <li><img src="{{ 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> -->
                    @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">
                    @foreach($sizes as $size)
                        <input type="radio" id="size-{{ $size->size_id }}" name="size" value="{{ $size->size }}">
                        <label for="size-{{ $size->size_id }}">{{ $size->size }}</label>
                    @endforeach
                </div>
            </form>
        </div>
    </div>
@endif
                    <div class="other-opt">
                        <input type="hidden" name="proId" id="proId" value="{{ $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="{{ 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="{{ 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">
                    @foreach($products as $key => $pro)
                    <div class="item">

                        <div class="hosefull">
                            <a href="{{ url('/product_detail/'.$pro->product_id) }}">
                                <img class="img-fluid" src="{{ asset('storage/images/'.$pro->product_image) }}" alt="">
                                <p>${{ $pro->product_origional_price }}</p>
                                <span>${{ $pro->product_selling_price }}</span>
                                <h6>{{ $pro->product_front_title }}</h6>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        </div>
    </section>

</main>


<x-main.footer />
<script>

$(document).ready(function() {
    $("#add_cart").on("click", function(e) {
        e.preventDefault();
        var ide = $("#proId").val();
        var qty = $("#proQuantity").val();
        var size = $('input[name="size"]:checked').val();

        if (!size && <?php echo json_encode($sizes); ?>.length > 0) {
            toastr.error("Please Select Size", "Error", { timeOut: 1500 });
            return false;
        }

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

        $.ajax({
            url: "{{ url('/add_cart') }}",
            method: "POST",
            data: { id: ide, qty: qty, size: size },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.success, "Success", { timeOut: 1500 });

                    if (response.discount > 0) {
                        $("#discount-section").html(`Discount Applied: - $${response.discount}`);
                        $("#final-price").html(`Price after discount: $${response.final_price}`);
                    } else {
                        $("#discount-section").html(`No discount applied.`);
                        $("#final-price").html(`Final Price: $${response.final_price}`);
                    }

                    $("#offcanvasbody").load(location.href + " #offcanvasbody>*", "");
                    $(".view_cart").show();
                } else if (response.error) {
                    toastr.error(response.error, "Error", { timeOut: 1500 });
                }
            },
            error: function() {
                toastr.error("An error occurred", "Error", { timeOut: 1500 });
            }
        });
    });
});




    // 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: "{{ 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>
<script>
function priceCalculate () {
    const qty = Number($(`[name="proQuantity"]`).val())
    const price = Number($("#originalPrice").val())
    const calculatedPrice = qty * price
    const discount = calculatedPrice * 0.1
    const discountedPrice = calculatedPrice - discount
    $("#discount-section").html(`Discount Applied: - $${discount}`);
    $("#final-price").html(`Final Price: $${discountedPrice}`);

}
$(`[name="proQuantity"]`).change(priceCalculate)
$(".quantity").click(priceCalculate)
    
</script>