<?php // app/Views/admin/feedback/index.php ?>
<div class="space-y-6">

    <!-- Toast Notifications -->
    <?php if (isset($_GET['msg'])): ?>
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)" class="fixed bottom-5 right-5 z-50 flex items-center p-4 rounded-xl border shadow-lg text-emerald-400 bg-slate-900 border-emerald-500/30 transition-all duration-300 transform hover:scale-105">
        <i class="fas fa-check-circle text-lg mr-3"></i>
        <span class="text-sm font-medium"><?php echo htmlspecialchars($_GET['msg']); ?></span>
    </div>
    <?php endif; ?>

    <!-- Header -->
    <div class="rounded-2xl p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 shadow-xl" style="background: linear-gradient(135deg, #0f172a, #0d1117); border: 1px solid rgba(255,255,255,0.03)">
        <div>
            <h2 class="text-2xl font-bold text-white mb-1"><i class="fas fa-comment-dots mr-2 text-emerald-400"></i>Customer Feedback Hub</h2>
            <p class="text-slate-400 text-sm">Review compliments and complaints submitted by guests at their tables via QR codes.</p>
        </div>
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-xl flex items-center justify-center shadow-inner" style="background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.2)">
                <i class="fas fa-bullhorn text-xl text-emerald-400 animate-pulse"></i>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="rounded-2xl p-5 shadow-md" style="background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05)">
        <form method="GET" action="<?= BASE_URL ?>/admin/feedback" class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-end">
            <!-- Branch / Floor Filter -->
            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-1.5 uppercase tracking-wider">Filter by Branch / Floor</label>
                <select name="floor_id" onchange="this.form.submit()" class="w-full px-4 py-2.5 rounded-lg text-white text-sm outline-none transition focus:ring-2 focus:ring-emerald-500/50 bg-slate-900 border border-white/10">
                    <option value="">All Branches / Floors</option>
                    <?php foreach ($floors as $floor): ?>
                        <option value="<?= $floor['id'] ?>" <?= ($floor_filter == $floor['id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($floor['name']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Feedback Type Filter -->
            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-1.5 uppercase tracking-wider">Feedback Type</label>
                <select name="type" onchange="this.form.submit()" class="w-full px-4 py-2.5 rounded-lg text-white text-sm outline-none transition focus:ring-2 focus:ring-emerald-500/50 bg-slate-900 border border-white/10">
                    <option value="">All Feedbacks</option>
                    <option value="compliment" <?= ($type_filter === 'compliment') ? 'selected' : '' ?>>Compliments Only</option>
                    <option value="complaint" <?= ($type_filter === 'complaint') ? 'selected' : '' ?>>Complaints Only</option>
                </select>
            </div>

            <!-- Reset Button -->
            <div class="flex justify-start sm:justify-end">
                <a href="<?= BASE_URL ?>/admin/feedback" class="w-full sm:w-auto px-5 py-2.5 rounded-lg text-slate-400 hover:text-white text-sm font-semibold text-center border border-white/10 hover:bg-white/5 transition">
                    <i class="fas fa-undo mr-1.5"></i> Clear Filters
                </a>
            </div>
        </form>
    </div>

    <!-- Feedbacks List -->
    <div class="space-y-4">
        <?php if (empty($feedbacks)): ?>
            <!-- Empty State -->
            <div class="rounded-2xl p-12 text-center border border-dashed border-white/10 bg-white/[0.01]">
                <div class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center mx-auto mb-4 text-slate-500">
                    <i class="fas fa-folder-open text-2xl"></i>
                </div>
                <h3 class="text-white font-semibold text-lg mb-1">No Feedback Found</h3>
                <p class="text-slate-500 text-sm">There are no customer reviews matching the selected filter options.</p>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <?php foreach ($feedbacks as $fb): ?>
                    <?php 
                    $isComplaint = ($fb['type'] === 'complaint');
                    $cardBorderColor = $isComplaint ? 'rgba(239, 68, 68, 0.15)' : 'rgba(16, 185, 129, 0.15)';
                    $cardBg = $isComplaint ? 'rgba(239, 68, 68, 0.01)' : 'rgba(16, 185, 129, 0.01)';
                    $badgeStyle = $isComplaint 
                        ? 'background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #f87171;' 
                        : 'background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399;';
                    ?>
                    <div class="rounded-2xl p-5 flex flex-col justify-between shadow-sm transition-all duration-300 hover:translate-y-[-2px] hover:shadow-md" 
                         style="background: <?= $cardBg ?>; border: 1px solid <?= $cardBorderColor ?>;">
                        
                        <div>
                            <!-- Header Info -->
                            <div class="flex items-center justify-between mb-3.5">
                                <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider" style="<?= $badgeStyle ?>">
                                    <i class="<?= $isComplaint ? 'fas fa-exclamation-triangle' : 'fas fa-heart' ?> mr-1.5"></i>
                                    <?= ucfirst($fb['type']) ?>
                                </span>
                                <span class="text-xs text-slate-500 font-medium">
                                    <i class="far fa-clock mr-1"></i>
                                    <?= date('M d, Y h:i A', strtotime($fb['created_at'])) ?>
                                </span>
                            </div>

                            <!-- Floor and Table details -->
                            <div class="text-xs text-slate-400 mb-3 flex items-center gap-3 font-semibold">
                                <span class="px-2 py-0.5 rounded bg-white/5 border border-white/5">
                                    <i class="fas fa-layer-group text-slate-500 mr-1"></i> <?= htmlspecialchars($fb['floor_name'] ?? 'General') ?>
                                </span>
                                <span class="px-2 py-0.5 rounded bg-white/5 border border-white/5">
                                    <i class="fas fa-chair text-slate-500 mr-1"></i> Table <?= htmlspecialchars($fb['table_name'] ?? 'N/A') ?>
                                </span>
                            </div>

                            <!-- Customer info details if present -->
                            <?php if (!empty($fb['customer_name']) || !empty($fb['phone'])): ?>
                            <div class="text-xs text-slate-400 mb-3 flex flex-wrap items-center gap-3 font-semibold">
                                <?php if (!empty($fb['customer_name'])): ?>
                                <span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                    <i class="fas fa-user mr-1.5 text-emerald-400"></i><?= htmlspecialchars($fb['customer_name']) ?>
                                </span>
                                <?php endif; ?>
                                <?php if (!empty($fb['phone'])): ?>
                                <span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">
                                    <i class="fas fa-phone mr-1.5 text-blue-400"></i><?= htmlspecialchars($fb['phone']) ?>
                                </span>
                                <?php endif; ?>
                            </div>
                            <?php endif; ?>

                            <!-- Feedback Message -->
                            <p class="text-white text-sm leading-relaxed mb-4 italic" style="font-family: 'Inter', sans-serif;">
                                "<?= nl2br(htmlspecialchars($fb['message'])) ?>"
                            </p>
                        </div>

                        <!-- Card Actions -->
                        <div class="flex justify-end pt-3 border-t border-white/[0.04] mt-auto">
                            <form action="<?= BASE_URL ?>/admin/feedback/delete" method="POST" onsubmit="return confirm('Are you sure you want to remove this feedback?');">
                                <input type="hidden" name="id" value="<?= $fb['id'] ?>">
                                <button type="submit" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 transition">
                                    <i class="fas fa-trash-alt"></i> Delete Feedback
                                </button>
                            </form>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>
