{{ form_start(form, {
    action: path('modal_new_administration'),
    method: 'POST',
    attr: {
        class: 'm-form m-form--fit m-form--label-top crm-admin-modal',
        id: 'administration_add'
    }
}) }}

<style>
  .crm-admin-modal .modal-dialog { max-width: 980px; }
  .crm-admin-modal .modal-header {
    padding: .75rem .9rem;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
  }
  .crm-admin-modal .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: .85rem;
    background: #f8fafc;
  }
  .crm-admin-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .9rem;
    background: #fff;
    border-top: 1px solid #dee2e6;
  }

  .crm-admin-modal .crm-section {
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: .75rem;
  }
  .crm-admin-modal .crm-legend {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem 0;
    font-size: .95rem;
    font-weight: 600;
    color: #212529;
  }
  .crm-admin-modal .form-label {
    display: block;
    margin-bottom: .28rem;
    font-size: .83rem;
    font-weight: 500;
    color: #495057;
  }
  .crm-admin-modal .form-control,
  .crm-admin-modal .form-select {
    min-height: 40px;
    font-size: .92rem;
  }
  .crm-admin-modal .compact-row {
    --bs-gutter-x: .7rem;
    --bs-gutter-y: .65rem;
  }
  .crm-admin-modal .crm-feedback {
    margin-top: .3rem;
    font-size: .78rem;
    color: #dc3545;
  }
  .crm-admin-modal .select2-container { width: 100% !important; }
  .crm-admin-modal .select2-container .select2-selection--single {
    min-height: 40px !important;
    border: 1px solid #ced4da !important;
    border-radius: .375rem !important;
    display: flex !important;
    align-items: center !important;
  }
  .crm-admin-modal .select2-container .select2-selection__rendered {
    padding-left: .75rem !important;
    line-height: 1.9 !important;
    font-size: .92rem !important;
    color: #212529 !important;
  }
  .crm-admin-modal .select2-container .select2-selection__arrow {
    height: 38px !important;
  }
  .crm-admin-modal .crm-switch-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 40px;
    padding: .35rem .1rem;
  }
  .crm-admin-modal .form-check.form-switch {
    margin: 0;
    padding-left: 2.8rem;
    min-height: 1.5rem;
  }
  .crm-admin-modal .form-check-input.crm-switch-input {
    width: 2.35rem;
    height: 1.2rem;
    margin-left: -2.8rem;
    cursor: pointer;
    background-color: #cbd5e1;
    border-color: #cbd5e1;
    box-shadow: none !important;
  }
  .crm-admin-modal .form-check-input.crm-switch-input:checked {
    background-color: #111827;
    border-color: #111827;
  }
  .crm-admin-modal .crm-switch-text {
    font-size: .86rem;
    font-weight: 600;
    color: #334155;
  }

  @media (max-width: 768px) {
    .crm-admin-modal .modal-dialog {
      margin: .35rem;
      max-width: calc(100% - .7rem);
    }
    .crm-admin-modal .modal-body {
      max-height: calc(100vh - 145px);
      padding: .65rem;
    }
    .crm-admin-modal .modal-footer {
      flex-direction: column;
      align-items: stretch;
    }
    .crm-admin-modal .modal-footer .btn {
      width: 100%;
    }
  }
</style>

<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title mb-0 flex-grow-1">Ajouter un nouvel utilisateur</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  </div>

  <div class="modal-body">
    <fieldset class="crm-section">
      <legend class="crm-legend">
        <i class="fa fa-user-shield text-primary"></i>
        Informations du compte
      </legend>

      <div class="row compact-row">
        <div class="col-12 col-md-4">
          <label class="form-label">État</label>
          <div class="crm-switch-wrap">
            {{ form_widget(form.isBlocked, {'attr': {'class': 'form-control m-input d-none', 'data-admin-blocked-select': '1'}}) }}
            <div class="form-check form-switch">
              <input type="checkbox"
                     class="form-check-input crm-switch-input"
                     id="administration_block_switch"
                     role="switch">
            </div>
            <span class="crm-switch-text" id="administration_block_switch_text">Actif</span>
          </div>
        </div>

        <div class="col-12 col-md-4">
          <label class="form-label">Référence</label>
          {{ form_widget(form.username, {'attr': {'class': 'form-control m-input', 'placeholder': 'Référence'}}) }}
          <div id="username-feedback" class="crm-feedback d-none">
            Référence déjà utilisée.
          </div>
        </div>

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

        <div class="col-12 col-md-6">
          <label class="form-label">Nom</label>
          {{ form_widget(form.firstName, {'attr': {'class': 'form-control m-input', 'placeholder': 'Nom et prénom'}}) }}
        </div>

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

        <div class="col-12 col-md-6">
          <label class="form-label">Téléphone 1</label>
          {{ form_widget(form.phone, {'attr': {'class': 'form-control m-input', 'placeholder': 'Téléphone principal'}}) }}
          <div id="phone-feedback" class="crm-feedback d-none">
            Téléphone déjà utilisé.
          </div>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Téléphone 2</label>
          {{ form_widget(form.second_phone, {'attr': {'class': 'form-control m-input', 'placeholder': 'Téléphone secondaire'}}) }}
        </div>
      </div>
    </fieldset>

    <fieldset class="crm-section">
      <legend class="crm-legend">
        <i class="fa fa-map-marker-alt text-primary"></i>
        Adresse
      </legend>

      <div class="row compact-row">
        <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'
            }
          }) }}
        </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>

      <div class="row compact-row mt-0">
        <div class="col-12">
          <label class="form-label">Adresse</label>
          {{ form_widget(form.adress, {'attr': {'class': 'form-control m-input', 'placeholder': 'Adresse complète'}}) }}
        </div>
      </div>
    </fieldset>

    <fieldset class="crm-section mb-0">
      <legend class="crm-legend">
        <i class="fa fa-briefcase text-primary"></i>
        Affectation
      </legend>

      <div class="row compact-row">
        <div class="col-12 col-md-6">
          <label class="form-label">Groupe</label>
          {{ form_widget(form.groupUser, {'attr': {'class': 'form-control m-input select2'}}) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Poste</label>
          {{ form_widget(form.userPost, {'attr': {'class': 'form-control m-input select2'}}) }}
        </div>
      </div>
    </fieldset>
  </div>

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

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

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

    if (typeof $ !== 'undefined' && $.fn && $.fn.select2) {
      var $modal = $scope.closest('.modal');
      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
        });
      });
    }

    var $blockedSelect = $scope.find('[data-admin-blocked-select]').first();
    var $blockedSwitch = $('#administration_block_switch');
    var $blockedText = $('#administration_block_switch_text');

    if ($blockedSelect.length && $blockedSwitch.length) {
      var syncBlockedUi = function () {
        var isBlocked = String($blockedSelect.val() || '0') === '1';
        $blockedSwitch.prop('checked', isBlocked);
        $blockedText.text(isBlocked ? 'Bloqué' : 'Actif');
      };

      syncBlockedUi();

      $blockedSwitch.on('change', function () {
        $blockedSelect.val($(this).is(':checked') ? '1' : '0').trigger('change');
        syncBlockedUi();
      });

      $blockedSelect.on('change', syncBlockedUi);
    }
  })();
</script>