@extends('layouts.auth')

@section('content')
    <!-- header start -->
    @include('layouts.header')
    <!-- header end -->

    <!-- categories section starts -->
    <section class="section-lg-t-space section-b-space">
        <div class="custom-container">
            {{-- <form class="auth-form mt-0 p-0 bg-transparent">
                <div class="form-group">
                    <div class="form-input">
                        <input type="search" class="form-control search wo-filter" id="inputusername"
                            placeholder="Search destinations">
                        <i class="iconsax search-icon" data-icon="search-normal-2"><svg width="24" height="24"
                                viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
                                    fill="#292D32"></path>
                                <path
                                    d="M21.9995 22.7514C21.8095 22.7514 21.6195 22.6814 21.4695 22.5314L19.4695 20.5314C19.1795 20.2414 19.1795 19.7614 19.4695 19.4714C19.7595 19.1814 20.2395 19.1814 20.5295 19.4714L22.5295 21.4714C22.8195 21.7614 22.8195 22.2414 22.5295 22.5314C22.3795 22.6814 22.1895 22.7514 21.9995 22.7514Z"
                                    fill="#292D32"></path>
                            </svg>
                        </i>
                    </div>
                </div>
            </form> --}}

            <div class="row g-3 mt-3">
                <h3>All Categories</h3>
                @foreach ($categories as $category)
                    <div class="col-4">
                        <a href="{{ route('category.show', $category->slug) }}">
                            <div class="categories-box color-categories-box">
                                <div class="categories-box">
                                    <img class="categories-icon" src="{{ asset('storage/' . $category->icon) }}"
                                        alt="cleaning">
                                </div>
                            </div>
                            <h5 class="categories-name mt-2 text-center title-color">{{ $category->name }}</h5>
                        </a>
                    </div>
                @endforeach

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

    <!-- bottom navbar start -->
    @include('layouts.navbar')
    <!-- bottom navbar end -->
@endsection