@php

/*

$layout_page = home

*/ 

@endphp



@extends($sc_templatePath.'.layout')

@php

$productsNew = $modelProduct->start()->getProductLatest()->setlimit(sc_config('product_top'))->getData();

$news = $modelNews->start()->setlimit(sc_config('item_top'))->getData();

@endphp



@section('block_main')

      <!-- New Products-->
    
     <style>
  
  .cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card {
    margin: 10px auto;
    /* width: 300px; */
    /* height: 200px; */
    border-radius: 10px;
    /* box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22); */
    cursor: pointer;
    transition: 0.4s;
}

.card .card_image {
  width: inherit;
  height: inherit;
  border-radius: 5px;
}

.card .card_image img {
  width: inherit;
  height: inherit;
  border-radius: 5px;
  object-fit: cover;
}

.card .card_title {
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  font-family: sans-serif;
  font-weight: bold;
    font-size: 22px;
  margin-top: -80px;
  height: 40px;
}

.card:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
    -5px -5px 30px 15px rgba(0,0,0,0.22);
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

@media all and (max-width: 500px) {
  .card-list {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

h3.serv {
    padding-bottom: 30px;
}



.how-work .box {
    margin: 20px auto 0;
    padding: 0 20px;
  /*  min-height: 220px;*/
    background: black;
	border-radius: 5px;
    margin-bottom: 50px;
}

.how-work .box .icon {
    margin: 0 auto;
    display: block;
    padding: 24px 0;
    color: #ff4f74;
    font-size: 30px;
}
.title2 {
    font-size: 18px;
	padding-bottom: 30px;
}


.how-work {
    background: #ffd7d7;
	margin-top: 40px;
	/*margin-bottom: 40px;*/
}
.testo {
    margin-bottom: 30px;
}
.oc{padding-bottom:40px;}
.section-xxl {
    padding: 30px 0;
}

.testo{background:#544c00d9;}
  </style> 

      <section class="section section-xxl bg-default">
      
      
      <div class="container">
      <div class="row">
      
        <div class="col-md-12">
        <h3 class="serv">Our Services</h3>
        </div>
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/makeup.jpg" /> </div>
  <div class="card_title title-white">
    <p>Make-up Packages</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/dress.jpg" /> </div>
  <div class="card_title title-white">
    <p>Dress & Attire</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/jewellery.jpg" /> </div>
  <div class="card_title title-white">
    <p>Jewellery</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      
      </div>
      <div class="row oc">
      
        
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/photography.jpg" /> </div>
  <div class="card_title title-white">
    <p>Photography</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/mehandi.jpg" /> </div>
  <div class="card_title title-white">
    <p>Mehandi</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      <div class="col-md-4">
      
      <div class="cards-list">
  
<div class="card 1">
  <div class="card_image"> <img src="https://www.rentnhop.com/shopping/public/data/product/rental.jpg" /> </div>
  <div class="card_title title-white">
    <p>Rentals</p>
  </div>
</div>

  


  
  

</div>
      </div>
      
      
      </div>
      </div>


       <div class="how-work">
        <div class="container">
         
         <div class="row" style=" padding-bottom:40px;">
          <div class="col-md-12">
          <br />
        <h3 class="serv">How It Works</h3>
        </div>
         
       <div class="col-md-4 col-sm-6">
        <div class="box">
         <div class="icon fa fa fa-users"></div>
         <div class="title2">Find a best vendor near you</div>
        
        </div>
       </div>
       <div class="col-md-4 col-sm-6">
        <div class="box">
         <div class="icon fa fa-handshake-o"></div>
         <div class="title2">Get Consultaion & Final Quote</div>
        
        </div>
       </div>
       <div class="col-md-4 col-sm-6">
        <div class="box">
         <div class="icon fa fa-calendar-check-o"></div>
         <div class="title2">Pay Advance & Book vendor</div>
         
        </div>
       </div>
       
      </div>
         
        </div>
       
       </div>




          <div class="testo">
       <section id="testimonial" class="">
        <div class="container">
            <div class="row">
                <div class="col-12">
                <h3 >Testimonial</h3>
                   
                </div>
                <div class="col-12">
                    <div id="testimonialCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Slide Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#testimonialCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#testimonialCarousel" data-slide-to="1"></li>
                            <li data-target="#testimonialCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <!-- Slide 1 -->
                            <div class="carousel-item active">
                                <div class="carousel-content">
                                    <div class="client-img"><img src="https://secure.gravatar.com/avatar/111e6604cf3a666f44b33d8f6e2ac8d1?s=100&d=retro&r=g" alt="Testimonial Slider"></div>
                                   
                                    <p class="col-md-8 offset-md-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                </div>
                            </div>
                            <!-- Slide 2 -->
                            <div class="carousel-item">
                                <div class="carousel-content">
                                    <div class="client-img"><img src="http://via.placeholder.com/200x200" alt="Testimonial Slider"></div>
                                  
                                    <p class="col-md-8 offset-md-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                </div>
                            </div>
                            <!-- Slide 3 -->
                            <div class="carousel-item">
                                <div class="carousel-content">
                                    <div class="client-img"><img src="http://via.placeholder.com/200x200" alt="Testimonial Slider"></div>
                                  
                                    <p class="col-md-8 offset-md-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                </div>
                            </div>
                            <!-- Slider pre and next arrow -->
                            <a class="carousel-control-prev text-white" href="#testimonialCarousel" role="button" data-slide="prev">
                            <i class="fas fa-chevron-left"></i>
                            </a>
                            <a class="carousel-control-next text-white" href="#testimonialCarousel" role="button" data-slide="next">
                            <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
       
       </div>

<style>

 .client-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 4px solid #fff;
    margin: 0px auto 20px;
    border-radius: 100%;
}
.carousel-content {
    padding: 50px 0px;
}
.carousel-content h3 span {
    font-size: 17px;
    font-weight: normal;
    color: #e8e8e8;
    text-transform: uppercase;
}
.client-img img {
    width: 100%;
}
#testimonial {
    text-align: center;
    padding: 40px 0px;
    color: #fff;
}
#testimonial .carousel-control-prev,
#testimonial .carousel-control-next {
    font-size: 36px;
}

</style>



        <div class="container">



          <h2 class="wow fadeScale">{{ trans('front.products_new') }}</h2>



          <div class="row row-30 row-lg-50">

            @foreach ($productsNew as $key => $productNew)

            <div class="col-sm-6 col-md-4 col-lg-3">

                <!-- Product-->

                <article class="product wow fadeInRight">

                  <div class="product-body">



                    {{-- Product image --}}

                    <div class="product-figure">

                        <a href="{{ $productNew->getUrl() }}">

                        <img src="{{ asset($productNew->getThumb()) }}" alt="{{ $productNew->name }}"/>

                        </a>

                    </div>

                    {{--// Product image --}}



                    {{-- Product name --}}

                    <h5 class="product-title"><a href="{{ $productNew->getUrl() }}">{{ $productNew->name }}</a></h5>

                    {{--// Product name --}}



                    {{-- Display store - if use MultiStorePro --}}

                    @if (sc_config_global('MultiStorePro') && config('app.storeId') == 1)

                      <div class="store-url"><a href="{{ $productNew->goToStore() }}"><i class="fa fa-shopping-bag" aria-hidden="true"></i> {{ trans('front.store').' '. $productNew->store_id  }}</a>

                      </div>

                    @endif

                    {{-- //Display store - if use MultiStorePro --}}



                    {{-- Add to cart --}}

                    @if ($productNew->allowSale())

                      <a onClick="addToCartAjax('{{ $productNew->id }}','default','{{ $productNew->store_id }}')" class="button button-lg button-secondary button-zakaria add-to-cart-list"><i class="fa fa-cart-plus"></i> {{trans('front.add_to_cart')}}</a>

                    @endif

                    {{-- //Add to cart --}}



                    {!! $productNew->showPrice() !!}

                  </div>

                  

                  {{-- Product type --}}

                  @if ($productNew->price != $productNew->getFinalPrice() && $productNew->kind !=SC_PRODUCT_GROUP)

                    <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/sale.png') }}" class="new" alt="" /></span>

                    @elseif($productNew->kind == SC_PRODUCT_BUILD)

                    <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/bundle.png') }}" class="new" alt="" /></span>

                    @elseif($productNew->kind == SC_PRODUCT_GROUP)

                    <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/group.png') }}" class="new" alt="" /></span>

                  @endif

                  {{-- //Product type --}}



                  {{-- wishlist, compare --}}

                  <div class="product-button-wrap">

                    <div class="product-button">

                        <a class="button button-secondary button-zakaria" onClick="addToCartAjax('{{ $productNew->id }}','wishlist','{{ $productNew->store_id }}')">

                            <i class="fas fa-heart"></i>

                        </a>

                    </div>

                    <div class="product-button">

                        <a class="button button-primary button-zakaria" onClick="addToCartAjax('{{ $productNew->id }}','compare','{{ $productNew->store_id }}')">

                            <i class="fa fa-exchange"></i>

                        </a>

                    </div>

                  {{-- //wishlist, compare --}}



                  </div>

                </article>

              </div>

            @endforeach

          </div>

        </div>

      </section>      

@endsection



@section('news')

  @if ($news)

  <!-- Our Blog-->

  <section class="section section-xxl section-last bg-gray-21">

    <div class="container">

      <h2 class="wow fadeScale">{{ trans('front.blog') }}</h2>

    </div>

    <!-- Owl Carousel-->

    <div class="owl-carousel owl-style-7" data-items="1" data-sm-items="2" data-xl-items="3" data-xxl-items="4" data-nav="true" data-dots="true" data-margin="30" data-autoplay="true">

      @foreach ($news as $blog)

      <!-- Post Creative-->

      <article class="post post-creative"><a class="post-creative-figure" href="{{ $blog->getUrl() }}"><img src="{{ asset($blog->getThumb()) }}" alt="" width="420" height="368"/></a>

        <div class="post-creative-content">

          <h5 class="post-creative-title"><a href="{{ $blog->getUrl() }}">{{ $blog->title }}</a></h5>

          <div class="post-creative-time">

            <time datetime="{{ $blog->created_at }}">{{ $blog->created_at }}</time>

          </div>

        </div>

      </article>

      @endforeach

    </div>

  </section>

  @endif

@endsection



@push('styles')

{{-- Your css style --}}

@endpush



@push('scripts')

{{-- Your scripts --}}

@endpush

