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

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

{% block content %}
<div class="bp-page">

  {% if messages %}
    {% for message in messages %}
      <div class="bp-alert bp-alert-{{ message.tags }}">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <div class="bp-card">
    <div class="bp-card-head">
      <div>
        <h2>Restaurant Category Departments</h2>
        <p>Product categories ko kitchen/production department ke sath attach karein.</p>
      </div>

      <div class="head-actions">
        <a class="bp-btn primary" href="{% url 'restaurant:product_departments:add' %}">
          Add Single
        </a>

        <a class="bp-btn secondary" href="{{ bulk_url }}">
          Bulk Edit Filtered
        </a>
      </div>
    </div>

    <form method="get" class="filter-grid">

      <div>
        <label>Category Search</label>
        <input
          class="bp-input"
          type="text"
          name="q"
          value="{{ q }}"
          placeholder="Search category name or ID"
          autocomplete="off"
        >
      </div>

      <div>
        <label>Category</label>
        <select class="bp-input" name="category_id">
          <option value="0">All Categories</option>

          {% for cat in categories %}
            <option value="{{ cat.t_id }}" {% if category_id == cat.t_id %}selected{% endif %}>
              {{ cat.cat_name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label>Department</label>
        <select class="bp-input" name="department_id">
          <option value="0">All Departments</option>

          {% for dept in departments %}
            <option value="{{ dept.id }}" {% if department_id == dept.id %}selected{% endif %}>
              {{ dept.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label>Status</label>
        <select class="bp-input" name="attached">
          <option value="all" {% if attached == "all" %}selected{% endif %}>All</option>
          <option value="attached" {% if attached == "attached" %}selected{% endif %}>Attached</option>
          <option value="missing" {% if attached == "missing" %}selected{% endif %}>Missing Department</option>
        </select>
      </div>

      <div class="filter-actions">
        <button class="bp-btn primary" type="submit">
          Filter
        </button>

        <a class="bp-btn light" href="{% url 'restaurant:product_departments:list' %}">
          Reset
        </a>
      </div>
    </form>
  </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>Department</th>
            <th style="width:100px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            <tr>
              <td class="font-strong">
                {{ row.category_t_id }}
              </td>

              <td>
                <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>
                {% if row.link %}
                  <a class="bp-btn tiny" href="{% url 'restaurant:product_departments:edit' row.link.id %}">
                    Edit
                  </a>
                {% else %}
                  <a class="bp-btn tiny" href="{% url 'restaurant:product_departments:add' %}?category_id={{ row.category_t_id }}">
                    Attach
                  </a>
                {% endif %}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="5" class="empty-row">
                No categories found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if page_obj.has_other_pages %}
      <div class="pagination-row">
        {% if page_obj.has_previous %}
          <a class="bp-btn light" href="?page={{ page_obj.previous_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">
            Prev
          </a>
        {% endif %}

        <span>
          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
          <a class="bp-btn light" href="?page={{ page_obj.next_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">
            Next
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

<style>
  .bp-page {
    padding: 12px;
  }

  .bp-alert {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
  }

  .bp-alert-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #087443;
  }

  .bp-alert-error,
  .bp-alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
  }

  .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;
  }

  .head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
  }

  .filter-grid label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #334155;
    margin-bottom: 4px;
  }

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

  .filter-actions {
    display: flex;
    gap: 6px;
  }

  .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;
    white-space: nowrap;
  }

  .bp-btn.primary {
    background: #01478f;
    color: #fff;
  }

  .bp-btn.secondary {
    background: #087443;
    color: #fff;
  }

  .bp-btn.light {
    background: #f1f5f9;
    color: #334155;
  }

  .bp-btn.tiny {
    padding: 6px 9px;
    font-size: 12px;
    background: #e8f1fb;
    color: #01478f;
  }

  .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;
    white-space: nowrap;
  }

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

  .font-strong {
    font-weight: 900;
    color: #0f172a;
  }

  .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;
    display: inline-flex;
  }

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

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

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

  .pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 800;
  }

  @media (max-width: 1200px) {
    .filter-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

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

    .head-actions {
      width: 100%;
    }

    .head-actions .bp-btn {
      flex: 1;
    }

    .filter-grid {
      grid-template-columns: 1fr;
    }

    .filter-actions .bp-btn {
      flex: 1;
    }
  }
</style>
{% endblock %}