@extends('welcome')

@section('title', __('faqs.seo_faqs_title', ['company' => config('app.name')]))
@section('meta_description', __('faqs.seo_faqs_description', ['company' => config('app.name')]))

@section('content')

    <!--==============================
                Breadcumb
    ==============================-->
    <div class="breadcumb-wrapper"
         data-bg-src="{{ asset('images/banners/faqs.jpg') }}">

        <div class="container">
            <div class="breadcumb-content">

                <h1 class="breadcumb-title">
                    {{ __('faqs.page_title') }}
                </h1>

                <ul class="breadcumb-menu">

                    <li>
                        <a href="{{ route('welcome') }}"
                           data-track-click="breadcrumb_home"
                           data-track-type="navigation"
                           data-track-meta="breadcrumb faq → home">
                            {{ __('faqs.home') }}
                        </a>
                    </li>

                    <li
                        data-track-click="breadcrumb_faq"
                        data-track-type="navigation"
                        data-track-meta="breadcrumb faq página atual">
                        {{ __('faqs.page_title') }}
                    </li>

                </ul>

            </div>
        </div>
    </div>

    <!--==============================
            Faq Area
        ==============================-->
    <div class="space">
        <div class="container">
            <div class="title-area text-center">
                <span class="sub-title">
                    <img src="assets/img/theme-img/title_icon.svg" alt="Icon">
                    {{ __('faqs.subtitle') }}
                </span>
                <h2 class="sec-title">{{ __('faqs.title') }}</h2>
                @if(isset($lastUpdate))
                    <p class="faq-last-update" style="color: var(--dm-green-soft); font-size: 14px; margin-top: 10px;">
                        {{ $lastUpdate }}
                    </p>
                @endif
            </div>

            @if(!empty($faqs))
                <!-- Category Tabs para navegação rápida -->
                <div class="category-tabs text-center mb-40">
                    <button class="category-btn active" data-category="all">
                        {{ __('faqs.all_categories') }}
                    </button>
                    @foreach($faqs as $index => $faq)
                        <button class="category-btn" data-category="cat-{{ $faq['id'] }}">
                            {{ $faq['name'] }}
                        </button>
                    @endforeach
                </div>

                <!-- FAQs por Categoria -->
                <div class="faq-categories">
                    @foreach($faqs as $faq)
                        @if(!empty($faq['questions']))
                            <div class="faq-category mb-50" data-category-id="cat-{{ $faq['id'] }}">
                                <!-- Título da Categoria -->
                                <div class="category-header text-center mb-30">
                                    <h3 class="category-title">
                                        {{ $faq['name'] }}
                                    </h3>
                                    @if(count($faq['questions']) > 0)
                                        <span class="question-count" style="color: var(--dm-orange); font-size: 14px; display: block; margin-top: 5px;">
                                            {{ count($faq['questions']) }} {{ __('faqs.questions') }}
                                        </span>
                                    @endif
                                </div>

                                <!-- Grid de FAQs (2 colunas) -->
                                <div class="row gy-4">
                                    @php
                                        $questions = $faq['questions'];
                                        $chunkSize = ceil(count($questions) / 2);
                                        $chunks = array_chunk($questions, $chunkSize);
                                    @endphp

                                    @foreach($chunks as $chunkIndex => $chunk)
                                        <div class="col-xl-6">
                                            <div class="accordion-1 accordion" id="faqAccordion-{{ $faq['id'] }}-{{ $chunkIndex }}">
                                                @foreach($chunk as $qIndex => $question)
                                                    @php
                                                        $itemId = "faq-{$faq['id']}-{$question['id']}";
                                                        $collapseId = "collapse-{$faq['id']}-{$question['id']}";
                                                        $isFirst = ($loop->parent->first && $loop->first);
                                                    @endphp

                                                    <div class="accordion-card {{ $isFirst ? 'active' : '' }}">
                                                        <div class="accordion-header" id="heading-{{ $itemId }}">
                                                            <button class="accordion-button {{ $isFirst ? '' : 'collapsed' }}" 
                                                                    type="button" 
                                                                    data-bs-toggle="collapse" 
                                                                    data-bs-target="#{{ $collapseId }}" 
                                                                    aria-expanded="{{ $isFirst ? 'true' : 'false' }}" 
                                                                    aria-controls="{{ $collapseId }}">
                                                                {{ $question['question'] }}
                                                            </button>
                                                        </div>
                                                        <div id="{{ $collapseId }}" 
                                                             class="accordion-collapse collapse {{ $isFirst ? 'show' : '' }}" 
                                                             aria-labelledby="heading-{{ $itemId }}" 
                                                             data-bs-parent="#faqAccordion-{{ $faq['id'] }}-{{ $chunkIndex }}">
                                                            <div class="accordion-body">
                                                                <p class="faq-text">{{ $question['answer'] }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @else
                <!-- Mensagem se não houver FAQs -->
                <div class="text-center py-50">
                    <div class="no-faqs-icon mb-20">
                        <i class="fal fa-question-circle" style="font-size: 60px; color: var(--dm-green-soft); opacity: 0.5;"></i>
                    </div>
                    <p class="faq-text" style="color: var(--dm-green-soft); font-size: 16px;">
                        {{ __('faqs.no_faqs') }}
                    </p>
                </div>
            @endif
        </div>
    </div>

@endsection

@push('styles')
<!-- CSS para manter o estilo e adicionar melhorias -->
<style>
    /* Category Tabs */
    .category-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 50px;
    }

    .category-btn {
        padding: 8px 24px;
        border: 1px solid var(--dm-green-soft);
        background: transparent;
        color: var(--dm-text);
        font-size: 15px;
        font-weight: 500;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: inherit;
    }

    .category-btn:hover {
        border-color: var(--dm-orange);
        color: var(--dm-orange);
    }

    .category-btn.active {
        background: var(--dm-orange);
        border-color: var(--dm-orange);
        color: var(--dm-white);
    }

    /* Category Header */
    .category-header {
        margin-bottom: 30px;
        position: relative;
    }

    .category-title {
        color: var(--dm-green);
        font-size: 24px;
        font-weight: 600;
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
        margin-bottom: 0;
    }

    .category-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--dm-orange);
        border-radius: 2px;
    }

    /* Question Count Badge */
    .question-count {
        display: inline-block;
        background: rgba(210, 133, 39, 0.1);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 10px;
    }

    /* Accordion Cards - Mantendo o estilo original */
    .accordion-card {
        margin-bottom: 15px;
        border: 1px solid rgba(137, 134, 98, 0.2);
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: var(--dm-white);
    }

    .accordion-card.active {
        border-color: var(--dm-orange);
        box-shadow: 0 4px 12px rgba(210, 133, 39, 0.1);
    }

    .accordion-button {
        padding: 18px 20px;
        font-weight: 500;
        color: var(--dm-text);
        background: var(--dm-white);
        border: none;
        text-align: left;
        width: 100%;
        transition: all 0.3s ease;
        position: relative;
        font-size: 16px;
    }

    .accordion-button:hover {
        color: var(--dm-orange);
    }

    .accordion-button:not(.collapsed) {
        color: var(--dm-orange);
        background: rgba(210, 133, 39, 0.05);
    }

    .accordion-button::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Pro';
        font-weight: 300;
        position: absolute;
        right: 20px;
        transition: transform 0.3s ease;
    }

    .accordion-button:not(.collapsed)::after {
        transform: rotate(180deg);
    }

    .accordion-body {
        padding: 0 20px 20px 20px;
        line-height: 1.6;
    }

    .faq-text {
        margin: 0;
        color: var(--dm-text);
        font-size: 15px;
        white-space: pre-line;
    }

    /* Category spacing */
    .faq-category {
        margin-bottom: 60px;
        transition: opacity 0.3s ease;
    }

    .faq-category:last-child {
        margin-bottom: 0;
    }

    .faq-category.hidden {
        display: none;
    }

    /* Last update */
    .faq-last-update {
        color: var(--dm-green-soft);
        font-size: 14px;
        margin-top: 10px;
        font-style: italic;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .category-tabs {
            gap: 8px;
        }
        
        .category-btn {
            padding: 6px 16px;
            font-size: 14px;
        }
        
        .category-title {
            font-size: 20px;
        }
        
        .accordion-button {
            padding: 15px 45px 15px 15px;
            font-size: 15px;
        }
    }
</style>
@endpush

@push('scripts')
<!-- JavaScript para filtro por categoria -->
<script>
// JavaScript para filtro por categoria com scroll ajustado
document.addEventListener('DOMContentLoaded', function() {
    const categoryBtns = document.querySelectorAll('.category-btn');
    const faqCategories = document.querySelectorAll('.faq-category');

    function getHeaderHeight() {
        const header = document.querySelector('.th-header, .sticky-wrapper, header');
        return header ? header.offsetHeight : 80;
    }

    function scrollToCategory(element, extraOffset = 20) {
        if (!element) return;
        
        const headerHeight = getHeaderHeight();
        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
        
        window.scrollTo({
            top: elementPosition - headerHeight - extraOffset,
            behavior: 'smooth'
        });
    }

    if (categoryBtns.length && faqCategories.length) {
        categoryBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active de todos os botões
                categoryBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const categoryId = this.dataset.category;

                if (categoryId === 'all') {
                    // Mostra todas as categorias com animação
                    faqCategories.forEach(cat => {
                        cat.classList.remove('hidden');
                        cat.style.opacity = '0';
                        setTimeout(() => cat.style.opacity = '1', 10);
                    });
                } else {
                    // Filtra por categoria
                    faqCategories.forEach(cat => {
                        if (cat.dataset.categoryId === categoryId) {
                            cat.classList.remove('hidden');
                            cat.style.opacity = '0';
                            setTimeout(() => cat.style.opacity = '1', 10);
                        } else {
                            cat.classList.add('hidden');
                        }
                    });

                    // Scroll suave para a categoria selecionada
                    setTimeout(() => {
                        const targetCategory = document.querySelector(`[data-category-id="${categoryId}"]`);
                        scrollToCategory(targetCategory, -30); // 30px de espaçamento extra
                    }, 100);
                }
            });
        });
    }
});
</script>
@endpush