{% 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-list-ul" title=page_title|default:"Заявки на закупку" search_id="procSearch" search_placeholder="Поиск по названию..." has_filters=True filters_target="procFilters" filters_template="procurement/_filters.html" create_as_card=True create_modal="procCreateModal" create_text="Создать заявку" %}

  {# ===== Tabs для переключения области ===== #}
  {% if show_tabs %}
  <div class="card mb-3">
    <div class="card-body py-2">
      <ul class="nav nav-pills nav-fill" id="scopeTabs">
        <li class="nav-item">
          <a class="nav-link {% if scope == 'mine' %}active{% endif %}" 
             href="#" 
             data-scope="mine"
             role="button">
            <i class="bi-person-circle me-1"></i> Мои заявки
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if scope == 'my_work' %}active{% endif %}" 
             href="#"
             data-scope="my_work"
             role="button">
            <i class="bi-briefcase me-1"></i> Взял в работу
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if scope == 'available' %}active{% endif %}" 
             href="#"
             data-scope="available"
             role="button">
            <i class="bi-check2-circle me-1"></i> Доступные
          </a>
        </li>
        {% if can_view_department %}
        <li class="nav-item">
          <a class="nav-link {% if scope == 'department' %}active{% endif %}" 
             href="#"
             data-scope="department"
             role="button">
            <i class="bi-building me-1"></i> Мой отдел
          </a>
        </li>
        {% endif %}
        {% if can_view_all %}
        <li class="nav-item">
          <a class="nav-link {% if scope == 'all' %}active{% endif %}" 
             href="#"
             data-scope="all"
             role="button">
            <i class="bi-globe me-1"></i> Все заявки
          </a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
  {% endif %}

  {# ===== СПИСОК ЗАЯВОК ===== #}
  <div class="card mb-4">
    <div class="proc-table-header d-none d-lg-block">
      <div class="proc-table-row">
        <div class="proc-cell"></div>
        <div class="proc-cell"><h6 class="mb-0 text-secondary">Заявка</h6></div>
        <div class="proc-cell"><h6 class="mb-0 text-secondary">Отдел</h6></div>
        <div class="proc-cell"><h6 class="mb-0 text-secondary">Сумма</h6></div>
        <div class="proc-cell"><h6 class="mb-0 text-secondary">Статус</h6></div>
        <div class="proc-cell"><h6 class="mb-0 text-secondary">Дата</h6></div>
      </div>
    </div>
    
    <div id="procListContent">
      <div class="text-center py-5 text-muted">
        <div class="spinner-border text-primary"></div>
        <p class="mt-2">Загрузка...</p>
      </div>
    </div>
  </div>

{# ===== МОДАЛКА СОЗДАНИЯ ===== #}
<div class="modal fade" id="procCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <form class="modal-content" id="procCreateForm">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-cart-plus 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-12">
            <label class="form-label">Название заявки <span class="text-danger">*</span></label>
            <input type="text" name="title" class="form-control" 
                   placeholder="Например: Закупка ноутбуков для отдела" required maxlength="255">
          </div>
          
          <div class="col-12">
            <label class="form-label">Описание / обоснование</label>
            <textarea name="description" class="form-control" rows="3" 
                      placeholder="Опишите необходимость закупки..." maxlength="2000"></textarea>
          </div>
          
          <div class="col-12">
            <label class="form-label">Отдел <span class="text-danger">*</span></label>
            <select name="department" class="form-select" required>
              <option value="">Выберите отдел...</option>
              <!-- Загрузится через JS -->
            </select>
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Срочность <span class="text-danger">*</span></label>
            <select name="urgency" class="form-select" required>
              <option value="low">🟢 Низкая</option>
              <option value="medium" selected>🟡 Средняя</option>
              <option value="high">🟠 Высокая</option>
              <option value="critical">🔴 Критическая</option>
            </select>
          </div>
          
          <div class="col-md-6">
            <label class="form-label">Ориентировочная сумма</label>
            <div class="input-group">
              <input type="number" name="estimated_cost" class="form-control" 
                     placeholder="0" min="0" step="0.01">
              <span class="input-group-text">₽</span>
            </div>
          </div>
          
          <div class="col-12">
            <label class="form-label">Желаемая дата получения</label>
            <input type="date" name="desired_date" class="form-control">
          </div>
          
          <div class="col-12">
            <hr class="my-2">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <label class="form-label mb-0">Позиции (товары/услуги)</label>
              <button type="button" class="btn btn-sm btn-outline-primary" id="addItemBtnList">
                <i class="bi-plus-lg me-1"></i>Добавить позицию
              </button>
            </div>
            
            <div id="itemsListReq" class="mb-2">
              <!-- Позиции будут добавляться динамически -->
            </div>
            
            <div class="text-muted small">
              <i class="bi-info-circle me-1"></i>
              Можно добавить позиции сейчас или после создания заявки
            </div>
          </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>
  // === ЗАГРУЗКА СПИСКА ЗАЯВОК ===
  let currentPage = 1;
  let currentScope = '{{ scope|default:"mine" }}';
  
  // Читаем фильтры из URL
  function getCurrentFilters() {
    const urlParams = new URLSearchParams(window.location.search);
    return {
      status: urlParams.get('status') || '',
      urgency: urlParams.get('urgency') || '',
      period: urlParams.get('period') || ''
    };
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    loadRequests();
    loadDepartmentsForCreate();
    initScopeTabs();
  });
  
  // === ПЕРЕКЛЮЧЕНИЕ ТАБОВ БЕЗ ПЕРЕЗАГРУЗКИ ===
  function initScopeTabs() {
    const tabs = document.querySelectorAll('#scopeTabs .nav-link');
    tabs.forEach(tab => {
      tab.addEventListener('click', (e) => {
        e.preventDefault();
        const newScope = tab.dataset.scope;
        
        // Обновляем активный таб
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        // Обновляем текущий scope и перезагружаем список
        currentScope = newScope;
        currentPage = 1;
        loadRequests();
        
        // Обновляем URL без перезагрузки страницы
        const url = new URL(window.location);
        url.searchParams.set('scope', newScope);
        window.history.pushState({}, '', url);
      });
    });
  }
  
  async function loadRequests(page = 1) {
    try {
      const params = new URLSearchParams({
        page: page,
        page_size: 20,
        ordering: '-created_at'
      });
      
      // Добавляем фильтр по scope
      if (currentScope === 'mine') {
        params.append('scope', 'mine');
      } else if (currentScope === 'department') {
        params.append('scope', 'department');
      } else if (currentScope === 'my_work') {
        params.append('scope', 'my_work');
      } else if (currentScope === 'available') {
        params.append('scope', 'available');
      }
      // Для 'all' не добавляем scope
      
      // Добавляем фильтры из URL
      const filters = getCurrentFilters();
      if (filters.status) params.append('status', filters.status);
      if (filters.urgency) params.append('urgency', filters.urgency);
      if (filters.period) params.append('period', filters.period);
      
      const resp = await fetch(`/api/v1/procurement/requests/?${params}`);
      if (!resp.ok) throw new Error('Failed to load requests');
      
      const data = await resp.json();
      renderRequests(data.results || []);
      renderPagination(data);
      
    } catch (e) {
      console.error('Error loading requests:', e);
      document.getElementById('procListContent').innerHTML = `
        <div class="text-center py-5 text-danger">
          <i class="bi-exclamation-triangle fs-1 d-block mb-2"></i>
          <p>Ошибка загрузки заявок</p>
        </div>
      `;
    }
  }
  
  // Функция для генерации HTML статуса (аналогично _status_badge.html)
  function getStatusBadgeHTML(status) {
    const statusConfig = {
      draft: { icon: 'bi-pencil', text: 'Черновик', class: 'draft' },
      pending: { icon: 'bi-hourglass-split', text: 'На согласовании', class: 'pending' },
      approved: { icon: 'bi-check-circle', text: 'Одобрено', class: 'approved' },
      rejected: { icon: 'bi-x-circle', text: 'Отклонено', class: 'rejected' },
      in_progress: { icon: 'bi-truck', text: 'Заказано', class: 'in_progress' },
      completed: { icon: 'bi-check-all', text: 'Завершено', class: 'completed' },
      cancelled: { icon: 'bi-slash-circle', text: 'Отменено', class: 'cancelled' }
    };

    const config = statusConfig[status] || statusConfig.draft;
    return `<span class="proc-status ${config.class}"><i class="${config.icon} me-1"></i>${config.text}</span>`;
  }
  
  function renderRequests(requests) {
    const container = document.getElementById('procListContent');
    
    if (!requests || !requests.length) {
      container.innerHTML = `
        <div class="text-center py-5 text-muted">
          <i class="bi-inbox fs-1 d-block mb-2"></i>
          <p>Заявок пока нет</p>
        </div>
      `;
      return;
    }
    
    const urgencyIcons = {
      low: 'bi-arrow-down-circle',
      medium: 'bi-dash-circle',
      high: 'bi-arrow-up-circle',
      critical: 'bi-exclamation-triangle-fill'
    };
    
    const html = requests.map(req => {
      const urgIcon = urgencyIcons[req.urgency] || 'bi-dash-circle';
      const date = new Date(req.created_at).toLocaleDateString('ru-RU');
      const cost = req.total_cost ? `${parseFloat(req.total_cost).toLocaleString('ru-RU')} ₽` : '—';
      const deptName = req.department_name || req.department?.name || '—';
      
      return `
        <div class="proc-request-item" data-id="${req.id}">
          <div class="proc-urgency-icon ${req.urgency}">
            <i class="${urgIcon}"></i>
          </div>
          
          <div class="proc-request-info">
            <div class="proc-request-title">
              <a href="/procurement/orders/${req.id}/">${escapeHtml(req.title)}</a>
            </div>
            <div class="proc-request-desc">${escapeHtml((req.description || '').substring(0, 60))}</div>
          </div>
          
          <div class="proc-request-dept">
            <i class="bi-building text-muted me-1"></i>
            ${escapeHtml(deptName)}
          </div>
          
          <div class="proc-request-amount">
            ${cost}
          </div>
          
          <div class="proc-request-status">
            ${getStatusBadgeHTML(req.status)}
          </div>
          
          <div class="proc-request-date">
            ${date}
          </div>
        </div>
      `;
    }).join('');
    
    container.innerHTML = html;
  }
  
  function renderPagination(data) {
    // TODO: Добавить пагинацию если нужно
    currentPage = data.page || 1;
  }
  
  async function loadDepartmentsForCreate() {
    try {
      const resp = await fetch('/api/v1/departments/');
      if (resp.ok) {
        const depts = await resp.json();
        const select = document.querySelector('#procCreateModal select[name="department"]');
        if (select) {
          // Очистим существующие опции кроме placeholder
          select.innerHTML = '<option value="">Выберите отдел...</option>';
          depts.forEach(d => {
            const opt = document.createElement('option');
            opt.value = d.id;
            opt.textContent = d.name;
            select.appendChild(opt);
          });
        }
      }
    } catch (e) {
      console.error('Error loading departments:', e);
    }
  }
  
  function escapeHtml(text) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
  }
  
  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // === УПРАВЛЕНИЕ ПОЗИЦИЯМИ В ЗАЯВКЕ (для request_list) ===
  let itemIndexReq = 0;
  
  // Функция добавления позиции
  function addItemReq() {
    itemIndexReq++;
    const itemHtml = `
      <div class="card mb-2 item-card-req" data-index="${itemIndexReq}">
        <div class="card-body p-3">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <h6 class="card-title mb-0">Позиция #${itemIndexReq}</h6>
            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeItemReq(${itemIndexReq})">
              <i class="bi-x-lg"></i>
            </button>
          </div>
          
          <div class="row g-2">
            <div class="col-12">
              <input type="text" class="form-control form-control-sm item-name-req" 
                     placeholder="Название товара/услуги *" required maxlength="255">
            </div>
            
            <div class="col-12">
              <textarea class="form-control form-control-sm item-description-req" rows="2" 
                        placeholder="Описание (опционально)" maxlength="1000"></textarea>
            </div>
            
            <div class="col-4">
              <input type="number" class="form-control form-control-sm item-quantity-req" 
                     placeholder="Количество *" min="1" step="1" value="1" required>
            </div>
            
            <div class="col-4">
              <input type="text" class="form-control form-control-sm item-unit-req" 
                     placeholder="Ед. изм." value="шт" maxlength="20">
            </div>
            
            <div class="col-4">
              <div class="input-group input-group-sm">
                <input type="number" class="form-control item-price-req" 
                       placeholder="Цена" min="0" step="0.01">
                <span class="input-group-text">₽</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
    
    document.getElementById('itemsListReq').insertAdjacentHTML('beforeend', itemHtml);
  }
  
  // Функция удаления позиции
  function removeItemReq(index) {
    document.querySelector(`.item-card-req[data-index="${index}"]`)?.remove();
  }
  
  // Обработчик кнопки добавления позиции
  document.getElementById('addItemBtnList')?.addEventListener('click', addItemReq);
  
  // Функция сбора данных позиций
  function collectItemsReq() {
    const items = [];
    document.querySelectorAll('.item-card-req').forEach(card => {
      const name = card.querySelector('.item-name-req').value.trim();
      if (name) {
        items.push({
          name: name,
          description: card.querySelector('.item-description-req').value.trim() || '',
          quantity: parseInt(card.querySelector('.item-quantity-req').value) || 1,
          unit: card.querySelector('.item-unit-req').value.trim() || 'шт',
          estimated_unit_price: parseFloat(card.querySelector('.item-price-req').value) || 0
        });
      }
    });
    return items;
  }

  // Обработка создания заявки
  document.getElementById('procCreateForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const form = e.target;
    const submitBtn = form.querySelector('[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Создание...';
    
    try {
      const formData = new FormData(form);
      const items = collectItemsReq();
      
      const data = {
        title: formData.get('title'),
        description: formData.get('description') || '',
        department: formData.get('department'),
        urgency: formData.get('urgency'),
        estimated_cost: formData.get('estimated_cost') || null,
        desired_date: formData.get('desired_date') || null,
      };
      
      // Добавляем позиции, если есть
      if (items.length > 0) {
        data.items = items;
      }
      
      const resp = await fetch('/api/v1/procurement/requests/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        },
        body: JSON.stringify(data)
      });
      
      if (!resp.ok) {
        const err = await resp.json();
        throw new Error(err.detail || JSON.stringify(err));
      }
      
      const request = await resp.json();
      
      // Очистить форму и список позиций
      form.reset();
      document.getElementById('itemsListReq').innerHTML = '';
      itemIndexReq = 0;
      
      // Закрыть модалку
      const modal = bootstrap.Modal.getInstance(document.querySelector('#procCreateModal'));
      modal?.hide();
      
      // Перейти к заявке
      window.location.href = `/procurement/orders/${request.id}/`;
      
    } catch (error) {
      console.error('Error creating request:', error);
      alert('Ошибка создания заявки: ' + error.message);
      submitBtn.disabled = false;
      submitBtn.innerHTML = originalText;
    }
  });
  
  
  // Поиск по заявкам
  const searchInput = document.getElementById('procSearch');
  if (searchInput) {
    searchInput.addEventListener('input', debounce((e) => {
      const query = e.target.value.toLowerCase();
      document.querySelectorAll('.proc-request-item').forEach(item => {
        const title = item.querySelector('.proc-request-title')?.textContent.toLowerCase() || '';
        const desc = item.querySelector('.proc-request-desc')?.textContent.toLowerCase() || '';
        const match = title.includes(query) || desc.includes(query);
        item.style.display = match ? '' : 'none';
      });
    }, 300));
  }
</script>
{% endblock %}