@extends('client.layout.master')

@section('page-title', 'Faq')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Faq</li>
@endsection
@section('title','Faq')

@section('content')
    <div class="container-fluid">
        <div class="row g-3">
            {{-- Header/Filters --}}
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <div class="d-flex flex-column flex-md-row align-items-md-center gap-3">
                            <div class="flex-grow-1">
                                <!-- changed placeholder to English -->
                                <input id="faqSearch" type="text" class="form-control form-control-lg"
                                       placeholder="Search FAQs (e.g.: payments, orders, reports)">
                            </div>
                            <div class="text-nowrap">
                                <!-- changed badge label to English -->
                                <span class="badge bg-light text-dark border">Total: {{ $faq->count() }}</span>
                            </div>
                        </div>

                        @if(isset($categories) && $categories->isNotEmpty())
                            <div class="mt-3 d-flex flex-wrap gap-2" id="faqCategories">
                                <!-- translated 'الكل' -> 'All' -->
                                <button class="btn btn-outline-secondary btn-sm active" data-category="all">All</button>
                                @foreach($categories as $cat)
                                    <button class="btn btn-outline-secondary btn-sm" data-category="{{ $cat }}">
                                        {{ $cat }}
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- FAQ Accordion --}}
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">

                    @if($faq->isEmpty())
                            <div class="text-center py-5">
                                <div class="display-6">😅</div>
                                <!-- translated empty state -->
                                <p class="mt-3 text-muted">No FAQs available right now.</p>
                            </div>
                        @else
                            <div class="accordion px-1" id="faqAccordion">

                            @foreach($faq as $item)
                                    @php
                                        $collapseId = 'faqItem'.$item->id;
                                        $headingId = 'heading'.$item->id;
                                        $ratio = round($item->helpfulness_ratio, 1);
                                    @endphp
                                    <div class="accordion-item faq-item" data-category="{{ $item->category }}">
                                        <h2 class="accordion-header" id="{{ $headingId }}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#{{ $collapseId }}" aria-expanded="false"
                                                    aria-controls="{{ $collapseId }}">
                                                <span class="me-2">{{ $item->question }}</span>
                                                <span class="ms-auto d-flex align-items-center gap-2">
                                                <span class="badge bg-info-subtle text-dark border">
                                                    <!-- translated 'التصنيف' and fallback 'عام' -->
                                                    Category: {{ $item->category ?? 'General' }}
                                                </span>
                                                <span class="badge bg-success-subtle text-dark border"
                                                      title="Helpfulness ratio">{{ $ratio }}%</span>
                                                <span class="badge bg-light text-dark border"
                                                      title="Stats">
                                                    👍 {{ $item->is_helpful }} | 👎 {{ $item->is_not_helpful }}
                                                </span>
                                            </span>
                                            </button>
                                        </h2>
                                        <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                                             aria-labelledby="{{ $headingId }}" data-bs-parent="#faqAccordion">
                                            <div class="accordion-body">
                                                {!! nl2br(e($item->answer)) !!}

                                                <div class="d-flex align-items-center gap-2 mt-3">
                                                    <!-- translated prompt and buttons -->
                                                    <span class="text-muted">Was this answer helpful?</span>
                                                    <button class="btn btn-sm btn-outline-success"
                                                            data-action="helpful"
                                                            data-id="{{ $item->id }}">
                                                        Yes
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-danger"
                                                            data-action="not_helpful"
                                                            data-id="{{ $item->id }}">
                                                        No
                                                    </button>
                                                    <small class="text-muted ms-2 d-none" id="thanks-{{ $item->id }}">Thanks for your feedback!</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Empty state after filtering/search --}}
                            <div id="noResults" class="text-center py-4 d-none">
                                😕 No matching results for your search/filter.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tiny inline JS for search/filter/votes --}}
    @push('js')
        <script>
            (function() {
                const searchInput = document.getElementById('faqSearch');
                const categoryBtns = document.querySelectorAll('#faqCategories button');
                const items = Array.from(document.querySelectorAll('.faq-item'));
                const noResults = document.getElementById('noResults');

                let activeCategory = 'all';

                function normalize(s) {
                    return (s || '').toString().toLowerCase().trim();
                }

                function applyFilters() {
                    const q = normalize(searchInput.value);
                    let visibleCount = 0;

                    items.forEach(el => {
                        const cat = normalize(el.getAttribute('data-category'));
                        const txt = normalize(el.textContent);
                        const matchCat = (activeCategory === 'all') || (cat === normalize(activeCategory));
                        const matchTxt = q === '' || txt.includes(q);

                        if (matchCat && matchTxt) {
                            el.classList.remove('d-none');
                            visibleCount++;
                        } else {
                            el.classList.add('d-none');
                        }
                    });

                    if (noResults) {
                        noResults.classList.toggle('d-none', visibleCount !== 0);
                    }
                }

                if (searchInput) {
                    searchInput.addEventListener('input', applyFilters);
                }

                if (categoryBtns) {
                    categoryBtns.forEach(btn => {
                        btn.addEventListener('click', () => {
                            categoryBtns.forEach(b => b.classList.remove('active'));
                            btn.classList.add('active');
                            activeCategory = btn.getAttribute('data-category') || 'all';
                            applyFilters();
                        });
                    });
                }

                // Voting via fetch (AJAX)
                document.addEventListener('click', async (e) => {
                    const t = e.target.closest('[data-action][data-id]');
                    if (!t) return;

                    const action = t.getAttribute('data-action');
                    const id = t.getAttribute('data-id');
                    const url = action === 'helpful'
                        ? "{{ route('assistant.faq.helpful', ['faq' => '___ID___']) }}".replace('___ID___', id)
                        : "{{ route('assistant.faq.not_helpful', ['faq' => '___ID___']) }}".replace('___ID___', id);

                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        });
                        if (!res.ok) throw new Error('Network error');
                        const data = await res.json();

                        // Update badges in the same accordion-item
                        const accItem = t.closest('.accordion-item');
                        if (accItem) {
                            const badges = accItem.querySelectorAll('.badge');
                            // badges order: category, ratio, stats
                            if (badges[1]) badges[1].textContent = (data.ratio ?? 0) + '%';
                            if (badges[2]) badges[2].textContent = `👍 ${data.is_helpful} | 👎 ${data.is_not_helpful}`;
                        }

                        const thanks = document.getElementById('thanks-' + id);
                        if (thanks) {
                            thanks.classList.remove('d-none');
                            setTimeout(() => thanks.classList.add('d-none'), 2000);
                        }
                    } catch (err) {
                        console.error(err);
                        // translated error alert
                        alert('An error occurred while sending the vote. Please try again later.');
                    }
                });
            })();
        </script>
    @endpush

        @push('style')
            <style>
                /* General block padding */
                .card-body { padding: 1rem !important; }

                /* Inner padding around each accordion item */
                .accordion { padding: .25rem .25rem .5rem; }

                /* Give each item some margin from edges */
                .accordion-item {
                    background: transparent;
                    border: none;
                    margin-bottom: .5rem;
                }

                /* Accordion header button styling */
                .accordion-button {
                    margin: .25rem .5rem 0;
                    border-radius: .75rem !important;
                    padding: 1rem 1.25rem;
                    background-color: #e9f3ff33; /* subtle */
                }
                .accordion-button:not(.collapsed){
                    box-shadow: none;
                    background-color: #e9f3ff66;
                }

                /* Answer box: light border + padding + bottom rounding */
                .accordion-collapse .accordion-body {
                    margin: 0 .5rem .5rem;
                    border: 1px solid #e9ecef;
                    border-top: none;
                    border-radius: 0 0 .75rem .75rem;
                    padding: 1rem 1.25rem;
                    background: #fff;
                }

                /* Keep badges neat */
                .badge.border { border-color: #dfe6ee !important; }
            </style>
        @endpush



@endsection