@extends('layouts.app')

@section('content')
    <div class="container mx-auto sm:mt-0 lg:mt-8">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">
                <div class="relative bg-white shadow-lg rounded-lg overflow-hidden sm:p-0">
                    <!-- SVG Background-->
                    <svg class="w-full h-64" viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg"
                        preserveAspectRatio="none">
                        <defs>
                            <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" style="stop-color:{{$store->background_color}}; stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#FFFFFF; stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#grad)" />
                        <g class="opacity-30">
                            <polygon points="0,50 600,-20 600,80 0,150" fill="white" />
                            <polygon points="0,100 600,30 600,130 0,200" fill="white" />
                            <polygon points="0,150 600,80 600,180 0,250" fill="white" />
                        </g>
                    </svg>

                    <!-- Store details-->
                    <div class="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-gray-900/80 to-transparent">
                        <div class="flex flex-col items-center text-center space-y-4">
                            <!-- Logo Container -->
                            <div class="relative w-32 h-32 flex-shrink-0 ">
                                <div
                                    class="absolute inset-0 rounded-full bg-white shadow-lg transform transition-all duration-300 hover:scale-105">
                                    <img src="{{ $store->getStoreLogoUrl() }}" alt="{{ $store->name }}"
                                        class="w-full h-full object-contain rounded-full p-2">
                                </div>
                            </div>

                            <!-- Store Info -->
                            <div class="max-w-2xl">
                                <h2 class="text-2xl text-white font-bold  drop-shadow-md 
                                                                          transform transition-all duration-300 ">
                                    {{ $store->name }}
                                </h2>
                                <p class=" text-sm mt-2 px-4 text-white leading-relaxed line-clamp-2">
                                    {{ $store->description }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 ml-2 mr-2">
                    <!-- Filters -->
                    <div class="flex space-x-3">
                        <button id="showCouponsBtn"
                            class="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="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.offers') }}
                        </button>
                    </div>

                    <!-- Coupon section-->
                    <div id="couponsSection" class="block">
                        <div id="couponsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-8"
                            data-aos="fade-up" data-aos-duration="1000">
                            <!-- Coupons here -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="loadMoreCouponsBtn" class="px-4 py-2 bgd-color text-white rounded-md transition">
                                {{ __('messages.download_more') }}
                            </button>
                        </div>
                    </div>

                    <!-- Offers section -->
                    <div id="offersSection" class="hidden">
                        <div id="offersContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-8"
                            data-aos="fade-up" data-aos-duration="1000">
                            <!-- Offers here -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="loadMoreOffersBtn" class="px-4 py-2 bgd-color text-white rounded-md transition">
                                {{ __('messages.download_more') }}
                            </button>
                        </div>
                    </div>

                    <!-- Store Info Section -->
                    <div class="mb-8 mt-6 bg-white shadow-lg rounded-xl p-6">
                        <h2
                            class="text-xl font-bold text-gray-900 mb-4 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                            {{ __('messages.store_info') }}
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-1 gap-4 text-gray-700">
                            <div class="{{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                <p>{!! $store->store_info ?? 'N/A' !!}</p>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ Section -->
                    @if ($store->faqs && is_array($store->faqs) && count($store->faqs) > 0)
                        <div class="bg-white shadow-lg rounded-xl p-6">
                            <h2
                                class="text-xl font-bold text-gray-900 mb-6 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                {{ __('messages.faqs') }}
                            </h2>
                            <div class="space-y-4">
                                @foreach ($store->faqs as $index => $faq)
                                    <div class="border-b border-gray-200">
                                        <button
                                            class="faq-toggle w-full text-left py-4 px-4 flex justify-between items-center hover:bg-gray-50 focus:outline-none transition-colors duration-200"
                                            aria-expanded="false" aria-controls="faq-answer-{{ $index }}"
                                            data-target="faq-answer-{{ $index }}">
                                            <span
                                                class="font-semibold text-gray-800 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                                {{ $faq['question'] ?? '' }}
                                            </span>
                                            <svg class="w-5 h-5 text-gray-500 transform transition-transform duration-300"
                                                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="py-4">{{ $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 ($store->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';

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

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

    @vite('resources/js/components/store.js')

    <script>
        window.storeData = {
            storeSlug: "{{ $store->getTranslation('slug', app()->getLocale()) }}",
            couponsUrl: "{{ LaravelLocalization::localizeURL(LaravelLocalization::transRoute('routes.stores') . '/' . $store->getTranslation('slug', app()->getLocale()) . '/' . LaravelLocalization::transRoute('routes.coupons')) }}",
            offersUrl: "{{ LaravelLocalization::localizeURL(LaravelLocalization::transRoute('routes.stores') . '/' . $store->getTranslation('slug', app()->getLocale()) . '/' . LaravelLocalization::transRoute('routes.offers')) }}"
        };
    </script>
@endsection