@extends('layouts.main')

@section('meta')
    <title>HTMX Test - JavaScript Re-initialization</title>
@endsection

@section('content')
<section class="w-full bg-white pt-[130px] sm:pt-[196px] pb-[70px] sm:pb-[120px] relative overflow-hidden">
    <div class="w-full relative theme-container mx-auto">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-main-black mb-4">HTMX JavaScript Re-initialization Test</h1>
            <p class="text-lg text-gray-600">This page demonstrates that JavaScript components are properly re-initialized after HTMX swaps.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-2xl font-semibold mb-4">Navigation Links</h2>
                <div class="space-y-3">
                    <a href="{{ route('htmx.content') }}" 
                       hx-get="{{ route('htmx.content') }}" 
                       hx-target="#pageContent" 
                       hx-swap="innerHTML"
                       class="block bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-center transition-colors">
                        Load Dynamic Content (HTMX)
                    </a>
                    <a href="{{ route('home') }}" 
                       hx-get="{{ route('home') }}" 
                       hx-target="#pageContent" 
                       hx-swap="innerHTML"
                       class="block bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-center transition-colors">
                        Load Home Page (HTMX)
                    </a>
                    <a href="{{ route('services') }}" 
                       hx-get="{{ route('services') }}" 
                       hx-target="#pageContent" 
                       hx-swap="innerHTML"
                       class="block bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-md text-center transition-colors">
                        Load Services Page (HTMX)
                    </a>
                </div>
            </div>

            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-2xl font-semibold mb-4">Test Components</h2>
                <p class="text-sm text-gray-600 mb-4">These components should work after HTMX page swaps:</p>
                
                <!-- Mobile Nav Toggle Test -->
                <div class="mb-4">
                    <button class="toggle_nav_menu bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md">
                        <span>☰</span>
                        <span class="hidden">✕</span>
                        Test Mobile Nav Toggle
                    </button>
                </div>

                <!-- Tab Test -->
                <div class="mb-4">
                    <div class="flex space-x-2 mb-2">
                        <button class="tab_item active-tab bg-blue-500 text-white px-3 py-1 rounded" name="tab1">Tab 1</button>
                        <button class="tab_item bg-gray-300 px-3 py-1 rounded" name="tab2">Tab 2</button>
                    </div>
                    <div class="main-tab-section overflow-hidden">
                        <div id="tab1" class="bg-blue-100 p-4 rounded">Content for Tab 1</div>
                        <div id="tab2" class="bg-green-100 p-4 rounded">Content for Tab 2</div>
                    </div>
                </div>

                <!-- Video Play Button Test -->
                <div class="mb-4">
                    <button class="video-play-btn bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
                        ▶ Test Video Player
                    </button>
                </div>
            </div>
        </div>

        <!-- Test FAQ Section -->
        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <h2 class="text-2xl font-semibold mb-6">FAQ Test Section</h2>
            <div class="space-y-4">
                <div class="h2-faq-toggler border border-gray-200 rounded-lg overflow-hidden cursor-pointer" name="faq1">
                    <div class="p-4 bg-gray-50">
                        <h3 class="font-semibold">Test FAQ Question 1</h3>
                    </div>
                    <div class="p-4 bg-white">
                        <p>This is the answer to the first test question. The FAQ should expand and collapse properly after HTMX page swaps.</p>
                    </div>
                </div>
                
                <div class="h2-faq-toggler border border-gray-200 rounded-lg overflow-hidden cursor-pointer" name="faq2">
                    <div class="p-4 bg-gray-50">
                        <h3 class="font-semibold">Test FAQ Question 2</h3>
                    </div>
                    <div class="p-4 bg-white">
                        <p>This is the answer to the second test question. All FAQ functionality should work seamlessly.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Test Elements with Data Attributes -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-2xl font-semibold mb-6">Counter Animation Test</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <div data-scroll-qs="scroll" data-count-qs="100" data-type-qs="+" data-speed-qs="2000" class="text-3xl font-bold text-blue-600">0+</div>
                    <p class="text-sm text-gray-600">Projects Completed</p>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <div data-scroll-qs="scroll" data-count-qs="50" data-type-qs="%" data-speed-qs="1500" class="text-3xl font-bold text-green-600">0%</div>
                    <p class="text-sm text-gray-600">Success Rate</p>
                </div>
                <div class="text-center p-4 bg-purple-50 rounded-lg">
                    <div data-scroll-qs="scroll" data-count-qs="25" data-type-qs="" data-speed-qs="1000" class="text-3xl font-bold text-purple-600">0</div>
                    <p class="text-sm text-gray-600">Team Members</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden elements for testing -->
    <div id="mobile-nav-div" class="fixed top-0 left-0 w-full h-full bg-white z-50 transform -translate-x-full transition-transform">
        <div class="p-8">
            <h3 class="text-2xl font-bold mb-4">Mobile Navigation</h3>
            <p>This mobile navigation should toggle properly with HTMX page swaps.</p>
        </div>
    </div>
    <div id="mobile-nav-div-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 opacity-0 pointer-events-none transition-opacity"></div>
    
    <div id="video-player" class="fixed inset-0 bg-black bg-opacity-90 z-50 opacity-0 pointer-events-none transition-opacity flex items-center justify-center">
        <div class="text-white text-center">
            <h3 class="text-2xl mb-4">Video Player Overlay</h3>
            <p>This overlay should toggle properly with HTMX page swaps.</p>
            <button onclick="document.getElementById('video-player').classList.remove('active-video-player')" class="mt-4 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
                Close
            </button>
        </div>
    </div>
</section>
@endsection

@section('styles')
<style>
    .active_mobile_nav {
        transform: translateX(0) !important;
    }
    .active-video-player {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .active-tab {
        background-color: #3b82f6 !important;
        color: white !important;
    }
</style>
@endsection