@props(['cities'])

<div class="max-w-[1280px] mx-auto flex justify-center px-4 pb-3 pt-2">
	<div class="bg-white rounded-full flex items-center px-4 py-2 shadow-lg w-[646px] relative z-50">
		<img src="{{ asset('storage/icons/search.svg') }}" class="hidden md:block" alt="">
		<input type="text" id="searchInput" placeholder="Buscar por evento, artista o lugar" class="flex-grow basis-[60%] px-2 md:px-4 py-1 md:py-2 text-gray-500 focus:outline-none">
		<div class="border-l border-gray-300 h-6 mx-4 hidden md:block"></div>
		<img src="{{ asset('storage/icons/location_on.svg') }}" class="hidden md:block pe-3" alt="">
		<select id="cityFilter" onchange="window.location.href='/eventos/' + this.value" class="basis-[40%] px-4 md:px-6 py-2 md:py-3 text-gray-500 focus:outline-none hidden md:block">
			<option value="">Todas las ciudades</option>
			@foreach($cities as $city)
                <option
                    value="{{ $city['slug'] }}" {{ request()->segment(2) == $city['slug'] ? 'selected' : '' }}>{{ $city['name'] }}
                </option>
            @endforeach
		</select>
		<button onclick="searchEvents()" class="bg-gradient-to-r from-purple-200 to-purple-900 text-white rounded-[16px] p-3 ml-4">
			<img src="{{ asset('storage/icons/search-white.svg') }}" alt=""/>
		</button>

		<div id="searchResults" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-lg shadow-lg hidden max-h-[600px] overflow-y-auto z-50">
			<div class="p-4">
				<div id="eventsList" class="space-y-6"></div>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
	        let timeout;
	        const searchInput = document.getElementById('searchInput');
	        const cityFilter = document.getElementById('cityFilter');
	        const searchResults = document.getElementById('searchResults');
	        const eventsList = document.getElementById('eventsList');
	
	        // Add city filter to search function
	        window.searchEvents = function searchEvents() {
	            const searchQuery = searchInput.value;
	            const selectedCity = cityFilter.value;
	
	            fetch('/search?q=' + encodeURIComponent(searchQuery) + '&city=' + encodeURIComponent(selectedCity), {
	                method: 'GET',
	                headers: {
	                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
	                    'Accept': 'application/json'
	                }
	            })
	                .then(response => response.json())
	                .then(data => {
	                    eventsList.innerHTML = '';
	
	                    // Sort events by date
	                    const sortedEvents = Object.values(data.eventos.items).sort((a, b) => {
	                        return new Date(a.events[0].date) - new Date(b.events[0].date);
	                    });
	
	                    // Events Section
	                    const eventsSection = document.createElement('div');
	                    eventsSection.innerHTML = `
	                        <h3 class="font-bold text-lg mb-4">Eventos (${data.eventos.total} resultados)</h3>
	                    `;
	
	                    sortedEvents.forEach(item => {
	                        const event = item.events[0];
	                        const eventElement = document.createElement('div');
	                        eventElement.className = 'mb-6';
	                        eventElement.innerHTML = `
	                            <a href="{{ route('detalle-evento', '') }}/${event.slug}" class="block hover:bg-gray-100 p-2 rounded">
	                                <div class="flex gap-4 items-center">
	                                    <div class="w-[100px] flex-shrink-0">
	                                        <img src="${event.poster_url}" class="w-full h-auto" alt="${event.name}"/>
	                                    </div>
	                                    <div class="flex-grow">
	                                        <div class="font-medium">${event.name}</div>
	                                        <div class="text-gray-600">${event.location || 'Ubicación no especificada'}</div>
	                                    </div>
	                                </div>
	                            </a>
	                        `;
	                        eventsSection.appendChild(eventElement);
	                    });
	
	                    // Artists Section
	                    const artistsSection = document.createElement('div');
	                    artistsSection.className = 'mt-8';
	                    
	                    const sortedArtists = data.artistas.items.sort((a, b) => a.name.localeCompare(b.name));
	
	                    artistsSection.innerHTML = `
	                        <h3 class="font-bold text-lg mb-4">Artistas (${data.artistas.total} resultados)</h3>
	                        ${sortedArtists.map(artist => `
	                            <div class="mb-4">
	                                <div class="font-medium text-lg">${artist.name}</div>
	                                <div class="text-purple-600 cursor-pointer">Ver todos los eventos</div>
	                                <div class="text-gray-600">${formatDateRange(artist.date_range)} | ${artist.event_count} eventos</div>
	                            </div>
	                        `).join('')}
	                    `;
	
	                    eventsList.appendChild(eventsSection);
	                    //eventsList.appendChild(artistsSection);
	                    searchResults.classList.remove('hidden');
	                })
	                .catch(error => {
	                    console.error('Error:', error);
	                });
	        };
	
	        // Add city filter change event
	        cityFilter.addEventListener('change', function() {
	            if (searchInput.value.trim().length >= 3) {
	                searchEvents();
	            }
	        });
	
	        searchInput.addEventListener('input', function() {
	            clearTimeout(timeout);
	            const searchQuery = this.value.trim();
	
	            if (searchQuery.length >= 3) {
	                searchResults.classList.remove('hidden');
	                timeout = setTimeout(searchEvents, 300);
	            } else {
	                searchResults.classList.add('hidden');
	            }
	        });
	
	        function formatDate(dateString) {
	            const date = new Date(dateString);
	            const options = { day: '2-digit', month: '2-digit', year: 'numeric' };
	            return date.toLocaleDateString('es-ES', options);
	        }
	
	        function formatDateRange(dateRange) {
	            const [startDate, endDate] = dateRange.split(' - ');
	            return `${formatDate(startDate)} - ${formatDate(endDate)}`;
	        }
	
	        document.addEventListener('click', function(event) {
	            if (!searchResults.contains(event.target) && event.target !== searchInput) {
	                searchResults.classList.add('hidden');
	            }
	        });
	    });
	</script>