{{-- resources/views/livewire/trips/trip-type-selection.blade.php --}}
<div class="py-8">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-3">How would you like to plan your trip?</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">
            Choose the planning style that best fits your preferences and travel experience.
        </p>
    </div>
    
    <!-- Debug Info (remove after fixing) -->
    @if(config('app.debug'))
        <div class="mb-4 p-3 bg-gray-100 rounded text-xs">
            <strong>Debug:</strong> 
            Selected: {{ $selectedTripType ?? 'none' }} | 
            Session Test: {{ $sessionTest ?? 'not run' }} |
            Session ID: {{ session()->getId() }}
        </div>
        
        <!-- AJAX Test Button -->
        <div class="mb-4 text-center">
            <button onclick="testAjaxSession()" class="px-4 py-2 bg-red-500 text-white rounded mr-2">
                Test AJAX Session
            </button>
            <button onclick="testDirectStorage()" class="px-4 py-2 bg-green-500 text-white rounded">
                Test Direct Storage
            </button>
            <div id="test-result" class="mt-2 text-xs bg-white p-2 rounded border"></div>
        </div>
    @endif
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <!-- Pre-planned Trip Option -->
        <div class="relative">
            <form action="/select-trip-type" method="POST" style="display: contents;">
                @csrf
                <input type="hidden" name="trip_type" value="pre_planned">
                <div onclick="this.closest('form').submit()" 
                     class="block cursor-pointer transition-all duration-300 transform hover:scale-[1.02]
                            @if($selectedTripType === 'pre_planned') 
                                ring-4 ring-blue-500 ring-opacity-50 
                            @endif">
                    <div class="border-2 rounded-xl p-6 h-full
                               @if($selectedTripType === 'pre_planned') 
                                   border-blue-500 bg-blue-50 
                               @else 
                                   border-gray-200 hover:border-blue-300 bg-white hover:bg-gray-50 
                               @endif">
                        
                        <!-- Optimized Image Section -->
                        <div class="mb-6 relative">
                            <div class="h-48 w-full rounded-lg overflow-hidden bg-blue-100">
                                @if(file_exists(public_path('images/image15.jpg')))
                                    <img src="{{ asset('images/image15.jpg') }}" 
                                         alt="Pre-planned packages" 
                                         class="w-full h-full object-cover"
                                         loading="lazy"
                                         onerror="this.style.display='none'">
                                @endif
                                
                                <!-- Fallback content -->
                                <div class="w-full h-full flex items-center justify-center {{ file_exists(public_path('images/image15.jpg')) ? 'absolute inset-0' : '' }}">
                                    <div class="text-center">
                                        <svg class="w-16 h-16 text-blue-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                        <span class="text-blue-600 font-medium">Pre-planned Packages</span>
                                    </div>
                                </div>
                                
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                            </div>
                            
                            <!-- Selected Indicator -->
                            @if($selectedTripType === 'pre_planned')
                                <div class="absolute top-3 right-3 z-10">
                                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white">
                                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Pre-planned Packages</h3>
                            <p class="text-gray-600 mb-4">
                                Choose from expertly curated trip packages with pre-arranged activities, accommodations, and itineraries.
                            </p>
                            
                            <!-- Features -->
                            <div class="space-y-2 text-sm text-left">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Expert-curated experiences</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">All-inclusive pricing</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Hassle-free planning</span>
                                </div>
                            </div>
                            
                            <!-- Best For -->
                            <div class="mt-4 p-3 bg-blue-100 rounded-lg">
                                <p class="text-sm font-medium text-blue-800">
                                    Perfect for: First-time travelers, busy schedules, or stress-free experiences
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Self-planned Trip Option -->
        <div class="relative">
            <form action="/select-trip-type" method="POST" style="display: contents;">
                @csrf
                <input type="hidden" name="trip_type" value="self_planned">
                <div onclick="this.closest('form').submit()" 
                     class="block cursor-pointer transition-all duration-300 transform hover:scale-[1.02]
                            @if($selectedTripType === 'self_planned') 
                                ring-4 ring-green-500 ring-opacity-50 
                            @endif">
                    <div class="border-2 rounded-xl p-6 h-full
                               @if($selectedTripType === 'self_planned') 
                                   border-green-500 bg-green-50 
                               @else 
                                   border-gray-200 hover:border-green-300 bg-white hover:bg-gray-50 
                               @endif">
                        
                        <!-- Optimized Image Section -->
                        <div class="mb-6 relative">
                            <div class="h-48 w-full rounded-lg overflow-hidden bg-green-100">
                                @if(file_exists(public_path('images/image23.jpg')))
                                    <img src="{{ asset('images/image23.jpg') }}" 
                                         alt="Custom planning" 
                                         class="w-full h-full object-cover"
                                         loading="lazy"
                                         onerror="this.style.display='none'">
                                @endif
                                
                                <!-- Fallback content -->
                                <div class="w-full h-full flex items-center justify-center {{ file_exists(public_path('images/image23.jpg')) ? 'absolute inset-0' : '' }}">
                                    <div class="text-center">
                                        <svg class="w-16 h-16 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                        </svg>
                                        <span class="text-green-600 font-medium">Custom Planning</span>
                                    </div>
                                </div>
                                
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                            </div>
                            
                            <!-- Selected Indicator -->
                            @if($selectedTripType === 'self_planned')
                                <div class="absolute top-3 right-3 z-10">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white">
                                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Custom Planning</h3>
                            <p class="text-gray-600 mb-4">
                                Build your own unique adventure from scratch with complete control over every detail of your journey.
                            </p>
                            
                            <!-- Features -->
                            <div class="space-y-2 text-sm text-left">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Complete creative control</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Flexible budget options</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Personalized experiences</span>
                                </div>
                            </div>
                            
                            <!-- Best For -->
                            <div class="mt-4 p-3 bg-blue-100 rounded-lg">
                                <p class="text-sm font-medium text-blue-800">
                                    Perfect for: First-time travelers, busy schedules, or stress-free experiences
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Self-planned Trip Option -->
        <div class="relative">
            <form action="/select-trip-type" method="POST" style="display: contents;">
                @csrf
                <input type="hidden" name="trip_type" value="self_planned">
                <div onclick="this.closest('form').submit()" 
                     class="block cursor-pointer transition-all duration-300 transform hover:scale-[1.02]
                            @if($selectedTripType === 'self_planned') 
                                ring-4 ring-green-500 ring-opacity-50 
                            @endif">
                    <div class="border-2 rounded-xl p-6 h-full
                               @if($selectedTripType === 'self_planned') 
                                   border-green-500 bg-green-50 
                               @else 
                                   border-gray-200 hover:border-green-300 bg-white hover:bg-gray-50 
                               @endif">
                        
                        <!-- Optimized Image Section -->
                        <div class="mb-6 relative">
                            <div class="h-48 w-full rounded-lg overflow-hidden bg-green-100">
                                @if(file_exists(public_path('images/image23.jpg')))
                                    <img src="{{ asset('images/image23.jpg') }}" 
                                         alt="Custom planning" 
                                         class="w-full h-full object-cover"
                                         loading="lazy"
                                         onerror="this.style.display='none'">
                                @endif
                                
                                <!-- Fallback content -->
                                <div class="w-full h-full flex items-center justify-center {{ file_exists(public_path('images/image23.jpg')) ? 'absolute inset-0' : '' }}">
                                    <div class="text-center">
                                        <svg class="w-16 h-16 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                        </svg>
                                        <span class="text-green-600 font-medium">Custom Planning</span>
                                    </div>
                                </div>
                                
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                            </div>
                            
                            <!-- Selected Indicator -->
                            @if($selectedTripType === 'self_planned')
                                <div class="absolute top-3 right-3 z-10">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white">
                                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Custom Planning</h3>
                            <p class="text-gray-600 mb-4">
                                Build your own unique adventure from scratch with complete control over every detail of your journey.
                            </p>
                            
                            <!-- Features -->
                            <div class="space-y-2 text-sm text-left">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Complete creative control</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Flexible budget options</span>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="text-gray-700">Personalized experiences</span>
                                </div>
                            </div>
                            
                            <!-- Best For -->
                            <div class="mt-4 p-3 bg-green-100 rounded-lg">
                                <p class="text-sm font-medium text-green-800">
                                    Perfect for: Experienced travelers, unique preferences, or maximum flexibility
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Selection Status -->
    @if($selectedTripType)
        <div class="text-center mt-6">
            <div class="inline-flex items-center px-4 py-2 bg-green-100 text-green-800 rounded-full">
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                </svg>
                {{ ucfirst(str_replace('_', '-', $selectedTripType)) }} trip selected
            </div>
            
            <button wire:click="clearSelection" class="mt-2 text-sm text-gray-600 hover:text-gray-800 underline transition-colors">
                Change my selection
            </button>
        </div>
    @endif

    <!-- Auto-advancing message -->
    @if($isAutoAdvancing)
        <div class="text-center mt-6">
            <div class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-800 rounded-full">
                <svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-blue-600" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Proceeding to next step...
            </div>
        </div>
    @endif

    <!-- Success Message -->
    @if (session('trip_type_selected'))
        <div class="mt-6 max-w-4xl mx-auto">
            <div class="p-4 bg-green-50 border border-green-200 rounded-md">
                <div class="flex">
                    <svg class="w-5 h-5 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div class="ml-3">
                        <p class="text-sm text-green-800">{{ session('trip_type_selected') }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- JavaScript for testing and fallback functionality -->
    @if(config('app.debug'))
        <script>
            function testAjaxSession() {
                console.log('Testing AJAX session...');
                
                fetch('/test-ajax-session', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ test: 'ajax_session_test' })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('AJAX session test result:', data);
                    document.getElementById('test-result').innerHTML = 
                        '<strong>AJAX Test:</strong> ' + JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    console.error('AJAX test failed:', error);
                    document.getElementById('test-result').innerHTML = 
                        '<strong>AJAX Error:</strong> ' + error.message;
                });
            }

            function testDirectStorage() {
                console.log('Testing direct storage...');
                
                fetch('/force-trip-type', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ trip_type: 'pre_planned' })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Direct storage test result:', data);
                    document.getElementById('test-result').innerHTML = 
                        '<strong>Direct Test:</strong> ' + JSON.stringify(data, null, 2);
                    
                    if (data.success) {
                        // Refresh page to see if step advances
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }
                })
                .catch(error => {
                    console.error('Direct test failed:', error);
                    document.getElementById('test-result').innerHTML = 
                        '<strong>Direct Error:</strong> ' + error.message;
                });
            }

            // Fallback: If Livewire fails, use direct JavaScript
            function selectTripTypeJS(tripType) {
                console.log('JavaScript trip type selection:', tripType);
                
                fetch('/select-trip-type', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: 'trip_type=' + encodeURIComponent(tripType)
                })
                .then(response => {
                    if (response.ok) {
                        console.log('Trip type stored successfully');
                        // The route will redirect, so page will reload automatically
                    } else {
                        console.error('Failed to store trip type');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
        </script>
    @endif
</div>