@extends('layouts.front_end')
@section('title', 'Vendor List')
@section('content')
    <div>
        <style>
           .exclusive-item-two .exclusive-item-content {
            padding: 8px 0px 8px 8px;
            position: relative;
        }

        .image_size{
            width: 100%;
            height:250px;
        }

        @media only screen and (max-width: 600px) {
            .image_size{
                width: 100%;
                height:150px;
            }
        }

        </style>

        <section class="exclusive-collection pt-35 pb-0">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="section-title text-center mb-60">
                            <span class="sub-title">Exclusive Supplier</span>
                            <h2 class="title">Suppliers List</h2>
                        </div>
                    </div>
                </div>
                <div class="row exclusive-active" style="position: relative; height: 864.8px;">
                    @foreach ($vendors as $item)
                        <div class="col-6 col-md-3 col-lg-3 col-xl-2 grid-item grid-sizer cat-two cat-three"
                            style="position: absolute; left: 0%; top: 0px; ">
                            <div class="exclusive-item exclusive-item-two mb-40">
                                <div class="exclusive-item-thumb"  style="height: 173px; width:173px; ">
                                    <a href="{{ route('vendor-wise-products', ['id' => $item->id]) }}">
                                        <img loading="lazy" class="image_size"  style="height: 173px; width:173px; "
                                        @if (isset($item->logo)) src="{{ asset('storage/photo/' . $item->logo) }}"
                                        @else src="{{ asset('paikari_app_default_logo.png') }}" @endif
                                         alt="{{ $item->business_name }}">

                                        <img class="overlay-product-thumb image_size" loading="lazy"  style="height: 173px; width:173px; "
                                        @if (isset($item->logo)) src="{{ asset('storage/photo/' . $item->logo) }}"
                                        @else src="{{ asset('paikari_app_default_logo.png') }}" @endif
                                         alt="{{ $item->business_name }}">
                                    </a>
                                    {{-- <span class="sd-meta">New!</span> --}}
                                    {{-- <a href="{{ route('vendor-wise-products', ['id' => $item->id]) }}" class="to-cart">View <i class="fas fa-eye"></i></a> --}}
                                </div>
                                <div class="exclusive-item-content">
                                    <div class="exclusive--content--bottom">
                                        <h5 style="width: 97%;" class="text-center">
                                            <a href="{{ route('vendor-wise-products', ['id' => $item->id]) }}">
                                            @if (strlen($item->business_name) > 50)
                                                {{ \Illuminate\Support\Str::limit($item->business_name, 50) . '...' }}
                                            @else
                                                {{ $item->business_name }}
                                            @endif
                                            </a> <br>
                                            <span>★★★★★</span><br>
                                            <p class="p-0 m-0" > {{ $item->account_type }}</p>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>





    </div>
@endsection
@push('scripts')
@endpush