@extends('layouts.app')

@section('content')
<!-- Page Header -->
<section class="page-header py-5 bg-gradient-primary">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 fw-bold text-white mb-3">{{ __('pdftools.tools_page.title') }}</h1>
                <p class="lead text-white-50 mb-0">{{ __('pdftools.tools_page.subtitle') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Tools Filter -->
<section class="tools-filter py-4 bg-light border-bottom">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    <button class="btn btn-primary active" data-filter="all">{{ __('pdftools.tools_page.all_tools') }}</button>
                    @foreach($categories as $key => $name)
                    <button class="btn btn-outline-primary" data-filter="{{ $key }}">{{ $name }}</button>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Tools Grid -->
<section class="tools-grid py-5">
    <div class="container">
        <div class="row g-4" id="toolsGrid">
            @foreach($tools as $tool)
            <div class="col-lg-3 col-md-4 col-sm-6 tool-item" data-category="{{ $tool['category'] }}">
                <a href="{{ route($tool['route']) }}" class="tool-card text-decoration-none">
                    <div class="card h-100 border-0 shadow-sm hover-shadow-lg transition-all">
                        <div class="card-body text-center p-4">
                            <div class="tool-icon mb-3">
                                <i class="fas {{ $tool['icon'] }} fa-3x text-{{ $tool['color'] }}"></i>
                            </div>
                            <h5 class="card-title text-dark">{{ $tool['name'] }}</h5>
                            <p class="card-text text-muted small">{{ $tool['description'] }}</p>
                            @if($tool['badge'])
                            <span class="badge bg-{{ $tool['color'] }}">{{ $tool['badge'] }}</span>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <h2 class="text-center fw-bold mb-5">{{ __('pdftools.tools_page.faq_title') }}</h2>
                
                <div class="accordion" id="toolsFaq">
                    <div class="accordion-item border-0 shadow-sm mb-3">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                {{ __('pdftools.tools_page.faq.1.question') }}
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#toolsFaq">
                            <div class="accordion-body">
                                {{ __('pdftools.tools_page.faq.1.answer') }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                {{ __('pdftools.tools_page.faq.2.question') }}
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#toolsFaq">
                            <div class="accordion-body">
                                {{ __('pdftools.tools_page.faq.2.answer') }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                {{ __('pdftools.tools_page.faq.3.question') }}
                            </button>
                        </h2>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#toolsFaq">
                            <div class="accordion-body">
                                {{ __('pdftools.tools_page.faq.3.answer') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('[data-filter]');
    const toolItems = document.querySelectorAll('.tool-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.dataset.filter;
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active', 'btn-primary'));
            filterButtons.forEach(btn => btn.classList.add('btn-outline-primary'));
            this.classList.remove('btn-outline-primary');
            this.classList.add('active', 'btn-primary');
            
            // Filter items
            toolItems.forEach(item => {
                if (filter === 'all' || item.dataset.category === filter) {
                    item.style.display = 'block';
                    item.classList.add('fade-in');
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
});
</script>
@endpush

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tool-card {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
}

.hover-shadow-lg:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.transition-all {
    transition: all 0.3s ease;
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #667eea;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(102, 126, 234, 0.25);
}
</style>
@endpush