@extends('digitalmenu::layouts.app')

@section('title', 'My Feedback')

@section('content')
<div class="max-w-4xl mx-auto">

    <div class="mb-8">
        <h1 class="text-2xl font-bold text-teal-900 font-['Plus_Jakarta_Sans']">Feedback</h1>
        <p class="text-sm text-slate-500 mt-1">Your past submissions to our team.</p>
    </div>

    <div id="feedback-empty" class="{{ $feedbacks->isEmpty() ? '' : 'hidden' }} flex flex-col items-center justify-center py-24 text-center">
        <span class="material-symbols-outlined text-6xl text-slate-300 mb-4" style="font-variation-settings: 'FILL' 1;">feedback</span>
        <p class="text-slate-500 font-medium">No feedback submitted yet.</p>
        <p class="text-slate-400 text-sm mt-1">Use the button in the bottom-right corner to share your thoughts.</p>
    </div>

    <div id="feedback-list" class="space-y-4 {{ $feedbacks->isEmpty() ? 'hidden' : '' }}">
        @foreach ($feedbacks as $fb)
            @php
                $categoryLabels = [1 => 'General', 2 => 'Bug Report', 3 => 'Feature Request'];
                $categoryColors = [1 => 'bg-slate-100 text-slate-600', 2 => 'bg-red-100 text-red-700', 3 => 'bg-blue-100 text-blue-700'];
                $statusLabels   = [1 => 'New', 2 => 'In Review', 3 => 'Resolved'];
                $statusColors   = [1 => 'bg-teal-100 text-teal-700', 2 => 'bg-amber-100 text-amber-700', 3 => 'bg-green-100 text-green-700'];
                $catLabel  = $categoryLabels[$fb->type]   ?? 'General';
                $catColor  = $categoryColors[$fb->type]   ?? 'bg-slate-100 text-slate-600';
                $statLabel = $statusLabels[$fb->status]   ?? 'New';
                $statColor = $statusColors[$fb->status]   ?? 'bg-teal-100 text-teal-700';
            @endphp
            <div class="bg-white rounded-2xl border border-slate-200 px-6 py-5 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex flex-wrap items-start justify-between gap-3 mb-3">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $catColor }}">{{ $catLabel }}</span>
                        <!-- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $statColor }}">{{ $statLabel }}</span> -->
                    </div>
                    <span class="text-xs text-slate-400">{{ $fb->created_at->format('M d, Y · g:i A') }}</span>
                </div>
                <div class="flex gap-0.5 mb-3">
                    @for ($s = 1; $s <= 5; $s++)
                        <span class="material-symbols-outlined text-lg {{ $s <= $fb->rating_val ? 'text-amber-400' : 'text-slate-200' }}"
                              style="{{ $s <= $fb->rating_val ? 'font-variation-settings: \'FILL\' 1;' : '' }}">star</span>
                    @endfor
                </div>
                <p class="text-sm text-slate-700 leading-relaxed">{{ $fb->message_text }}</p>
            </div>
        @endforeach
    </div>

</div>
@endsection

@section('scripts')
<script>
window.__onFeedbackSubmitted = function (fb) {
    var categoryLabels = { 1: 'General', 2: 'Bug Report', 3: 'Feature Request' };
    var categoryColors = { 1: 'bg-slate-100 text-slate-600', 2: 'bg-red-100 text-red-700', 3: 'bg-blue-100 text-blue-700' };
    var catLabel = categoryLabels[fb.type] || 'General';
    var catColor = categoryColors[fb.type] || 'bg-slate-100 text-slate-600';

    var stars = '';
    for (var s = 1; s <= 5; s++) {
        var filled = s <= fb.rating;
        stars += '<span class="material-symbols-outlined text-lg ' + (filled ? 'text-amber-400' : 'text-slate-200') + '"'
               + (filled ? ' style="font-variation-settings: \'FILL\' 1;"' : '') + '>star</span>';
    }

    var card = '<div class="bg-white rounded-2xl border border-slate-200 px-6 py-5 shadow-sm hover:shadow-md transition-shadow">'
             +   '<div class="flex flex-wrap items-start justify-between gap-3 mb-3">'
             +     '<div class="flex flex-wrap items-center gap-2">'
             +       '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ' + catColor + '">' + catLabel + '</span>'
             +       '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-teal-100 text-teal-700">New</span>'
             +     '</div>'
             +     '<span class="text-xs text-slate-400">' + fb.created_at + '</span>'
             +   '</div>'
             +   '<div class="flex gap-0.5 mb-3">' + stars + '</div>'
             +   '<p class="text-sm text-slate-700 leading-relaxed">' + fb.message.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</p>'
             + '</div>';

    var list  = document.getElementById('feedback-list');
    var empty = document.getElementById('feedback-empty');

    list.insertAdjacentHTML('afterbegin', card);
    list.classList.remove('hidden');
    empty.classList.add('hidden');
};
</script>
@endsection