@extends('frontend.layout.applayout')
@section('main-content')
    <section class="bg-light">
        <div class="container py-5 brands mb-5">
            <h1 class="text-center mb-4">Categories</h1>
            <style>
                .category {
                    width: 20%;
                    /* Each item takes 20% of the row */
                    flex: 0 0 20%;
                    /* Ensures items don't shrink or grow */
                    max-width: 20%;
                    /* Prevents items from exceeding 20% width */
                    box-sizing: border-box;
                    /* Ensures padding/margin doesn't affect width */
                }

                .category .prd_box .category-image {
                    height: 240px;
                    width: 100%;
                    object-fit: cover;
                    object-position: center center;
                }

                @media(min-width:1700px) {
                    .category {
                        width: 20%;
                        /* Each item takes 20% of the row */
                        flex: 0 0 20%;
                        /* Ensures items don't shrink or grow */
                        max-width: 16%;
                        /* Prevents items from exceeding 20% width */
                        box-sizing: border-box;
                        /* Ensures padding/margin doesn't affect width */
                    }
                }
            </style>
            <div class="row d-flex flex-wrap">
                @foreach ($categories as $category)
                    <div class="category bg-transparent mt-4 mb-4">
                        <a href="{{ route('productByCategory', $category->slug) }}">
                            <div class="prd_box text-center">
                                <img src="{{ asset($category->icon) }}" alt="{{ $category->name }}"
                                    class="img-fluid category-image mb-2">
                                <h3>{{ $category->name }}</h3>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

        </div>
    </section>
@endsection