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

{% block title %}Bulk Category Departments{% endblock %}

{% block content %}
<div class="bp-page">
  <form method="post">
    {% csrf_token %}

    <div class="bp-card">
      <div class="bp-card-head">
        <div>
          <h2>Bulk Category Department Edit</h2>
          <p>Filtered categories ko kitchen/production department ke sath attach karein.</p>
        </div>

        <div>
          <a class="bp-btn light" href="{% url 'restaurant:product_departments:list' %}{% if query_string %}?{{ query_string }}{% endif %}">
            Back
          </a>

          <button class="bp-btn primary" type="submit">
            Save Bulk
          </button>
        </div>
      </div>

      <div class="bulk-top">
        <label>Bulk Department For Unmarked Categories</label>

        <select class="bp-input" name="bulk_department_id" id="bulkDepartmentSelect">
          <option value="0">No bulk department</option>
          {% for dept in departments %}
            <option value="{{ dept.id }}">{{ dept.name }}</option>
          {% endfor %}
        </select>

        <button type="button" class="bp-btn secondary" id="applyEmptyRowsBtn">
          Apply to Empty Rows
        </button>
      </div>
    </div>

    <div class="bp-card">
      <div class="table-wrap">
        <table class="bp-table">
          <thead>
            <tr>
              <th style="width:80px;">Cat ID</th>
              <th>Category</th>
              <th style="width:120px;">Products</th>
              <th>Current Department</th>
              <th style="width:260px;">Set Department</th>
            </tr>
          </thead>

          <tbody>
            {% for row in rows %}
              <tr>
                <td>{{ row.category_t_id }}</td>

                <td>
                  <input type="hidden" name="category_t_ids" value="{{ row.category_t_id }}">
                  <strong>{{ row.category.cat_name }}</strong>
                  <div class="muted">Category ID: {{ row.category_t_id }}</div>
                </td>

                <td>
                  <span class="count-pill">{{ row.product_count }}</span>
                </td>

                <td>
                  {% if row.department %}
                    <span class="dept-pill">{{ row.department.name }}</span>
                  {% else %}
                    <span class="missing-pill">Not Attached</span>
                  {% endif %}
                </td>

                <td>
                  <select class="bp-input row-department-select" name="department_{{ row.category_t_id }}">
                    <option value="0">No change</option>

                    {% for dept in departments %}
                      <option value="{{ dept.id }}" {% if row.department and row.department.id == dept.id %}selected{% endif %}>
                        {{ dept.name }}
                      </option>
                    {% endfor %}
                  </select>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="empty-row">No filtered categories found.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="footer-actions">
        <a class="bp-btn light" href="{% url 'restaurant:product_departments:list' %}{% if query_string %}?{{ query_string }}{% endif %}">
          Cancel
        </a>

        <button class="bp-btn primary" type="submit">
          Save Bulk
        </button>
      </div>
    </div>
  </form>
</div>

<style>
  .bp-page { padding: 12px; }
  .bp-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:12px; }
  .bp-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .bp-card-head h2 { margin:0; color:#01478f; font-size:22px; font-weight:900; }
  .bp-card-head p { margin:4px 0 0; color:#64748b; font-size:13px; }

  .bulk-top {
    display:grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap:8px;
    align-items:end;
    max-width:560px;
  }

  .bulk-top label {
    grid-column:1 / -1;
    font-size:12px;
    font-weight:900;
    color:#334155;
  }

  .bp-input {
    width:100%;
    border:1px solid #d1d5db;
    border-radius:8px;
    padding:8px 10px;
    min-height:38px;
  }

  .bp-btn {
    border:0;
    border-radius:8px;
    padding:9px 12px;
    font-weight:900;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  .bp-btn.primary { background:#01478f; color:#fff; }
  .bp-btn.secondary { background:#087443; color:#fff; }
  .bp-btn.light { background:#f1f5f9; color:#334155; }

  .table-wrap { overflow:auto; }

  .bp-table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }

  .bp-table th {
    background:#f8fafc;
    color:#334155;
    text-align:left;
    padding:9px;
    border-bottom:1px solid #e5e7eb;
  }

  .bp-table td {
    padding:9px;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
  }

  .muted {
    color:#64748b;
    font-size:11px;
    margin-top:2px;
  }

  .dept-pill {
    background:#ecfdf5;
    color:#087443;
    padding:5px 9px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
  }

  .count-pill {
    background:#e8f1fb;
    color:#01478f;
    padding:5px 9px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
  }

  .missing-pill {
    background:#fff7ed;
    color:#c2410c;
    padding:5px 9px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
  }

  .empty-row {
    text-align:center;
    color:#64748b;
    font-weight:800;
    padding:25px;
  }

  .footer-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px;
  }

  @media (max-width: 700px) {
    .bp-card-head {
      flex-direction:column;
      align-items:stretch;
    }

    .bulk-top {
      grid-template-columns: 1fr;
      max-width:100%;
    }
  }
</style>

<script>
(function () {
  function applyEmptyRows() {
    var bulkSelect = document.getElementById("bulkDepartmentSelect");
    var value = bulkSelect ? bulkSelect.value : "0";

    if (!value || value === "0") {
      return;
    }

    var selects = document.querySelectorAll(".row-department-select");

    selects.forEach(function (select) {
      if (!select.value || select.value === "0") {
        select.value = value;
      }
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    var btn = document.getElementById("applyEmptyRowsBtn");

    if (btn) {
      btn.addEventListener("click", applyEmptyRows);
    }
  });
})();
</script>
{% endblock %}