{% trans_default_domain 'home' %}

<turbo-frame id="view_integration">
  <div class="container_{{ integration.id }}">
    {{ form_start(form, {
      action: path('integration_show', {'id': integration.id})
    }) }}
    {{ form_row(form.name) }}
    {{ form_row(form.url) }}
    <span class="text-xs text-gray-600 dark:text-gray-400 my-2">
     {{ 'IntegrationForm.infoDomain'|trans }}
  </span>
    {{ form_row(form.mobile) }}
    <span class="text-xs text-gray-600 dark:text-gray-400 my-2">
      {{ 'IntegrationForm.infoMobile'|trans }}
    </span>
    {{ form_row(form.showTypes) }}
    <span class="text-xs text-gray-600 dark:text-gray-400 my-2">{{ 'IntegrationForm.infoShowTypes'|trans }}</span>
    <div class="space-y-2">
      {{ form_label(form.typesSignalement) }}
      <div class="flex flex-col space-y-2">
        {% for choice in form.typesSignalement %}
          <div class="flex items-center space-x-3">
            <div class="flex items-center h-5">
              {{ form_widget(choice, {
                'attr': {
                  'class': 'h-4 w-4 text-gray-900 border-gray-300 rounded focus:ring-blue-500'
                }
              }) }}
            </div>
            <div class="ml-3 text-sm">
              {{ form_label(choice, null, {
                'label_attr': {
                  'class': 'font-medium text-gray-700'
                }
              }) }}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    {{ form_row(form.conditionGenerales) }}

    {{ form_row(form.metaName) }}
    <div id="metaLogo" class="flex flex-col hidden w-1/2">
      <img id="IntegrationMetaLogo" class="rounded-sm"
           src="{{ integration.metaLogo and integration.metaLogo is not same as ('') ? asset('uploads/integration/' ~ integration.metaLogo) : '' }}">
      <button type="submit" id="update_metaLogo"
              class="mt-4 px-3 py-2 text-sm border border-gray-300 shadow-sm 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-pink-500">
        <span>{{ 'IntegrationForm.updateImage'|trans }}</span>
      </button>
    </div>
    <div id="metaLogoDropzone" class="hidden">
      {{ form_row(form.metaLogo) }}
    </div>


    <div
      class="flex flex-col gap-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
      {{ form_label(form.integrationSupport) }}
      <div class="js-support-wrapper"
           data-prototype="{{ form_widget(form.integrationSupport.vars.prototype)|e('html_attr') }}">
        {% for supportField in form.integrationSupport %}
          <div class="js-support-item flex items-center justify-between w-full gap-2">
            {{ form_row(supportField) }}
            <button type="button"
                    class="js-remove-support inline-flex items-center px-3 py-2 text-sm border border-red-300 shadow-sm font-medium rounded-md text-gray-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
              <span class="material-symbols-outlined mr-2 text-red-500">delete</span>
              <span class="ml-2">{{ 'IntegrationForm.delete'|trans }}</span>
            </button>
          </div>
        {% endfor %}
      </div>
      <button type="button"
              class="js-add-support inline-flex items-center px-3 py-2 text-sm border border-gray-300 shadow-sm 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-pink-500">
        <span class="material-symbols-outlined mr-2">support_agent</span>
        <span class="ml-2">{{ 'IntegrationForm.addSupport'|trans }}</span>
      </button>
      <script>
				function supportForm_{{ integration.id }}() {
					const container = document.querySelector('.container_{{ integration.id }}');
					const wrapper = container.querySelector('.js-support-wrapper');
					const addButton = container.querySelector('.js-add-support');

					let index = wrapper.querySelectorAll('.js-support-item').length;

					const removeButton = `
          <button type="button"
           class="js-remove-support inline-flex items-center px-3 py-2 text-sm border border-red-300 shadow-sm font-medium rounded-md text-gray-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
            <span class="material-symbols-outlined mr-2 text-red-500">delete</span>
            <span class="ml-2">` + '{{ 'IntegrationForm.delete'|trans }}' + `</span>
          </button>`;

					addButton.addEventListener('click', function () {
						const prototype = wrapper.dataset.prototype;
						const newForm = prototype.replace(/__name__/g, index);
						const div = document.createElement('div');
						div.setAttribute('class', 'js-support-item flex items-center justify-between w-full gap-2');
						div.innerHTML = newForm + removeButton;
						wrapper.appendChild(div);
						index++;
					});

					wrapper.addEventListener('click', function (e) {
						if (e.target.classList.contains('js-remove-support')) {
							e.target.closest('.js-support-item').remove();
						}
					});
				}

				supportForm_{{ integration.id }}();
      </script>
    </div>

    {{ form_row(form._token) }}

    <script>
			function updateMetaLogo_{{ integration.id }}() {
				const container = document.querySelector('.container_{{ integration.id }}');
				if (container.querySelector('#IntegrationMetaLogo').src === "" || container.querySelector('#IntegrationMetaLogo').src === null || container.querySelector('#IntegrationMetaLogo').src === window.location.href) {
					container.querySelector('#metaLogo').classList.add('hidden');
					container.querySelector('#metaLogoDropzone').classList.remove('hidden');
				} else {
					container.querySelector('#metaLogo').classList.remove('hidden');
					container.querySelector('#metaLogoDropzone').classList.add('hidden');
				}

				container.querySelector('#update_metaLogo').addEventListener('click', function (event) {
					event.preventDefault();
					container.querySelector('#IntegrationMetaLogo').classList.add('hidden');
					container.querySelector('#metaLogo').classList.add('hidden');
					container.querySelector('#metaLogoDropzone').classList.remove('hidden');
				});
			}

			updateMetaLogo_{{ integration.id }}();
    </script>

    <input type="hidden" name="integration_id" value="{{ integration.id }}">
    <div class="flex justify-between gap-2">
      <button type="submit"
              class="inline-flex items-center px-3 py-2 text-sm border border-gray-300 shadow-sm 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-pink-500">
        <span class="material-symbols-outlined mr-2">check_circle</span>
        <span class="ml-2">{{ 'Integration.update_integration'|trans }}</span>
      </button>
      <a href="{{ path('integration_delete', {'id': integration.id}) }}"
         class="inline-flex items-center px-3 py-2 text-sm border border-red-300 shadow-sm font-medium rounded-md text-gray-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
        <span class="material-symbols-outlined mr-2 text-red-500">delete</span>
        <span class="ml-2">{{ 'Integration.delete_integration'|trans }}</span>
      </a>
    </div>
    {{ form_end(form) }}
  </div>
</turbo-frame>