@extends('layouts.public.app')

@section('title', 'Suppliers | Chemical Wholesale')
@section('description', 'Explore our network of trusted chemical manufacturers and wholesalers.')
@section('keywords', 'chemical suppliers, bulk chemical manufacturers, wholesale chemical companies, industrial chemical vendors')

@section('content')
    <div class="">
        <div class="search-keywords">
            <div class="container-fluid">
                <div class="top-filter border-0 ps-0">
                    <p class="search-keywords-text"> {{ $suppliers->count() }} of {{ $suppliers->total() }} results for
                        "<a href="#!">{{ @$keyword['keyword'] != '' ? $keyword['keyword'] : 'All Suppliers' }}</a>" in
                        Suppliers
                    </p>
                    <div class="view-container">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="d-lg-flex justify-content-between align-items-center pt-lg-3 pt-3 pb-4">
                <div class="heading mb-lg-0 mb-2">
                    Chemical Suppliers
                </div>
                <div class="filters">
                    <form action="{{ route('public.supplier.all') }}" method="post" id="supplierFilterForm">
                        @csrf
                        <div class="d-lg-flex">
                            <div class="d-block">
                                <select name="country" class="form-control w-100" id="country"
                                    onchange="this.form.submit()">
                                    <option value="0" hidden>Select Country</option>
                                    @foreach (Common::country() as $country)
                                        <option value="{{ $country['id'] }}"
                                            {{ @$request['country'] == $country['id'] ? 'selected' : '' }}>
                                            {{ $country['name_en'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="ms-lg-2">
                                <input type="text" class="cw-input mt-2 mt-lg-0 w-100" id="state"
                                    placeholder="Search by State/ Province" name="state" onchange="this.form.submit()"
                                    value="{{ @$request['state'] }}">
                            </div>
                            <div class="d-flex mt-2 mt-lg-0">
                                <button type="submit" class="cw-input btn-viewall mx-lg-1">Search</button>
                                <a type="button" class="cw-input btn-viewall bg-light text-dark"
                                    onclick="resetForm()">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="search-filter-results mt-3">
            <div class="container-fluid">
                @if (count($suppliers) > 0)
                    <div class="row g-2 supplier-scroll">
                        @foreach ($suppliers as $supplier)
                            <div class="col-xxl-2 col-lg-3 col-md-4 col-6">
                                <div class="supplier-card">
                                    <a href="{{ route('public.supplier.profile', @$supplier['slug']) }}" class="supplier-link">
                                        <div class="supplier-card-img">
                                            <img src="{{ @$supplier['getLogo']['path'] }}" alt="supplier" class="img-fluid"
                                                onerror="src='/assets/img/supplier_noimg.jpg'">
                                        </div>
                                        <p class="suppliername">{{ @$supplier['company'] }}</p>
                                        <span class="btn-outline w-100">
                                            See More Details</span>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>

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

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

                            <li class="page-item {{ $suppliers->hasMorePages() ? '' : 'disabled' }}">
                                <a class="page-link" href="{{ $suppliers->nextPageUrl() }}">Next</a>
                            </li>
                        </ul>
                    </nav>
                @else
                    <div class="d-flex justify-content-center align-items-center" style="min-height:460px">
                        <div class="text-center mt-3">
                            <img src="/assets/img/nosearch_results.png" class="img-fluid">
                            <h4 class="fw-bold text-center">
                                {{ $suppliers->count() }} results for
                                <span
                                    class="text-primary">"{{ @$keyword['keyword'] != '' ? $keyword['keyword'] : 'Search' }}"</span>
                            </h4>
                        </div>
                    </div>
                @endif

            </div>

        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">
    <style>
        .select2-container {
            border: none;
            box-shadow: none !important;
            font-size: 16px;
            min-width: 250px !important;
        }

        .select2-container--default .select2-selection--single {
            border: 2px solid #eee;
            padding: 5px;
            height: auto;
            font-size: 16px
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script>
        $("#country").select2({
            multiple: false,
            width: "100%",
        });
    </script>
@endpush