{{-- resources/views/livewire/trips/trip-type-selection.blade.php --}}
<div class="py-8">
    <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">How would you like to plan your trip?</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
        <!-- Pre-planned Trip Option -->
        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="relative h-60 bg-blue-100">
                <img src="{{ asset('images/image17.jpg') }}" alt="Pre-planned Trip" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                    <div class="p-6 text-white">
                        <h3 class="text-xl font-bold">Pre-planned Trip</h3>
                        <p class="mt-2">Expert-curated experiences with the perfect balance of activities and relaxation.</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <h4 class="font-medium text-gray-900 mb-4">Perfect for travelers who want:</h4>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>A hassle-free trip with everything organized for you</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>Carefully selected activities by travel experts</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>A balanced mix of must-see attractions and hidden gems</span>
                    </li>
                </ul>
                <button 
                    wire:click="selectTripType('pre_planned')" 
                    class="mt-6 w-full inline-flex justify-center items-center px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md">
                    Choose Pre-planned Trip
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- Self-planned Trip Option -->
        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="relative h-60 bg-green-100">
                <img src="{{ asset('images/image18.jpg') }}" alt="Self-planned Trip" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                    <div class="p-6 text-white">
                        <h3 class="text-xl font-bold">Self-planned Trip</h3>
                        <p class="mt-2">Design your own adventure with helpful suggestions and complete flexibility.</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <h4 class="font-medium text-gray-900 mb-4">Perfect for travelers who want:</h4>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>Complete freedom to customize every aspect of their trip</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>Smart recommendations based on preferences and budget</span>
                    </li>
                    <li class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span>The ability to create a unique itinerary tailored to their interests</span>
                    </li>
                </ul>
                <button 
                    wire:click="selectTripType('self_planned')" 
                    class="mt-6 w-full inline-flex justify-center items-center px-4 py-3 border border-blue-600 text-blue-600 hover:bg-blue-50 text-sm font-medium rounded-md">
                    Choose Self-planned Trip
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>


@include('components.trip-storage-helper')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Direct navigation script loaded');
        
        // Initialize for this step (1 = trip type selection)
        if (typeof initTripStep === 'function') {
            initTripStep(1);
        }
        
        // Function to completely override the buttons
        function forceButtonBehavior() {
            // Get the pre-planned and self-planned buttons directly by their wire:click attributes
            const prePlannedBtn = document.querySelector('[wire\\:click="selectTripType(\'pre_planned\')"]');
            const selfPlannedBtn = document.querySelector('[wire\\:click="selectTripType(\'self_planned\')"]');
            
            if (prePlannedBtn) {
                console.log('Found pre-planned button, adding direct handler');
                
                // Create a completely new button with the same properties
                const newPreBtn = document.createElement('button');
                newPreBtn.innerHTML = prePlannedBtn.innerHTML;
                newPreBtn.className = prePlannedBtn.className;
                newPreBtn.style.cssText = prePlannedBtn.style.cssText;
                
                // Set the onclick directly to force navigation
                newPreBtn.onclick = function(e) {
                    e.preventDefault();
                    console.log('Pre-planned button clicked with direct handler');
                    
                    // Save to localStorage
                    if (window.TripStorage) {
                        window.TripStorage.updateData({ tripType: 'pre_planned' });
                    }
                    
                    // Wait a moment then force navigation
                    setTimeout(function() {
                        // Try all possible next URLs
                        try {
                            const baseUrl = window.location.origin;
                            const possibleUrls = [
                                `${baseUrl}/plan/destination`,
                                `${baseUrl}/PangoQ/public/plan/destination`,
                                `${baseUrl}/plan/destination-selection`,
                                `${baseUrl}/PangoQ/public/plan/destination-selection`,
                                `${baseUrl}/destination`,
                                `${baseUrl}/PangoQ/public/destination`
                            ];
                            
                            // Try each URL by opening in a new window/tab
                            // This bypasses any potential JS errors
                            window.location.href = possibleUrls[0];
                            console.log('Forced navigation to', possibleUrls[0]);
                        } catch(e) {
                            console.error('Navigation failed:', e);
                            // Last resort fallback
                            window.location.reload();
                        }
                    }, 100);
                    
                    return false;
                };
                
                // Replace the original button
                prePlannedBtn.parentNode.replaceChild(newPreBtn, prePlannedBtn);
            }
            
            if (selfPlannedBtn) {
                console.log('Found self-planned button, adding direct handler');
                
                // Create a completely new button with the same properties
                const newSelfBtn = document.createElement('button');
                newSelfBtn.innerHTML = selfPlannedBtn.innerHTML;
                newSelfBtn.className = selfPlannedBtn.className;
                newSelfBtn.style.cssText = selfPlannedBtn.style.cssText;
                
                // Set the onclick directly to force navigation
                newSelfBtn.onclick = function(e) {
                    e.preventDefault();
                    console.log('Self-planned button clicked with direct handler');
                    
                    // Save to localStorage
                    if (window.TripStorage) {
                        window.TripStorage.updateData({ tripType: 'self_planned' });
                    }
                    
                    // Wait a moment then force navigation
                    setTimeout(function() {
                        // Try all possible next URLs
                        try {
                            const baseUrl = window.location.origin;
                            const possibleUrls = [
                                `${baseUrl}/plan/destination`,
                                `${baseUrl}/PangoQ/public/plan/destination`,
                                `${baseUrl}/plan/destination-selection`,
                                `${baseUrl}/PangoQ/public/plan/destination-selection`,
                                `${baseUrl}/destination`,
                                `${baseUrl}/PangoQ/public/destination`
                            ];
                            
                            // Navigate to the first URL
                            window.location.href = possibleUrls[0];
                            console.log('Forced navigation to', possibleUrls[0]);
                        } catch(e) {
                            console.error('Navigation failed:', e);
                            // Last resort fallback
                            window.location.reload();
                        }
                    }, 100);
                    
                    return false;
                };
                
                // Replace the original button
                selfPlannedBtn.parentNode.replaceChild(newSelfBtn, selfPlannedBtn);
            }
        }
        
        // Run our button behavior override
        forceButtonBehavior();
        
        // Also add a global click handler as a last resort
        document.addEventListener('click', function(e) {
            const clickedText = e.target.textContent?.trim().toLowerCase() || '';
            
            if (clickedText.includes('pre-planned') || e.target.closest('button')?.textContent?.toLowerCase().includes('pre-planned')) {
                console.log('Global handler caught pre-planned click');
                
                // Save to localStorage
                if (window.TripStorage) {
                    window.TripStorage.updateData({ tripType: 'pre_planned' });
                }
                
                // Try to navigate
                try {
                    const baseUrl = window.location.origin;
                    window.location.href = `${baseUrl}/plan/destination`;
                } catch(e) {
                    console.error('Navigation failed:', e);
                }
            }
            
            if (clickedText.includes('self-planned') || e.target.closest('button')?.textContent?.toLowerCase().includes('self-planned')) {
                console.log('Global handler caught self-planned click');
                
                // Save to localStorage
                if (window.TripStorage) {
                    window.TripStorage.updateData({ tripType: 'self_planned' });
                }
                
                // Try to navigate
                try {
                    const baseUrl = window.location.origin;
                    window.location.href = `${baseUrl}/plan/destination`;
                } catch(e) {
                    console.error('Navigation failed:', e);
                }
            }
        });
    });
</script>