aperonight/app/views/promoter/events/edit.html.erb

<% content_for(:title, "Modifier #{@event.name}") %>

<div class="container py-8">
  <div class="max-w-4xl mx-auto">
    <div class="mb-8">
      <div class="flex items-center space-x-4">
        <%= link_to promoter_event_path(@event), class: "text-gray-400 hover:text-gray-600 transition-colors" do %>
          <i data-lucide="arrow-left" class="w-5 h-5"></i>
        <% end %>
        <div>
          <h1 class="text-3xl font-bold text-gray-900 mb-2">Modifier l'événement</h1>
          <p class="text-gray-600"><%= @event.name %></p>
        </div>
      </div>
    </div>

    <%= form_with model: [:promoter, @event], local: true, class: "space-y-8", data: { controller: "event-form" } do |form| %>
      <% if @event.errors.any? %>
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <i data-lucide="alert-circle" class="w-5 h-5 text-red-400"></i>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">
                <%= pluralize(@event.errors.count, "erreur") %> à corriger :
              </h3>
              <div class="mt-2 text-sm text-red-700">
                <ul class="list-disc list-inside space-y-1">
                  <% @event.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                  <% end %>
                </ul>
              </div>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Basic Information -->
      <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">Informations générales</h3>
        
        <div>
          <%= form.label :name, "Nom de l'événement", class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.text_field :name, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Ex: Soirée d'ouverture" %>
        </div>

        <div class="mt-6">
          <%= form.label :description, "Description", class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.text_area :description, rows: 4, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Décrivez votre événement..." %>
        </div>

        <div class="mt-6">
          <%= form.label :image, "Image de couverture", class: "block text-sm font-medium text-gray-700 mb-2" %>
          <div class="space-y-4">
            <!-- Current image preview -->
            <% if @event.has_image? %>
              <div class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                  <% if @event.event_image_variant(:small).is_a?(String) %>
                    <!-- Old image field -->
                    <%= image_tag @event.event_image_variant(:small), class: "w-32 h-24 object-cover rounded-lg border border-gray-200" %>
                  <% else %>
                    <!-- Attached image -->
                    <%= image_tag @event.event_image_variant(:small), class: "w-32 h-24 object-cover rounded-lg border border-gray-200" %>
                  <% end %>
                </div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-medium text-gray-900 mb-1">Image actuelle</p>
                  <p class="text-sm text-gray-600 mb-2">Uploader une nouvelle image pour la remplacer.</p>
                  <button type="button" onclick="this.closest('div').querySelector('input[type=file]').click()" class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition-colors inline-flex items-center">
                    <i data-lucide="trash-2" class="w-4 h-4 mr-1"></i>
                    <span>Remplacer l'image</span>
                  </button>
                </div>
              </div>
            <% end %>

            <!-- File upload field -->
            <div class="relative">
              <%= form.file_field :image, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100", accept: "image/png,image/jpeg,image/jpg,image/webp", data: { action: "change->event-form#previewImage" } %>
              <div class="mt-1 text-sm text-gray-500">
                Formats acceptés : PNG, JPG, JPEG, WebP (max 5MB)
                <% if @event.has_image? %>
                  <br>Laissez vide pour conserver l'image actuelle
                <% end %>
              </div>
            </div>

            <!-- Image preview container -->
            <div id="image-preview" class="hidden">
              <div class="relative">
                <img id="preview-img" src="" alt="Preview" class="w-full h-48 object-cover rounded-lg border border-gray-200">
                <button type="button" onclick="document.getElementById('event_image').value = ''; document.getElementById('image-preview').classList.add('hidden');" class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition-colors">
                  <i data-lucide="x" class="w-4 h-4"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Date & Time -->
      <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">Date et heure</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <%= form.label :start_time, "Date et heure de début", class: "block text-sm font-medium text-gray-700 mb-2" %>
            <%= form.datetime_local_field :start_time, 
                value: @event.start_time&.strftime("%Y-%m-%dT%H:%M"),
                class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" %>
          </div>
          
          <div>
            <%= form.label :end_time, "Date et heure de fin", class: "block text-sm font-medium text-gray-700 mb-2" %>
            <%= form.datetime_local_field :end_time, 
                value: @event.end_time&.strftime("%Y-%m-%dT%H:%M"),
                class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" %>
          </div>
        </div>
        
        <% if @event.published? && @event.tickets.any? %>
          <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div class="flex">
              <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-400 mt-0.5 mr-2"></i>
              <p class="text-sm text-yellow-800">
                Des billets ont déjà été vendus pour cet événement. Modifier la date pourrait impacter les participants.
              </p>
            </div>
          </div>
        <% end %>
      </div>

      <!-- Venue Information -->
      <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">Lieu de l'événement</h3>
        
        <div class="space-y-6">
          <div>
            <%= form.label :venue_name, "Nom du lieu", class: "block text-sm font-medium text-gray-700 mb-2" %>
            <%= form.text_field :venue_name, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Ex: Le Grand Rex" %>
          </div>
          
          <div>
            <%= form.label :venue_address, "Adresse complète", class: "block text-sm font-medium text-gray-700 mb-2" %>
            <div class="space-y-2">
              <%= form.text_field :venue_address, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Ex: 1 Boulevard Poissonnière, 75002 Paris", data: { "event-form-target": "address", action: "input->event-form#addressChanged" } %>
              
              <!-- Location Actions -->
              <div class="flex flex-wrap gap-2">
                <button type="button" data-action="click->event-form#getCurrentLocation" class="inline-flex items-center px-3 py-2 text-xs font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                  <i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
                  Ma position
                </button>
                <button type="button" data-action="click->event-form#previewLocation" class="inline-flex items-center px-3 py-2 text-xs font-medium text-purple-700 bg-purple-50 border border-purple-200 rounded-lg hover:bg-purple-100 transition-colors">
                  <i data-lucide="map" class="w-3 h-3 mr-1"></i>
                  Prévisualiser
                </button>
              </div>
            </div>
            
            <p class="mt-2 text-sm text-gray-500">
              <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
              Les coordonnées GPS seront automatiquement calculées à partir de cette adresse.
            </p>
          </div>
          
          <!-- Hidden coordinate fields for form submission -->
          <%= form.hidden_field :latitude, data: { "event-form-target": "latitude" } %>
          <%= form.hidden_field :longitude, data: { "event-form-target": "longitude" } %>
          
          <!-- Map Links Container (shown when address is valid) -->
          <div data-event-form-target="mapLinksContainer" class="empty:hidden bg-gray-50 rounded-lg p-3 border border-gray-200"></div>
        </div>

        <% if @event.published? && @event.tickets.any? %>
          <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div class="flex">
              <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-400 mt-0.5 mr-2"></i>
              <p class="text-sm text-yellow-800">
                Des billets ont déjà été vendus pour cet événement. Modifier le lieu pourrait impacter les participants.
              </p>
            </div>
          </div>
        <% end %>
      </div>

      <!-- Options -->
      <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">Options</h3>
        
        <div class="space-y-4">
          <div class="flex items-center">
            <%= form.check_box :featured, class: "h-4 w-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500" %>
            <%= form.label :featured, "Mettre en avant sur la page d'accueil", class: "ml-2 text-sm text-gray-700" %>
          </div>
          <p class="text-sm text-gray-500">Les événements mis en avant apparaissent en premier sur la page d'accueil.</p>
          
          <div class="flex items-start">
            <%= form.check_box :allow_booking_during_event, class: "h-4 w-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 mt-1" %>
            <div class="ml-2">
              <%= form.label :allow_booking_during_event, "Autoriser la réservation pendant l'événement", class: "text-sm text-gray-700 font-medium" %>
              <p class="text-sm text-gray-500 mt-1">
                Si activé, les participants pourront acheter des billets même après le début de l'événement. 
                Si désactivé, la vente de billets s'arrêtera automatiquement à l'heure de début.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <%= link_to promoter_event_path(@event), class: "text-gray-500 hover:text-gray-700 transition-colors" do %>
            Annuler
          <% end %>
          <% if @event.published? && @event.tickets.any? %>
            <p class="text-sm text-yellow-600">
              <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
              <%= @event.tickets.count %> billet(s) déjà vendu(s)
            </p>
          <% end %>
        </div>
        
        <div class="flex items-center space-x-3">
          <%= form.submit "Sauvegarder les modifications", class: "inline-flex items-center px-6 py-3 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200" %>
        </div>
      </div>
    <% end %>
  </div>
</div>