@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>
    <style>
    .aaa:hover{
        opacity: 1!important;
    }

    </style>

    <div class="lead-content clearfix">
    	<div class="lead-content-wrapper">
    		<div class="">
                <div class="row"> 
                    <div class="col-sm-2">                                       
                        <div>
                            <ul class="serviceul">
                                <li class="serviceli"><a href="{{url($service->route.'/0')}}">All Services</a></li>
                                @foreach($allservice as $allservice)
                                @php
                                $active='';
                                @endphp
                                @if($allservice->id==Request::segment(2))
                                @php
                                $active='serviceliactive';
                                @endphp
                            
                                @endif
                                <li class="serviceli  {{$active}}">
                                    <a href="{{url($allservice->route.'/'.$allservice->id)}}">{{$allservice->title}}</a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-10">
                        <div class="row">
                            <div style="width: 238px; height: 40px; background: #D9D9D9; border-radius:8px; border-color:#800000;">
                                <div style="color: #750000; font-family: Inter; font-size: 28px; font-style: normal; margin-left: 3px; font-weight: 600; line-height: 40px; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: black;">Featured Products</div>
                                <div style="width: 845px; height: 2px; background: #800000; margin-left: 238px; margin-top: -20px;" ></div>
                            </div>   

                        @foreach($surpro as $surpro)
                            <div class="col-sm-3">
                                <div  id="produdct1" class="cardsizeshape">
                                    <span class="trending">Trending Now</span>
                                    <div class="quickviewbody">
                                        <a id="quickvw1" class="quickview" onclick="openmodal('{{$surpro->id}}')" href="#"  data-quickview="" data-product="" data-size="xl"><i class="fa fa-search-plus"></i> Quick View</a>
                                    </div>                                
                                    <div class="card1body">
                                        <div class="card1bodyrounded">
                                            <div class="bodyrowstart">
                                                <div class="card1image">                                                
                                                    @if(!empty($surpro->image1))
                                                    <a href="{{url('/singleproduct/'.$surpro->id)}}" class="mx-auto">                                                    
                                                        <img class="imgstyle" data-sizes="auto" src="{{url($surpro->image1)}}" data-src="" width="120" height="99" alt="" title="" sizes="221px">
                                                    </a>
                                                    @endif
                                                </div>
                                                <div class="textbody">
                                                    <div class="textbody1">
                                                        <div class="textbody3">
                                                            <h2 class="tbody31"><a href="" title="">{{ substr($surpro->productname,0,60) }}...</a></h2>
                                                            <div class="tbody32">
                                                                <div style="min-height:30px;">
                                                                    <span class="productrating" title="" data-rating="0" data-size="1" data-color="orange-500" data-original-title="Not rated yet."><i class="fa fa-1x text-orange-500 fa-star-o" aria-hidden="true"></i><i class="fa fa-1x text-orange-500 fa-star-o" aria-hidden="true"></i><i class="fa fa-1x text-orange-500 fa-star-o" aria-hidden="true"></i><i class="fa fa-1x text-orange-500 fa-star-o" aria-hidden="true"></i><i class="fa fa-1x text-orange-500 fa-star-o" aria-hidden="true"></i></span>
                                                                </div>
                                                            </div>
                                                            <table class="tbody34">
                                                                <tbody>
                                                                    <tr>
                                                                        <td class="p-0">
                                                                            <div class="truncate" data-length="200" >{!! substr($surpro->description,0,80) !!}...</div> 
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <span class="tbody34">
                                                                <a href="#" class="cursor-help" data-modal-alt="" data-title="Indian Root" data-html="true" data-text="	<p class='text-red'>Enjoy Free Shipping On All Orders of $150+ from Root	</p>
                                                                    <a href='' class='btn btn-light border'>Shop This Store</a>">
                                                                    <span class="btext">Free Shipping on $150+ Order* </span>
                                                                </a>
                                                                &nbsp;
                                                            </span>
                                                        </div>
                                                        <div class="tbody35">
                                                            <div class="">
                                                            <span class="currency"><span class="pricemrp" ><s>${{ sprintf("%.2f",$surpro->pricemrp)}}</s>&nbsp;&nbsp;<span class="specialprice">${{sprintf("%.2f",$surpro->pricesale)}}</span></span>
                                                                </span>                                                            
                                                            </div>
                                                        </div>
                                                        <div class="tbody35">
                                                            <div class="procart">
                                                                @if($surpro->producttype == '1') 
                                                                <a href="{{url('/procontribute/'.$surpro->id)}}">
                                                                    <button class="addcart" type="submit" title="" data-original-title="Add to cart">
                                                                        <span>
                                                                            <span class="fa fa-shopping-cart" aria-hidden="true"></span>
                                                                        </span>
                                                                    </button>      
                                                                </a>
                                                                      
                                                                @elseif ($surpro->producttype == '2') 
                                                                <a href="{{url('/sercontribute/'.$surpro->id)}}">
                                                                    <button class="addcart" type="submit" title="" data-original-title="Add to cart">
                                                                        <span>
                                                                            <span class="fa fa-shopping-cart" aria-hidden="true"></span>
                                                                        </span>
                                                                    </button>      
                                                                </a>
                                                                @endif                                                
                                                                <button class="addlove" type="button" title="" data-original-title="Add to wish list">
                                                                    <span><i class="fa fa-heart" aria-hidden="true"></i></span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="endsize">
                                                            <div class="endsize">
                                                                <form class="endsize" name="orderform_37882_1560314506_" method="get" action="product.php" onsubmit="javascript: return check_quantity(37882, '');">
                                                                    <input type="hidden" name="mode" value="add">
                                                                    <input type="hidden" name="productid" value="37882">
                                                                    <input type="hidden" name="cat" value="79">
                                                                    <input type="hidden" name="page" value="">
                                                                    <input type="hidden" name="is_featured_product" value="">
                                                                    
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        </div>  
                    </div>                
                </div>
        	</div>
        </div>
    </div>
    <div id="productldtlmodal" class="modal fade" role="dialog">
        <div class="modaldialog">
        <!-- Modal content-->
            <div class="modalcontent">
                <div class="modalheader">
                <a href=""><span class="modaltitle" id="protitle"></span></a>
                <button type="button" class="cls" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modalbody" id="prodtl">
             
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

    function openmodal(id){
        $.ajax({
  url: "{{url('getproductdetl')}}/"+id,
  context: document.body
}).done(function(result) {
console.log(result);
var html=`   <div class="rowproductdetails" id="product-details-id">
                    <div class="col125">
                        <div class="cardborder">
                            <div class="cardbodyrounded">
                                <div class="ribbonholder" style="display: block;">
                                    <div class="ribbonwraps">
                                        <div class="ribbonwrapleft"></div>
                                        <div class="ribbonwrapright"></div>
                                        <a href="">
                                            <div class="ribbonbanner">Trending Now</div>
                                        </a>
                                    </div>
                                </div>
                                <div class="productimages">
                                </div>
                                <div class="image-box">
                                    <img class="imgfluid" data-sizes="auto" src="http://127.0.0.1:8000/`+result.image1+`"
                                        id="product_thumbnail" data-src="http://127.0.0.1:8000/`+result.image1+`" width="259"
                                        height="360"
                                        alt="`+result.productname+`"
                                        title="`+result.productname+`"
                                        sizes="259px">
                                </div>
                                <div class="mt4">
                                    <img class="imgfluidrounded" data-zoom="" src="http://127.0.0.1:8000/`+result.image1+`"
                                        data-large="http://127.0.0.1:8000/`+result.image1+`" data-width="1139"
                                        data-height="1586" width="43" height="60" alt="" title="" style="height:60px;width:auto;"
                                        data-original-title="">
                                    <img class="imgfluidrounded" data-zoom=""
                                        src="http://127.0.0.1:8000/`+result.image2+`"
                                        data-large="http://127.0.0.1:8000/`+result.image2+`" data-width="546"
                                        data-height="1152" width="28" height="60" alt="" title=""
                                        style="height:60px;width:auto;" data-original-title="">
                                    <img class="imgfluidrounded" data-zoom=""
                                        src="http://127.0.0.1:8000/`+result.image3+`"
                                        data-large="http://127.0.0.1:8000/`+result.image3+`" data-width="546"
                                        data-height="1152" width="28" height="60" alt="" title=""
                                        style="height:60px;width:auto;" data-original-title="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- done -->
                    <a id="product_details_top"></a>
                    <div class="dec1">
                        <div class="dec2">
                            <label for="tab_qv_details" class="dec3"><span class="dec4"><i class="fa fa-info-circle"
                                        aria-hidden="true"></i> Details</span></label>
                            <div class="xtab p-3 shadow-sm">
                                <div class="details">
                                    <div class="row row-relative">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                            <form name="orderform" method="post" action={{url('/contribute/`+result.id+`')}}
                                                onsubmit="javascript: return FormValidation(this);" id="orderform">@csrf
                                                <input type="hidden" name="mode" value="add">
                                                <input type="hidden" name="productid" value="`+result.id+`">
                                                <input type="hidden" name="amount" value="`+result.pricesale+`">
                                                <input type="hidden" name="type" value="1">
                                                <table class="table table-borderless mb-0 product-properties w-100">
                                                    <tbody>
                                                        <tr class="d-none">
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="property-name">Rating</td>
                                                            <td class="property-value" colspan="2">
                                                                <span class="product-rating ttip_n" title="" data-rating="5"
                                                                    data-size="1" data-color="orange-500"
                                                                    data-original-title="Rated 5 / 5"><i
                                                                        class="fa fa-1x text-orange-500 fa-star"
                                                                        aria-hidden="true"></i><i
                                                                        class="fa fa-1x text-orange-500 fa-star"
                                                                        aria-hidden="true"></i><i
                                                                        class="fa fa-1x text-orange-500 fa-star"
                                                                        aria-hidden="true"></i><i
                                                                        class="fa fa-1x text-orange-500 fa-star"
                                                                        aria-hidden="true"></i><i
                                                                        class="fa fa-1x text-orange-500 fa-star"
                                                                        aria-hidden="true"></i></span>
                                                                <label class="css-speech-bubble"><a
                                                                        href="">1
                                                                        reviews</a></label>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="property-name product-price">Our Price</td>
                                                            <td class="property-value" colspan="2">
                                                                <div class="row no-gutters align-items-center">
                                                                    <div class="col">
                                                                        <h2
                                                                            class="product-price-value text-success m-0 h2 font-weight-normal styled-price d-inline">
                                                                            <span class="currency">
                                                                                <span class="pricemrp" >
                                                                                    <s>$`+result.pricemrp+`</s>
                                                                                </span>
                                                                            </span>
                                                                            <span class="currency">$
                                                                                <span id="product_price"><span class="specialprice">`+result.pricesale+`</span>
                                                                            </span>
                                                                        </h2>
                                                                        <span itemprop="offers" itemscope=""
                                                                            itemtype="">
                                                                            <meta itemprop="priceCurrency" content="USD">
                                                                            <meta itemprop="price" content="699.95">
                                                                            <link itemprop="availability"
                                                                                href="">
                                                                            <link itemprop="url"
                                                                                href="">
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <span class="product-market-price"></span>
                                                            </td>
                                                        </tr>
                                                        <tr style="display: none;">
                                                            <td colspan="3">
                                                                <div id="wl-prices" style="display: none;">
                                                                    <table
                                                                        class="table table-sm table-striped table-bordered my-2 w-100">
                                                                        <tbody>
                                                                            <tr class="border-bottom">
                                                                                <td><b>Quantity</b></td>
                                                                                <td><b>Price</b></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="property-name">
                                                                Shipping
                                                            </td>
                                                            <td class="property-value product-shipping" colspan="2">
                                                                FREE Shipping
                                                                <a href="#" tabindex="0"
                                                                    class="btn btn-sm btn-light ttip_n popover_n cursor-help"
                                                                    title="" data-html="true"
                                                                    data-content="This item qualifies for FREE SHIPPING. Restrictions apply to only origin country and within mainland."
                                                                    data-original-title="Shipping Cost">
                                                                    <i class="fa fa-question fa fa-small" aria-hidden="true">
                                                                    </i><br>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="property-name">
                                                                <span class="text-danger">Low Stock</span>
                                                            </td>
                                                            <td class="property-value product-quantity-text" colspan="2">
                                                                <span class="text-danger">Only 7 item(s) available</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="property-name">Product ID</td>
                                                            <td class="property-value text-monospace" colspan="2" itemprop="sku"
                                                                content="37995">37995
                                                            </td>
                                                        </tr>
                                                        <tr class="quantity-row">
                                                            <td class="property-name product-input">
                                                                Quantity
                                                            </td>
                                                            <td class="property-value" colspan="2">

                                                                <div class="row no-gutters align-items-center">
                                                                    <div class="col text-danger">
                                                                        <input type="number" id="product_avail_input" name="amount"
                                                                            onchange="javascript: return check_quantity_input_box(this);"
                                                                            value="`+result.quantity+`" onclick="javascript:select()"
                                                                            class="form-control">
                                                                        <select class="w-auto custom-select" id="product_avail"
                                                                            name="amount" disabled="disabled"
                                                                            style="display: none;">
                                                                            <option value="1">1</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-auto text-right pl-3">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div class="py-2 text-center">
                                                    <button class="btn btn-lg btn-primary add-to-cart-button" type="submit"
                                                        title="Add to cart" style="display:none;">
                                                        <span><span class="fa fa-shopping-cart"></span> Add To Cart</span>
                                                    </button>
                                                    <input type="hidden" name="add_and_pay" value="">
                                                    <button class="btn btn-lg btn-success add-to-cart-button ttip_n" type="submit"
                                                        title="" onclick="" data-original-title="Buy Now">
                                                        <span>Buy Now</span>
                                                    </button>
                                                </div>
                                            </form>
                                        </div>                                        
                                    </div>
                                </div>
                                <div class="clearing"></div>
                            </div>
                            
                            <div class="xtab p-3 shadow-sm">
                                <label for="tab_qv_descr" class="tab-title p-2 noselect ignore-font"><span class="tab-title h5 m-0"><i
                                        class="fa fa-info-circle" aria-hidden="true"></i> Description</span></label>
                                <a id="pr_desc"></a>
                                <table class="w-100 mb-0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="truncate" data-length="300">
                                                    <div class="summary">
                                                        <div class="descr" itemprop="description">`+result.description+`
                                                        </div>                                                        
                                                    </div>
                                                    <div class="details" style="display: none;">
                                                        <div class="descr" itemprop="description">Divine Temples with fine
                                                            engraving, enchanting design with rust-proof finishing aspects. This
                                                            Puja mandir for home is designed for home worship and can be gifted on
                                                            occasions of house warming, wedding reception or on festivals. <br>
                                                            <br>
                                                            Product Size: 24"&nbsp;W x 18" L, 42" H
                                                        </div>
                                                        <br>
                                                        Beautiful gallery style pooja mandir for home with doors.<br>
                                                        *Since these are handmade mandirs, there may be differences in patterns and
                                                        carving.<span class="read-less"> <a href="#" class="less-link"></a><a
                                                                class="btn btn-xs btn-primary text-white rounded-pill p-1 pointer">...Show
                                                                Less</a></span>
                                                    </div>
                                                </div>
                                                <div class="table-responsive mt-2 mb-2" style="display: none;">
                                                    <table class="table table-striped table-bordered m-0 w-100">
                                                        <tbody>
                                                            <tr class="hidden">
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="property-name">SKU</td>
                                                                <td class="property-value text-monospace" colspan="2"
                                                                    id="product_code">IR74249</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="property-name">Price</td>
                                                                <td class="property-value text-success h5" colspan="2">
                                                                    <span class="currency">$`+result.pricemrp+`</span>
                                                                </td>
                                                            </tr>
                                                            <tr id="product_weight_box">
                                                                <td class="property-name">Shipping Weight </td>
                                                                <td class="property-value" colspan="2">
                                                                    <span id="product_weight">40.00</span> lbs
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="property-name">Collection</td>
                                                                <td class="property-value" colspan="2">
                                                                    <a href="">Puja
                                                                        Mandir for Home</a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="property-name">Condition</td>
                                                                <td class="property-value nospace" colspan="2">New
                                                                    <span itemprop="itemCondition" content="New"></span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="property-name">Payment</td>
                                                                <td class="property-value text-sm" colspan="2">
                                                                    <img src="/skin/common_files/images/custom/cc_icons.jpg"
                                                                        width="195" height="26"
                                                                        alt="100% safe checkout. Pay securely using Paypal, Credit Card, Check or eGift Certificate."
                                                                        title="100% safe checkout. Pay securely using Paypal, Credit Card, Check or eGift Certificate."
                                                                        class="img-fluid">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="clearing"></div>
                            </div>
                        </div>
                    </div>
                </div>`;
                $('#prodtl').html(html);
                $('#protitle').html(result.productname);
});
        $("#productldtlmodal").modal('show');
    }
        
    </script>

@include('temp2/common/footer')