{% extends "store/base.html" %}
{% block title %}Форма менеджера{% endblock %}

{% block content %}
<h4 class="mb-3 fw-bold text-primary"><i class="bi bi-person-badge me-2"></i>Форма менеджера</h4>

<ul class="nav nav-tabs mb-4" id="managerTabs">
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'clients' %}active{% endif %}" href="#tab-clients" data-bs-toggle="tab">
      <i class="bi bi-person-plus me-1"></i>Регистрация клиента
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'order' %}active{% endif %}" href="#tab-order" data-bs-toggle="tab">
      <i class="bi bi-cart-plus me-1"></i>Оформление заказа
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'status' %}active{% endif %}" href="#tab-status" data-bs-toggle="tab">
      <i class="bi bi-clipboard-check me-1"></i>Статус заказа
    </a>
  </li>
</ul>

<div class="tab-content">

  <!-- ── TAB 1: Register Client ─────────────── -->
  <div class="tab-pane fade {% if active_tab == 'clients' %}show active{% endif %}" id="tab-clients">
    <div class="row justify-content-center">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header"><i class="bi bi-person-plus me-2"></i>Регистрация нового клиента</div>
          <div class="card-body p-4">
            <div id="client-errors" class="alert alert-danger d-none"></div>
            <div class="mb-3">
              <label class="form-label fw-semibold">ФИО <span class="text-danger">*</span></label>
              <input type="text" id="cl-name" class="form-control" placeholder="Иванов Иван Иванович">
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold">Телефон <span class="text-danger">*</span></label>
              <input type="text" id="cl-phone" class="form-control" placeholder="+7 999 123-45-67">
            </div>
            <div class="mb-4">
              <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
              <input type="email" id="cl-email" class="form-control" placeholder="client@example.com">
            </div>
            <button class="btn btn-primary w-100" onclick="submitClient()">
              <i class="bi bi-check-circle me-2"></i>Зарегистрировать клиента
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── TAB 2: Place Order ─────────────────── -->
  <div class="tab-pane fade {% if active_tab == 'order' %}show active{% endif %}" id="tab-order">
    <div class="row g-3">

      <!-- Client selection -->
      <div class="col-lg-4">
        <div class="card h-100">
          <div class="card-header"><i class="bi bi-search me-2"></i>1. Выбор клиента</div>
          <div class="card-body">
            <div class="search-box mb-2">
              <input type="text" id="client-search" class="form-control" placeholder="Поиск по фамилии...">
              <div id="client-results" class="search-results d-none"></div>
            </div>
            <div id="selected-client" class="alert alert-info py-2 d-none">
              <i class="bi bi-person-check me-1"></i> <span id="selected-client-name"></span>
            </div>

            <hr>
            <label class="form-label fw-semibold">2. Способ оплаты <span class="text-danger">*</span></label>
            <select id="payment-method" class="form-select">
              <option value="">— выберите —</option>
              <option value="Наличные">Наличный расчёт</option>
              <option value="Карта">Банковская карта (−3%)</option>
            </select>
            <div id="discount-note" class="text-success small mt-1 d-none">
              <i class="bi bi-tag-fill"></i> Скидка 3% будет применена автоматически
            </div>
          </div>
        </div>
      </div>

      <!-- Products -->
      <div class="col-lg-5">
        <div class="card h-100">
          <div class="card-header"><i class="bi bi-box-seam me-2"></i>3. Выбор товаров</div>
          <div class="card-body">
            <!-- Filters -->
            <div class="row g-2 mb-3">
              <div class="col-5">
                <select id="filter-category" class="form-select form-select-sm">
                  <option value="">Все категории</option>
                </select>
              </div>
              <div class="col-4">
                <input type="number" id="filter-max-price" class="form-control form-control-sm" placeholder="Макс. цена">
              </div>
              <div class="col-3">
                <div class="form-check mt-1">
                  <input class="form-check-input" type="checkbox" id="filter-in-stock">
                  <label class="form-check-label small" for="filter-in-stock">В наличии</label>
                </div>
              </div>
            </div>
            <div class="table-responsive" style="max-height:320px;overflow-y:auto;">
              <table class="table table-sm table-hover mb-0">
                <thead class="sticky-top">
                  <tr>
                    <th>Товар</th><th>Категория</th><th>Цена</th><th>Склад</th><th>Кол-во</th>
                  </tr>
                </thead>
                <tbody id="products-tbody"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- Cart -->
      <div class="col-lg-3">
        <div class="card h-100">
          <div class="card-header"><i class="bi bi-cart3 me-2"></i>Корзина</div>
          <div class="card-body d-flex flex-column">
            <div id="order-cart" class="flex-grow-1">
              <p class="text-muted small">Добавьте товары из таблицы</p>
            </div>
            <hr>
            <div class="d-flex justify-content-between fw-bold mb-3">
              <span>Итого:</span>
              <span id="cart-total" class="text-primary">0 руб.</span>
            </div>
            <button class="btn btn-success w-100" onclick="submitOrder()">
              <i class="bi bi-check2-circle me-2"></i>Оформить заказ
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- ── TAB 3: Order Status ────────────────── -->
  <div class="tab-pane fade {% if active_tab == 'status' %}show active{% endif %}" id="tab-status">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-list-check me-2"></i>Список заказов</span>
        <div class="d-flex gap-2">
          <input type="text" id="order-search" class="form-control form-control-sm" placeholder="Поиск по клиенту..." style="width:220px;">
          <button class="btn btn-sm btn-outline-light" onclick="loadOrders()">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
        </div>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead>
              <tr>
                <th>№</th><th>Клиент</th><th>Дата</th><th>Сумма</th><th>Оплата</th><th>Статус</th><th>Действие</th>
              </tr>
            </thead>
            <tbody id="orders-tbody">
              <tr><td colspan="7" class="text-center text-muted py-3">Загрузка...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
// ─── Client Registration ───────────────────────────────────
async function submitClient() {
  const name = document.getElementById('cl-name').value.trim();
  const phone = document.getElementById('cl-phone').value.trim();
  const email = document.getElementById('cl-email').value.trim();
  const errDiv = document.getElementById('client-errors');

  const res = await fetch("{% url 'register_client' %}", {
    method: 'POST',
    headers: {'X-CSRFToken': getCsrf(), 'Content-Type': 'application/x-www-form-urlencoded'},
    body: new URLSearchParams({full_name: name, phone, email}),
  });
  const data = await res.json();

  if (data.success) {
    errDiv.classList.add('d-none');
    showToast(data.message, 'success');
    document.getElementById('cl-name').value = '';
    document.getElementById('cl-phone').value = '';
    document.getElementById('cl-email').value = '';
  } else {
    errDiv.innerHTML = data.errors.map(e => `<div>• ${e}</div>`).join('');
    errDiv.classList.remove('d-none');
  }
}

// ─── Client Search ─────────────────────────────────────────
let selectedClientId = null;

document.getElementById('client-search').addEventListener('input', async function() {
  const q = this.value.trim();
  if (q.length < 1) { hideClientResults(); return; }

  const res = await fetch(`{% url 'search_clients' %}?q=${encodeURIComponent(q)}`);
  const data = await res.json();
  const box = document.getElementById('client-results');
  if (!data.clients.length) { box.classList.add('d-none'); return; }

  box.innerHTML = data.clients.map(c =>
    `<div class="search-result-item" onclick="selectClient(${c.id}, '${c.full_name.replace(/'/g,"\\'")}')">
      <b>${c.full_name}</b> <span class="text-muted small">${c.phone}</span>
    </div>`
  ).join('');
  box.classList.remove('d-none');
});

function selectClient(id, name) {
  selectedClientId = id;
  document.getElementById('client-search').value = name;
  document.getElementById('selected-client-name').textContent = name;
  document.getElementById('selected-client').classList.remove('d-none');
  hideClientResults();
}

function hideClientResults() {
  document.getElementById('client-results').classList.add('d-none');
}
document.addEventListener('click', function(e) {
  if (!e.target.closest('.search-box')) hideClientResults();
});

// ─── Payment method ────────────────────────────────────────
document.getElementById('payment-method').addEventListener('change', function() {
  const note = document.getElementById('discount-note');
  note.classList.toggle('d-none', this.value !== 'Карта');
  updateCartTotal();
});

// ─── Products ──────────────────────────────────────────────
let allProducts = [];
let cart = {}; // product_id => {name, price, qty}

async function loadProducts() {
  const cat = document.getElementById('filter-category').value;
  const maxPrice = document.getElementById('filter-max-price').value;
  const inStock = document.getElementById('filter-in-stock').checked ? '1' : '';

  let url = `{% url 'get_products' %}?`;
  if (cat) url += `category=${cat}&`;
  if (maxPrice) url += `max_price=${maxPrice}&`;
  if (inStock) url += `in_stock=1`;

  const res = await fetch(url);
  const data = await res.json();
  allProducts = data.products;

  // Populate category filter
  const catSel = document.getElementById('filter-category');
  const curCat = catSel.value;
  if (!catSel.options.length || catSel.options.length === 1) {
    data.categories.forEach(c => {
      const opt = document.createElement('option');
      opt.value = c.id_category;
      opt.textContent = c.category_name;
      catSel.appendChild(opt);
    });
    catSel.value = curCat;
  }

  renderProducts();
}

function renderProducts() {
  const tbody = document.getElementById('products-tbody');
  if (!allProducts.length) {
    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">Нет товаров</td></tr>';
    return;
  }
  tbody.innerHTML = allProducts.map(p => {
    const cartQty = cart[p.id] ? cart[p.id].qty : 0;
    return `<tr class="product-row">
      <td>${p.name}</td>
      <td><span class="badge bg-secondary">${p.category}</span></td>
      <td>${p.price.toLocaleString('ru')} ₽</td>
      <td><span class="${p.stock > 0 ? 'text-success' : 'text-danger'}">${p.stock}</span></td>
      <td style="width:90px;">
        <input type="number" class="form-control form-control-sm" min="0" max="${p.stock}"
          value="${cartQty}" onchange="setCartItem(${p.id}, '${p.name.replace(/'/g,"\\'")}', ${p.price}, this.value)"
          ${p.stock === 0 ? 'disabled' : ''}>
      </td>
    </tr>`;
  }).join('');
}

function setCartItem(id, name, price, qty) {
  qty = parseInt(qty) || 0;
  if (qty <= 0) delete cart[id];
  else cart[id] = {name, price, qty};
  renderCart();
}

function renderCart() {
  const div = document.getElementById('order-cart');
  const items = Object.entries(cart);
  if (!items.length) {
    div.innerHTML = '<p class="text-muted small">Добавьте товары из таблицы</p>';
    document.getElementById('cart-total').textContent = '0 руб.';
    return;
  }
  div.innerHTML = `<div class="order-items-table">` + items.map(([id, it]) =>
    `<div class="d-flex justify-content-between align-items-center mb-1 pb-1 border-bottom">
      <span class="text-truncate me-2" style="max-width:130px;" title="${it.name}">${it.name}</span>
      <span class="text-nowrap small text-muted">${it.qty} × ${it.price.toLocaleString('ru')} ₽</span>
    </div>`
  ).join('') + '</div>';
  updateCartTotal();
}

function updateCartTotal() {
  const payment = document.getElementById('payment-method').value;
  let total = Object.values(cart).reduce((s, it) => s + it.price * it.qty, 0);
  if (payment === 'Карта') total *= 0.97;
  document.getElementById('cart-total').textContent = total.toLocaleString('ru', {minimumFractionDigits:2}) + ' ₽';
}

async function submitOrder() {
  if (!selectedClientId) { showToast('Выберите клиента', 'error'); return; }
  const payment = document.getElementById('payment-method').value;
  if (!payment) { showToast('Выберите способ оплаты', 'error'); return; }
  const items = Object.entries(cart).map(([id, it]) => ({product_id: id, quantity: it.qty}));
  if (!items.length) { showToast('Корзина пуста', 'error'); return; }

  const res = await fetch("{% url 'place_order' %}", {
    method: 'POST',
    headers: {'X-CSRFToken': getCsrf(), 'Content-Type': 'application/json'},
    body: JSON.stringify({client_id: selectedClientId, payment_method: payment, items}),
  });
  const data = await res.json();

  if (data.success) {
    showToast(data.message, 'success');
    cart = {};
    renderCart();
    renderProducts();
    selectedClientId = null;
    document.getElementById('client-search').value = '';
    document.getElementById('selected-client').classList.add('d-none');
    document.getElementById('payment-method').value = '';
    document.getElementById('discount-note').classList.add('d-none');
  } else {
    showToast(data.errors.join(' | '), 'error');
  }
}

// Filters
['filter-category','filter-max-price'].forEach(id => {
  document.getElementById(id).addEventListener('change', loadProducts);
});
document.getElementById('filter-in-stock').addEventListener('change', loadProducts);

// ─── Orders ────────────────────────────────────────────────
async function loadOrders() {
  const q = document.getElementById('order-search').value.trim();
  const res = await fetch(`{% url 'get_orders' %}?q=${encodeURIComponent(q)}`);
  const data = await res.json();
  const tbody = document.getElementById('orders-tbody');

  const statusColors = {'Зарезервирован':'warning','Оплачен':'success','Выдан':'info'};

  if (!data.orders.length) {
    tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3">Заказов не найдено</td></tr>';
    return;
  }

  tbody.innerHTML = data.orders.map(o => `
    <tr>
      <td><b>#${o.id}</b></td>
      <td>${o.client}</td>
      <td>${o.date}</td>
      <td>${o.total.toLocaleString('ru', {minimumFractionDigits:2})} ₽</td>
      <td><span class="badge bg-secondary">${o.payment}</span></td>
      <td>
        <span class="badge bg-${statusColors[o.status] || 'secondary'}">${o.status}</span>
      </td>
      <td>
        <select class="form-select form-select-sm" style="width:160px;" onchange="changeStatus(${o.id}, this.value)">
          <option value="">— статус —</option>
          <option value="Зарезервирован" ${o.status==='Зарезервирован'?'selected':''}>Зарезервирован</option>
          <option value="Оплачен" ${o.status==='Оплачен'?'selected':''}>Оплачен</option>
          <option value="Выдан" ${o.status==='Выдан'?'selected':''}>Выдан</option>
        </select>
      </td>
    </tr>
  `).join('');
}

async function changeStatus(orderId, newStatus) {
  if (!newStatus) return;
  const res = await fetch(`/manager/orders/${orderId}/status/`, {
    method: 'POST',
    headers: {'X-CSRFToken': getCsrf(), 'Content-Type': 'application/json'},
    body: JSON.stringify({status: newStatus}),
  });
  const data = await res.json();
  if (data.success) {
    showToast(data.message, 'success');
    loadOrders();
  } else {
    showToast(data.error, 'error');
  }
}

document.getElementById('order-search').addEventListener('input', () => loadOrders());

// ─── Init ──────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  const activeTab = '{{ active_tab }}';

  // Init products tab
  const tabEl = document.querySelector('[href="#tab-order"]');
  if (tabEl) {
    tabEl.addEventListener('shown.bs.tab', loadProducts);
  }

  // Init orders tab
  const statusTabEl = document.querySelector('[href="#tab-status"]');
  if (statusTabEl) {
    statusTabEl.addEventListener('shown.bs.tab', loadOrders);
  }

  if (activeTab === 'order') loadProducts();
  if (activeTab === 'status') loadOrders();
});
</script>
{% endblock %}