@extends('layouts.public.app')

@section('title', 'Suppliers | Chemical Wholesale')
@section('description', 'All Suppliers in Chemical Wholesale')
@section('keywords', 'Suppliers, Chemical Wholesale')

@section('content')
    <div class="pb-4">
        <div class="search-keywords">
            <div class="container-fluid">
                <div class="top-filter border-0 ps-0">
                    <p class="search-keywords-text">
                        @if (@$selectedCountry != '')
                            Showing {{ $suppliers->count() }} Suppliers
                            {{ @$selectedCountry != '' ? 'from ' . @$selectedCountry['name_en'] : '' }}
                        @else
                            Showing all Suppliers
                        @endif
                    </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 class="row g-2 supplier-scroll d-flex">
                @if (count($suppliers) > 0)
                    @foreach ($suppliers as $supplier)
                        <div class="col-xxl-2 col-lg-3 col-md-4 col-6 d-flex">
                            <div class="supplier-card w-100 text-center">
                                <a href="{{ route('public.supplier.profile', @$supplier['slug']) }}" class="supplier-link">
                                    <div class="supplier-card-img flex-grow-1">
                                        <img src="{{ @$supplier['getLogo']['path'] }}" alt="supplier" class="img-fluid"
                                            onerror="this.onerror=null; this.src='/assets/img/supplier_noimg.jpg'">
                                    </div>
                                    <div class="">
                                        <p class="suppliername mb-0" style="word-break: normal">{{ @$supplier['company'] }}
                                        </p>
                                    </div>
                                    <span class="btn-outline">
                                        See More Details
                                    </span>
                                </a>
                            </div>
                        </div>
                    @endforeach

                    <!-- Pagination -->
                    <nav aria-label="Supplier navigation" class="py-2">
                        <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
                    <p class="text-center fw-bold mb-4 py-5 my-5"> <img alt="business"
                            src="https://img.icons8.com/?size=100&amp;id=lx8ZDzdBdoWt&amp;format=png&amp;color=000000"
                            class="avatar-sm me-2">
                        No suppliers to found
                    </p>
                @endif
            </div>

        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">
    <style>
        @media (min-width: 1400px) {
            .custom-col-8 {
                flex: 0 0 12.5%;
                max-width: 12.5%;
            }

            .supplier-card .suppliername {
                font-size: 18px;
            }

            .supplier-card .btn-outline {
                padding: 5px 10px;
                font-size: 14px;
                border-radius: 5px;
            }

        }

        .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>
    <script>
        function resetForm() {
            document.getElementById('country').selectedIndex = 0;
            $('#state').val('');
            document.getElementById('supplierFilterForm').submit();
        }
    </script>
@endpush