@extends('web.layout.main')
@section('content')
<section class="intro-section main-banner">
    <div class="owl-carousel owl-theme owl-nav-inner owl-dot-inner owl-nav-lg animation-slider gutter-no row cols-1 appear-animate" data-owl-options="{'nav': true, 'dots': true, 'loop': true, 'autoplay': true, 'autoplayTimeout': 4000, 'responsive': {'1600': {'items': 1}}}">
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/1.jpg); background-color: #ebeef2;">
        </div>
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/2.jpg); background-color: #ebeef2;">
        </div>
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/3.jpg); background-color: #ebeef2;">
        </div>
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/4.jpg); background-color: #ebeef2;">
        </div>
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/5.jpg); background-color: #ebeef2;">
        </div>
                
        <div class="banner banner-fixed intro-slide intro-slide1 main-bann-img lazy"
            style="background-image: url(web/images/slide/6.jpg); background-color: #ebeef2;">
        </div>
    </div>
    
    <div style="margin-top: 2px;background: #e6cbb6;padding-top: 25px;padding-bottom: 2px;">
        <h1 style="text-align:center;color: green;font-weight: bold;font-size: 30px;">নিরাপত্তার নতুন দিগন্ত</h1>
    </div>
    
</section>

<div class="container" style="margin-top: 30px;margin-bottom: 30px;">  
     <div class="title-link-wrapper title-deals mb-0.5">
        <h2 class="title title-link">Top New Collection</h2>
        <div  class="font-size-sm text-white bg-secondary align-items-center mr-auto">
        </div>
        <a href="#" class="ml-0">More Products<i class="w-icon-long-arrow-right"></i></a>
    </div>

    <div class="row cols-xl-6 cols-lg-5 cols-md-4 cols-sm-3 cols-2 mb-5"> 
        @foreach($npros as $np)
        <div class="product-wrap mb-3">
            <div class="product product-image product-simple">
                <figure class="product-media  text-center"  style="border:1px solid #e4e7ec;">
                    <center style="background-color:#e4e7ec;"><a href="{{url('prodetails/'.$np->id)}}"><img class="lazy" src="{{URL::to($np->image)}}" style="height:188px;width:auto;"></a></center>
                        @if(!is_null($np->regu_price))
                        <div class="product-label-group">
                            <label class="product-label label-discount"><?php echo number_format((($np->regu_price-$np->price)/$np->regu_price)*100); ?>% Off</label>
                        </div>
                        @endif
                    
                        <div class="product-action-vertical">
                            <a href="#" class="btn-product-icon"><i class="fa fa-eye"></i>
                            </a>
                        </div>
                </figure>
                <div class="product-details">
                    <h3 class="product-name">
                        <a href="{{url('prodetails/'.$np->id)}}">{{$np->title}}</a>
                    </h3>

                     
                    <div class="product-pa-wrapper" style="margin-top:3px;">
                        <div class="product-price">
                            <ins class="new-price">Tk. {{$np->price}}</ins>@if(!is_null($np->regu_price)) <del class="old-price">Tk. {{$np->regu_price}}</del> @endif
                        </div>                      
                        <div class="product-action">
                            <form action="{{url('addtocart')}}" method="post">@csrf
                                <input type="hidden" name="pro_id" value="{{$np->id}}">
                                <input type="hidden" name="qty" value="1">
                                <button type="submit" style="color: #fff; background: #009688; padding: 3px 14px;border-radius: 20px;text-align: center;font-size: 12px;" class="btn-product btn btn-link">Add To Cart</button>
                            </form>
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
        @endforeach  
    </div> 
</div>

<div class="container">   
    <h2 class="title title-underline mb-4 ls-normal">Top Selling Products</h2>
    <div class="owl-carousel owl-theme owl-shadow-carousel row cols-xl-8 cols-lg-6 cols-md-4 cols-2 pb-2 mb-10" data-owl-options="{'nav': false, 'dots': true, 'margin': 20, 'responsive': {'0': {'items': 2}, '576': {'items': 3}, '768': {'items': 5}, '992': {'items': 6}, '1200': {'items': 8, 'dots': false}}}">
        @foreach($tpros as $tp)
        <div class="product-wrap mb-0">         
            <div class="product text-center product-absolute" style="border: 1px solid #80808029;">
                <figure class="product-media">
                    <a href="{{url('prodetails/'.$tp->id)}}">
                        <center style="background-color:#e4e7ec;"><img class="lazy" src="{{URL::to($tp->image)}}" alt="Product" style="height:146px;width:auto;"></center>                              
                    </a>
                </figure>
                <h4 class="product-name">
                    <a href="{{url('prodetails/'.$tp->id)}}">{{$tp->title}}</a>
                </h4>
        
            </div>
        </div> 
        @endforeach             
      
    </div>
</div>
@endsection       