@extends('welcome')

@section('seo_title', $seo_title . ' | ')

@section('content')
<div class="pt-20 w-full py-4 bg-white shadow-sm">
    <div class="max-w-6xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center">
        <x-bx-comment-dots class="w-6 h-6 lg:w-7 lg:h-7 text-slate-500" />
        <span class="pl-2 lg:pl-1">
            @if($category->name)
            {{__('Browse Companies in :categoryName', ['categoryName' => $category->name])}}
            @else
            {{__('Browse Companies')}}
            @endif
        </span>
    </div>
</div>

<div class="flex px-5">
    <div class="mt-8 mx-auto w-full max-w-6xl lg:flex lg:space-x-5">

        <div class="w-72 flex-shrink-0 hidden lg:block">
            @include('components.sidebar-browse-companies')
        </div>

        @include('components.drawer-filters')

        <div class="flex-grow">
            @if(!$sites->count())
            <div class="text-center text-slate-500 text-xl review-box rounded-lg p-5">

                <x-mdi-flask-empty-off-outline class="w-32 mx-auto text-slate-300" />

                {{ __('No results found') }}
            </div>
            @else
            <x-button class="mb-5 lg:hidden" id="filterDrawerButton">{{__('Show Filters')}}</x-button>
            @foreach($sites as $site)
            <div class="review-box p-3 rounded-lg lg:ml-5 mb-5">
                <div class="flex flex-wrap">
                    <div class="w-full lg:w-64 flex-shrink-0 pr-5 pb-5 lg:pb-0">
                        <a href="{{$site->slug}}">
                            <img src="{{ $site->screenshot }}" alt="{{ $site->business_name }}" class="rounded-lg w-full" />
                        </a>
                    </div>
                    <div class="flex-grow">
                        <h5>
                            <a href="{{$site->slug}}" class="text-xl text-slate-500 font-bold">
                                {{ $site->business_name }}
                            </a>
                        </h5>
                        <div class="mt-0 flex items-center">
                            <a href="{{$site->slug}}" class="text-slate-600 font-thin text-sm bg-slate-100 rounded px-1 inline-flex items-center">
                                <x-elusive-website class="w-3 flex-shrink-0 mr-1" />
                                {{ $site->url }}
                            </a>
                            <a href="{{route('companies.browse', ['category' => $site->category])}}" class="ml-3 text-slate-600 font-thin text-sm bg-slate-100 rounded px-1 inline-flex items-center">
                                <x-iconsax-out-category class="w-3 mr-1 flex-shrink-0 " />
                                {{ $site->category->name }}
                            </a>
                        </div>
                        <div class="mt-2 w-full flex items-center space-x-2 text-slate-500 font-semibold text-sm">
                            <x-entypo-location class="text-slate-400 w-4 flex-shrink-0 mr-2 " /> {{ $site->location }}
                        </div>
                        <div class="flex items-center space-x-2 mt-3 text-slate-600">
                            <div>
                                @if($site->reviewsCount > 0)
                                <x-stars :negative="ceil(5-$site->rating)" :positive="$site->rating" />
                                @else
                                <x-stars :negative="5" :positive="0" />
                                @endif
                            </div>
                            <div>
                                <h5>{{ $site->reviewsCount }} {{ ($site->reviewsCount > 1 || $site->reviewsCount == 0) ? __('reviews') : __('review') }}</h5>
                            </div>
                        </div>

                        <hr class="my-4">
                        <div class="flex items-center space-x-1">

                            <x-gmdi-arrow-circle-right-r class="w-6 h-6 text-blue-800 " />
                            <a href="{{ $site->slug }}" class="text-blue-800 hover:text-blue-700 hover:underline font-semibold">{{ __('Write a review') }}</a>
                        </div>

                    </div>
                </div>
            </div>
            @endforeach
            @endif

            @if($sites->hasPages())
            <div class="mt-5 lg:ml-5">
                {{ $sites->appends([ 'sortBy' => request('sortBy'),
		                     'reviewsCount' => request('reviewsCount'),
		                     'lati' => request('lati'),
		                     'longi' => request('longi'),
		                     'loc' => request('loc'),
		                     'category' => request('category'),
							 'companyStatus' => request( 'companyStatus' ) ])
							 ->links() }}
            </div>
            @endif
        </div>

    </div>
</div>

@endsection