@extends('web_theme::layout.main')

@section('title', 'Product Categories | El DiDi Group')
@section('meta_description', 'Explore El DiDi Group product categories including industrial, commercial, and specialized solutions tailored to your needs.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($productHeaderImg) }}')">
        </div>
    </section>
    <!-- End Page Title -->

    <!-- Shop Section -->
    <section class="shop-section">
        <div class="auto-container">

            <h1 class="page-title" style="text-align: center">Our Product Categories</h1>

            <br><br>
            <div class="row clearfix">
                @foreach($categories as $category)
                    <div class="shop-block col-xl-3 col-lg-4 col-md-6 col-sm-6">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="image">
                                <a href="{{ route('web.categories.show', [$category->slug, $category->id])}}"><img src="{{ asset($category->photo) }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"
                                        alt="{{ $category->name}}" /></a>
                            </div>
                            <div class="lower-content">

                                <h5><a href="{{ route('web.categories.show', [$category->slug, $category->id])}}">{{ $category->name }}</a></h5>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span class="post-views-count">{{$views->count}}</span></i>
        </div>
    </section>
    <!-- End Shop Section -->
@endsection