aperonight/app/views/components/_event_finder.html.erb

<!-- Event Finder Section -->
<section>
  <div class="container">
    <div class="event-finder">
      <div class="finder-header">
        <h2 class="finder-title">Trouvez votre événement parfait</h2>
        <p class="finder-subtitle">Découvrez des événements afterwork adaptés à vos préférences</p>
      </div>

      <form class="finder-form">
        <div class="finder-field">
          <label class="finder-label">
            <i data-lucide="calendar"></i>
            Date
          </label>
          <input type="date" class="finder-input focus-ring" id="event-date">
        </div>

        <div class="finder-field">
          <label class="finder-label">
            <i data-lucide="map-pin"></i>
            Ville
          </label>
          <select class="finder-select focus-ring" id="event-city">
            <option value="">Choisissez une ville</option>
            <option value="paris">Paris</option>
            <option value="london">London</option>
            <option value="berlin">Berlin</option>
            <option value="madrid">Madrid</option>
            <option value="barcelona">Barcelona</option>
            <option value="amsterdam">Amsterdam</option>
            <option value="rome">Rome</option>
            <option value="zurich">Zurich</option>
          </select>
        </div>

        <div class="finder-field">
          <label class="finder-label">
            <i data-lucide="users"></i>
            Type d'événement
          </label>
          <select class="finder-select focus-ring" id="event-type">
            <option value="">Tous les types</option>
            <option value="networking">Réseautage</option>
            <option value="tech">Tech & Innovation</option>
            <option value="creative">Créatif & Design</option>
            <option value="business">Affaires</option>
            <option value="startup">Startup</option>
            <option value="wine">Vin & Dégustation</option>
            <option value="art">Art & Culture</option>
            <option value="music">Musique & Divertissement</option>
          </select>
        </div>

        <!--
        <div class="finder-field price-range">
          <label class="finder-label">
            <div class="price-range-label">
              <span>
                <i data-lucide="euro"></i>
                Fourchette de prix
              </span>
              <span class="price-value" id="price-display">€0 - €100</span>
            </div>
          </label>
          <div style="display: flex; gap: var(--space-3); align-items: center;">
            <input type="range" class="price-slider" id="price-min" min="0" max="100" value="0" style="flex: 1;">
            <span style="color: var(--color-neutral-500); font-weight: 600;">à</span>
            <input type="range" class="price-slider" id="price-max" min="0" max="100" value="100" style="flex: 1;">
          </div>
        </div>
        -->

        <button type="submit" class="finder-search-btn">
          <i data-lucide="search"></i>
          Trouver des événements
        </button>
      </form>
    </div>
  </div>
</section>

<script>
  // Fonctionnalité de recherche d'événements
  document.addEventListener("DOMContentLoaded", function() {
    const priceMin = document.getElementById('price-min');
    const priceMax = document.getElementById('price-max');
    const priceDisplay = document.getElementById('price-display');

    if (priceMin && priceMax && priceDisplay) {
      function updatePriceDisplay() {
        const minVal = parseInt(priceMin.value);
        const maxVal = parseInt(priceMax.value);

        // Ensure min doesn't exceed max
        if (minVal > maxVal) {
          priceMin.value = maxVal;
        }

        // Ensure max doesn't go below min
        if (maxVal < minVal) {
          priceMax.value = minVal;
        }

        const finalMin = Math.min(parseInt(priceMin.value), parseInt(priceMax.value));
        const finalMax = Math.max(parseInt(priceMin.value), parseInt(priceMax.value));

        priceDisplay.textContent = `€${finalMin} - €${finalMax}`;
      }

      priceMin.addEventListener('input', updatePriceDisplay);
      priceMax.addEventListener('input', updatePriceDisplay);

      // Set default date to tomorrow
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      const dateInput = document.getElementById('event-date');
      if (dateInput) {
        dateInput.value = tomorrow.toISOString().split('T')[0];
      }
    }

    // Form submission
    const finderForm = document.querySelector('.finder-form');
    if (finderForm) {
      finderForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = {
          date: document.getElementById('event-date').value,
          city: document.getElementById('event-city').value,
          type: document.getElementById('event-type').value,
          priceMin: priceMin ? priceMin.value : '',
          priceMax: priceMax ? priceMax.value : ''
        };

        console.log('Filtres de recherche :', formData);

        // Add loading state to button
        const searchBtn = document.querySelector('.finder-search-btn');
        if (searchBtn) {
          const originalText = searchBtn.innerHTML;
          searchBtn.innerHTML = '<div style="width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> Recherche...';

          // Simulate search
          setTimeout(() => {
            searchBtn.innerHTML = originalText;
            alert('Recherche terminée ! Les résultats seraient affichés ici.');
          }, 2000);
        }
      });
    }
  });
</script>

<style>
</style>