@extends('frontend.layout.master')
@section('content')
    <!-- Breadcrumb -->
    <div class="breadcrumb bg-bgPrimary py-4">
        <nav class="container text-xs flex justify-between items-center">
            <ol class="flex items-center">
                <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Home</a></li>

                <li>
                    <i class="bi bi-chevron-right"></i>
                </li>
                <li class="px-1 md:px-2">

                    Product Categories

                </li>

            </ol>
            <ol class="flex items-center">
                <li>
                    <i class="bi bi-chevron-left"></i>
                </li>
                <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Back to Home</a></li>
            </ol>
        </nav>
    </div>
    <!-- // Breadcrumb -->

    <!-- #Start Main Body  -->
    <section class="py-12 md:py-16 lg:py-20">
        <div class="category_section bg-[#272932] text-white  pb-28">
        <div style="padding-top: 80px;padding-bottom: 80px;" class="container mx-auto  px-4">
            <h4 class="uppercase shape pt-5 bottom-underline text-xl md:text-2xl text-center tracking-widest font-bold">All Category</h4>
            <div class="products pt-10 mt-10 grid grid-cols md:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach($categories as $item)                
                    <div class="single-product text-center">
                        <a href="{{ route('category.product',$item->id) }}">
                            <img class="product-img" src="{{ $item->image }}" alt="">
                            <h5 class=" pt-3 font-bold">{{ $item->name }}</h5>
                        </a>
                    </div>
                @endforeach 
            </div>
        </div>
    </div>
    </section>
    <!-- #End Main Body  -->

@endsection