@include('temp2/common/header')
<section class="page-title parallax3 parallax-fix page-title-large"
    style="background: url({{url($title->menuimage)}}) 50% 0px;">
    <div class="opacity-medium bg-black"></div>

    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 text-center animated fadeInUp">
                <div class="separator-line bg-yellow no-margin-top margin-four"></div>
                <!-- page title -->
                <h1 class="white-text">{{$title->menutitle}}</h1>
                <!-- end page title -->
                <!-- page title tagline -->
                <span class="white-text">Home</span>
                <!-- end title tagline -->
            </div>
        </div>
    </div>
</section>
<!-- singleproduct  -->
<section>
            <div class="container">
                <div class="row">
                    <!-- product images -->
                    <div class="col-md-6 col-sm-12 zoom-gallery text-center">
                        @if(!empty($singleproduct->image1))<a href="{{url($singleproduct->image1)}}"><img src="{{url($singleproduct->image1)}}" alt=""/></a>@endif
                        <div class="products-thumb ">
                            @if(!empty($singleproduct->image1))<a href="{{url($singleproduct->image1)}}"><img src="{{url($singleproduct->image1)}}" alt=""/></a>@endif
                            @if(!empty($singleproduct->image2))<a href="{{url($singleproduct->image2)}}"><img src="{{url($singleproduct->image2)}}" alt=""/></a>@endif
                            @if(!empty($singleproduct->image3))<a href="{{url($singleproduct->image3)}}"><img src="{{url($singleproduct->image3)}}" alt=""/></a>@endif
                        </div>
                    </div>
                    <!-- end product images -->
                    <form method="post" action="{{url('/sercontribute')}}">@csrf
                    <div class="col-md-5 col-sm-12 col-md-offset-1">
                        <!-- product rating -->
                        <div class="rating margin-five no-margin-top">
                            <i class="fa fa-star black-text"></i><i class="fa fa-star black-text"></i><i class="fa fa-star black-text"></i><i class="fa fa-star black-text"></i><i class="fa fa-star-o black-text"></i><span class="rating-text text-uppercase">5 Reviews</span>
                        </div>
                        <!-- end product rating -->
                        <!-- product name -->
                        <span class="product-name-details text-uppercase font-weight-600 letter-spacing-2 black-text">{{$singleproduct->productname}}</span>
                        <!-- end product name -->
                        <!-- product stock -->
                        <p class="text-uppercase letter-spacing-2 margin-two">In Stock / Shipping Available</p>
                        <!-- end product stock -->
                        <div class="separator-line bg-black no-margin-lr margin-five"></div>
                        <!-- product short description -->
                        <p>{!! $singleproduct->description !!}</p>
                        
                        <!-- end product short description -->
                        @if(empty($attvalpro))
                        <span class="price black-text title-small"><del>${{$singleproduct->pricemrp}}</del>${{$singleproduct->pricesale}}</span>
                        @endif
                        @if(!empty($attvalpro))
                        <span class="price black-text title-small" id="productPrice">${{$singleproduct->pricesale}}</span>
                        @endif
                        <div class="col-md-3 col-sm-3 no-padding-left margin-five">
                            <div class="select-style med-input xs-med-input shop-shorting-details no-border-round">
                                <!-- product qty -->
                                <select id="productOptions" name="attvalueid" > 
                                    
                                    @if(!empty($attvalpro))  
                                    @foreach($attvalpro as $attvalpro)                             
                                    <option data-price="{{$attvalpro->vprice}}" value="{{$attvalpro->atvpid}}">{{$attvalpro->title}} {{$attvalpro->value}}</option>                                    
                                    @endforeach
                                    @endif
                                </select>
                                <!-- end product qty -->
                            </div>
                        </div>
                              
                        <div class="col-md-9 col-sm-9 no-padding margin-five">
                            <!-- add to bag button -->
                            
                            <input type="hidden" name="productid" value="{{$singleproduct->id}}">
                            <input type="submit" class="highlight-button-dark btn btn-medium button" value="Contribute">
                            <!-- end add to bag button -->
                        </div>
                        <!-- <div class="col-lg-4 col-md-5 col-sm-3 no-padding-left">                            
                            <a title="Add to Wishlist" href="#" class="text-uppercase text-small vertical-align-middle"><i class="fa fa-heart-o black-text"></i> Add to wishlist</a>                            
                        </div>
                        <div class="col-md-8 col-sm-9 product-details-social no-padding">                            
                            <span class="black-text text-uppercase text-small vertical-align-middle margin-right-five">Share on</span>
                            <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
                            <a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a>
                            <a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>                            
                        </div> -->
                    </div>
                    </form>
                </div>
            </div>
        </section>
<script>
    // Function to update the displayed price
function updatePrice() {
    const selectedOption = document.getElementById("productOptions").options[document.getElementById("productOptions").selectedIndex];
    const priceSpan = document.getElementById("productPrice");
    
    const price = selectedOption.getAttribute("data-price");
    
    if (price) {
        priceSpan.textContent = "$" + price;
    } else {
        priceSpan.textContent = "Price not available";
    }
}

// Attach an event listener to the select element to update the price when the selection changes
document.getElementById("productOptions").addEventListener("change", updatePrice);

// Initial update of the price
updatePrice();

</script>
<!--main end-->
@include('temp2/common/footer')