{{-- resources/views/livewire/trips/trip-details.blade.php --}}
<div>
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold text-gray-800">Tell us about your trip to {{ $destination }}</h2>
        <div class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg text-sm font-medium">
            Destination: {{ $destination }}
        </div>
    </div>
    
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Left Column - Trip Details -->
        <div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Trip Name</label>
                <input 
                    type="text" 
                    wire:model.blur="title"
                    placeholder="e.g., Summer Escape to {{ $destination }}" 
                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                @error('title')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Trip Dates</label>
                <div class="grid grid-cols-2 gap-4">
                    <div class="relative">
                        <input 
                            type="date" 
                            wire:model.blur="start_date"
                            class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                        <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3.5 text-gray-400" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        @error('start_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="relative">
                        <input 
                            type="date" 
                            wire:model.blur="end_date"
                            class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                        <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3.5 text-gray-400" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        @error('end_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                @if(isset($start_date) && isset($end_date))
                    <div class="mt-2 text-sm text-blue-600">
                        {{ \Carbon\Carbon::parse($start_date)->diffInDays(\Carbon\Carbon::parse($end_date)) + 1 }} days, 
                        {{ \Carbon\Carbon::parse($start_date)->diffInDays(\Carbon\Carbon::parse($end_date)) }} nights
                    </div>
                @endif
            </div>
            
            <!-- CRITICAL: Enhanced Travelers Section with Proper Session Persistence -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-gray-700">Travelers</label>
                    <button 
                        wire:click="toggleTravelerBreakdown" 
                        type="button"
                        class="text-sm text-blue-600 hover:text-blue-800 font-medium"
                    >
                        {{ $showTravelerBreakdown ? 'Simple View' : 'Detailed Breakdown' }}
                    </button>
                </div>
                
                @if(!$showTravelerBreakdown)
                    <!-- Simple Total Travelers Input -->
                    <div class="relative">
                        <input 
                            type="number" 
                            wire:model.blur="travelers"
                            class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            min="1"
                            max="25"
                        >
                        <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3.5 text-gray-400" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        @error('travelers')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="mt-2 text-sm text-gray-500">Total number of travelers</div>
                @else
                    <!-- CRITICAL: Detailed Adults/Children Breakdown with Session Sync -->
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                        <div class="grid grid-cols-2 gap-4">
                            <!-- Adults -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                                    </svg>
                                    Adults (18+)
                                </label>
                                <select wire:model.live="adultsCount" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    @for($i = 1; $i <= 15; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'Adult' : 'Adults' }}</option>
                                    @endfor
                                </select>
                                @error('adultsCount')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- Children -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zM8 6a2 2 0 114 0v1H8V6z" clip-rule="evenodd" />
                                    </svg>
                                    Children (0-17)
                                </label>
                                <select wire:model.live="childrenCount" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="0">No Children</option>
                                    @for($i = 1; $i <= 10; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'Child' : 'Children' }}</option>
                                    @endfor
                                </select>
                                @error('childrenCount')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- CRITICAL: Traveler Summary with Real-time Updates -->
                        <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-600 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <span class="text-blue-800 font-medium">
                                        Total: {{ $totalTravelers }} {{ $totalTravelers === 1 ? 'traveler' : 'travelers' }}
                                    </span>
                                </div>
                                <div class="text-sm text-blue-600">
                                    {{ $travelerBreakdown['display_text'] }}
                                </div>
                            </div>
                            
                            <!-- Show session sync confirmation -->
                            <div class="mt-2 text-xs text-green-600">
                                ✓ Traveler composition automatically saved
                            </div>
                        </div>
                    </div>
                @endif
                
                @if(!$showTravelerBreakdown)
                    <div class="mt-2 text-sm text-gray-500">You can invite specific people later</div>
                @endif
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Estimated Budget (per person)</label>
                <div class="relative">
                    <input 
                        type="number" 
                        wire:model.blur="budget"
                        class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        step="0.01"
                        min="0"
                        placeholder="e.g., 1500"
                    >
                    <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3.5 text-gray-400" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="1" x2="12" y2="23"></line>
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                    </svg>
                    @error('budget')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mt-2 text-sm text-gray-500">
                    Approximate amount for planning purposes
                    @if($showTravelerBreakdown && $budget && is_numeric($budget))
                        <br>
                        <span class="text-blue-600 font-medium">
                            Total budget for {{ $totalTravelers }} travelers: 
                            ${{ number_format($budget * $totalTravelers, 2) }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- Right Column - Trip Preferences -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Trip Preferences</h2>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">What type of trip is this?</label>
                <div class="grid grid-cols-2 gap-3">
                    @php
                        $tripTypes = ['Beach Vacation', 'Adventure', 'Cultural Experience', 'Relaxation', 'Shopping & Dining', 'Sightseeing'];
                    @endphp
                    
                    @foreach($tripTypes as $index => $type)
                        <div 
                            wire:click="$set('tripType', '{{ $type }}')" 
                            class="p-3 border rounded-lg text-center cursor-pointer transition-colors {{ $tripType == $type ? 'bg-blue-50 border-blue-300 text-blue-700' : 'border-gray-200 text-gray-700 hover:border-blue-200 hover:bg-blue-50' }}"
                        >
                            {{ $type }}
                        </div>
                    @endforeach
                </div>
                @error('tripType')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Trip Pace</label>
                <div class="flex items-center">
                    <span class="text-sm text-gray-500 w-24">Relaxed</span>
                    <div class="flex-1 mx-4">
                        <input
                            type="range"
                            wire:model.live="tripPace"
                            min="1"
                            max="10"
                            step="1"
                            class="w-full h-2 bg-gray-200 rounded-full appearance-none focus:outline-none focus:ring-0"
                        >
                    </div>
                    <span class="text-sm text-gray-500 w-24 text-right">Action-packed</span>
                </div>
                <div class="mt-2 text-center">
                    <span class="text-sm text-blue-600 font-medium">{{ $tripPace }}/10</span>
                </div>
                @error('tripPace')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Activity Interests (select all that apply)</label>
                <div class="space-y-2">
                    @foreach([
                        'Beach & Water Activities', 
                        'Cultural Sites & Museums',  
                        'Hiking & Nature',
                        'Food & Culinary Experiences',
                        'Nightlife & Entertainment',
                        'Shopping'
                    ] as $index => $activity)
                        <div class="flex items-center">
                            <input 
                                type="checkbox" 
                                id="activity-{{ $index }}" 
                                wire:model.live="activityInterests" 
                                value="{{ $activity }}"
                                class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                            >
                            <label for="activity-{{ $index }}" class="ml-2 text-sm text-gray-700">{{ $activity }}</label>
                        </div>
                    @endforeach
                </div>
                @error('activityInterests')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Accommodation Preference</label>
                <select 
                    wire:model.blur="accommodationType"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                    <option value="">Select an option</option>
                    <option value="Resort">Resort</option>
                    <option value="Hotel">Hotel</option>
                    <option value="Villa">Villa</option>
                    <option value="Hostel">Hostel</option>
                    <option value="Apartment">Apartment</option>
                </select>
                @error('accommodationType')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- CRITICAL: Child-Friendly Features Notice (if children are included) -->
            @if($showTravelerBreakdown && $childrenCount > 0)
                <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <div class="flex items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                        <div>
                            <h4 class="text-sm font-medium text-green-800">Child-Friendly Planning</h4>
                            <p class="text-sm text-green-700 mt-1">
                                We'll help you find accommodations and activities suitable for children. 
                                Many destinations offer family discounts and child-friendly amenities.
                            </p>
                            <div class="mt-2 text-xs text-green-600">
                                {{ $childrenCount }} {{ $childrenCount === 1 ? 'child' : 'children' }} will be considered in all recommendations
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    
    <!-- Navigation Buttons -->
    <div class="flex justify-between mt-8">
        <button wire:click="$dispatch('goToPreviousStep')" 
            class="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            Back to Destination
        </button>
        
        <button wire:click="saveTripDetails" 
            class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
            wire:loading.attr="disabled">
            <div wire:loading.remove>
                Continue to Plan Itinerary
                <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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </div>
            <div wire:loading class="flex items-center">
                <svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" 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>
                Saving...
            </div>
        </button>
    </div>
    
    <!-- Success Messages -->
    @if (session('trip_details_saved'))
        <div class="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
            <div class="flex">
                <svg class="w-5 h-5 text-green-400" 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_details_saved') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if (session('traveler_composition_updated'))
        <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
            <div class="flex">
                <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="ml-3">
                    <p class="text-sm text-blue-800">{{ session('traveler_composition_updated') }}</p>
                </div>
            </div>
        </div>
    @endif
</div>