@extends('layouts.base')
@section('title', __('Your feedback'))

@section('body')
<div class="container py-5" style="max-width:30rem">
    <div class="mb-card p-4 text-center">
        <h1 class="h4 fw-bold">{{ $tenant->name }}</h1>
        <p class="mb-muted">{{ __('How was your visit?') }}</p>
        <form method="POST" action="{{ url()->current() }}{{ '?'.request()->getQueryString() }}" id="reviewForm">
            @csrf
            <div class="d-flex justify-content-center gap-2 my-3" id="stars">
                @for($i = 1; $i <= 5; $i++)
                    <button type="button" class="btn btn-lg p-1 star" data-v="{{ $i }}" style="font-size:2rem; line-height:1">☆</button>
                @endfor
            </div>
            <input type="hidden" name="rating" id="rating" required>
            <textarea name="comment" rows="3" class="form-control mb-3 d-none" id="comment"
                      placeholder="{{ __('Tell us more (optional)') }}"></textarea>
            <button class="btn mb-btn-primary w-100" id="reviewSubmit" disabled>{{ __('Submit') }}</button>
        </form>
    </div>
</div>
@push('scripts')
<script>
const stars = document.querySelectorAll('.star');
const rating = document.getElementById('rating');
const comment = document.getElementById('comment');
const submit = document.getElementById('reviewSubmit');
stars.forEach(s => s.addEventListener('click', () => {
    const v = +s.dataset.v;
    rating.value = v;
    stars.forEach(x => x.textContent = +x.dataset.v <= v ? '★' : '☆');
    comment.classList.toggle('d-none', v >= 4); // unhappy → ask why
    submit.disabled = false;
}));
</script>
@endpush
@endsection