{% extends "base.html" %}
{% load static %}

{% block title %}Оборудование{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
<link rel="stylesheet" href="{% static 'css/components/procurement.css' %}">
{% endblock %}

{% block content %}

  {# ===== ШАПКА СТРАНИЦЫ ===== #}
  {% include "includes/components/page_header.html" with icon="bi-laptop" title="Оборудование" search_id="eqSearch" search_placeholder="Поиск по названию или инв. номеру..." has_filters=True filters_target="eqFilters" filters_template="procurement/_equipment_filters.html" create_as_card=True create_modal="equipmentCreateModal" create_text="Добавить оборудование"  %}

  {# ===== СЕТКА ОБОРУДОВАНИЯ ===== #}
  <div class="proc-equipment-grid" id="equipmentGrid">
    {% if equipment_list %}
      {% for item in equipment_list %}
      <div class="proc-equipment-card" data-id="{{ item.id }}">
        <div class="proc-equipment-header">
          <div class="proc-equipment-icon">
            {% if item.category.name == 'Компьютеры' or 'ноутбук' in item.name|lower %}
              <i class="bi-laptop"></i>
            {% elif 'монитор' in item.name|lower %}
              <i class="bi-display"></i>
            {% elif 'принтер' in item.name|lower %}
              <i class="bi-printer"></i>
            {% elif 'телефон' in item.name|lower %}
              <i class="bi-phone"></i>
            {% elif 'сервер' in item.name|lower %}
              <i class="bi-hdd-rack"></i>
            {% else %}
              <i class="bi-pc-display-horizontal"></i>
            {% endif %}
          </div>
          <div class="proc-equipment-info">
            <div class="proc-equipment-name">
              <a href="{% url 'procurement_frontend:equipment_detail' item.id %}" class="text-decoration-none">
                {{ item.name }}
              </a>
            </div>
            <div class="proc-equipment-inv">{{ item.inventory_number }}</div>
          </div>
          <div class="dropdown">
            <button class="btn btn-sm btn-link text-muted" type="button" data-bs-toggle="dropdown">
              <i class="bi-three-dots-vertical"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <a class="dropdown-item" href="{% url 'procurement_frontend:equipment_detail' item.id %}">
                  <i class="bi-eye me-2"></i>Просмотр
                </a>
              </li>
              {% if can_manage %}
              <li>
                <a class="dropdown-item edit-equipment-btn" href="#" data-bs-toggle="modal" data-bs-target="#equipmentEditModal" data-id="{{ item.id }}">
                  <i class="bi-pencil me-2"></i>Редактировать
                </a>
              </li>
              {% endif %}
              <li>
                <a class="dropdown-item" href="{% url 'api:v1:equipment-qr-code' item.id %}" target="_blank">
                  <i class="bi-qr-code me-2"></i>QR-код
                </a>
              </li>
              {% if can_manage %}
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#transferModal" data-id="{{ item.id }}">
                  <i class="bi-arrow-left-right me-2"></i>Перевести
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#maintenanceModal" data-id="{{ item.id }}">
                  <i class="bi-wrench me-2"></i>Обслуживание
                </a>
              </li>
              {% endif %}
            </ul>
          </div>
        </div>
        
        <div class="proc-equipment-body">
          <div class="proc-equipment-meta">
            {% if item.category %}
            <div class="proc-equipment-meta-item">
              <i class="bi-tag"></i>
              <span>{{ item.category.name }}</span>
            </div>
            {% endif %}
            
            {% if item.department %}
            <div class="proc-equipment-meta-item">
              <i class="bi-building"></i>
              <span>{{ item.department.name }}</span>
            </div>
            {% endif %}
            
            {% if item.responsible_person %}
            <div class="proc-equipment-meta-item">
              <i class="bi-person"></i>
              <span>{{ item.responsible_person.get_full_name }}</span>
            </div>
            {% endif %}
            
            {% if item.location %}
            <div class="proc-equipment-meta-item">
              <i class="bi-geo-alt"></i>
              <span>{{ item.location }}</span>
            </div>
            {% endif %}
          </div>
        </div>
        
        <div class="proc-equipment-footer">
          {% include "procurement/_equipment_status.html" with status=item.status %}
          
          <div class="text-muted small">
            {{ item.purchase_date|date:"d.m.Y" }}
          </div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="col-12">
        <div class="text-center py-5 text-muted">
          <i class="bi-inbox fs-1 d-block mb-2"></i>
          <p class="mb-0">Оборудование не найдено</p>
        </div>
      </div>
    {% endif %}
  </div>
  
  {# Пагинация #}
  {% if page_obj %}
  <div class="d-flex justify-content-center mt-4">
    <nav aria-label="Страницы">
      <ul class="pagination">
        {% if page_obj.has_previous %}
          <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
              <i class="bi-chevron-left"></i>
            </a>
          </li>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
          {% if page_obj.number == num %}
            <li class="page-item active"><span class="page-link">{{ num }}</span></li>
          {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
          {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
          <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">
              <i class="bi-chevron-right"></i>
            </a>
          </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}

{# ===== МОДАЛКА СОЗДАНИЯ ОБОРУДОВАНИЯ ===== #}
<div class="modal fade" id="equipmentCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <form class="modal-content" id="equipmentCreateForm">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-plus-circle me-2"></i>Добавить оборудование
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label">Название <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control" 
                   placeholder="Например: Ноутбук Dell Latitude 5420" required maxlength="255">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Категория <span class="text-danger">*</span></label>
            <select name="category" class="form-select" required>
              <option value="">Выберите...</option>
              {% for cat in categories %}
                <option value="{{ cat.id }}">{{ cat.name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Инвентарный номер <span class="text-danger">*</span></label>
            <input type="text" name="inventory_number" class="form-control" 
                   placeholder="INV-2024-0001" required maxlength="50">
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Серийный номер</label>
            <input type="text" name="serial_number" class="form-control" 
                   placeholder="SN123456789" maxlength="100">
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Отдел <span class="text-danger">*</span></label>
            <select name="department" class="form-select" required>
              <option value="">Выберите...</option>
              {% for dept in departments %}
                <option value="{{ dept.id }}">{{ dept.name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Ответственный</label>
            <select name="responsible_person" class="form-select">
              <option value="">Не назначен</option>
              {% for user in users %}
                <option value="{{ user.id }}">{{ user.get_full_name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-12">
            <label class="form-label">Расположение</label>
            <input type="text" name="location" class="form-control" 
                   placeholder="Например: Офис 3.14, Стеллаж А-5" maxlength="255">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Дата покупки <span class="text-danger">*</span></label>
            <input type="date" name="purchase_date" class="form-control" required>
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Гарантия до</label>
            <input type="date" name="warranty_until" class="form-control">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Стоимость <span class="text-danger">*</span></label>
            <div class="input-group">
              <input type="number" name="purchase_cost" class="form-control" 
                     placeholder="0.00" min="0.01" step="0.01" required>
              <span class="input-group-text">₽</span>
            </div>
          </div>
          
          <div class="col-12">
            <label class="form-label">Примечания</label>
            <textarea name="notes" class="form-control" rows="2" 
                      placeholder="Дополнительная информация..."></textarea>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-primary">
          <i class="bi-check-lg me-1"></i>Добавить
        </button>
      </div>
    </form>
  </div>
</div>

{# ===== МОДАЛКА РЕДАКТИРОВАНИЯ ОБОРУДОВАНИЯ ===== #}
<div class="modal fade" id="equipmentEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <form class="modal-content" id="equipmentEditForm">
      {% csrf_token %}
      <input type="hidden" name="equipment_id" id="editEquipmentId">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-pencil me-2"></i>Редактировать оборудование
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label">Название <span class="text-danger">*</span></label>
            <input type="text" name="name" id="editName" class="form-control" required maxlength="255">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Категория <span class="text-danger">*</span></label>
            <select name="category" id="editCategory" class="form-select" required>
              {% for cat in categories %}
                <option value="{{ cat.id }}">{{ cat.name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Инвентарный номер <span class="text-danger">*</span></label>
            <input type="text" name="inventory_number" id="editInventoryNumber" class="form-control" required maxlength="50">
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Серийный номер</label>
            <input type="text" name="serial_number" id="editSerialNumber" class="form-control" maxlength="100">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Статус <span class="text-danger">*</span></label>
            <select name="status" id="editStatus" class="form-select" required>
              <option value="available">Доступно</option>
              <option value="in_use">В использовании</option>
              <option value="maintenance">На обслуживании</option>
              <option value="retired">Списано</option>
            </select>
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Отдел <span class="text-danger">*</span></label>
            <select name="department" id="editDepartment" class="form-select" required>
              {% for dept in departments %}
                <option value="{{ dept.id }}">{{ dept.name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Ответственный</label>
            <select name="responsible_person" id="editResponsiblePerson" class="form-select">
              <option value="">Не назначен</option>
              {% for user in users %}
                <option value="{{ user.id }}">{{ user.get_full_name }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div class="col-12">
            <label class="form-label">Расположение</label>
            <input type="text" name="location" id="editLocation" class="form-control" maxlength="255">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Дата покупки <span class="text-danger">*</span></label>
            <input type="date" name="purchase_date" id="editPurchaseDate" class="form-control" required>
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Гарантия до</label>
            <input type="date" name="warranty_until" id="editWarrantyUntil" class="form-control">
          </div>
          
          <div class="col-md-4">
            <label class="form-label">Стоимость <span class="text-danger">*</span></label>
            <div class="input-group">
              <input type="number" name="purchase_cost" id="editPurchaseCost" class="form-control" min="0.01" step="0.01" required>
              <span class="input-group-text">₽</span>
            </div>
          </div>
          
          <div class="col-12">
            <label class="form-label">Примечания</label>
            <textarea name="notes" id="editNotes" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-primary">
          <i class="bi-check-lg me-1"></i>Сохранить изменения
        </button>
      </div>
    </form>
  </div>
</div>

{# ===== МОДАЛКА ПЕРЕВОДА ===== #}
<div class="modal fade" id="transferModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="transferForm">
      {% csrf_token %}
      <input type="hidden" name="equipment_id" id="transferEquipmentId">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-arrow-left-right me-2"></i>Перевод оборудования
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">В отдел</label>
          <select name="to_department" class="form-select" id="transferDepartment">
            <option value="">Без изменений</option>
            {% for dept in departments %}
              <option value="{{ dept.id }}">{{ dept.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Новый ответственный</label>
          <select name="to_person" class="form-select" id="transferPerson">
            <option value="">Без изменений</option>
            {# Загружается динамически #}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Причина перевода</label>
          <textarea name="reason" class="form-control" rows="2" placeholder="Укажите причину..."></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-primary">
          <i class="bi-check-lg me-1"></i>Перевести
        </button>
      </div>
    </form>
  </div>
</div>

{# ===== МОДАЛКА ОБСЛУЖИВАНИЯ ===== #}
<div class="modal fade" id="maintenanceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="maintenanceForm">
      {% csrf_token %}
      <input type="hidden" name="equipment_id" id="maintenanceEquipmentId">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-wrench me-2"></i>Запись об обслуживании
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Тип обслуживания</label>
          <select name="type" class="form-select" required>
            <option value="inspection">Осмотр/проверка</option>
            <option value="maintenance">Плановое ТО</option>
            <option value="repair">Ремонт</option>
            <option value="upgrade">Модернизация</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Описание работ</label>
          <textarea name="description" class="form-control" rows="3" 
                    placeholder="Опишите выполненные работы..." required></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Стоимость</label>
          <div class="input-group">
            <input type="number" name="cost" class="form-control" placeholder="0" min="0" step="0.01">
            <span class="input-group-text">₽</span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-primary">
          <i class="bi-check-lg me-1"></i>Сохранить
        </button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  // Поиск по оборудованию
  const searchInput = document.getElementById('eqSearch');
  if (searchInput) {
    searchInput.addEventListener('input', debounce((e) => {
      const query = e.target.value.toLowerCase();
      document.querySelectorAll('.proc-equipment-card').forEach(card => {
        const name = card.querySelector('.proc-equipment-name')?.textContent.toLowerCase() || '';
        const inv = card.querySelector('.proc-equipment-inv')?.textContent.toLowerCase() || '';
        const match = name.includes(query) || inv.includes(query);
        card.style.display = match ? '' : 'none';
      });
    }, 300));
  }
  
  // Модалка перевода - заполняем ID
  document.getElementById('transferModal')?.addEventListener('show.bs.modal', (e) => {
    const btn = e.relatedTarget;
    const id = btn?.dataset.id;
    if (id) document.getElementById('transferEquipmentId').value = id;
  });
  
  // Модалка обслуживания - заполняем ID
  document.getElementById('maintenanceModal')?.addEventListener('show.bs.modal', (e) => {
    const btn = e.relatedTarget;
    const id = btn?.dataset.id;
    if (id) document.getElementById('maintenanceEquipmentId').value = id;
  });
  
  // Отправка формы перевода
  document.getElementById('transferForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const id = form.querySelector('#transferEquipmentId').value;
    const data = {
      to_department: form.querySelector('#transferDepartment').value || null,
      to_person: form.querySelector('#transferPerson').value || null,
      reason: form.querySelector('[name="reason"]').value
    };
    
    try {
      const resp = await fetch(`/api/procurement/equipment/${id}/transfer/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': form.querySelector('[name="csrfmiddlewaretoken"]').value
        },
        body: JSON.stringify(data)
      });
      
      if (resp.ok) {
        bootstrap.Modal.getInstance(document.getElementById('transferModal')).hide();
        window.location.reload();
      } else {
        const err = await resp.json();
        alert(err.error || 'Ошибка перевода');
      }
    } catch (e) {
      console.error(e);
      alert('Ошибка сети');
    }
  });
  
  // Отправка формы обслуживания
  document.getElementById('maintenanceForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const id = form.querySelector('#maintenanceEquipmentId').value;
    const data = {
      type: form.querySelector('[name="type"]').value,
      description: form.querySelector('[name="description"]').value,
      cost: form.querySelector('[name="cost"]').value || null
    };
    
    try {
      const resp = await fetch(`/api/procurement/equipment/${id}/add_maintenance/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': form.querySelector('[name="csrfmiddlewaretoken"]').value
        },
        body: JSON.stringify(data)
      });
      
      if (resp.ok) {
        bootstrap.Modal.getInstance(document.getElementById('maintenanceModal')).hide();
        alert('Запись добавлена');
        form.reset();
      } else {
        const err = await resp.json();
        alert(err.error || 'Ошибка сохранения');
      }
    } catch (e) {
      console.error(e);
      alert('Ошибка сети');
    }
  });

  // === СОЗДАНИЕ ОБОРУДОВАНИЯ ===
  document.getElementById('equipmentCreateForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const submitBtn = form.querySelector('[type="submit"]');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    
    // Убираем пустые значения
    Object.keys(data).forEach(key => {
      if (data[key] === '') delete data[key];
    });
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Создание...';
    
    try {
      const resp = await fetch('/api/procurement/equipment/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        },
        body: JSON.stringify(data)
      });
      
      if (resp.ok) {
        const result = await resp.json();
        bootstrap.Modal.getInstance(document.getElementById('equipmentCreateModal')).hide();
        form.reset();
        // Перезагрузить страницу или добавить в список
        window.location.href = `/procurement/equipment/${result.id}/`;
      } else {
        const err = await resp.json();
        let errorMsg = 'Ошибка создания';
        if (err.inventory_number) {
          errorMsg = 'Инвентарный номер уже существует';
        } else if (err.detail) {
          errorMsg = err.detail;
        }
        alert(errorMsg);
      }
    } catch (e) {
      console.error(e);
      alert('Ошибка сети');
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="bi-check-lg me-1"></i>Добавить';
    }
  });

  // === РЕДАКТИРОВАНИЕ ОБОРУДОВАНИЯ ===
  // Загрузка данных при открытии модала
  document.getElementById('equipmentEditModal')?.addEventListener('show.bs.modal', async (e) => {
    const button = e.relatedTarget;
    const equipmentId = button.getAttribute('data-id');
    
    if (!equipmentId) return;
    
    document.getElementById('editEquipmentId').value = equipmentId;
    
    try {
      const resp = await fetch(`/api/procurement/equipment/${equipmentId}/`);
      if (resp.ok) {
        const eq = await resp.json();
        
        document.getElementById('editName').value = eq.name || '';
        document.getElementById('editInventoryNumber').value = eq.inventory_number || '';
        document.getElementById('editSerialNumber').value = eq.serial_number || '';
        document.getElementById('editCategory').value = eq.category || '';
        document.getElementById('editStatus').value = eq.status || 'available';
        document.getElementById('editDepartment').value = eq.department || '';
        document.getElementById('editResponsiblePerson').value = eq.responsible_person || '';
        document.getElementById('editLocation').value = eq.location || '';
        document.getElementById('editPurchaseDate').value = eq.purchase_date || '';
        document.getElementById('editWarrantyUntil').value = eq.warranty_until || '';
        document.getElementById('editPurchaseCost').value = eq.purchase_cost || '';
        document.getElementById('editNotes').value = eq.notes || '';
      } else {
        alert('Ошибка загрузки данных');
      }
    } catch (e) {
      console.error(e);
      alert('Ошибка сети');
    }
  });

  // Сохранение изменений
  document.getElementById('equipmentEditForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const submitBtn = form.querySelector('[type="submit"]');
    const equipmentId = form.querySelector('#editEquipmentId').value;
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    delete data.equipment_id; // Убираем служебное поле
    
    // Убираем пустые значения
    Object.keys(data).forEach(key => {
      if (data[key] === '') data[key] = null;
    });
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Сохранение...';
    
    try {
      const resp = await fetch(`/api/procurement/equipment/${equipmentId}/`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        },
        body: JSON.stringify(data)
      });
      
      if (resp.ok) {
        bootstrap.Modal.getInstance(document.getElementById('equipmentEditModal')).hide();
        // Перезагрузить страницу
        window.location.reload();
      } else {
        const err = await resp.json();
        let errorMsg = 'Ошибка сохранения';
        if (err.inventory_number) {
          errorMsg = 'Инвентарный номер уже существует';
        } else if (err.detail) {
          errorMsg = err.detail;
        }
        alert(errorMsg);
      }
    } catch (e) {
      console.error(e);
      alert('Ошибка сети');
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="bi-check-lg me-1"></i>Сохранить изменения';
    }
  });
</script>
{% endblock %}