@extends('layouts.app')
@section('title', __('الاسئلة الشائعة'))
{{-- @section('meta_title', $SEO['meta_title'])
@section('description', $SEO['meta_description'])
@section('keywords', $SEO['meta_keywords'])
@section('og:title', $SEO['og_title'])
@section('og:description', $SEO['og_description'])
@section('og_image', $SEO['image']) --}}

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="{{ asset('css/about.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">
<link rel="stylesheet" href="{{ asset('css/general.css') }}">
@push('styles')
    <style>
        :root {
            --accent-orange: #f39200;
            --glass-bg: rgba(255, 255, 255, 0.07);
            --glass-border: rgba(255, 255, 255, 0.12);
        }

        /* تحسين البحث */
        .faq-hero {
            text-align: center;
        }

        .faq-hero h1 {
            font-size: 2rem;
        }

        .search-wrapper {
            position: relative;
            max-width: 700px;
            margin: 0 auto;
        }

        .search-wrapper i {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-orange);
            font-size: 1.2rem;
        }

        .faq-search-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 50px;
            padding: 8px 60px 8px 25px;
            color: white;
            font-size: 1.1rem;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
        }

        .faq-search-input:focus {
            outline: none;
            border-color: var(--accent-orange);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* تصنيفات الأسئلة */
        .faq-categories {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 10px 22px;
            flex-wrap: wrap;
        }

        .cat-btn {
            background: rgb(0 0 0 / 66%) !important;
            border: 1px solid var(--glass-border);
            padding: 12px 22px;
            border-radius: 12px;
            color: #dad3cc !important;
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cat-btn i {
            color: #d1cdc7 !important;
        }

        .cat-btn.active,
        .cat-btn:hover {
            background: var(--accent-orange);
            color: black;
            border-color: var(--accent-orange);
        }

        .cat-btn.active i,
        .cat-btn:hover i {
            color: black;
        }

        /* ستايل الأسئلة المطور */
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
            gap: 18px;
            align-items: start;
        }

        .page-footer {
            position: relative !important;
            bottom: 0;
            height: fit-content;
        }

        @media (max-width: 768px) {
            .faq-grid {
                grid-template-columns: 1fr;
            }
        }

        .faq-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(15px);
        }

        .faq-card:hover {
            transform: translateY(-5px);
            border-color: rgba(243, 146, 0, 0.4);
        }

        .faq-card .question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1rem;
            color: white;
            margin-bottom: 0;
            transition: 0.3s;
        }

        .faq-card.open .question {
            color: var(--accent-orange);
            margin-bottom: 15px;
        }

        .faq-card .answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
            font-size: 0.85rem;
        }

        .faq-card.open .answer {
            max-height: 300px;
        }

        .toggle-icon {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .faq-card.open .toggle-icon {
            transform: rotate(180deg);
            background: var(--accent-orange);
            color: black;
        }

        /* خلفية مميزة للقسم */
        .contact-cta {
            margin-top: 50px;
            background: linear-gradient(135deg, rgba(243, 146, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
            border-radius: 25px;
            padding: 40px;
            border: 1px border var(--glass-border);
            text-align: center;
        }

        .content-section.active {
            height: 100% !important;
            padding: 70px 0px 0 0px !important;
        }

        .sidebar {
            display: none !important
        }

        @media (max-width: 991.98px) {
            .page-footer {
                display: block !important;
            }
        }
    </style>
    <style>
        .sign-container {
            display: none;
            position: fixed;
            top: 96px;
            left: 25px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 4px solid #e57e3a;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
            z-index: 9999;
            overflow: hidden;
            animation: slideUp 0.3s ease;
            background: #2a2a3e;
        }

        .sign-container.visible {
            display: block;
        }

        .sign-close-btn {
            display: none;
            position: fixed;
            z-index: 10000;
            top: calc(0px + 90px - 18px);
            left: calc(25px + 110px - 18px);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e57e3a;
            border: 3px solid #fff;
            color: white;
            font-size: 18px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, background 0.2s;
            line-height: 1;
            padding: 0;
        }

        .sign-close-btn.visible {
            display: flex;
        }

        .sign-close-btn:hover {
            background: #d06a28;
            transform: scale(1.1);
        }

        .sign-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 400px) {
            .sign-container {
                width: 180px;
                height: 180px;
                bottom: 15px;
                right: 15px;
            }

            .sign-close-btn {
                bottom: calc(15px + 180px - 16px);
                right: calc(15px + 90px - 16px);
                width: 32px;
                height: 32px;
                font-size: 15px;
            }
        }
    </style>
@endpush


@section('content')


    <!-- القائمة الجانبية -->
    <aside class="sidebar">
        <div class="logo-area">
            {{-- <button class="menu-trigger btn-bars btn p-0 border-0 text-white d-none d-lg-block" type="button"
                onclick="app.toggleMenu()">
                <i class="fas fa-bars" style="font-size: 1.5rem;"></i>
            </button> --}}
        </div>

    </aside>
    <main class="content-area bg-img">
        <section class="content-section active">
            <div  >
                <div class="breadcrumb">
                    <a href="index.html">{{ __('faq.home') }}</a>
                    <span>/</span>
                    <span>{{ __('faq.help_center') }}</span>
                </div>

                <div class="faq-hero">
                    {{-- <div class="section-badge mb-3"><i class="fas fa-life-ring"></i> هل لديك استفسار؟</div> --}}
                <div class="section-header">
                    <h1 class="custom-title">{{ __('faq.faq_title') }}</h1>
                </div>

                    <div class="search-wrapper">
                        <i class="fas fa-search"></i>
                        <input type="text" class="faq-search-input" id="faqSearch"
                            placeholder="{{ __('faq.search_placeholder') }}">
                    </div>
                </div>
                <div class="faq-categories">
                    {{-- زر "الكل" ثابت --}}
                    <button class="cat-btn active" onclick="filterFaqInner('all', this)">
                        <i class="fas fa-th-large"></i> {{ __('faq.all') }}
                    </button>
                    {{-- التصنيفات من الـ API --}}
                    @foreach ($categories as $category)
                        <button class="cat-btn" onclick="filterFaqInner('{{ $category['slug'] }}', this)">
                            <i class="{{ $category['icon'] }}"></i>
                            {{ $category['label'] }}
                        </button>
                    @endforeach
                </div>
                <!-- شبكة الكروت -->
                <div class="faq-grid" id="faqGrid">
                    @foreach ($faqs as $faq)
                        <div class="faq-card" data-category="{{ $faq['category'] }}">
                            <div class="question">
                                <span>{{ $faq['question'] }}</span>
                                <div class="toggle-icon">
                                    <i class="fas fa-plus"></i>
                                </div>
                            </div>
                            <div class="answer">
                                {!! nl2br(e($faq['answer'])) !!}
                            </div>
                        </div>
                    @endforeach

                </div>
                <!-- نهاية faq-grid -->

                <div class="contact-cta">
                    <h3 class="text-white">{{ __('faq.need_help') }}</h3>

                    <p class="text-white">{{ __('faq.team_available') }}</p>

                    @php
                        $unifiedNumber = $careCenter['unified_number'] ?? '';
                        $whatsNumber = '';
                        if (!empty($careCenter['whatsapp_number'])) {
                            $whatsNumber = preg_replace('/\D/', '', $careCenter['whatsapp_number']);
                        }
                    @endphp

                    <a href="tel:{{ $unifiedNumber }}"
                        class="btn btn-warning px-4 py-2 fw-bold text-dark text-decoration-none">
                        {{ __('faq.contact_us') }}
                    </a>

                    <a href="https://wa.me/{{ $whatsNumber }}" target="_blank"
                        class="btn btn-outline-light px-4 py-2 text-decoration-none">
                        {{ __('faq.live_chat') }}
                    </a>
                </div>
            </div>
            </div>
            @include('partials.footerPages')
        </section>
    </main>
    <!-- زر إغلاق مترجم لغة الإشارة -->
    <button class="sign-close-btn" id="signCloseBtn" onclick="toggleSign()">✕</button>

    <!-- كارد مترجم لغة الإشارة -->
    <div class="sign-container" id="signAvatar">
        <video autoplay loop muted playsinline preload="auto">
            <source src="{{ asset('images/video.mp4') }}" type="video/mp4">
        </video>
    </div>


    @push('scripts')
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
        <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
        <script src="{{ asset('js/script.js') }}"></script>

        <script>
            // سكريبت لفتح وإغلاق الكروت
            document.querySelectorAll('.faq-card').forEach(card => {
                card.addEventListener('click', () => {
                    const isOpen = card.classList.contains('open');

                    // إغلاق جميع الكروت الأخرى المفتوحة
                    document.querySelectorAll('.faq-card').forEach(c => {
                        c.classList.remove('open');
                        c.querySelector('i').classList.replace('fa-minus', 'fa-plus');
                    });

                    // فتح الكرت الحالي إذا لم يكن مفتوحاً
                    if (!isOpen) {
                        card.classList.add('open');
                        card.querySelector('i').classList.replace('fa-plus', 'fa-minus');
                    }
                });
            });

            // سكريبت الفلترة
            // سكريبت الفلترة (مطابق للي استخدمته في الصفحة الثانية)
            function filterFaqInner(category, btn) {
                // إغلاق جميع الكروت المفتوحة عند الفلترة
                document.querySelectorAll('.faq-card').forEach(card => {
                    card.classList.remove('open');
                    card.querySelector('i').classList.replace('fa-minus', 'fa-plus');
                });

                // تحديث الأزرار
                document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // تصفية الكروت
                document.querySelectorAll('.faq-card').forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            }

            // سكريبت البحث
            document.getElementById('faqSearch').addEventListener('input', function (e) {
                // إغلاق جميع الكروت المفتوحة عند البحث
                document.querySelectorAll('.faq-card').forEach(card => {
                    card.classList.remove('open');
                    card.querySelector('i').classList.replace('fa-minus', 'fa-plus');
                });

                const term = e.target.value.toLowerCase();
                document.querySelectorAll('.faq-card').forEach(card => {
                    const text = card.innerText.toLowerCase();
                    card.style.display = text.includes(term) ? 'block' : 'none';
                });
            });
        </script>


        <script>
            function toggleSign() {
                var avatar = document.getElementById("signAvatar");
                var closeBtn = document.getElementById("signCloseBtn");

                var isVisible = avatar.classList.contains("visible");

                if (isVisible) {
                    // إخفاء الكارد وزر الإغلاق
                    avatar.classList.remove("visible");
                    closeBtn.classList.remove("visible");
                } else {
                    // إظهار الكارد وزر الإغلاق مع إعادة الأنيميشن
                    avatar.classList.add("visible");
                    closeBtn.classList.add("visible");
                    avatar.style.animation = 'none';
                    avatar.offsetHeight; // force reflow
                    avatar.style.animation = 'slideUp 0.3s ease';
                }
            }
        </script>
    @endpush


@endsection