@section('title', __('categories/listCategories.Categories') . ' | ' . $division->name)

@push('style')
<link rel="stylesheet" href="{{ mix('css/web/categories/listCategories.css') }}">
@endpush

@push('script')
<script src="{{mix('js/web/categories/listCategories.js')}}"></script>
@endpush

<x-layout>
    <div class="full_banner">
        <div class="main_banner">
            <div id="homeBanners" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="banner_hov2">
                            <h1>{{$division->name}}</h1>
                            <p>{{$banner->title}}</p>
                        </div>
                        <img src="{{Storage::disk('musawer')->url($banner->file)}}" class="d-block w-100" alt="...">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main_packag">
        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <div class="row">
                        @foreach($categories as $category)
                        <div class="col-md-6 col-lg-4 mb-5 position-relative">
                            <a class="d-block" href="{{route('web_products_listing_services', ['division' => $division->slug, 'category' => $category->slug])}}">
                                <span class="hove-shape1"></span><span class="hove-shape2"></span>
                                <img src="{{ Storage::disk('musawer')->url($category->image) }}" class="img-fluid">
                                <h4 class="sub_header1">{{$category->name}}</h4>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-md-8 m-auto">
                <div class="info-box p-5 bg-light b-1 text-center ">
                    <x-inner-quote-request>
                    </x-inner-quote-request>
                </div>
            </div>
        </div>
    </div>
</x-layout>