{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
  <!-- Скрытое поле для CSRF токена (нужно для AJAX запросов) -->
  <div style="display: none;">
    {% csrf_token %}
  </div>
  <!-- Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h1 class="mb-2">
            <i class="bi bi-flower1 text-primary me-2"></i>Витрины
          </h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{% url 'inventory:inventory-home' %}">Склад</a></li>
              <li class="breadcrumb-item active">Витрины</li>
            </ol>
          </nav>
        </div>
        <div>
          <a href="{% url 'inventory:showcase-create' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Создать витрину
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="row mb-3">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <form method="get" class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Склад</label>
              <select name="warehouse" class="form-select">
                <option value="">Все склады</option>
                {% for warehouse in warehouses %}
                <option value="{{ warehouse.id }}" {% if request.GET.warehouse == warehouse.id|stringformat:"s" %}selected{% endif %}>
                  {{ warehouse.name }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Статус</label>
              <select name="is_active" class="form-select">
                <option value="">Все</option>
                <option value="1" {% if request.GET.is_active == "1" %}selected{% endif %}>Только активные</option>
                <option value="0" {% if request.GET.is_active == "0" %}selected{% endif %}>Только неактивные</option>
              </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
              <button type="submit" class="btn btn-secondary me-2">
                <i class="bi bi-funnel me-1"></i>Применить
              </button>
              <a href="{% url 'inventory:showcase-list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-1"></i>Сбросить
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Showcases List -->
  <div class="row">
    <div class="col-12">
      {% if showcases %}
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover align-middle">
                <thead class="table-light">
                  <tr>
                    <th style="width: 40px;">✓</th>
                    <th>Название</th>
                    <th>Склад</th>
                    <th>Описание</th>
                    <th class="text-center">Активные резервы</th>
                    <th class="text-center">Статус</th>
                    <th class="text-center">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {% regroup showcases by warehouse as showcases_by_warehouse %}
                  {% for warehouse_group in showcases_by_warehouse %}
                    <!-- Warehouse Header Row -->
                    <tr class="table-secondary">
                      <td colspan="7" class="fw-bold">
                        <i class="bi bi-building me-2"></i>{{ warehouse_group.grouper.name }}
                      </td>
                    </tr>
                    <!-- Showcases in this warehouse -->
                    {% for showcase in warehouse_group.list %}
                    <tr {% if showcase.is_default %}class="table-warning"{% endif %} data-showcase-id="{{ showcase.pk }}" data-warehouse-id="{{ showcase.warehouse.id }}">
                      <td class="text-center">
                        <input type="checkbox" class="default-showcase-checkbox"
                               data-showcase-id="{{ showcase.pk }}"
                               data-warehouse-id="{{ showcase.warehouse.id }}"
                               data-set-default-url="{% url 'inventory:showcase-set-default' showcase.pk %}"
                               {% if showcase.is_default %}checked{% endif %}
                               style="cursor: pointer; width: 18px; height: 18px;">
                      </td>
                      <td>
                        <strong>{{ showcase.name }}</strong>
                        {% if showcase.is_default %}
                          <span class="badge bg-warning text-dark ms-2">По умолчанию</span>
                        {% endif %}
                      </td>
                      <td>
                        <span class="text-muted">{{ showcase.warehouse.name }}</span>
                      </td>
                      <td>
                        {% if showcase.description %}
                          <small class="text-muted">{{ showcase.description|truncatewords:10 }}</small>
                        {% else %}
                          <small class="text-muted fst-italic">—</small>
                        {% endif %}
                      </td>
                      <td class="text-center">
                        {% if showcase.active_reservations_count > 0 %}
                          <span class="badge bg-info">{{ showcase.active_reservations_count }}</span>
                        {% else %}
                          <span class="text-muted">—</span>
                        {% endif %}
                      </td>
                      <td class="text-center">
                        {% if showcase.is_active %}
                          <span class="badge bg-success">Активна</span>
                        {% else %}
                          <span class="badge bg-secondary">Неактивна</span>
                        {% endif %}
                      </td>
                      <td class="text-center">
                        <a href="{% url 'inventory:showcase-update' showcase.pk %}"
                           class="btn btn-sm btn-outline-primary"
                           title="Редактировать">
                          <i class="bi bi-pencil"></i>
                        </a>
                        <a href="{% url 'inventory:showcase-delete' showcase.pk %}"
                           class="btn btn-sm btn-outline-danger ms-1"
                           title="Удалить">
                          <i class="bi bi-trash"></i>
                        </a>
                      </td>
                    </tr>
                    {% endfor %}
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      {% else %}
        <div class="card">
          <div class="card-body text-center py-5">
            <i class="bi bi-flower1 text-muted" style="font-size: 4rem;"></i>
            <h4 class="mt-3 text-muted">Витрин не найдено</h4>
            <p class="text-muted">Создайте первую витрину для выкладки букетов</p>
            <a href="{% url 'inventory:showcase-create' %}" class="btn btn-primary mt-2">
              <i class="bi bi-plus-circle me-1"></i>Создать витрину
            </a>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Обработчик для галочек "По умолчанию"
    const checkboxes = document.querySelectorAll('.default-showcase-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const showcaseId = this.dataset.showcaseId;
            const warehouseId = this.dataset.warehouseId;
            const setDefaultUrl = this.dataset.setDefaultUrl;

            // Получаем CSRF токен
            let csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;

            if (!csrfToken) {
                csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            }

            if (!csrfToken) {
                const name = 'csrftoken';
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                csrfToken = cookieValue;
            }

            // Если галочка установлена, отправляем запрос
            if (this.checked) {
                // Визуально обновляем таблицу сразу (оптимистичное обновление)
                // Снимаем флаги только с витрин того же склада
                document.querySelectorAll(`tr[data-warehouse-id="${warehouseId}"]`).forEach(tr => {
                    const cb = tr.querySelector('.default-showcase-checkbox');
                    if (cb) {
                        cb.checked = false;
                    }
                    tr.classList.remove('table-warning');
                    tr.querySelector('.badge.bg-warning')?.remove();
                });

                // Отмечаем текущую строку
                this.checked = true;
                const currentRow = document.querySelector(`tr[data-showcase-id="${showcaseId}"]`);
                currentRow.classList.add('table-warning');

                // Добавляем бейдж "По умолчанию" если его нет
                const nameCell = currentRow.querySelector('td:nth-child(2)');
                if (!nameCell.querySelector('.badge.bg-warning')) {
                    const badge = document.createElement('span');
                    badge.className = 'badge bg-warning text-dark ms-2';
                    badge.textContent = 'По умолчанию';
                    nameCell.appendChild(badge);
                }

                // Отправляем AJAX запрос
                const headers = {
                    'Content-Type': 'application/json'
                };

                if (csrfToken) {
                    headers['X-CSRFToken'] = csrfToken;
                }

                fetch(setDefaultUrl, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({})
                })
                .then(response => {
                    if (!response.ok) {
                        return response.text().then(text => {
                            throw new Error(`HTTP ${response.status}: ${text}`);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'success') {
                        showNotification(data.message, 'success');
                    } else {
                        throw new Error(data.message);
                    }
                })
                .catch(error => {
                    console.error('Ошибка при запросе:', error);
                    showNotification('Ошибка при установке витрины по умолчанию: ' + error.message, 'error');
                    // Перезагружаем через 2 секунды
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                });
            }
        });
    });

    // Функция для показа уведомлений
    function showNotification(message, type = 'info') {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;

        const container = document.querySelector('.container-fluid');
        const alertElement = document.createElement('div');
        alertElement.innerHTML = alertHtml;
        container.insertBefore(alertElement.firstElementChild, container.firstChild);

        // Автоматически скрываем через 4 секунды
        setTimeout(() => {
            const alert = container.querySelector('.alert');
            if (alert) {
                alert.remove();
            }
        }, 4000);
    }
});
</script>
{% endblock %}
