@extends('layouts.public.app')

@section('title', 'Chemicals by Categories | Chemical Wholesale')
@section('description', 'Explore all major chemical categories including metals, non-metals, organic, and inorganic chemicals. Find industrial chemicals and connect with verified suppliers.')
@section('keywords', 'chemical categories, metal chemicals, non-metal chemicals, organic chemicals, inorganic chemicals, industrial chemical types, chemical classification, chemical suppliers')


@section('content')
    <div class="pb-4">
        <div class="search-keywords">
            <div class="container-fluid">
                <p class="search-keywords-text">Categories</p>
                <p class="small text-secondary">Home > Categories</p>
            </div>
        </div>
        <div class="container-fluid">
            <h2 class="heading text-center pt-lg-5 pt-4 pb-4">Chemical Categories</h2>

            <div class="category-container">
                <div class="row justify-content-center">
                    @foreach ($categories as $category)
                        <div class="col-lg-2 col-md-4 col-6">
                            <a
                                href="{{ $category->activeChilds->count() > 0 ? route('public.sub_categories', $category['slug']) : route('public.search_type', ['category', $category['slug']]) }}">
                                <div class="category-card">
                                    <img src="{{ @$category->getimage->path }}" alt="category-img"
                                        onerror="src='/assets/img/category-placeholder.png'">

                                    <div class="category-card-text">
                                        <div class="title text-dark">{{ $category['name'] }}</div>
                                        <div class="badges py-lg-2 d-none">
                                            <span class="badge bg-primary">32,000 Products</span>
                                            <span class="badge bg-success">252 Suppliers</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <nav aria-label="Supplier navigation" class="py-2">
                    <ul class="pagination justify-content-center mb-0">
                        <li class="page-item {{ $categories->onFirstPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $categories->previousPageUrl() }}" tabindex="-1">Previous</a>
                        </li>

                        @for ($i = 1; $i <= $categories->lastPage(); $i++)
                            <li class="page-item {{ $i == $categories->currentPage() ? 'active' : '' }}">
                                <a class="page-link" href="{{ $categories->url($i) }}">{{ $i }}</a>
                            </li>
                        @endfor

                        <li class="page-item {{ $categories->hasMorePages() ? '' : 'disabled' }}">
                            <a class="page-link" href="{{ $categories->nextPageUrl() }}">Next</a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>

    </div>
@endsection
@push('css')
    <style>
        .card-type-1 .card-type1-title {
            font-size: 20px
        }
    </style>
@endpush
@push('js')
@endpush