<x-meet-kiosk-layout :title="'You left · '.$room->title" :organization="$organization">
    <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center">
        <form method="POST" action="{{ route('meet.left.feedback', $session) }}"
              x-data="leaveFeedback"
              class="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:rounded-3xl sm:p-6 md:p-8">
            @csrf

            <div class="text-center">
                <h1 class="text-xl font-bold text-slate-900 sm:text-2xl">You left the {{ $room->isConference() ? 'conference' : 'meeting' }}</h1>
                <p class="mt-2 text-sm text-slate-500">{{ $room->title }}</p>
                @if (! empty($feedback['display_name']))
                    <p class="mt-1 text-sm text-slate-600">Thanks, {{ $feedback['display_name'] }}.</p>
                @endif
            </div>

            <div class="mt-6 sm:mt-8">
                <p class="text-center text-sm font-medium text-slate-700 sm:text-left">How was the {{ $room->isConference() ? 'conference' : 'meeting' }} overall?</p>
                <div class="mt-3 flex justify-center gap-0.5 sm:gap-2">
                    @foreach (range(1, 5) as $star)
                        <button type="button"
                                @click="setRating({{ $star }})"
                                @mouseenter="hoverRating = {{ $star }}"
                                @mouseleave="hoverRating = 0"
                                class="rounded-lg p-1 transition-transform hover:scale-110"
                                aria-label="Rate {{ $star }} stars">
                            <svg class="h-8 w-8 sm:h-9 sm:w-9"
                                 :class="(hoverRating || rating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
                                 fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
                            </svg>
                        </button>
                    @endforeach
                </div>
                <input type="hidden" name="rating" :value="rating" required>
            </div>

            <div class="mt-6 space-y-6 sm:mt-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0">
                <div class="text-center md:text-left">
                    <p class="text-sm font-medium text-slate-700">Audio quality</p>
                    <div class="mt-2 flex justify-center gap-1 md:justify-start">
                        @foreach (range(1, 5) as $star)
                            <button type="button" @click="setAudioRating({{ $star }})"
                                    class="rounded p-1">
                                <svg class="h-7 w-7 sm:h-6 sm:w-6"
                                     :class="(hoverAudio || audioRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
                                     fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
                                </svg>
                            </button>
                        @endforeach
                    </div>
                    <input type="hidden" name="audio_rating" :value="audioRating || ''">
                </div>
                <div class="text-center md:text-left">
                    <p class="text-sm font-medium text-slate-700">Video quality</p>
                    <div class="mt-2 flex justify-center gap-1 md:justify-start">
                        @foreach (range(1, 5) as $star)
                            <button type="button" @click="setVideoRating({{ $star }})"
                                    class="rounded p-1">
                                <svg class="h-7 w-7 sm:h-6 sm:w-6"
                                     :class="(hoverVideo || videoRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
                                     fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
                                </svg>
                            </button>
                        @endforeach
                    </div>
                    <input type="hidden" name="video_rating" :value="videoRating || ''">
                </div>
            </div>

            <div class="mt-6 sm:mt-8">
                <label class="block text-sm font-medium text-slate-700">Anything else we should know? <span class="font-normal text-slate-400">(optional)</span></label>
                <textarea name="comment" rows="3" x-model="comment" placeholder="Share feedback for the host or Ladill Meet…"
                          class="mt-2 w-full rounded-2xl border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
            </div>

            <div class="mt-6 flex flex-col gap-3 sm:mt-8">
                <button type="submit"
                        class="btn-primary btn-primary-lg w-full py-3.5 font-semibold disabled:cursor-not-allowed disabled:opacity-50"
                        :disabled="!canSubmit()">
                    Submit feedback
                </button>
                <a href="{{ route('meet.left.thanks', $session) }}"
                   class="inline-flex w-full items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
                    Skip
                </a>
            </div>
        </form>
    </div>
</x-meet-kiosk-layout>
