@extends('welcome')

@section('seo_title', $seo_title)

@section('content')
<div class="min-h-screen">
    <div class="pt-20 w-full py-4 bg-white shadow-sm">
        <div class="max-w-3xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center justify-center">

            <div class="flex">
                <div>
                    <img src="{{$site->screenshot}}" alt="{{$site->business_name}}" class="rounded-lg w-24 h-24" />
                </div>
                <div class="pl-2.5">
                    <p class="text-lg font-semibold">
                        {{$site->business_name}}
                    </p>
                    <a href="{{route('reviewsForSite', ['site' => $site->url])}}" 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-2" />
                        {{$site->url}}
                    </a>
                    <br />
                    <a href="{{route('companies.browse', ['location' => $site->location])}}" class="mt-1.5 text-slate-600 font-thin text-sm bg-slate-100 rounded px-1 inline-flex items-center">
                        <x-entypo-location class="w-3 mr-2 flex-shrink-0 " />
                        {{$site->location}}
                    </a>
                </div>
            </div>

        </div>
    </div>

    <div class="mt-10 mx-auto max-w-xl w-full p-4 review-box rounded-lg">
        @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-2">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        @if($alreadyRated)
        <div class="bg-amber-100 border border-amber-400 text-amber-700 px-4 py-3 rounded relative mb-2">
            <p>{{__('You have already rated this business.')}}</p>
        </div>
        @else
        <form method="POST" action="{{ route('process-review', ['site' => $site]) }}" enctype="multipart/form-data">
            @csrf
            <h1 class="text-xl font-semibold text-slate-600">
                {{__("Rate your experience")}}
            </h1>

            <div id="rating-container" class="flex items-center mt-2">
                <select class="star-rating" name="rating" data-options='{"tooltip": false}'>
                    <option value="">{{__('Rating')}}</option>
                    <option value="5" @if(old('rating', request('rating'))==5 ) selected @endif>{{__('5 Stars')}}</option>
                    <option value="4" @if(old('rating', request('rating'))==4) selected @endif>{{__('4 Stars')}}</option>
                    <option value="3" @if(old('rating', request('rating'))==3) selected @endif>{{__('3 Stars')}}</option>
                    <option value="2" @if(old('rating', request('rating'))==2) selected @endif>{{__('2 Stars')}}</option>
                    <option value="1" @if(old('rating', request('rating'))==1) selected @endif>{{__('1 Star')}}</option>
                </select>
            </div>


            <h1 class="mt-5 text-xl font-semibold text-slate-600">
                {{__("Give your review a title")}}
            </h1>
            <x-input value="{{old('review_title')}}" label="Title" name="review_title" type="text" class="w-full mt-2" required />

            <h1 class="mt-5 text-xl font-semibold text-slate-600">
                {{__("Tell us more about your experience")}}
            </h1>

            <textarea name="review_content" id="review_content" cols="30" rows="10" class="w-full bg-stone-100 px-2 py-2 rounded-lg shadow-sm focus:ring-0 border-0 outline-0 text-stone-500 font-medium placeholder-stone-400">{{old('review_content')}}</textarea>

            <h1 class="mt-5 text-xl font-semibold text-slate-600">
                {{__("Attachments (optional)")}}
            </h1>

            <div id="imageInputs">
                <input type="file" name="images[]" accept="image/*" onchange="addImageInput(this)" class="mt-2 p-2 border border-gray-300 rounded-md">
            </div>

            <x-button class="w-full mt-5" type="submit" required>{{__('Submit Review')}}</x-button>
        </form>

        @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-2">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        @endif
    </div>
</div>
@endsection

@push('extraJS')
<script src="{{ asset('js/star-rating/dist/star-rating.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>';
        },
    });

    function addImageInput(input) {
        const container = document.getElementById('imageInputs');

        if (container.childElementCount < 5) {
            const newInput = document.createElement('input');
            newInput.type = 'file';
            newInput.name = 'images[]';
            newInput.accept = 'image/*';
            newInput.onchange = function() {
                addImageInput(this);
            };
            newInput.classList.add('mt-2', 'p-2', 'border', 'border-gray-300', 'rounded-md');

            container.appendChild(newInput);
        }
    }
</script>
@endpush

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