@extends('layouts.app')
@section('content')
<main class="body-content">
<div class="baner-pros">
<div class="baner-sec py-lg-2 pt-4">
<div class="owl-carousel owl-theme" id="baner-owl">
@foreach($slider->activeItems as $item)
<div class="baner-item">
<img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
</div>
@endforeach
</div>
</div>
<section class="products-sec py-lg-4 pt-4 pb-5">
<div class="container-fluid px-0 pros-sec mt-5 ">
<div class="row">
<div class=" col-xl-10 mx-auto d-flex justify-content-center pros px-0">
@foreach($indexCategories as $category)
<div class="pro-card">
<a href="{{ route('categories.show', $category->slug) }}">
<div class="pro-item">
<img src="{{ asset('images/pros-back.png') }}" alt="" class="pros-back">
<img src="{{ asset($category->image) }}" alt="{{ $category->name }}" class="pro-img">
</div>
</a>
<h3>{{ $category->name }}</h3>
</div>
@endforeach
</div>
</div>
</div>
</section>
<div class="down">
<a href="#sale-sec">
<i class="fa-solid fa-angle-down"></i>
</a>
</div>
</div>
<div class="sale-sec my-5" id="sale-sec">
<div class="container-fluid px-0">
<div class="row col-xl-11">
<div class="sale-pic d-flex justify-content-center">
<img src="{{ asset('images/discount.png') }}" alt="">
</div>
<div class="sale-carousel-sec">
<div class="owl-carousel owl-theme " id="product-carousel">
@foreach($specialProducts as $product)
<div class="product-card position-relative">
<a href="{{ route('products.show', $product->slug) }}">
<div class="card-front">
<div class="card-header">
@if($product->country_code)
<div class="country-flag ">
<img src="{{asset(config('countries')[$product->country_code]['flag'])}}" alt ="{{$product->country_code}}">
</div>
@endif
@if($product->code)
<div class="product-code">کد کالا {{$product->code}}</div>
@endif
</div>
<div class="product-image">
<img src="{{ asset($product->image) }}">
</div>
<div class="card-footer">
<div class="product-info">
<div class="product-name">{{ $product->name }}</div>
@if($product->special_mask)
<div class="product-price d-flex align-items-end justify-content-between" >
<div class="off-percent hover-hidden mt-2">{{$product->discount}}%</div>
</div>
@endif
</div>
</div>
</div>
<div class="card-back d-flex flex-column justify-content-end">
<div class="product-price d-flex align-items-end justify-content-between">
@if($product->special_mask)
<div class="off-percent">{{number_format($product->discount, '0')}}%</div>
@endif
@if($product->stock && $product->price)
<div class="price-off">
@if($product->special_mask)
<div class="off">{{ number_format($product->price) }}</div>
@endif
<div class="price">{{ number_format($product->special_mask ?: $product->price) }} تومان</div>
</div>
@else
<div class="price-off">
<div class="price">ناموجود</div>
</div>
@endif
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
<div class="most-sale mt-5 py-lg-5 py-3">
<div class="container-fluid px-0">
<div class="row col-xl-11">
<div class="title-sec d-flex justify-content-between px-3" >
<h3>پرفروش ترین محصولات</h3>
<a href="{{ route('search.index') }}">
<span>مشاهده همه</span>
<img src="{{ asset('images/see-all.png') }}" alt="">
</a>
</div>
<div class="owl-carousel owl-theme my-lg-5 my-2 most-sale-carousel">
@foreach($sellerProducts as $product)
<div class="product-card position-relative">
<a href="{{ route('products.show', $product->slug) }}">
<div class="card-front">
<div class="card-header">
<!-- <div class="country-flag ">
<img src="{{ asset('images/g-flag.png') }}" alt="">
</div> -->
@if($product->country_code)
<div class="country-flag ">
<img src="{{asset(config('countries')[$product->country_code]['flag'])}}" alt="{{$product->country_code}}">
</div>
@endif
@if($product->code)
<div class="product-code">کد کالا {{$product->code}}</div>
@endif
</div>
<div class="product-image">
<img src="{{ asset($product->image) }}">
</div>
<div class="card-footer">
<div class="product-info">
<div class="product-name">{{$product->name}}</div>
<div class="product-price d-flex align-items-end justify-content-between" ></div>
</div>
</div>
</div>
<div class="card-back d-flex flex-column justify-content-end">
<div class="product-price d-flex align-items-end justify-content-between" >
@if(auth()->check())
@if($product->stock)
@if($product->price)
<div class="price-off">
@if($product->special_mask)
<!--<div class="off">{{ number_format($product->price) }}</div>-->
<div class="off"> {{ number_format($product->price +
($product->activeOptionValues->first()?->pivot?->price ?? 0)) }} تومان</div>
@endif
<!--<div class="price">{{ number_format($product->special_mask ?: $product->price) }} تومان</div>-->
<div class="price"> {{ number_format(($product->special ?: $product->price) +
($product->activeOptionValues->first()?->pivot?->price ?? 0)) }} تومان</div>
</div>
@else
<p class="text-danger">تماس بگیرید</p>
@endif
@else
<div class="price-off">
<div class="price">ناموجود</div>
</div>
@endif
@else
<p class="text-danger">برای دیدن قیمت باید ثبت نام کنید</p>
@endif
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
<!--brands-->
<div class="top-brands container-fluid mt-5 px-0 py-lg-4">
<div class="row col-xl-11 main-row">
<div class="brand-items">
<div class='owl-carousel owl-theme' id='brands-carousel'>
@foreach($brands as $brand)
<div class="p-1">
<div class="brand-box">
<a href="{{ route('brands.show', $brand->slug) }}">
<img src="{{ asset($brand->image) }}" alt="{{ $brand->name}}">
</a>
</div>
</div>
@endforeach
</div>
<div class='brands-two'>
<div class='owl-carousel owl-theme' id='brands-two-carousel'>
@foreach($brands as $brand)
<div class="p-1">
<div class="brand-box">
<a href="{{ route('brands.show', $brand->slug) }}">
<img src="{{ asset($brand->image) }}" alt="{{ $brand->name}}">
</a>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
<div class="most-sale mt-lg-5 mt-4 py-lg-5 py-3">
<div class="container-fluid px-0">
<div class="row col-xl-11">
<div class="title-sec d-flex justify-content-between px-3" >
<h3>جدیدترین محصولات</h3>
<a href="{{ route('search.index') }}">
<span>مشاهده همه</span>
<img src="{{ asset('images/see-all.png') }}" alt="">
</a>
</div>
<div class="owl-carousel owl-theme most-sale-carousel my-lg-5 my-2">
@foreach($latestProducts as $product)
<div class="product-card position-relative">
<a href="{{ route('products.show', $product->slug) }}">
<div class="card-front">
<div class="card-header">
@if($product->country_code)
<div class="country-flag ">
<img src="{{asset(config('countries')[$product->country_code]['flag'])}}" alt="{{$product->country_code}}">
</div>
@endif
@if($product->code)
<div class="product-code">کد کالا {{$product->code}}</div>
@endif
</div>
<div class="product-image">
<img src="{{ asset($product->image) }}">
</div>
<div class="card-footer">
<div class="product-info">
<div class="product-name">{{$product->name}}</div>
<div class="product-price d-flex align-items-end justify-content-between"></div>
</div>
</div>
</div>
<div class="card-back d-flex flex-column justify-content-end">
<div class="product-price d-flex align-items-end justify-content-between" >
@if(auth()->check())
@if($product->stock)
@if($product->price)
<div class="price-off">
@if($product->special_mask)
<!--<div class="off">{{ number_format($product->price) }}</div>-->
<div class="off"> {{ number_format($product->price +
($product->activeOptionValues->first()?->pivot?->price ?? 0)) }} تومان</div>
@endif
<!--<div class="price">{{ number_format($product->special_mask ?: $product->price) }} تومان</div>-->
<div class="price"> {{ number_format(($product->special ?: $product->price) +
($product->activeOptionValues->first()?->pivot?->price ?? 0)) }} تومان</div>
</div>
@else
<p class="text-danger">تماس بگیرید</p>
@endif
@else
<div class="price-off">
<div class="price">ناموجود</div>
</div>
@endif
@else
<p class="text-danger">برای دیدن قیمت باید ثبت نام کنید</p>
@endif
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="blog mt-5 py-lg-5">
<div class="container-fluid px-0">
<div class="row col-xl-11">
<span class="mb-3 text-gray">مقالات</span>
<div class="title-sec d-flex justify-content-between px-3" >
<h3>مجله آرم گروه</h3>
<a href="{{ route('articles.index') }}">
<span>همه آرشیو</span>
<img src="{{ asset('images/blog-see-all.png') }}" alt="">
</a>
</div>
<div class="blogs mt-4">
@foreach($articles as $article)
<div class="blog-item">
<div class="blog-img">
<img src="{{ asset($article->image) }}" alt="{{$article->title}}">
<!-- <p>
<span>How care our</span>
<span> Home Appliances</span>
</p> -->
</div>
<div class="blog-txt">
<h2>{{$article->title}}</h2>
<p>
{{$article->description}}
</p>
<div class="more-blog">
<a href="{{ route('articles.show', $article->slug) }}">
<i class="uil uil-arrow-left"></i>
<img src="{{ asset('images/flesh-blog.png') }}" alt="">
</a>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</main>
@endsection