{{ form_start(form, {
    'action': path(
        categorie == 'fournisseur' ? 'modal_address_supplier' : 'modal_addres_user',
        { 'type': type, 'id': idAddress }
    ),
    'method': 'POST',
    'attr': {
        'class': 'm-form m-form--fit crm-address-modal',
        'id': 'address_modal_form'
    }
}) }}

<style>
  .crm-address-modal .modal-header{
    padding:.7rem .9rem;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
  }
  .crm-address-modal .modal-title{
    margin:0;
    font-size:1rem;
    font-weight:600;
    color:#1f2937;
  }
  .crm-address-modal .modal-body{
    background:#f8fafc;
    padding:.9rem;
  }
  .crm-address-modal .crm-panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:.8rem;
  }
  .crm-address-modal .form-label{
    margin-bottom:.3rem;
    font-size:.83rem;
    font-weight:600;
    color:#475569;
  }
  .crm-address-modal .form-control,
  .crm-address-modal .form-select{
    min-height:40px;
    border-radius:8px;
    border-color:#dbe3ea;
    font-size:.92rem;
  }
  .crm-address-modal .form-control:focus,
  .crm-address-modal .form-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .18rem rgba(37,99,235,.14);
  }
  .crm-address-modal .modal-footer{
    border-top:1px solid #e5e7eb;
    background:#fff;
    padding:.65rem .9rem;
  }
  .crm-address-modal .select2-container{ width:100% !important; }
  .crm-address-modal .select2-container .select2-selection--single{
    min-height:40px !important;
    border:1px solid #dbe3ea !important;
    border-radius:8px !important;
    display:flex !important;
    align-items:center !important;
  }
  .crm-address-modal .select2-container .select2-selection__rendered{
    padding-left:.75rem !important;
    line-height:1.8 !important;
    font-size:.92rem !important;
    color:#111827 !important;
  }
  .crm-address-modal .select2-container .select2-selection__arrow{
    height:38px !important;
  }
</style>

<div class="modal-content crm-address-modal">
  <div class="modal-header">
    <h5 class="modal-title">
      <i class="fa fa-map-marker text-primary me-1"></i>
      {% if type == 'new' %}Ajouter{% else %}Modifier{% endif %}
      une adresse {% if categorie == 'client' %}- Client{% else %}- Fournisseur{% endif %}
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  </div>

  <div class="modal-body">
    <div class="crm-panel">
      <div class="row g-3">
        {% if type != 'principal' %}
          <div class="col-12">
            <label class="form-label">Nom de l'adresse</label>
            {% if form.label is defined %}
              {{ form_widget(form.label, {'attr': {
                'class': 'form-control m-input',
                'placeholder': 'Ex: Maison, Travail, Entrepot'
              }}) }}
            {% else %}
              <input type="text"
                     class="form-control m-input"
                     name="{{ form.vars.name }}[label]"
                     value=""
                     placeholder="Ex: Maison, Travail, Entrepot">
            {% endif %}
          </div>
        {% endif %}

        <div class="col-12">
          <label class="form-label">Adresse</label>
          {% if type == 'principal' %}
            {{ form_widget(form.adress, {'attr': {
              'class': 'form-control m-input',
              'placeholder': 'Adresse',
              'style': 'min-height:84px;'
            }}) }}
          {% else %}
            {{ form_widget(form.address, {'attr': {
              'class': 'form-control m-input',
              'placeholder': 'Adresse',
              'style': 'min-height:84px;'
            }}) }}
          {% endif %}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Pays</label>
          {{ form_widget(form.country, {
            attr: {
              'class': 'form-control m-input select2',
              'data-country-select': '1',
              'data-default-country-code': 'TN',
              'data-region-template': path('ajax_regions_by_country', { id: '__COUNTRY_ID__' }),
              'data-current-country-id': ''
            }
          }) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Région</label>
          {{ form_widget(form.region, {
            attr: {
              'class': 'form-control m-input select2',
              'data-region-select': '1',
              'data-saved-region': form.region.vars.value ?? ''
            }
          }) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Ville</label>
          {{ form_widget(form.city, {'attr': {
            'class': 'form-control m-input',
            'placeholder': 'Ville'
          }}) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Code postal</label>
          {{ form_widget(form.zip, {'attr': {
            'class': 'form-control m-input',
            'placeholder': 'Code postal'
          }}) }}
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer d-flex justify-content-between">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
    {{ form_widget(form.save, {'attr': {'class': 'btn btn-dark'}, 'label': 'Enregistrer'}) }}
  </div>
</div>

{{ form_errors(form) }}
{{ form_rest(form) }}
{{ form_end(form) }}

<script>
(function () {
  var $scope = $('#address_modal_form');
  if (!$scope.length) return;

  if (typeof $ !== 'undefined' && $.fn && $.fn.select2) {
    var $modal = $scope.closest('.modal');
    if (!$modal.length) $modal = $('#m_modal_address');
    if (!$modal.length) $modal = $(document.body);

    $scope.find('select.select2').each(function () {
      var $el = $(this);
      if ($el.hasClass('select2-hidden-accessible')) {
        $el.select2('destroy');
      }
      $el.select2({
        width: '100%',
        dropdownParent: $modal
      });
    });
  }

  if (typeof initCountryRegionLoader === 'function') {
    initCountryRegionLoader($scope.get(0));
  }

  var $country = $scope.find('[data-country-select]').first();
  var $region = $scope.find('[data-region-select]').first();
  if (!$country.length) return;

  // Tunisie par défaut uniquement en création
  if ('{{ type }}' === 'new' && !$country.val()) {
    var $tn = $country.find('option[data-country-code="TN"]').first();
    if (!$tn.length) {
      $tn = $country.find('option').filter(function () {
        var txt = ($(this).text() || '').trim().toLowerCase();
        return txt === 'tunisie' || txt === 'tunisia';
      }).first();
    }
    if ($tn.length) {
      $country.val($tn.val());
    }
  }

  $country.on('change', function () {
    setTimeout(function () {
      if ($region.length) {
        $region.trigger('change.select2');
      }
    }, 250);
  });

  $country.trigger('change');
})();
</script>