@extends('layouts.public.app')

@section('title', 'Chemicals by Applications | Chemical Wholesale')
@section('description', 'Explore key chemical applications across industries including pharmaceuticals, agriculture, water treatment, and more. Discover chemicals by application and find suitable suppliers.')
@section('keywords', 'chemical applications, industrial chemical uses, pharmaceutical chemicals, agriculture chemicals, water treatment chemicals, specialty chemical applications, chemical industry solutions')

@section('content')
    <div class="pb-4">
        <div class="container-fluid">
            <h2 class="heading text-center pt-lg-5 pt-4 pb-4">Chemical Applications</h2>

            <div class="category-container">
                <div class="row mb-5">
                    @foreach ($applications as $application)
                        <div class="col-lg-2 col-md-4 col-6">
                            <a href="{{ route('public.search_type', ['application', $application['slug']]) }}">
                                <div class="application-card mb-5">
                                    <img src="{{ @$application->getimage->path }}" alt="Application"
                                        onerror="src='/assets/img/application/6.png'">
                                    <p class="application-card-title">{{ $application['name'] }}</p>
                                </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 {{ $applications->onFirstPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $applications->previousPageUrl() }}" tabindex="-1">Previous</a>
                        </li>

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

                        <li class="page-item {{ $applications->hasMorePages() ? '' : 'disabled' }}">
                            <a class="page-link" href="{{ $applications->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