@extends('layouts.app')
@section('title', __('Homepage'))
@section('content')
<!-- promotion area start -->
@if($coupon)
<div class="p-1 text-white text-center"
     style="background-image: url('{{ asset('frontend/img/bg/12.jpg') }}')">
    {{ $coupon->value }}{{ $coupon->type == 'percentage' ? '%' : '' }} off use ({{ $coupon->code }})
</div>
@endif
<!-- promotion area end -->

@include('partials.frontend.sliders')
<!-- categories area start -->
<div class="container">
    <div class="pb-50">
        <div class="section-title-furits text-center">
            <img src="{{ url("img/favicon.png")  }}" alt="MINI LOGO" style="height: 60px; width: 65px;">
            <h2>{{__("BROWSE OUR CATEGORIES")}}</h2>
        </div>
        <br>
        @if($categories)
            <section>
                <header class="text-center">
                    <p class="small text-muted small text-uppercase mb-1">{{__("Carefully created collections")}}</p>
                    <h2 class="h5 text-uppercase mb-4">{{__("Browse our categories")}}</h2>
                </header>
                <div class="row">
                    @foreach($categories as $category)
                        @php

                        $imgStyle = $titleStyle = "";
                         // if ($loop->iteration == 1) {
                              $imgStyle = "margin: 7px;";
                              $titleStyle = "margin-top: -124px;";
                          //}
                          if (is_int($loop->iteration / 2)) {
                              $imgStyle = "margin: 9px;";
                              $titleStyle = "margin-top: 104px;";
                          }
                         @endphp
                        <div class="col-md-4 mb-4 mb-md-0">
                            <a class="category-item" href="{{ route('shop.index', $category->slug ?? '') }}">
                                <img class="img-fluid" src="{{ $category->image }}"
                                    style="{{$imgStyle}}"
                                     alt="{{ $category->name ?? '' }}">
                                <strong  style="{{$titleStyle}}" class="category-item-title">{{ $category->name ?? '' }}</strong>
                            </a>
                        </div>
                    @endforeach
                </div>
            </section>
        @else

        @endif

    </div>
</div>
<!-- categories area end -->



<!-- TRENDING PRODUCTS -->
<div class="container">
    <livewire:frontend.product.top-trending-products />
</div>


<!-- services area start -->
{{--<div class="fruits-services ptb-200">--}}
{{--    <div class="fruits-services-wrapper">--}}
{{--        <div class="single-fruits-services">--}}
{{--            <div class="fruits-services-img">--}}
{{--                <i class="fas text-success fa-object-group fs-50"> </i>--}}
{{--            </div>--}}
{{--            <div class="fruits-services-content">--}}
{{--                <h4>Free Shipping</h4>--}}
{{--                <p>Lorem Ipsum is simply dummy text of the and typesetting industry. Lorem Ipsum is simply--}}
{{--                    industry.</p>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="single-fruits-services">--}}
{{--            <div class="fruits-services-img">--}}
{{--                <i class="fas text-success fa-object-group fs-50"> </i>--}}
{{--            </div>--}}
{{--            <div class="fruits-services-content">--}}
{{--                <h4>Money Guarentee.</h4>--}}
{{--                <p>Lorem Ipsum is simply dummy text of the and typesetting industry. Lorem Ipsum is simply--}}
{{--                    industry.</p>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="single-fruits-services">--}}
{{--            <div class="fruits-services-img">--}}
{{--                <i class="fas text-success fa-object-group fs-50"> </i>--}}
{{--            </div>--}}
{{--            <div class="fruits-services-content">--}}
{{--                <h4>Online Support</h4>--}}
{{--                <p>Lorem Ipsum is simply dummy text of the and typesetting industry. Lorem Ipsum is simply--}}
{{--                    industry.</p>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
<!-- services area end -->
@endsection