<?php
// Extract YouTube video ID from various URL formats
function extractYoutubeId($url) {
    $patterns = [
        '/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/',
    ];
    foreach ($patterns as $pattern) {
        if (preg_match($pattern, $url, $matches)) {
            return $matches[1];
        }
    }
    return null;
}
?>
<div class="space-y-6" x-data="{ editModalOpen: false, editData: {} }">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-white">Video Reviews</h2>
            <p class="text-slate-400 text-sm mt-1">Manage restaurant video testimonials and reviews.</p>
        </div>
        <span class="px-3 py-1.5 rounded-full text-xs font-extrabold uppercase bg-purple-500/15 text-purple-400 border border-purple-500/25">
            <?php echo count($reviews); ?> Reviews
        </span>
    </div>

    <!-- Add Review Form -->
    <div class="rounded-2xl p-5" style="background:rgba(139,92,246,0.08); border:1px solid rgba(139,92,246,0.2)">
        <h3 class="text-base font-bold text-white mb-4"><i class="fas fa-plus-circle text-purple-400 mr-2"></i>Add Video Review</h3>
        <form action="/superadmin/reviews/store" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Restaurant Name <span class="text-red-400">*</span></label>
                <input type="text" name="restaurant_name" required class="form-input" placeholder="e.g. Spice Garden">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Location</label>
                <input type="text" name="location" class="form-input" placeholder="e.g. Dhaka, Bangladesh">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Logo Image</label>
                <input type="file" name="logo" accept="image/*" class="form-input text-xs py-2 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-purple-500/20 file:text-purple-400 hover:file:bg-purple-500/30">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">YouTube URL <span class="text-red-400">*</span></label>
                <div class="flex gap-2">
                    <input type="text" name="youtube_url" required class="form-input flex-1" placeholder="https://youtube.com/watch?v=...">
                    <button type="submit" class="btn-primary px-5 flex-shrink-0"><i class="fas fa-plus mr-1"></i>Add</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Reviews Grid -->
    <?php if (empty($reviews)): ?>
    <div class="rounded-2xl p-12 text-center" style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07)">
        <i class="fas fa-video text-4xl text-slate-500/40 mb-4"></i>
        <p class="text-slate-400 font-medium">No video reviews added yet.</p>
    </div>
    <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        <?php foreach ($reviews as $review):
            $videoId = extractYoutubeId($review['youtube_url']);
        ?>
        <div class="rounded-2xl overflow-hidden border border-white/5 bg-white/[0.02] group flex flex-col">
            <!-- Video Embed -->
            <div class="relative aspect-video bg-black flex-shrink-0">
                <?php if ($videoId): ?>
                <iframe class="w-full h-full" src="https://www.youtube.com/embed/<?php echo htmlspecialchars($videoId); ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <?php else: ?>
                <div class="w-full h-full flex items-center justify-center text-slate-500">
                    <div class="text-center">
                        <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                        <p class="text-xs">Invalid YouTube URL</p>
                    </div>
                </div>
                <?php endif; ?>
            </div>

            <!-- Info -->
            <div class="p-4 flex-1 flex flex-col justify-between">
                <div class="flex items-center gap-3 mb-4">
                    <?php if (!empty($review['logo'])): ?>
                    <img class="h-10 w-10 rounded-xl object-contain bg-white p-1 flex-shrink-0 border border-white/10" src="/public/uploads/logos/<?php echo htmlspecialchars($review['logo']); ?>" alt="">
                    <?php else: ?>
                    <div class="h-10 w-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                        <i class="fas fa-store text-white text-sm"></i>
                    </div>
                    <?php endif; ?>
                    <div class="min-w-0">
                        <h4 class="text-white font-bold text-sm truncate"><?php echo htmlspecialchars($review['restaurant_name']); ?></h4>
                        <?php if (!empty($review['location'])): ?>
                        <p class="text-slate-500 text-xs truncate"><i class="fas fa-map-marker-alt mr-1"></i><?php echo htmlspecialchars($review['location']); ?></p>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="flex items-center justify-between border-t border-white/5 pt-3 mt-auto">
                    <span class="text-slate-500 text-3xs"><?php echo date('M d, Y', strtotime($review['created_at'])); ?></span>
                    <div class="flex items-center gap-2">
                        <button @click="editData = { id: '<?php echo $review['id']; ?>', name: '<?php echo addslashes(htmlspecialchars($review['restaurant_name'])); ?>', location: '<?php echo addslashes(htmlspecialchars($review['location'])); ?>', url: '<?php echo addslashes(htmlspecialchars($review['youtube_url'])); ?>' }; editModalOpen = true" type="button" class="text-xs font-semibold py-1.5 px-3 rounded-lg text-blue-400 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 transition active:scale-[0.98]">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </button>
                        <form action="/superadmin/reviews/delete" method="POST" class="inline">
                            <input type="hidden" name="id" value="<?php echo $review['id']; ?>">
                            <button type="submit" onclick="return confirm('Delete this video review?')" class="text-xs font-semibold py-1.5 px-3 rounded-lg text-red-400 bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 transition active:scale-[0.98]">
                                <i class="fas fa-trash-alt mr-1"></i>Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Edit Modal -->
    <div x-show="editModalOpen" x-transition.opacity class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4" style="display: none;">
        <div @click.away="editModalOpen = false" class="bg-[#1e293b] border border-white/10 rounded-2xl p-6 w-full max-w-lg shadow-2xl" x-transition.scale.origin.bottom>
            <h3 class="text-xl font-bold text-white mb-4">Edit Video Review</h3>
            <form action="/superadmin/reviews/update" method="POST" enctype="multipart/form-data" class="space-y-4">
                <input type="hidden" name="id" x-model="editData.id">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Restaurant Name <span class="text-red-400">*</span></label>
                    <input type="text" name="restaurant_name" x-model="editData.name" required class="form-input">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Location</label>
                    <input type="text" name="location" x-model="editData.location" class="form-input">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Update Logo Image (Optional)</label>
                    <input type="file" name="logo" accept="image/*" class="form-input text-xs py-2 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-purple-500/20 file:text-purple-400 hover:file:bg-purple-500/30">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">YouTube URL <span class="text-red-400">*</span></label>
                    <input type="text" name="youtube_url" x-model="editData.url" required class="form-input">
                    <p class="text-[10px] text-slate-500 mt-1">Paste standard link (e.g. youtube.com/watch?v=...)</p>
                </div>
                <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-white/10">
                    <button type="button" @click="editModalOpen = false" class="px-5 py-2.5 rounded-xl font-semibold text-white bg-slate-700 hover:bg-slate-600 transition">Cancel</button>
                    <button type="submit" class="btn-primary px-5 py-2.5"><i class="fas fa-save mr-2"></i>Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
