@extends('frontend.layouts.app')
@push('css')
@endpush
@section('content')
<div class="bread">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('homepage') }}">{{ translate('Home') }}</a></li>
<li class="breadcrumb-item active">{{ translate($cat->name) }}</li>
</ol>
</div>
</div>
<!------------------ Banner Area -------------------------------------->
<section class="representative-banner page_bottom_slider">
@foreach($top_banners as $banner )
<img src="{{asset('storage/images/admin/banner/'.$banner['image'])}}" class="img-fluid "/>
@endforeach
</section>
@if($cat->banner)
<section class="representative-banner text-white" style="background-image: url({{asset('storage/images/admin/category/banner/'.$cat->banner)}});background-position: top center;background-size: cover;">
@else
<section class="representative-banner text-white" style="background-image: url(/public/assets/frontend/img/product-banner-2.jpg);background-position: top center;background-size: cover;">
@endif
<div class="container">
<h1 style="margin-bottom:25px; line-height:115px">{{ translate($cat->name) }}</h1>
</div>
</section>
<section class='padding__top__50px background__f2f2f2'>
<div class="container">
<!---------------------- Categories List ---------------------------------->
<!--<h3 class="pb-3">{{ translate('Wholesale') }} {{ translate($cat->name) }} {{ translate('Suppliers, Manufacturers, Companies') }}</h3>-->
<h4 class="hd-rd-brdr d-flex justify-content-between">
<div>
<span>Featured Products</span> From Verified Suppliers
<i> <img src="https://www.tradevaly.com.bd/public/assets/frontend/img/verified-supplier-icon.png" class="lazy" alt="Featured Products from Verified Suppliers" style="">
</i>
</div>
<div>
<a href="/products" title="All Products" class="viewMore d-none d-md-block">- View More -</a>
<div class="owlDots"></div>
</div>
</h4>
<section class="white-panel m-0 bg-white p-3">
<div class="row">
@foreach(\App\Models\Category::where('parent_id', $cat->id)->latest()->get() as $maincatlist)
<div class="col-sm-3 mb-4">
<h5 class="hd-rd-brdr text-truncate mb-1"><a href="{{ route('category', $maincatlist->slug) }}" title="{{ $maincatlist->name }}" class="text-muted">{{ translate($maincatlist->name) }}</a></h5>
<ul>
@foreach(\App\Models\Category::where('parent_id', $maincatlist->id)->take(5)->get() as $catlist)
<li><a href="{{ route('category', $catlist->slug) }}" title="{{ $catlist->name }}" class="text-muted">{{ translate($catlist->name) }}</a></li>
@endforeach
</ul>
</div>
@endforeach
</div>
</section>
<!---------------Keywords------------------------------>
<section class="white-panel mt-5 bg-white p-3">
<div class="row">
<div class="col-sm-12">
<h5 class="hd-rd-brdr">{{ translate('Hot Products') }}</h5>
<ul class="list-inline">
@foreach($tags as $tag)
<li class="list-inline-item mr-1 mb-2"><a href="{{ route('product.tag', $tag->slug) }}" title="{{$tag->name}}" class="badge badge-pill badge-secondary p-2">{{ translate($tag->name) }}</a></li>
@endforeach
</ul>
</div>
</div>
</section>
@if($products->count() > 0)
<!---------------- Products Slider ---------------------------->
<section class="row mt-5 deals-thumbnail">
<div class="col-sm-12">
<h5 class="hd-rd-brdr">{{ translate('Products') }}</h5>
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="importerParentProducts">
<div class="owl-stage-outer">
<div class="owl-stage main__categories__thumbnail__owl">
<div class="owl-item width__1110px">
<div> <!------------ Single Slide Start------------->
@php
$i = 0;
@endphp
@foreach($products as $product)
@php
$i++;
@endphp
<div class="buyer-listing-result-row buyer-tab-products mfr-listing">
<div class="row">
<div class="col-md-3">
<div class="product_list_top list_image_container">
<a href="{{ route('product.view', $product->slug) }}" data-detail-link="" data-event-type="Product" title="{{$product->title}}">
<div class="bg-image lazy" style="background-image: url({{asset('storage/images/admin/product/'.$product->image.'')}});">
<div class="bg-overlay">
<span class="img-center"></span>
<img src="{{asset('storage/images/admin/product/'.$product->image.'')}}" alt="{{ translate($product->title)}}" class="lazy">
</div>
</div>
</a>
</div>
</div>
<div class="col-md-5 brd-right-gray">
<a href="{{ route('product.view', $product->slug) }}" title="{{translate($product->title)}}">
<h5>{{ translate($product->title) }}</h5>
</a>
<p>
{!! substr($product->details, 0, 100) !!}
<a href="{{ route('product.view', $product->slug) }}" title="{{translate($product->title) }}">{{ translate('Show More...') }}</a>
</p>
<ul class="buyer-listing-feautures li-pd-lft-0 full-with-ul">
<li>
<label class="mb-0">{{ translate('Supply Ability:') }}</label>
<span class="text-truncate mw-100">{{ translate($product->supply_ability) }} {{ translate($product->unit) }} {{ translate('per Month') }}</span>
</li>
<li>
<label class="mb-0">{{ translate('Origin:') }}</label>
<span class="text-truncate mw-100">{{ translate($product->origin) }}</span>
</li>
<li>
<label class="mb-0">{{ translate('Location:') }}</label>
<span class="text-truncate mw-100">{{ translate($product->location) }}</span>
</li>
</ul>
</div>
<div class="col-md-4">
<div class="tab-brand-logo">
<a href="{{ route('supplier.view', $product->supplier->user->username) }}" title="{{ translate($product->supplier->name) }}">
<div class="image-wrapper">
<span class="ml-0">{{ translate($product->supplier->name) }}</span>
</div>
</a>
</div>
<ul class="tab-brand-info flag-right">
<li>
<div class="buyer-listing-action w-auto">
<a href="@if(isset($product->country->iso)) {{ route('region.change', $product->country->iso) }} @endif" title="@if(isset($product->country->iso)) {{ $product->country->nicename }} @endif">
<i class="fi fi-@if(isset($product->country->iso)) {{ strtolower($product->country->iso) }} @endif mx-auto d-block"></i>
</a>
</div>
</li>
<li>
<a href="{{ route('subscription.buy', $product->supplier->user->package->slug) }}" title="Package">
<span class="membership-tag-sm d-block">
<img src="{{asset('storage/images/admin/package/'.$product->supplier->user->package->image)}}" width="98" height="30" alt="Free" class="lazy">
</span>
</a>
</li>
<li>
<label class="mb-0">{{ translate('Business Type:') }}</label>
<span class="text-truncate mw-100 float-left w-100 float-left">{{ translate($product->supplier->type) }}</span>
</li>
<li title="Precision auto lathe fittings, PEM standoffs, AV connectors, fasteners, nuts" data-toggle="tooltip">
<label class="mb-0">{{ translate('Key Products:') }}</label>
<span class="text-truncate mw-100 w-100 float-left mb-2">{{ translate($product->supplier->main_products) }}</span>
</li>
</ul>
@if(!Auth::check())
<div class="action-grp">
<div class="buyer-listing-social mt-1">
<a href="javascript:registerPopup('Join Free');" title="{{ translate('Join Free') }}" type="button" data-toggle="modal" data-target="#exampleModalCenter" class="buyer-listing-btn">{{ translate('Contact Now') }}</a>
</div>
<div class="buyer-listing-viewprice mt-1">
<a href="javascript:registerPopup('Join Free');" title="{{ translate('Join Free') }}" type="button" data-toggle="modal" data-target="#exampleModalCenter" class="buyer-listing-btn">{{ translate('View Price') }}</a>
</div>
</div>
@else
<div class="action-grp">
<div class="buyer-listing-social mt-1">
<a href="{{ route('company.contact', $product->supplier->user->package->slug) }}" class="buyer-listing-btn">{{ translate('Contact Now') }}</a>
</div>
<div class="buyer-listing-viewprice mt-1">
<a href="{{ route('product.inquery', $product->slug) }}" class="buyer-listing-btn">{{ translate('View Price') }}</a>
</div>
</div>
@endif
</div>
</div>
</div>
@if($i%4==0)
</div> <!------------ Single Slide End------------->
</div>
<div class="owl-item active width__1110px">
<div> <!------------ Single Slide Start------------->
@endif
@endforeach
</div>
</div>
<!------- Dotted Button-------------------->
<div class="owl-nav disabled">
<button type="button" role="presentation" class="owl-prev">
<span aria-label="{{ translate('Previous') }}">‹</span>
</button>
<button type="button" role="presentation" class="owl-next">
<span aria-label="{{ translate('Next') }}">›</span>
</button>
</div>
</div>
</div>
</section>
@endif
<!--------- Related Buy Offer------------------------------------>
<section class="hm-sec1 latestBuyOfferComponent bg-white p-3">
<div class="row">
<div class="col-md-12 no-border pad-right-15">
<h4 class="hd-rd-brdr hd-inner-link">{{ translate('Related Buy Offer') }} <a href="#" title="Latest Buy Offers">{{ translate('- View More -') }}</a></h4>
<div class="latest-buyers">
<div class="row">
<div class="col-md-6">
<ul>
@php
$i = 0;
@endphp
@foreach($buyoffer as $offer)
@php
$i++;
@endphp
<li>
<a href="{{ route('buy.view', $offer->slug) }}" title="{{$offer->title}}">
<i class="fi fi fi-{{ strtolower($offer->country->iso) }}"> </i>
<span class="world-name truncate">{{ translate($offer->country->nicename) }}</span>
<span class="lst-buyer-text truncate">{{ translate($offer->title) }}</span>
<small class="date">{{ translate(date('d F,Y', strtotime($offer->date))) }}</small> </a>
</li>
@if($i%16==0)
</ul>
</div>
<div class="col-md-6">
<ul>
@endif
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<section class="representative-banner page_bottom_slider">
@foreach($bottom_banners as $banner )
<img src="{{asset('storage/images/admin/banner/'.$banner['image'])}}" class="img-fluid "/>
@endforeach
</section>
@endsection
@section('script')
<script type="text/javascript">
$(document).ready(function(){
$("#importerParentProducts").owlCarousel({
items: 1,
loop: true,
autoplay: true
});
});
</script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$('.top_slider').slick({
dots: false,
infinite: true,
slidesToShow: 1,
centerMode: false,
arrows:false,
autoplay: true,
speed: 3000,
autoplaySpeed: 2000,
});
</script>
<script>
$('.page_bottom_slider').slick({
dots: false,
infinite: true,
slidesToShow: 1,
centerMode: false,
arrows:false,
autoplay: true,
speed: 3000,
autoplaySpeed: 2000,
});
</script>
@endsection