@include('temp2/common/header')
<!--main start-->
@if(!empty($title->menuimage))
<div class="page-header parallax clearfix" style="background-image:url({{url($title->menuimage)}})">@endif
        <div class="title-subtitle-holder">
        	<div class="title-subtitle-holder-inner">
    			<h2>{{$title->menutitle}}</h2>
        	</div>
        </div>
    </div>
    <!-- End Page Header -->
    <!-- Breadcrumbs -->
    <div class="lgray-bg breadcrumb-cont">
    	<div class="container">
          	<ol class="breadcrumb">
            	<li><a href="index.html">Home</a></li>
            	<li class="active">{{$title->menutitle}}</li>
          	</ol>
        </div>
    </div>
    <!-- Start Body Content -->
  	<div class="main" role="main">
    	<div id="content" class="content full">
                
                    
                           <!--  <div class="col-md-10">
                	        <article class="single-post format-standard">
                                <div class="title-row">
                                    <a href="#comments" class="comments-go" title="10 comments"><i class="icon-dialogue-text"></i></a>
                                    <h2>{{$singleproduct->productname}} ( {{$singleproduct->quantity}} )</h2>
                                </div>                           	
                                <div class="post-media">
                                    <a href="" class="media-box"><img src="{{url($singleproduct->image1)}}" alt="" class="post-thumb"></a>
                                </div>
                                <div class="meta-data post-tags"><i class="fa fa-tags"></i>  <a href="#"><strike>{{$singleproduct->pricemrp}}</strike></a>, <a href="#">{{$singleproduct->pricesale}}</a></div>

                                <div class="post-content">
                                    <p>{!! $singleproduct->description !!}</p>
                                </div>
                                <div class="social-share-bar">
                                <a href="" class="btn btn-primary btn-sm">Buy Now</a>
                                    
                                </div>
                            </article>
                            
                            <section class="post-comments" id="comments">
                                <h4 class="title">Comments (4)</h4>
                                <ol class="comments">
                                    <li>
                                        <div class="post-comment-block">
                                            <div class="img-thumbnail"> <img src="images/img_avatar.png" alt="avatar"> </div>
                                            <a href="#" class=" pull-right" title="Reply to comment"><i class="fa fa-reply"></i></a>
                                            <h5>John Doe says</h5>
                                            <span class="meta-data">Nov 23, 2013 at 7:58 pm</span>
                                            <div class="comment-text">
                                                <p>Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo. Phasellus nec nisi justo. Ut luctus sagittis nulla at dapibus. Aliquam ullamcorper commodo elit, quis ornare eros consectetur a.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="post-comment-block">
                                            <div class="img-thumbnail"> <img src="images/img_avatar.png" alt="avatar"> </div>
                                            <a href="#" class=" pull-right" title="Reply to comment"><i class="fa fa-reply"></i></a>
                                            <h5>John Doe says</h5>
                                            <span class="meta-data">Nov 23, 2013 at 7:58 pm</span>
                                            <div class="comment-text">
                                                <p>Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo.</p>
                                            </div>
                                        </div>
                                        <ul>
                                            <li>
                                                <div class="post-comment-block">
                                                    <div class="img-thumbnail"> <img src="images/img_avatar.png" alt="avatar"> </div>
                                                    <a href="#" class=" pull-right" title="Reply to comment"><i class="fa fa-reply"></i></a>
                                                    <h5>John Doe says</h5>
                                                    <span class="meta-data">Nov 23, 2013 at 7:58 pm</span>
                                                    <div class="comment-text">
                                                        <p>Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo. Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo. Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="post-comment-block">
                                                    <div class="img-thumbnail"> <img src="images/img_avatar.png" alt="avatar"> </div>
                                                    <a href="#" class=" pull-right" title="Reply to comment"><i class="fa fa-reply"></i></a>
                                                    <h5>John Doe says</h5>
                                                    <span class="meta-data">Nov 23, 2013 at 7:58 pm</span>
                                                    <div class="comment-text">
                                                        <p>Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor.</p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div class="post-comment-block">
                                            <div class="img-thumbnail"> <img src="images/img_avatar.png" alt="avatar"> </div>
                                            <a href="#" class=" pull-right" title="Reply to comment"><i class="fa fa-reply"></i></a>
                                            <h5>John Doe says</h5>
                                            <span class="meta-data">Nov 23, 2013 at 7:58 pm</span>
                                            <div class="comment-text">
                                                <p>Curabitur nec nulla lectus, non hendrerit lorem. Quisque lorem risus, porttitor eget fringilla non, vehicula sed tortor. Proin enim quam, vulputate at lobortis quis, condimentum at justo. Phasellus nec nisi justo. Ut luctus sagittis nulla at dapibus. Aliquam ullamcorper commodo elit, quis ornare eros consectetur a.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </section>
                            <section class="post-comment-form">
                                <h4 class="title">Post a comment</h4>
                                <form>
                                    <div class="row">
                                        <div class="form-group">
                                            <div class="col-md-4 col-sm-4">
                                                <input type="text" class="form-control" placeholder="Your name">
                                            </div>
                                            <div class="col-md-4 col-sm-4">
                                                <input type="email" class="form-control" placeholder="Your email">
                                            </div>
                                            <div class="col-md-4 col-sm-4">
                                                <input type="url" class="form-control" placeholder="Website (optional)">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <textarea cols="8" rows="4" class="form-control" placeholder="Your comment"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-primary btn-lg">Submit your comment</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </section>
                        </div>
                        <div class="col-md-4">
                            <div class="widget sidebar-widget search-form-widget">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search Posts...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button"><i class="fa fa-search fa-lg"></i></button>
                                    </span>
                                </div>
                            </div>
                            <div class="widget sidebar-widget widget_categories">
                                <h3 class="widgettitle">Post Categories</h3>
                                <ul>
                                    <li><a href="#">Featured</a> (9)</li>
                                    <li><a href="#">General</a> (24)</li>
                                    <li><a href="#">Events</a> (13)</li>
                                    <li><a href="#">Videos</a> (23)</li>
                                    <li><a href="#">Unity</a> (65)</li>
                                </ul>
                            </div>
                            <div class="widget sidebar-widget">
                                <h3 class="widgettitle">Post Tags</h3>
                                <div class="tag-cloud">
                                    <a href="#">Baptism</a>
                                    <a href="#">Faith</a>
                                    <a href="#">Love</a>
                                    <a href="#">Storms</a>
                                    <a href="#">Anxiety</a>
                                    <a href="#">Life</a>
                                </div>
                            </div>
                            <div class="widget sidebar-widget upcoming_events_widget">
                                <h3 class="widgettitle">Upcoming Events</h3>
                                <div class="events-listing-content smaller-cont">
                                    <div class="event-list-item">
                                        <div class="event-list-item-date">
                                            <span class="event-date">
                                                <span class="event-day">22</span>
                                                <span class="event-month">Sep, 14</span>
                                            </span>
                                        </div>
                                        <div class="event-list-item-info">
                                            <div class="lined-info event-title">
                                                <h4><a href="#">Water Baptism</a></h4>
                                            </div>
                                            <span class="meta-data"><i class="fa fa-clock-o"></i> Monday, 10:00 AM</span>
                                            <span class="meta-data"><i class="fa fa-map-marker"></i> State Route, Madison US</span>
                                        </div>
                                    </div>
                                    <div class="event-list-item">
                                        <div class="event-list-item-date">
                                            <span class="event-date">
                                                <span class="event-day">27</span>
                                                <span class="event-month">Sep, 14</span>
                                            </span>
                                        </div>
                                        <div class="event-list-item-info">
                                            <div class="lined-info event-title">
                                                <h4><a href="#">Sunday Meet Up</a></h4>
                                            </div>
                                            <span class="meta-data"><i class="fa fa-clock-o"></i> Sunday, 05:00 PM</span>
                                            <span class="meta-data"><i class="fa fa-map-marker"></i> <span class="event-location-address">55 Warren Street, New York</span></span>
                                        </div>
                                    </div>
                                    <div class="event-list-item">
                                        <div class="event-list-item-date">
                                            <span class="event-date">
                                                <span class="event-day">06</span>
                                                <span class="event-month">Feb, 15</span>
                                            </span>
                                        </div>
                                        <div class="event-list-item-info">
                                            <div class="lined-info event-title">
                                                <h4><a href="http://www.google.com">Holy shift: Strategic think</a></h4>
                                            </div>
                                            <span class="meta-data"><i class="fa fa-clock-o"></i> Monday, 10:00 AM</span>
                                            <span class="meta-data"><i class="fa fa-map-marker"></i> <span class="event-location-address">123 Broadway, New York, NY</span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                

                        <style>
                            
                        .checked {
                            color: orange;
                        }
                        .circle .circle1{
                            height: 25px;
                            width: 25px;
                            border: 1px solid black;
                            border-radius: 50%;
                            display: flex; 
                            justify-content: center;
                            align-items: center;
                            float: left;
                            margin-right: 0.5%;
                        }
                        .circle {
                            float: left;

                        }

                        </style>


                        <div  style="float:left; width: 48%; margin-left: 0.5%; box-shadow:0px 0px 2px 2px rgb(140, 141, 141); width: 90%; align-content: center; border: 3px; margin: 2%; height: fit-content; background-color: rgb(245, 247, 246); float: left;">
                            <div  style="float:left; width: 48%; margin-left: 0.5%; ">
                                <div  style="padding-top: 30px;">
                                
                                    <img id="expandedImg" style="width:100%">

                                </div>
                                <div class="ccard-image" style="float: left; display: flex; margin-top: 20px; margin: 5px;">
                                    <div style="float: left; display: flex; margin-top: 20px; margin: 5px;" ><img src="{{url($singleproduct->image1)}}" height="200px" width="200px" onclick="myFunction(this)"></div>
                                    <div style="float: left; display: flex; margin-top: 20px; margin: 5px;" ><img src="{{url($singleproduct->image2)}}" height="200px" width="200px" onclick="myFunction(this)"></div>
                                    <div style="float: left; display: flex; margin-top: 20px; margin: 5px;" ><img src="{{url($singleproduct->image3)}}" height="200px" width="200px" onclick="myFunction(this)"></div>
                                </div>
                            </div>
                            <div class="inner-text" style="float:right; width: 48%; margin-right: 0.5%;">
                                <h1><u> {{$singleproduct->productname}}</u> </h1>
                                <h3 ><span style="background-color:rgb(36, 5, 98); color: white ; ">VISIT OUR STORE</span></h3>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star-half-full checked"></span><label> 4.7(21)</label><br><br>
                                <label >(-7%) &nbsp; <b style="bottom: -1px;">$</b> <b style="font-size:30px;">{{$singleproduct->pricesale}}</b></label><br>
                                <label><b> M.R.P.: </b><del style="font-size:20px;">$ {{$singleproduct->pricemrp}}</del></label><br><br>
                                
                                <h3><b>About This Item:</b></h3>
                                <p>ParagraphParagraphs are the group of sentences combined together, about a certain topic.
                                    It is a very important form of writing as we write almost everything in paragraphs,
                                    be it an answer, essay, story, emails, etc. We can say that a well-structured
                                    paragraph is the essence of good writing. The purposes of the paragraph are to give information,
                                    to explain something, to tell a story, and to convince someone that our idea is right.<br><br>
                                    
                                    <br>
                                    <br>
                                    <i class="fa fa-check-circle" style="font-size:18px; color:red"></i><label><b>Color</b>:Black</label><br>
                                    <i class="fa fa-check-circle" style="font-size:18px; color:red"></i><label><b>Available</b>:in stock</label><br>
                                    <i class="fa fa-check-circle" style="font-size:18px; color:red"></i><label><b>Category</b>:Shoes</label><br>
                                    <i class="fa fa-check-circle" style="font-size:18px; color:red"></i><label><b>Shipping Area</b>:All over the world</label><br>
                                    <i class="fa fa-check-circle" style="font-size:18px; color:red"></i><label><b>Shipping Fee</b>:Free</label><br>
                                </p>

                                
                                <p class="circle">Share at:<label class="circle1"><i class="fa fa-facebook-f"></i> </label>
                                
                                    <label class="circle1"><i class="fa fa-instagram"></i> </label>
                                    <label class="circle1"><i class="fa fa-pinterest"></i> </label> 
                                    <label class="circle1"><i class="fa fa-twitter"></i> </label> 
                                    <label class="circle1"><i class="fa fa-whatsapp"></i> </label>
                                </p>
                                <button class="button" span style="background-color:#eac313; color: white ; width: 30%;height: 60px; border-radius: 10px; font-size: 30px; float: right; margin-right: 30px;">Buy Now</span></button>
                            </div>
                        </div>
                   
                
            
        </div>
    </div> 
       <script>
     //var expandImg = document.getElementById("expandedImg");
     expandedImg.src ="{{url($singleproduct->image1)}}";
    function myFunction(imgs) {
      var expandImg = document.getElementById("expandedImg");
      var imgText = document.getElementById("imgtext");

      expandImg.src = imgs.src;
      imgText.innerHTML = imgs.alt;
      expandImg.parentElement.style.display = "block";
    }
    </script>
<!--main end-->
@include('temp2/common/footer')