@extends('layouts.app')

@section('title', 'Frequently Asked Questions')

@section('content')
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] bg-clip-text text-transparent mb-4">
            Frequently Asked Questions
        </h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">
            Find answers to common questions about our services, orders, payments, and more.
        </p>
    </div>

    <!-- Search Bar -->
    <div class="max-w-2xl mx-auto mb-10">
        <div class="relative">
            <input type="text" 
                   id="faqSearch" 
                   placeholder="Search your question..." 
                   class="w-full px-6 py-4 pl-14 pr-12 text-gray-900 bg-white border-2 border-gray-200 rounded-xl focus:border-[#4663ac] focus:outline-none focus:ring-4 focus:ring-[#4663ac]/20 transition-all shadow-lg">
            <i class="fas fa-search absolute left-5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i>
            <div id="searchStatus" class="absolute right-5 top-1/2 transform -translate-y-1/2 text-sm text-gray-400 hidden">
                <span id="searchCount">0</span> results
            </div>
        </div>
    </div>

    <!-- Category Tabs -->
    <div class="flex flex-wrap justify-center gap-3 mb-10" id="categoryTabs">
        <button class="category-tab active px-6 py-3 rounded-xl font-semibold transition-all" data-category="all">
            <i class="fas fa-globe mr-2"></i>All Questions
        </button>
        @foreach($faqs as $category => $items)
        <button class="category-tab px-6 py-3 rounded-xl font-semibold transition-all hover:bg-[#4663ac] hover:text-white" data-category="{{ Str::slug($category) }}">
            @php
                $icons = [
                    'General' => 'fa-question-circle',
                    'Orders' => 'fa-shopping-cart',
                    'Payments' => 'fa-credit-card',
                    'Delivery' => 'fa-truck',
                    'Issues' => 'fa-exclamation-triangle',
                    'Rewards' => 'fa-gift',
                    'Safety' => 'fa-shield-alt',
                    'Account' => 'fa-user',
                ];
                $icon = $icons[$category] ?? 'fa-circle';
            @endphp
            <i class="fas {{ $icon }} mr-2"></i>{{ $category }}
        </button>
        @endforeach
    </div>

    <!-- FAQ List -->
    <div class="space-y-4" id="faqList">
        @foreach($faqs as $category => $items)
            @foreach($items as $faq)
            <div class="faq-item bg-white rounded-xl border-2 border-gray-200 hover:border-[#4663ac] transition-all overflow-hidden" 
                 data-category="{{ Str::slug($category) }}"
                 data-question="{{ strtolower($faq->question) }}"
                 data-answer="{{ strtolower(strip_tags($faq->answer)) }}">
                
                <!-- Question -->
                <div class="faq-question p-6 cursor-pointer flex items-start justify-between gap-4 hover:bg-gray-50 transition-colors">
                    <div class="flex items-start gap-4">
                        @php
                            $categoryIcon = $icons[$category] ?? 'fa-circle';
                        @endphp
                        <div class="w-10 h-10 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-lg flex items-center justify-center text-white flex-shrink-0">
                            <i class="fas {{ $categoryIcon }}"></i>
                        </div>
                        <div>
                            <span class="text-xs text-[#4663ac] font-semibold mb-1 block">{{ $category }}</span>
                            <h3 class="text-lg font-semibold text-gray-900 pr-8">{{ $faq->question }}</h3>
                        </div>
                    </div>
                    <div class="faq-toggle w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 transition-all duration-300 flex-shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                
                <!-- Answer -->
                <div class="faq-answer hidden bg-gray-50 border-t-2 border-gray-200 p-6">
                    <div class="flex gap-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center text-[#4663ac] flex-shrink-0 border-2 border-[#4663ac]/20">
                            <i class="fas fa-reply"></i>
                        </div>
                        <div class="text-gray-700 leading-relaxed">
                            {!! $faq->answer !!}
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        @endforeach
    </div>

    <!-- No Results Message -->
    <div id="noResults" class="text-center py-16 hidden">
        <div class="text-8xl mb-4 opacity-30">🔍</div>
        <h3 class="text-2xl font-bold text-gray-900 mb-2">No questions found</h3>
        <p class="text-gray-600 mb-6">Try searching with different keywords</p>
        <button onclick="clearSearch()" class="px-6 py-3 bg-[#4663ac] text-white rounded-xl hover:bg-[#c1d8f0] hover:text-[#4663ac] transition-colors font-semibold">
            <i class="fas fa-undo mr-2"></i>Clear Search
        </button>
    </div>

    <!-- Still Need Help? -->
    <div class="mt-16 bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] rounded-2xl p-8 md:p-12 text-white text-center">
        <i class="fas fa-headset text-5xl mb-4 opacity-90"></i>
        <h2 class="text-3xl font-bold mb-3">Still Need Help?</h2>
        <p class="text-xl text-white/90 mb-6 max-w-2xl mx-auto">
            Can't find what you're looking for? Our support team is ready to help 24/7.
        </p>
        <div class="flex flex-wrap gap-4 justify-center">
            <a href="/support" class="px-8 py-4 bg-white text-[#4663ac] rounded-xl font-bold hover:bg-opacity-90 transition-all inline-flex items-center gap-2 shadow-xl">
                <i class="fas fa-envelope"></i>
                Contact Support
            </a>
            <button onclick="openLiveChat()" class="px-8 py-4 bg-transparent border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[#4663ac] transition-all inline-flex items-center gap-2">
                <i class="fas fa-comment-dots"></i>
                Live Chat
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // FAQ Accordion
    document.querySelectorAll('.faq-question').forEach(question => {
        question.addEventListener('click', function(e) {
            const item = this.closest('.faq-item');
            const wasActive = item.classList.contains('active');
            const toggle = this.querySelector('.faq-toggle i');
            const answer = item.querySelector('.faq-answer');
            
            // Close other open FAQs
            document.querySelectorAll('.faq-item.active').forEach(activeItem => {
                if (activeItem !== item) {
                    activeItem.classList.remove('active');
                    const activeToggle = activeItem.querySelector('.faq-question .faq-toggle i');
                    const activeAnswer = activeItem.querySelector('.faq-answer');
                    if (activeToggle) activeToggle.className = 'fas fa-chevron-down';
                    if (activeAnswer) activeAnswer.classList.add('hidden');
                }
            });
            
            // Toggle current
            if (!wasActive) {
                item.classList.add('active');
                if (toggle) toggle.className = 'fas fa-chevron-up';
                if (answer) answer.classList.remove('hidden');
            } else {
                item.classList.remove('active');
                if (toggle) toggle.className = 'fas fa-chevron-down';
                if (answer) answer.classList.add('hidden');
            }
        });
    });

    // Search Functionality
    const searchInput = document.getElementById('faqSearch');
    const searchStatus = document.getElementById('searchStatus');
    const searchCount = document.getElementById('searchCount');
    const faqItems = document.querySelectorAll('.faq-item');
    const noResults = document.getElementById('noResults');
    const categoryTabs = document.querySelectorAll('.category-tab');
    let currentCategory = 'all';

    function filterFAQs() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        let visibleCount = 0;

        faqItems.forEach(item => {
            const question = item.dataset.question || '';
            const answer = item.dataset.answer || '';
            const category = item.dataset.category;
            
            const matchesSearch = searchTerm === '' || question.includes(searchTerm) || answer.includes(searchTerm);
            const matchesCategory = currentCategory === 'all' || category === currentCategory;
            
            if (matchesSearch && matchesCategory) {
                item.style.display = 'block';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        // Update search status
        if (searchTerm !== '') {
            searchStatus.classList.remove('hidden');
            searchCount.textContent = visibleCount;
        } else {
            searchStatus.classList.add('hidden');
        }

        // Show/hide no results
        if (visibleCount === 0) {
            noResults.classList.remove('hidden');
        } else {
            noResults.classList.add('hidden');
        }
    }

    // Search input handler
    searchInput.addEventListener('input', filterFAQs);

    // Category tabs handler
    categoryTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            categoryTabs.forEach(t => {
                t.classList.remove('active', 'bg-[#4663ac]', 'text-white');
                t.classList.add('bg-transparent', 'text-gray-700');
            });
            this.classList.add('active', 'bg-[#4663ac]', 'text-white');
            this.classList.remove('bg-transparent', 'text-gray-700');
            
            currentCategory = this.dataset.category;
            filterFAQs();
        });
    });

    // Clear search
    window.clearSearch = function() {
        searchInput.value = '';
        filterFAQs();
        searchInput.focus();
    };

    // Live chat function
    window.openLiveChat = function() {
        if (window.LC_API) {
            window.LC_API.open_chat_window();
        } else if (window.LiveChatWidget) {
            window.LiveChatWidget.call('maximize');
        } else {
            alert('Live chat is currently unavailable. Please use Contact Support instead.');
        }
    };

    // Open first FAQ by default (optional)
    // setTimeout(() => {
    //     const firstFaq = document.querySelector('.faq-item');
    //     if (firstFaq) {
    //         firstFaq.querySelector('.faq-question').click();
    //     }
    // }, 500);
});
</script>

<style>
.category-tab {
    background: transparent;
    color: #4b5563;
    border: 2px solid #e5e7eb;
}
.category-tab:hover {
    background: #4663ac;
    color: white;
    border-color: #4663ac;
}
.category-tab.active {
    background: #4663ac;
    color: white;
    border-color: #4663ac;
}
.faq-item.active {
    border-color: #4663ac;
    box-shadow: 0 10px 25px -5px rgba(70, 99, 172, 0.2);
}
.faq-item.active .faq-question {
    background-color: #f9fafb;
}
.faq-item.active .faq-toggle {
    background-color: #4663ac;
    color: white;
}
.transition-all {
    transition: all 0.3s ease;
}
</style>
@endsection