{% extends 'base.html' %}
{% load static filter_tags %}

{% block title %}Заказы{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'orders/css/date_filter.css' %}">
<style>
.order-summary-cell {
    max-width: 280px;
}
.order-summary-text {
    word-break: break-word;
    white-space: pre-wrap;
    color: #212529;
}
.table td {
    vertical-align: middle;
}
.table tbody tr {
    border-bottom: 2px solid #dee2e6;
}
.table tbody tr:last-child {
    border-bottom: none;
}
.table tbody tr[data-edit-url] {
    cursor: pointer;
}
</style>
{% endblock %}

{% block content %}
    <!-- Контейнер для динамических alert-сообщений -->
    <div id="js-alert-container"></div>

    <!-- Фильтры сверху -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="bi bi-funnel-fill"></i> Фильтры
            </h5>
        </div>
        <div class="card-body">
            <form method="get" id="order-filter-form">
                <div class="row g-3">
                    <!-- Поиск -->
                    <div class="col-md-3">
                        <label for="{{ filter.form.search.id_for_label }}" class="form-label">
                            <i class="bi bi-search"></i> Поиск
                        </label>
                        {{ filter.form.search }}
                    </div>

                    <!-- Статус -->
                    <div class="col-md-2">
                        <label for="{{ filter.form.status.id_for_label }}" class="form-label">
                            <i class="bi bi-flag"></i> Статус
                        </label>
                        {{ filter.form.status }}
                    </div>

                    <!-- Тип доставки -->
                    <div class="col-md-2">
                        <label for="{{ filter.form.delivery_type.id_for_label }}" class="form-label">
                            <i class="bi bi-box"></i> Тип
                        </label>
                        {{ filter.form.delivery_type }}
                    </div>

                    <!-- Статус оплаты -->
                    <div class="col-md-2">
                        <label for="{{ filter.form.payment_status.id_for_label }}" class="form-label">
                            <i class="bi bi-credit-card"></i> Оплата
                        </label>
                        {{ filter.form.payment_status }}
                    </div>

                    <!-- Кнопки -->
                    <div class="col-12 col-md-3 d-flex flex-column flex-md-row align-items-stretch align-items-md-end gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="bi bi-check-circle"></i> Применить
                        </button>
                        <a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary flex-grow-1">
                            <i class="bi bi-x-circle"></i> Сбросить
                        </a>
                    </div>
                </div>

                <!-- Тумблер "Включая завершённые" -->
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="show_all_orders" class="form-check-input" id="id_show_all_orders"
                                   {% if request.GET.show_all_orders %}checked{% endif %}>
                            <label class="form-check-label" for="id_show_all_orders">
                                Включая завершённые
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Календарный фильтр по дате доставки (вторая строка) -->
                <div class="row mt-3">
                    <div class="col-12">
                        {% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки/самовывоза" icon="truck" %}
                    </div>
                </div>
            </form>

            <!-- Кнопка создания заказа (вне формы) -->
            <div class="row mt-3">
                <div class="col-12">
                    <a href="{% url 'orders:order-create' %}" class="btn btn-success w-100">
                        <i class="bi bi-plus-circle"></i> Создать заказ
                    </a>
                </div>
            </div>
        </div>
    </div>
</div> <!-- Закрываем контейнер из base.html -->

<!-- Таблица заказов на всю ширину -->
<div class="container-fluid px-2 px-md-3 px-lg-4">
    <div class="card">
        <div class="card-body p-2 p-md-3">
            {% if page_obj %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Дата</th>
                            <th>Время</th>
                            <th>Тип</th>
                            <th>Резюме</th>
                            <th>Статус</th>
                            <th>Сумма</th>
                            <th>Оплата</th>
                            <th>Действия</th>
                            <th>Номер заказа</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in page_obj %}
                        <tr {% if order.status and order.status.is_negative_end and order.amount_paid > 0 %}class="table-warning"{% endif %}
                            data-edit-url="{% url 'orders:order-update' order.order_number %}">
                            <td>
                                {% if order.delivery_date %}
                                    {{ order.delivery_date|date:"d.m.Y" }}
                                {% else %}
                                    <span class="text-muted">Не указано</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if order.delivery_time_start %}
                                    <small class="text-muted">{{ order.delivery_time_window }}</small>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if order.is_delivery %}
                                    <span class="badge bg-info">Доставка</span>
                                {% else %}
                                    <span class="badge bg-secondary">Самовывоз</span>
                                {% endif %}
                            </td>
                            <td class="order-summary-cell">
                                {% if order.summary %}
                                    <div class="order-summary-text">{{ order.summary|safe }}</div>
                                {% else %}
                                    <span class="text-muted">&mdash;</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="js-status-container" data-order-number="{{ order.order_number }}">
                                    <span class="badge badge-lg js-status-badge" style="{% if order.status %}background-color: {{ order.status.color }}; color: #fff;{% else %}background-color: #6c757d; color: #fff;{% endif %} cursor: pointer; font-size: 0.9rem; padding: 0.5rem 0.75rem;" title="Кликните для изменения">
                                        {% if order.status %}
                                            {{ order.status.label|default:order.status.name }}
                                        {% else %}
                                            Не установлен
                                        {% endif %}
                                    </span>
                                    <select class="form-select form-select-sm js-status-select" style="display: none;">
                                        {% for s in status_choices %}
                                            <option value="{{ s.pk }}" data-color="{{ s.color }}" data-label="{{ s.label|default:s.name }}" {% if order.status_id == s.pk %}selected{% endif %}>
                                                {{ s.label|default:s.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </td>
                            <td><strong>{{ order.total_amount }} руб.</strong></td>
                            <td>
                                {% if order.is_paid %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle"></i> Оплачен
                                    </span>
                                {% elif order.status and order.status.is_negative_end and order.amount_paid > 0 %}
                                    <span class="badge bg-warning text-dark" style="border: 3px solid #dc3545 !important; box-shadow: 0 0 0 1px #dc3545;" title="Требуется возврат: {{ order.amount_paid|floatformat:2 }} руб.">
                                        <i class="bi bi-exclamation-triangle"></i> Возврат <strong style="color: #dc3545;">({{ order.amount_paid|floatformat:2 }} руб.)</strong>
                                    </span>
                                {% elif order.amount_paid > 0 %}
                                    <span class="badge bg-warning">
                                        <i class="bi bi-exclamation-circle"></i> Частично ({{ order.amount_paid }} руб.)
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle"></i> Не оплачен
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{% url 'orders:order-detail' order.order_number %}"
                                   class="btn btn-sm btn-outline-primary"
                                   title="Просмотр">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{% url 'orders:order-update' order.order_number %}"
                                   class="btn btn-sm btn-outline-secondary"
                                   title="Редактировать">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            </td>
                            <td>
                                <a href="{% url 'orders:order-detail' order.order_number %}" class="text-decoration-none">
                                    <strong>{{ order.order_number }}</strong>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Пагинация -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Навигация по страницам" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?{% param_replace page=1 %}">
                            Первая
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?{% param_replace page=page_obj.previous_page_number %}">
                            Назад
                        </a>
                    </li>
                    {% endif %}

                    <li class="page-item active">
                        <span class="page-link">
                            Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
                        </span>
                    </li>

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?{% param_replace page=page_obj.next_page_number %}">
                            Вперед
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?{% param_replace page=page_obj.paginator.num_pages %}">
                            Последняя
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}

            {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> Заказы не найдены.
                <a href="{% url 'orders:order-create' %}">Создать первый заказ</a>
            </div>
            {% endif %}
        </div>
    </div>
</div> <!-- Закрываем container-fluid таблицы -->
<div class="container"> <!-- Открываем контейнер обратно для base.html -->
{% endblock %}

{% block extra_js %}
<script src="{% static 'orders/js/date_filter.js' %}"></script>
<script>
(function() {
  const csrfToken = '{{ csrf_token }}';

  // Функция для показа Bootstrap alert
  function showAlert(message, type = 'danger') {
    const container = document.getElementById('js-alert-container');
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.setAttribute('role', 'alert');
    alertDiv.innerHTML = `
      <i class="bi bi-exclamation-triangle-fill"></i> ${message}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    container.appendChild(alertDiv);
    
    // Авто-скрытие через 5 секунд
    setTimeout(() => {
      alertDiv.classList.remove('show');
      setTimeout(() => alertDiv.remove(), 150);
    }, 5000);
    
    // Прокрутка к верху страницы
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  async function updateStatus(orderNumber, statusId) {
    const body = new URLSearchParams({ status_id: statusId }).toString();
    const resp = await fetch(`/orders/api/${orderNumber}/set-status/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'X-CSRFToken': csrfToken
      },
      body
    });
    return resp.json();
  }

  document.querySelectorAll('.js-status-container').forEach(function(container) {
    const badge = container.querySelector('.js-status-badge');
    const select = container.querySelector('.js-status-select');
    const orderNumber = container.dataset.orderNumber;

    // Click on badge: show select
    badge.addEventListener('click', function() {
      badge.style.display = 'none';
      select.style.display = 'inline-block';
      select.focus();
      // Open dropdown programmatically
      if (select.showPicker) {
        select.showPicker();
      } else {
        // Fallback for browsers without showPicker
        select.click();
      }
    });

    // Change status
    select.addEventListener('change', async function() {
      const statusId = select.value || '';
      const selectedOption = select.options[select.selectedIndex];
      const originalIndex = select.selectedIndex;
      select.disabled = true;

      try {
        const result = await updateStatus(orderNumber, statusId);
        if (result.success) {
          // Update badge
          const newColor = selectedOption.dataset.color || '#6c757d';
          const newLabel = selectedOption.dataset.label || 'Не установлен';
          badge.style.backgroundColor = newColor;
          badge.style.color = '#fff';
          badge.textContent = newLabel;

          // Show badge, hide select
          select.style.display = 'none';
          badge.style.display = 'inline-block';
        } else {
          // Показываем красивый Bootstrap alert
          showAlert(result.error || 'Не удалось обновить статус', 'danger');
          // Возвращаем предыдущее значение
          select.selectedIndex = originalIndex;
          // Прячем select, показываем badge
          select.style.display = 'none';
          badge.style.display = 'inline-block';
        }
      } catch (e) {
        showAlert('Ошибка сервера при обновлении статуса', 'danger');
        // Возвращаем предыдущее значение
        select.selectedIndex = originalIndex;
        select.style.display = 'none';
        badge.style.display = 'inline-block';
      } finally {
        select.disabled = false;
      }
    });

    // Click outside or blur: hide select, show badge
    select.addEventListener('blur', function() {
      setTimeout(function() {
        select.style.display = 'none';
        badge.style.display = 'inline-block';
      }, 200);
    });
  });

  // Двойной клик на строку для перехода к редактированию
  document.querySelectorAll('tbody tr[data-edit-url]').forEach(function(row) {
    row.addEventListener('dblclick', function() {
      const editUrl = this.dataset.editUrl;
      if (editUrl) {
        window.location.href = editUrl;
      }
    });
  });

  // Тумблер "Включая завершённые" - автоматическая отправка формы
  const showAllOrdersSwitch = document.getElementById('id_show_all_orders');
  const filterForm = document.getElementById('order-filter-form');
  if (showAllOrdersSwitch && filterForm) {
    showAllOrdersSwitch.addEventListener('change', function() {
      filterForm.submit();
    });
  }
})();
</script>
{% endblock %}
