{% load static %}
{# Cropper.js для обрезки аватара (локальная версия) #}
<link rel="stylesheet" href="{% static 'vendor/cropperjs/cropper.min.css' %}">
<script src="{% static 'vendor/cropperjs/cropper.min.js' %}"></script>

{# Подключаем модули для управления формой сотрудника #}
<script type="module">
  import { initEmployeeForm } from '{% static "js/components/employeeFormHandler.js" %}';
  import { initPositionManager } from '{% static "js/components/positionManager.js" %}';
  import { initPositionGroupPicker, initPositionEditGroupPicker } from '{% static "js/components/groupPickers.js" %}';
  import { initEmployeeGroupsManager } from '{% static "js/components/employeeGroupsManager.js" %}';
  import { initAvatarCropper } from '{% static "js/components/avatarCropperHandler.js" %}';
  
  // Инициализация после полной загрузки DOM
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAll);
  } else {
    // DOM уже загружен
    initAll();
  }
  
  function initAll() {
    const employeeForm = initEmployeeForm();
    const positionMgr = initPositionManager();
    const groupPicker = initPositionGroupPicker();
    const editGroupPicker = initPositionEditGroupPicker();
    const groupsMgr = initEmployeeGroupsManager();
    
    // Экспортируем в window для обратной совместимости (только если инициализированы)
    if (employeeForm) window.employeeForm = employeeForm;
    if (positionMgr) window.positionManager = positionMgr;
    if (groupPicker) window.groupPicker = groupPicker;
    if (editGroupPicker) window.editGroupPicker = editGroupPicker;
    if (groupsMgr) window.employeeGroupsManager = groupsMgr;
    
    // Инициализация Avatar Cropper для FaceID
    initAvatarCropper({
      fileInputSelector: '#avatarInput',
      previewImageId: 'avatarPreview',
      modalId: 'avatarCropperModal'
    });
    
    // Инициализация удаления аватара
    initAvatarRemover();
  }
  
  // Обработка удаления аватара
  function initAvatarRemover() {
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');
    const removeBtn = document.getElementById('removeAvatarBtn');
    
    if (!removeBtn) return;
    
    // Удаление фото
    removeBtn.addEventListener('click', async () => {
        if (!confirm('Удалить фотографию?')) return;
        
        try {
          const form = document.getElementById('apiEditForm');
          const endpoint = form?.dataset?.endpoint;
          if (!endpoint) {
            alert('Ошибка: не указан endpoint');
            return;
          }
          
          const response = await fetch(endpoint, {
            method: 'PATCH',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
            },
            body: JSON.stringify({ avatar: null })
          });
          
          if (response.ok) {
            // Заменяем изображение на placeholder
            const placeholder = document.createElement('div');
            placeholder.id = 'avatarPreview';
            placeholder.className = 'rounded d-flex align-items-center justify-content-center bg-light text-muted';
            placeholder.style.cssText = 'width: 120px; height: 120px; border: 2px solid #dee2e6;';
            placeholder.innerHTML = '<i class="bi-person fs-1"></i>';
            
            document.getElementById('avatarPreview').replaceWith(placeholder);
            removeBtn.remove();
            avatarInput.value = '';
            
            alert('Фотография удалена');
          } else {
            const data = await response.json();
            alert('Ошибка: ' + (data.error || 'Не удалось удалить фото'));
          }
        } catch (err) {
          console.error('Avatar remove error:', err);
          alert('Ошибка при удалении фото');
        }
    });
  }
</script>