@extends('frontend.layouts.applayout')
@section('main-content')
    <section class="bg-light">
        <div class="container py-5 brands mb-5">
            <h1 class="text-center mb-4">Shop Online</h1>
            <style>
                .category {
                    width: 20%;
                    flex: 0 0 20%;
                    max-width: 20%;
                    box-sizing: border-box;
                }

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

                .category .prd_box {
                    position: relative;
                    border-radius: 25px;
                    overflow: hidden;
                    height: 100%;
                    background-color: #7f385e;
                    border: 1px solid #7f385e;
                }

                @media(min-width:1700px) {
                    .category {
                        width: 20%;
                        flex: 0 0 20%;
                        max-width: 16%;
                        box-sizing: border-box;
                    }
                }
            </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">
                                <h5 style="color: white;">{{ $category->name }}</h5>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

        </div>
    </section>
@endsection