@extends('layouts.app')
@php
    function hexToRgb($hex)
    {
        $hex = ltrim($hex, '#');
        if (strlen($hex) == 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
        return "$r, $g, $b";
    }
@endphp
@section('title', $category->name)

@section('content')
    <div class="container mx-auto lg:mt-8 md:mt-8">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">
                <!-- Category Header -->
                <div class="lg:rounded-[20px] md:rounded-[20px] p-4 h-[250px] "
                    style="background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgb({{ hexToRgb($defaultColor) }}, 0.8)), url('{{ $category->getBackgroundUrl() }}'); background-size: cover; background-position: center;">
                    <div class="flex flex-col justify-start mt-[5em]">
                        <a href="{{ route('categories.show', $category->slug) }}" target="_blank">
                            <h1 class="text-3xl font-bold">{{ $category->name }}</h1>
                        </a>
                        <p class="text-lg mt-3">{{ $category->description }}</p>
                    </div>
                </div>

                <div class="mb-5">
                    <!-- Subcategories Section (if main category) -->
                    @if ($isMainCategory)
                        <div id="subcategories-section" class="mb-5 mt-5 ml-4 mr-4">
                            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 justify-center">
                                @foreach ($subcategories as $subcategory)
                                    <div class="col-span-1 text-center">
                                        <a href="{{ route('categories.show', $subcategory->slug) }}"
                                            class="block w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 ">
                                            {{ $subcategory->name }}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Offers & Coupon Section -->
                <div class="mt-6 ml-2 mr-2">
                    <!-- Tabs -->
                    <div class="tabs flex space-x-4 mb-4 mt-6 ml-2 mr-2">
                        <button id="showCouponsBtn"
                            class="tab-button active px-4 py-2 text-sm border border-gray-400 rounded-md bg-gray-100 hover:bg-gray-200 active:bg-gray-300 transition m-1">
                            {{ __('messages.coupons') }}
                        </button>
                        <button id="showOffersBtn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md m-1">
                            {{ __('messages.offers') }}
                        </button>
                    </div>

                    <!-- Coupons Section -->
                    <div id="couponsSection" class="section active">
                        <div id="couponsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-8">
                            <!-- Coupons will be loaded here -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="loadMoreCouponsBtn"
                                class="mt-4 px-4 py-2 bgd-color text-white rounded-md focus:outline-none focus:ring-2 ">
                                {{ __('messages.download_more') }}
                            </button>
                            <p class="no-items-message text-gray-500 hidden"></p>
                        </div>
                    </div>

                    <!-- Offers Section -->
                    <div id="offersSection" class="section hidden">
                        <div id="offersContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-8">
                            <!-- Offers will be loaded here -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="loadMoreOffersBtn"
                                class="mt-4 px-4 py-2 bg!...color text-white rounded-md focus:outline-none focus:ring-2 ">
                                {{ __('messages.download_more') }}
                            </button>
                            <p class="no-items-message text-gray-500 hidden"></p>
                        </div>
                    </div>

                    <!-- Category Info Section -->
                    @if ($category->category_info)
                        <div class="mt-8 bg-white shadow-lg rounded-lg p-6">
                            <h3 class="text-xl font-bold mb-4">{{ __('messages.category_info') }}</h3>
                            <div class="prose max-w-none">{!! $category->category_info !!}</div>
                        </div>
                    @endif

                    <!-- FAQs Section -->
                    @if ($category->faqs && is_array($category->faqs) && count($category->faqs) > 0)
                        <div class="mt-8 bg-white shadow-lg rounded-lg p-6">
                            <h3 class="text-xl font-bold mb-4">{{ __('messages.faqs') }}</h3>
                            <div class="space-y-4">
                                @foreach ($category->faqs as $index => $faq)
                                    <div class="border-b border-gray-200">
                                        <button
                                            class="faq-toggle w-full text-left py-3 px-4 flex justify-between items-center hover:bg-gray-50 focus:outline-none"
                                            aria-expanded="false" aria-controls="faq-answer-{{ $index }}"
                                            data-target="faq-answer-{{ $index }}">
                                            <span
                                                class="font-medium text-gray-800 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                                {{ $faq['question'] ?? '' }}
                                            </span>
                                            <svg class="w-5 h-5 transform transition-transform duration-200" fill="none"
                                                stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 9l-7 7-7-7"></path>
                                            </svg>
                                        </button>
                                        <div id="faq-answer-{{ $index }}"
                                            class="faq-content hidden max-h-0 overflow-hidden transition-all duration-300 ease-in-out px-4 pb-0 text-gray-600 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                            <div class="pb-3">{{ $faq['answer'] ?? '' }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Schema.org FAQPage Structured Data -->
                        <script type="application/ld+json">
                                    {
                                        "@context": "https://schema.org",
                                        "@type": "FAQPage",
                                        "mainEntity": [
                                            @foreach ($category->faqs as $faq)
                                                {
                                                    "@type": "Question",
                                                    "name": "{{ addslashes($faq['question'] ?? '') }}",
                                                    "acceptedAnswer": {
                                                        "@type": "Answer",
                                                        "text": "{{ addslashes($faq['answer'] ?? '') }}"
                                                    }
                                                }{{ $loop->last ? '' : ',' }}
                                            @endforeach
                                        ]
                                    }
                                </script>

                        <!-- JavaScript for Accordion -->
                        <script>
                            document.addEventListener('DOMContentLoaded', () => {
                                const toggles = document.querySelectorAll('.faq-toggle');

                                toggles.forEach(toggle => {
                                    toggle.addEventListener('click', () => {
                                        const targetId = toggle.getAttribute('data-target');
                                        const content = document.getElementById(targetId);
                                        const svg = toggle.querySelector('svg');
                                        const isExpanded = toggle.getAttribute('aria-expanded') === 'true';

                                        // Toggle visibility
                                        if (isExpanded) {
                                            content.classList.add('hidden');
                                            content.classList.remove('max-h-96');
                                            content.classList.add('max-h-0');
                                            toggle.setAttribute('aria-expanded', 'false');
                                            svg.classList.remove('rotate-180');
                                        } else {
                                            content.classList.remove('hidden');
                                            content.classList.remove('max-h-0');
                                            content.classList.add('max-h-96');
                                            toggle.setAttribute('aria-expanded', 'true');
                                            svg.classList.add('rotate-180');
                                        }
                                    });
                                });
                            });
                        </script>
                    @endif
                </div>
            </div>

            <!-- Sidebar (3 Columns) -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>

    @vite(['resources/js/components/category.js'])
    <script>
        window.categoryData = {
            slug: "{{ $category->getTranslation('slug', app()->getLocale()) }}",
            couponsUrl: "{{ LaravelLocalization::localizeURL(LaravelLocalization::transRoute('routes.categories') . '/' . $category->getTranslation('slug', app()->getLocale()) . '/' . LaravelLocalization::transRoute('routes.coupons')) }}",
            offersUrl: "{{ LaravelLocalization::localizeURL(LaravelLocalization::transRoute('routes.categories') . '/' . $category->getTranslation('slug', app()->getLocale()) . '/' . LaravelLocalization::transRoute('routes.offers')) }}"
        };
    </script>
@endsection