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

{% block title %}
  {% if link %}Edit Category Department{% else %}Add Category Department{% endif %}
{% 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>
          {% if link %}
            Edit Category Department
          {% else %}
            Add Category Department
          {% endif %}
        </h2>

        <p>
          Product category ko kitchen/production department ke sath attach karein.
        </p>
      </div>

      <div class="head-actions">
        <a class="bp-btn light" href="{% url 'restaurant:product_departments:list' %}">
          Back
        </a>
      </div>
    </div>

    <form method="post" class="bp-form">
      {% csrf_token %}

      <div class="form-grid">

        <div class="form-field form-field-full">
          <label>Category</label>

          {% if link %}
            <input type="hidden" name="category_t_id" value="{{ selected_category_id }}">

            <div class="readonly-box">
              <strong>
                {% if selected_category_label %}
                  {{ selected_category_label }}
                {% elif category %}
                  {{ category.cat_name }}
                {% else %}
                  Category #{{ selected_category_id }}
                {% endif %}
              </strong>

              <small>Category ID: {{ selected_category_id }}</small>
            </div>
          {% else %}
            <select class="bp-input" name="category_t_id" id="categorySelect" required>
              <option value="">Select Category</option>

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

        <div class="form-field form-field-full">
          <label>Department</label>

          <select class="bp-input" name="department_id" id="departmentSelect" required>
            <option value="">Select Department</option>

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

        <div class="form-field form-field-full">
          <label>Note</label>

          <textarea
            class="bp-input bp-textarea"
            name="note"
            rows="3"
            placeholder="Optional note"
          >{% if link %}{{ link.note }}{% endif %}</textarea>
        </div>

      </div>

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

        <button class="bp-btn primary" type="submit">
          {% if link %}
            Update
          {% else %}
            Save
          {% endif %}
        </button>
      </div>
    </form>
  </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: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    max-width: 760px;
  }

  .bp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

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

  .bp-form {
    width: 100%;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-field label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #334155;
    margin-bottom: 5px;
  }

  .bp-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    background: #ffffff;
  }

  .bp-input:focus {
    border-color: #01478f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 71, 143, 0.12);
  }

  .bp-textarea {
    min-height: 90px;
    resize: vertical;
  }

  .readonly-box {
    border: 1px solid #d1d5db;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
  }

  .readonly-box strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
  }

  .readonly-box small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
  }

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

  .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: #ffffff;
  }

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

  @media (max-width: 700px) {
    .bp-card {
      max-width: 100%;
    }

    .bp-card-head {
      flex-direction: column;
      align-items: stretch;
    }

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