@extends('welcome')

@section('seo_title', $seo_title)

@push( 'extraCSS' )
@if( $site->reviews->count() )
<script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "LocalBusiness",
        "image": "{{ $site->screenshot }}",
        "name": "{{ $site->url }}",
        "description": "{{ $site->business_name }} collection of reviews",
        "address": "{{ $site->location }}",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "{{ number_format($rating,2) }}",
            "bestRating": "5",
            "worstRating": "1",
            "ratingCount": "{{ $totalReviews }}"
        }
    }
</script>
@endif
@endpush

@section('content')
<div class="pt-8 pb-5 lg:pb-0 lg:pt-0 w-full reviews-page-header bg-slate-100">
    <div class="max-w-6xl md:py-[40px] mx-auto px-2 flex flex-col md:flex-row md:space-x-10">
        <div class="mt-12">
            <img src="{{ $site->screenshot }}" alt="" class="lg:w-72 w-full rounded-lg shadow border-4 border-slate-100" />
        </div>
        <div class="mt-12 flex-grow">
            <div>
                <h2 class="text-3xl font-black text-slate-600">
                    {{ $site->business_name }}
                </h2>
            </div>

            <div class="mt-0 pb-2  font-semibold text-slate-600 border-b border-b-slate-200">
                <a href="{{route('companies.browse', ['category' => $site->category])}}" class="mt-1.5 text-slate-600 text-sm  inline-flex items-center bg-slate-200 rounded-lg px-1.5 py-0.5">
                    <x-iconsax-out-category class="w-3 mr-1 flex-shrink-0 " />
                    {{ $site->category->name }}
                </a>
                <div class="mt-2.5 flex items-center">
                    @if ($site->claimer)
                    <x-carbon-badge class="w-6 h-6 mr-1 text-green-600 " />
                    {{ __('Company profile claimed') }}
                    @else
                    <x-bx-badge class="w-6 h-6 mr-1 text-amber-500" />
                    {{ __('Company profile not claimed') }}
                    @endif
                </div>

            </div>




            <div class="mt-2 text-slate-600 text-lg flex items-center">
                <x-carbon-review class="text-slate-500 w-8 mr-1" />
                @if ($totalReviews == 1)
                {{ __(':total review', ['rating' => number_format($rating, 2), 'total' => $totalReviews]) }}
                @else
                {{ __(':total reviews', ['rating' => number_format($rating, 2), 'total' => $totalReviews]) }}
                @endif

            </div>
            <div class="mt-2 text-slate-600 text-sm">
                @if($totalReviews > 0)
                <x-stars :negative="ceil($negativeRatings)" :positive="$rating" />
                @else
                <x-stars :negative="5" :positive="0" />
                @endif
                <span>{{ __('Overall Rating') }}</span>
            </div>


        </div>

    </div>
</div>

<div class="w-full py-4 bg-white shadow-sm">
    <div class="max-w-6xl px-2 mx-auto text-slate-600 text-lg flex items-center">
        <x-bx-comment-dots class="w-10 h-10 lg:w-7 lg:h-7 text-slate-500" />
        <span class="pl-2 lg:pl-1 inline-flex">
            {{-- attention, uses clean for variable --}}
            {!! __('Customer Reviews about <span class="text-blue-800 ml-2">:business_name</span>', [
            'business_name' => clean($site->business_name),
            ]) !!}
        </span>
    </div>
</div>

<div class="flex max-w-6xl mx-auto my-8 px-2">
    <div class="w-full flex-grow">

        <x-button class="mb-5 lg:hidden" id="companyDrawerButton">{{__('Company Infos')}}</x-button>


        @if (session('success'))
        <div class="bg-cyan-100 border border-cyan-400 text-cyan-700 px-4 py-3 rounded relative mb-4">
            {{ session('success') }}
        </div>
        @endif

        <div class="review-box p-3 rounded-lg mb-5 w-full text-slate-600 font-semibold flex items-center flex-wrap">
            <div class="flex-grow">
                {{__("Write a review about :site", ['site' => $site->url])}}
            </div>

            <div id="rating-container" class="flex items-center">
                <select class="star-rating" name="rating" data-options='{"tooltip": false}' onchange="window.location.href = '/evaluate/{{$site->id}}/{{$site->url}}?rating=' + this.value">
                    <option value="">{{__('Rating')}}</option>
                    <option value="5">{{__('5 Stars')}}</option>
                    <option value="4">{{__('4 Stars')}}</option>
                    <option value="3">{{__('3 Stars')}}</option>
                    <option value="2">{{__('2 Stars')}}</option>
                    <option value="1">{{__('1 Star')}}</option>
                </select>
            </div>

        </div>

        @if ($reviews->count())
        @foreach ($reviews as $r)
        <x-reviews-box-lg :r="$r" />
        @endforeach
        @else
        <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 reviews yet') }}
        </div>
        @endif


        @if ($reviews->hasPages())
        <div class="mt-5">
            {{ $reviews->links() }}
        </div>
        @endif
    </div>

    <div class="w-full max-w-[350px] pl-10 hidden lg:block">
        @include('components.sidebar-company')
    </div>

    @include('components.drawer-company')
</div>
@endsection

@push('extraJS')
<script src="{{ asset('js/star-rating/dist/star-rating.min.js') }}"></script>
<script src="{{ asset('js/luminous.min.js') }}"></script>
<script>
    var starrating = new StarRating('.star-rating', {
        stars: function(el, item, index) {
            el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <!-- Rounded rectangle with border-radius --> <rect class="gl-star-full" width="19" height="19" x="2.5" y="2.5" rx="4" ry="4"/> <!-- Rounded polygon with border-radius --> <polygon fill="#FFF" points="12 5.375 13.646 10.417 19 10.417 14.665 13.556 16.313 18.625 11.995 15.476 7.688 18.583 9.333 13.542 5 10.417 10.354 10.417"/> </svg>';
        },
    });
    new LuminousGallery(document.querySelectorAll(".r-att"));
</script>
@endpush

@push('extraCSS')
<link rel="stylesheet" href="{{ asset('js/star-rating/dist/star-rating.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/luminous-basic.min.css') }}" />
<style>
    :root {
        --gl-star-size: 32px;
        --gl-star-color: #fcd34d;
        --gl-star-color-inactive: #dcdce6;
    }
</style>
@endpush