@extends('layouts.app')
@section('title', 'Inicio')
@section('body')
    {{-- @dd($tagGenerales) --}}
    <div class="bg-secondary-blue-200 relative">
        <div class="max-w-7xl mx-auto text-center pt-5 pb-10">
            <section id="search">
                <h2 class="text-white font-semibold">Centro de Ayuda</h2>
                <p class="text-white pb-3">Encuentra respuestas rápidas a tus preguntas y obtén soporte personalizado.</p>
                <div class="relative max-w-[546px] mx-auto">
                    <form action="/centro-ayuda-articulo-busqueda" method="GET" class="relative">
                        <input type="search" class="form-control w-full px-4 py-2 rounded-lg" id="search" name="query"
                            placeholder="Escribe una palabra clave o frase sobre el tema que buscas.">
                        <button type="submit"
                            class="absolute right-5 top-1/2 -translate-y-1/2 p-2 bg-primary-200 hover:bg-primary-700 rounded-2xl transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="11" cy="11" r="8" />
                                <line x1="21" y1="21" x2="16.65" y2="16.65" />
                            </svg>
                        </button>
                    </form>
                </div>
            </section>
        </div>
    </div>
    <section class="max-w-7xl mx-auto pt-5 pb-10">
        <!-- Tabs Navigation -->
        <div class="flex justify-center border-b border-neutral-200 mb-6">
            <div id="ticketsTab"
                class="tab cursor-pointer px-6 py-3 text-center transition-all duration-200 border-b-2 border-primary-600 text-primary-600 font-medium">
                <span>Comprar entradas</span>
            </div>
            <div id="organizerTab"
                class="tab cursor-pointer px-6 py-3 text-center transition-all duration-200 text-neutral-500 hover:text-neutral-700">
                <span>Soy organizador</span>
            </div>
        </div>

        <!-- Tab Contents -->
        <div class="mt-6">
            <!-- Tickets Tab -->
            <div id="ticketsContent" class="space-y-8">
                <div class="flex items-center gap-x-4 mx-9">
                    <p class="md:text-2xl font-semibold ">¿En qué podemos ayudarte?</p>
                    <a href="{{ route('centro-ayuda-types', ['type' => 'general']) }}"
                        class="text-primary-200 font-semibold cursor-pointer">Ver más</a>
                </div>
                {{-- grid  grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 --}}
                <div class="grid grid-cols-1 md:grid-cols-2  gap-7 lg:grid-cols-4">
                    {{-- @dd($tagGenerales) --}}
                    @foreach ($tagGenerales as $tagGeneral)
                        <div class="flex justify-center">
                            <a href="{{ route('centro-ayuda-tags', ['type' => $tagGeneral->slug]) }}">
                                <div
                                    class="bg-white w-56 h-36 p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center border-neutral-100 flex flex-col items-center">
                                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/comprar entradas.svg' }}" class="flex mx-auto"
                                        alt="">
                                    <h4 class="font-medium text-base my-1">{{ $tagGeneral->name }}</h4>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">Articulos más populares</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-3">
                        @foreach ($getGenerales->take(6) as $getGeneral)
                            {{-- @dd($getGeneral) --}}
                            <a href="{{ route('centro-ayuda-slug', ['slug' => $getGeneral->slug]) }}"
                                class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-neutral-100 cursor-pointer">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/article.svg' }}" width="15px" alt="">
                                <p class="text-sm text-neutral-500">{{ $getGeneral->title }}</p>
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_forward.svg' }}" width="15px" alt="">
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">¿Necesitas contactarnos?</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-5">
                        <div class="flex flex-col gap-x-4 py-3 px-4 rounded-[24px] border border-neutral-100 bg-success-50">
                            <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/ws-icon.svg' }}" width="48px" alt="">
                            <h5>Chatea con un asesor</h5>
                            <p class=" my-3 text-sm text-neutral-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <a href="{{ env('WHATSAPP_NUMBER') }}" target="_blank">
                                <button class="btn btn-secondary bg-white w-36">Contáctanos</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Organizer Tab -->
            <div id="organizerContent" class="space-y-8" style="display: none;">
                <div class="flex items-center gap-x-4 mx-9">
                    <p class="md:text-2xl font-semibold">¿En qué podemos ayudarte?</p>
                    <a href="{{ route('centro-ayuda-types', ['type' => 'organizador']) }}"
                        class="text-primary-200 font-semibold cursor-pointer">Ver más</a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-7 lg:grid-cols-4">
                    @foreach ($tagOrganizadores as $tagOrganizador)
                        <div class="flex justify-center">
                            <a href="{{ route('centro-ayuda-tags', ['type' => $tagOrganizador->slug]) }}"
                                class="bg-white w-56 h-36 p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center border-neutral-100 flex flex-col items-center">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/comprar entradas.svg' }}" class="flex mx-auto"
                                    alt="">
                                <h4 class="font-medium text-base my-1">{{ $tagOrganizador->name }}</h4>
                            </a>
                        </div>
                    @endforeach
                </div>

                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">Articulos más populares</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-3">

                        @foreach ($getOrganizadores->take(4) as $getOrganizador)
                            <a href="{{ route('centro-ayuda-slug', ['slug' => $getOrganizador->slug]) }}"
                                class="flex justify-between py-3 px-4 rounded-[24px] border border-neutral-100">
                                <div class="flex gap-x-4">
                                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/article.svg' }}" width="15px" alt="">
                                    <p class="text-sm text-neutral-500">{{ $getOrganizador->title }}</p>
                                </div>
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_forward.svg' }}" width="15px" alt="">
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">¿Necesitas contactarnos?</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-5">
                        <div class="flex flex-col gap-x-4 py-3 px-4 rounded-[24px] border border-neutral-100 bg-success-50">
                            <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/ws-icon.svg' }}" width="48px" alt="">
                            <h5>Chatea con un asesor</h5>
                            <p class=" my-3 text-sm text-neutral-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <a href="{{ env('WHATSAPP_NUMBER') }}" target="_blank">
                                <button class="btn btn-secondary bg-white w-36">Contáctanos</button>
                            </a>
                        </div>
                    </div>
                </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ticketsTab = document.getElementById('ticketsTab');
            const organizerTab = document.getElementById('organizerTab');
            const ticketsContent = document.getElementById('ticketsContent');
            const organizerContent = document.getElementById('organizerContent');

            function switchTab(activeTab, activeContent, inactiveTab, inactiveContent) {
                // Actualizar estilos de las pestañas
                activeTab.classList.add('border-b-2', 'border-primary-600', 'text-primary-600', 'font-medium');
                activeTab.classList.remove('text-neutral-500');

                inactiveTab.classList.remove('border-b-2', 'border-primary-600', 'text-primary-600', 'font-medium');
                inactiveTab.classList.add('text-neutral-500');

                // Mostrar/ocultar contenido con una animación suave
                activeContent.style.opacity = '0';
                activeContent.style.display = 'block';
                inactiveContent.style.display = 'none';

                // Animar la aparición del contenido activo
                setTimeout(() => {
                    activeContent.style.transition = 'opacity 300ms ease-out';
                    activeContent.style.opacity = '1';
                }, 50);
            }

            ticketsTab.addEventListener('click', function() {
                switchTab(ticketsTab, ticketsContent, organizerTab, organizerContent);
            });

            organizerTab.addEventListener('click', function() {
                switchTab(organizerTab, organizerContent, ticketsTab, ticketsContent);
            });
        });
    </script>
@endsection