@extends('layouts.public.app')

@section('title', 'Chemicals by Industries | Chemical Wholesale')
@section('description', 'Find top chemical industries including pharmaceuticals, construction, agriculture, and more. Verified suppliers for orders and industrial sourcing.')
@section('keywords', 'chemical industries, chemical manufacturers, chemical suppliers, industrial chemical companies, construction companies, pharma chemical industry, agriculture suppliers, chemical industry directory')

@section('content')
    <div class="pb-4">
        <div class="container-fluid">
            <h2 class="heading text-center pt-lg-5 pt-4 pb-4">Chemical Industries</h2>
            <div class="row g-2 supplier-scroll d-flex">
                @foreach ($industries as $industry)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                        <div class="card-type-1">
                            <p class="card-type1-title py-2 py-lg-3">{{ $industry['name'] }}</p>
                            <div class="card-type-1-img-container"
                                style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url('{{ asset(@$industry->getimage->path ?: '/assets/img/industries/industry.jpg') }}');">
                                <a href="{{ route('public.search_type', ['industry', $industry['slug']]) }}"
                                    class="btn-cardt1">Explore Now <i class="bi bi-arrow-right"></i></a>
                                <div class="img-overlay"></div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>


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

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

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

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