{% trans_default_domain 'home' %}

<div class="container mx-auto max-w-4xl">
  {{ form_start(form, {'attr': {'class': 'space-y-4 md:space-y-6 bg-white p-3 md:p-8 rounded-xl shadow-sm'}}) }}

  {# Type buttons - Modifier la grille pour être dynamique #}
  <div
    class="grid grid-cols-{{ form.type.children|length }} gap-2 md:gap-4 mb-4 md:mb-6 {{ integration.showTypes ? '' : 'hidden' }}">
    {% for child in form.type.children %}
      <div>
        {{ form_widget(child, {
          'attr': {
            'class': 'hidden radio-input',
            'data-index': loop.index0
          }
        }) }}
        <label for="{{ child.vars.id }}"
               class="flex items-center justify-center h-full p-2 md:p-4 bg-gray-100 rounded-lg cursor-pointer w-full hover:bg-gray-200 transition-colors">
          <div class="flex flex-row items-center justify-center space-x-2">
            {% if child.vars.value == '1' %}
              <span class="text-xl md:text-2xl">🚶</span>
            {% elseif child.vars.value == '2' %}
              <span class="text-xl md:text-2xl">🚌</span>
            {% endif %}
            <span class="text-sm md:text-base">{{ child.vars.label }}</span>
          </div>
        </label>
      </div>
    {% endfor %}
  </div>

  {# Transport types - Ajouter la classe hidden par défaut #}
  <div id="transport-options"
       class="grid grid-cols-{{ form.transport_type.children|length }} gap-2 md:gap-4 mb-4 md:mb-6 hidden">
    {% for child in form.transport_type.children %}
      <div>
        {{ form_widget(child, {
          'attr': {
            'class': 'hidden radio-input',
          }
        }) }}
        <label for="{{ child.vars.id }}"
               class="block p-2 md:p-4 bg-gray-100 rounded-lg text-center cursor-pointer hover:bg-gray-200 transition-colors">
          {% set icons = {
            '1': '🚂',
            '2': '🚇',
            '3': '🚌',
            '4': '🚊',
            '5': '🚏'
          } %}
          <span class="text-xl md:text-2xl block">
						{% if child.vars.value in icons|keys %}
              {{ icons[child.vars.value] }}
            {% endif %}
					</span>
          <span class="block text-xs md:text-sm mt-1">{{ child.vars.label }}</span>
        </label>
      </div>
    {% endfor %}
  </div>

  {# Form fields in grid for desktop #}
  <div
    class="grid md:grid-cols-2 gap-4 md:gap-6">
    {# Transport related fields - hidden by default #}
    <div id="transport-fields" class="space-y-3 md:space-y-4 hidden">
      {{ form_widget(form.ligne) }}
      {{ form_widget(form.direction) }}
      {{ form_widget(form.arret) }}
      {{ form_widget(form.vehicule) }}
    </div>
    <div
      class="space-y-4">
      {# Ajouter le bouton qui ouvre le modal #}
      <div class="relative" x-data="motifSelector">
        <button type="button" @click="openModal"
                class="w-full p-4 bg-gray-100 rounded-lg text-left flex items-center justify-between">
          <span x-text="selectedLabel || 'Sélectionnez un motif'">{{ 'Integration.label_motif'|trans }}</span>
          <span class="material-symbols-outlined">expand_more</span>
        </button>

        {{ form_widget(form.motif, {
          'attr': {
            'x-model': 'selectedValue',
            'x-ref': 'input',
            'class': 'hidden'
          }
        }) }}

        {# Modal pour la sélection #}
        <div x-show="isOpen" x-transition class="fixed inset-0 bg-white z-50" @click.away="closeModal">
          <div class="flex flex-col h-full">
            <div class="flex items-center justify-between p-4 border-b">
              <h3 class="text-lg font-semibold">{{ 'Integration.label_motif'|trans }}</h3>
              <button type="button" @click="closeModal" class="p-2">
                <span class="material-symbols-outlined">close</span>
              </button>
            </div>

            <div class="flex-1 overflow-y-auto">
              <div class="p-4 space-y-2">
                {% for choice in form.motif.vars.choices %}
                  {% set motifIndex = choice.value %}
                  {% set escapedValue = choice.value|replace({"'": "\\'", "é": "\\u00e9", "è": "\\u00e8", "à": "\\u00e0"}) %}
                  {% set escapedLabel = choice.label|replace({"'": "\\'", "é": "\\u00e9", "è": "\\u00e8", "à": "\\u00e0"}) %}
                  <button type="button" @click="select('{{ escapedValue }}', '{{ escapedLabel }}')"
                          class="w-full p-4 text-left hover:bg-gray-100 rounded-lg flex items-center space-x-3 transition-colors"
                          x-show="
																				                            (selectedType === '1' && {{ motifIndex }} >= 0 && {{ motifIndex }} <= 4) ||
																				                            (selectedType === '2' && {{ motifIndex }} >= 5 && {{ motifIndex }} <= 10) ||
																				                            (selectedType === '3' && {{ motifIndex }} == 11)
																				                          "
                          :class="{ 'bg-gray-100': selectedValue === '{{ escapedValue }}' }">
                    <span class="text-2xl">{{ choice.label|split(' ')[0] }}</span>
                    <span>{{ choice.label|split(' ')|slice(1)|join(' ') }}</span>
                  </button>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {# Date picker #}
      {% include 'Components/DateTimePicker.html.twig' with {
        'date_input': form.date_signalement
      } %}
      {# Address #}
      <div class="space-y-2">
        <label class="block text-sm">{{ 'Integration.label_adresse'|trans }} <span class="text-red-500">*</span></label>
        {{ form_widget(form.adresse) }}
      </div>
    </div>
  </div>

  <div class="text-sm text-gray-600 mt-4">
    {{ 'Integration.label_description'|trans }}
  </div>

  {{ form_widget(form.commentaire) }}

  {# Switches in a card #}
  <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-3 md:space-y-4 mt-4 md:mt-6">
    <div class="flex items-center justify-between py-2">
      {{ form_label(form.is_temoin, null, {
        'label_attr': {'class': 'flex-1'}
      }) }}
      <label for="{{ form.is_temoin.vars.id }}" class="relative inline-flex items-center cursor-pointer">
        {{ form_widget(form.is_temoin) }}
        <div
          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
      </label>
    </div>
  </div>

  <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-3 md:space-y-4 mt-4 md:mt-6">
    <div class="flex items-center justify-between py-2">
      {{ form_label(form.accept_donnees, null, {
        'label_attr': {'class': 'flex-1 pr-4'}
      }) }}
      <label for="{{ form.accept_donnees.vars.id }}" class="relative inline-flex items-center cursor-pointer">
        {{ form_widget(form.accept_donnees) }}
        <div
          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
      </label>
    </div>
    {% if integration.conditionGenerales and integration.conditionGenerales is not same as ('') %}
      <span class="text-sm text-gray-500">
				En cochant cette case, vous acceptez l'utilisation de vos données pour le traitement de votre signalement.
				<br>
					Voir les conditions générales d'utilisation :
				<a href="{{ integration.conditionGenerales }}" target="_blank" class="underline">
					{{ integration.conditionGenerales }}
				</a>
			</span>
    {% endif %}

    {# Champs de contact conditionnels #}

    <div id="contact-fields" class="space-y-3 mt-4 hidden">
      {{ form_widget(form.email) }}
      {{ form_widget(form.telephone) }}
    </div>
  </div>

  {# Submit button #}
  <button type="submit"
          class="w-full md:w-auto md:px-8 p-3 md:p-4 bg-gray-800 text-white rounded-lg mt-4 md:mt-6 hover:bg-gray-700 transition-colors">
    {{ 'Integration.send_signalement'|trans }}
  </button>

  {{ form_end(form) }}
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const handleRadioSelection = (name) => {
			const inputs = document.querySelectorAll(`input[name="signalement_form[${name}]"]`);

			// Sélectionner automatiquement le premier input visible
			const selectFirstVisible = () => {
				const firstVisibleInput = Array.from(inputs).find(input =>
					!input.parentElement.classList.contains('hidden')
				);
				if (firstVisibleInput) {
					firstVisibleInput.checked = true;
					firstVisibleInput.nextElementSibling.classList.add('border-2', 'border-black');
					// Déclencher l'événement change pour mettre à jour l'interface
					firstVisibleInput.dispatchEvent(new Event('change'));
				}
			};

			inputs.forEach(input => {
				input.addEventListener('change', () => {
					// Retirer la bordure de tous les labels
					inputs.forEach(i => {
						i.nextElementSibling.classList.remove('border-2', 'border-black');
					});

					// Ajouter la bordure au label sélectionné
					if (input.checked) {
						input.nextElementSibling.classList.add('border-2', 'border-black');
					}
				});
			});

			// Sélectionner le premier type visible au chargement
			selectFirstVisible();
		};

		// Gérer l'affichage des options de transport de manière dynamique
		const transportOptions = document.getElementById('transport-options');
		const typeInputs = document.querySelectorAll('input[name="signalement_form[type]"]');
		const transportFields = document.getElementById('transport-fields');
		const transportInputs = document.querySelectorAll('input[name="signalement_form[transport_type]"]');

		typeInputs.forEach(input => {
			input.addEventListener('change', () => {
				if (input.value === '2' && input.checked) {
					transportOptions.classList.remove('hidden');
					transportFields.classList.remove('hidden');

					// Sélectionner le premier type de transport visible
					const firstVisibleTransport = Array.from(transportInputs).find(input =>
						!input.parentElement.classList.contains('hidden')
					);
					if (firstVisibleTransport) {
						firstVisibleTransport.checked = true;
						firstVisibleTransport.nextElementSibling.classList.add('border-2', 'border-black');
					}
				} else {
					transportOptions.classList.add('hidden');
					transportFields.classList.add('hidden');
					// Décocher les options de transport
					transportInputs.forEach(transportInput => {
						transportInput.checked = false;
						transportInput.nextElementSibling.classList.remove('border-2', 'border-black');
					});
				}
			});
		});

		handleRadioSelection('type');
		handleRadioSelection('transport_type');

		// Gestion des champs de contact
		const acceptDonnees = document.querySelector('input[name="signalement_form[accept_donnees]"]');
		const contactFields = document.getElementById('contact-fields');

		acceptDonnees.addEventListener('change', () => {
			if (acceptDonnees.checked) {
				contactFields.classList.remove('hidden');
				contactFields.classList.add('animate-fade-in');
			} else {
				contactFields.classList.add('hidden');
				contactFields.classList.remove('animate-fade-in');
				// Réinitialiser les champs
				contactFields.querySelectorAll('input').forEach(input => {
					input.value = '';
				});
			}
		});
	});

	document.addEventListener('alpine:init', () => {
		Alpine.data('motifSelector', () => ({
				isOpen: false,
				selectedValue: '',
				selectedLabel: '',
				selectedType: '1', // Valeur par défaut : À pied

				init() { // Écouter les changements de type
					document.querySelectorAll('input[name="signalement_form[type]"]').forEach(input => {
						input.addEventListener('change', () => {
							if (input.checked) {
								this.selectedType = input.value;
								// Réinitialiser la sélection si le motif n'est plus valide pour le nouveau type
								this.selectedValue = '';
								this.selectedLabel = '';
								this.$refs.input.value = '';
							}
						});
					});
				},


				openModal() {
					this.isOpen = true;
					document.body.style.overflow = 'hidden';
				}
				,

				closeModal() {
					this.isOpen = false;
					document.body.style.overflow = '';
				}
				,

				select(value, label) {
					this.selectedValue = value;
					this.selectedLabel = label;
					this.closeModal();

					this.$refs.input.value = value;
					this.$refs.input.dispatchEvent(new Event('change', {bubbles: true}));
				}
			})
		)
	})
	;

	document.addEventListener('alpine:init', () => {
		Alpine.data('dateTimePicker', () => ({
			isOpen: false,
			tab: 'date',
			selectedDate: null,
			selectedHour: new Date().getHours(),
			selectedMinute: new Date().getMinutes(),
			displayDateTime: '',

			init() {
				// Initialiser avec la date locale
				const now = new Date();
				this.selectedDate = now;
				this.selectedHour = now.getHours();
				this.selectedMinute = now.getMinutes();
				this.updateDisplay();
			},

			get currentMonthYear() {
				return this.selectedDate.toLocaleDateString('fr-FR', {
					month: 'long',
					year: 'numeric'
				});
			},

			get daysInMonth() {
				const year = this.selectedDate.getFullYear();
				const month = this.selectedDate.getMonth();
				return new Date(year, month + 1, 0).getDate();
			},

			get firstDayOfMonth() {
				const year = this.selectedDate.getFullYear();
				const month = this.selectedDate.getMonth();
				let firstDay = new Date(year, month, 1).getDay();
				return firstDay === 0 ? 6 : firstDay - 1;
			},

			openPicker() {
				this.isOpen = true;
				document.body.style.overflow = 'hidden';
			},

			closePicker() {
				this.isOpen = false;
				document.body.style.overflow = '';
			},

			previousMonth() {
				this.selectedDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth() - 1, this.selectedDate.getDate());
			},

			nextMonth() {
				this.selectedDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + 1, this.selectedDate.getDate());
			},

			selectDate(date) {
				this.selectedDate.setDate(date);
				this.updateDisplay();
			},

			selectHour(hour) {
				this.selectedHour = hour;
				this.updateDisplay();
			},

			validateMinute() {
				let minute = parseInt(this.selectedMinute);
				if (isNaN(minute))
					minute = 0;


				if (minute < 0)
					minute = 0;


				if (minute > 59)
					minute = 59;


				this.selectedMinute = minute;
				this.updateDisplay();
			},

			isSelectedDate(date) {
				return date === this.selectedDate.getDate();
			},

			updateDisplay() {
				try {
					const date = new Date(this.selectedDate);
					date.setHours(this.selectedHour, this.selectedMinute);
					this.displayDateTime = date.toLocaleString('fr-FR', {
						day: '2-digit',
						month: '2-digit',
						year: 'numeric',
						hour: '2-digit',
						minute: '2-digit'
					});
				} catch (error) {
					console.error('Error updating display:', error);
				}
			},

			confirmSelection() {
				try {
					const date = new Date(this.selectedDate);
					date.setHours(this.selectedHour, this.selectedMinute);
					// Utiliser directement la date sans ajustement de fuseau horaire
					this.$refs.input.value = date.toISOString().slice(0, 16);
					this.$refs.input.dispatchEvent(new Event('change', {bubbles: true}));
					this.closePicker();
				} catch (error) {
					console.error('Error confirming selection:', error);
				}
			}
		}))
	})
</script>

{{ include('Components/Signalement/autocomplete.html.twig') }}

<style>
    /* Style pour le select mobile */
    .mobile-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1em;
        padding-right: 2.5rem;
    }

    /* Style spécifique pour iOS */
    @supports (-webkit-touch-callout: none) {
        .mobile-select {
            font-size: 16px; /* Évite le zoom sur iOS */
        }
    }

    /* Amélioration de l'apparence sur mobile */
    @media (max-width: 768px) {
        .mobile-select {
            font-size: 16px;
            height: 3rem;
            padding: 0.5rem 2.5rem 0.5rem 1rem;
        }
    }

    /* Styles pour le modal */
    #motif-modal {
        -webkit-overflow-autoing: touch;
    }

    /* Animation plus fluide sur iOS */
    @supports (-webkit-touch-callout: none) {
        #motif-modal {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }
</style>