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

{% block title %}Product Images{% endblock %}

{% block content %}

<style>
  .pi-wrap {
    padding: 16px;
  }

  .pi-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .pi-card-header {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
  }

  .pi-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

  .pi-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
  }

  .pi-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  .pi-card-body {
    padding: 18px;
  }

  .pi-status {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
    font-size: 13px;
  }

  .pi-status.ok {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
  }

  .pi-status.bad {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
  }

  .pi-filter {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .pi-input {
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 10px;
    outline: none;
    min-width: 280px;
    background: #fff;
    color: #111827;
  }

  .pi-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  .pi-btn {
    height: 38px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    border-radius: 8px;
    padding: 0 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  .pi-btn:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: #111827;
  }

  .pi-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  .pi-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
  }

  .pi-btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
  }

  .pi-btn-success:hover {
    background: #15803d;
    color: #ffffff;
  }

  .pi-btn-sm {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .pi-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
  }

  .pi-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 850px;
  }

  .pi-table th {
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
  }

  .pi-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #111827;
    font-size: 14px;
  }

  .pi-table tr:hover td {
    background: #f9fafb;
  }

  .pi-img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
  }

  .pi-no-img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 1px dashed #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6b7280;
    background: #f9fafb;
  }

  .pi-product-name {
    font-weight: 700;
    color: #111827;
  }

  .pi-muted {
    color: #6b7280;
    font-size: 12px;
    margin-top: 3px;
  }

  .pi-code {
    background: #f3f4f6;
    color: #111827;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 12px;
  }

  .pi-pagination {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
    flex-wrap: wrap;
    color: #374151;
  }

  .pi-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    min-width: 260px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #fff;
    background: #111827;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
    display: none;
    font-size: 14px;
  }

  .pi-toast.success {
    background: #15803d;
  }

  .pi-toast.error {
    background: #b91c1c;
  }


  /*new*/
  .pi-filter .select2-container {
    min-width: 240px !important;
  }

  .pi-filter .pi-product-select + .select2-container {
    min-width: 320px !important;
  }

  .pi-filter .select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
  }

  .pi-filter .select2-container .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 10px !important;
    color: #111827 !important;
  }

  .pi-filter .select2-container .select2-selection__arrow {
    height: 36px !important;
  }

  @media (max-width: 768px) {
    .pi-card-header {
      align-items: flex-start;
      flex-direction: column;
    }

    .pi-actions,
    .pi-filter {
      width: 100%;
    }

    .pi-input {
      min-width: 100%;
      width: 100%;
    }
  }
</style>

<div class="pi-wrap">
  <div class="pi-card">

    <div class="pi-card-header">
      <div>
        <h2 class="pi-title">Product Images</h2>
        <p class="pi-subtitle">
          Product images local agent database mein save hongi. Server par sirf image key save hogi.
        </p>
      </div>

      <div class="pi-actions">
        <button type="button" id="agentHealthBtn" class="pi-btn">
          Check Agent
        </button>

        <button type="button" id="backupAgentDbBtn" class="pi-btn pi-btn-success">
          Backup Image DB
        </button>

        <a class = "btn btn-primary" href="{% url 'hotel:restaurant:agent_database_tools' %}">Restore database</a>

        <form
          method="post"
          action="{% url 'hotel:restaurant:product_image_clear_keys' %}"
          style="display:inline;"
          onsubmit="return confirm('Are you sure? All product image keys will be cleared. Actual agent images will not be deleted.');"
        >
          {% csrf_token %}

          <button type="submit" class="btn btn-danger btn-sm">
            Empty All Product Image Keys
          </button>
        </form>
      </div>
    </div>

    <div class="pi-card-body">

      <div id="agentStatusBox" class="pi-status">
        Local agent status: checking...
      </div>

      <div style="display:none;">
        {% csrf_token %}
      </div>

      <form method="get" class="pi-filter">
        <select
        id="piProductSearch"
        name="product_id"
        class="pi-input pi-product-select select2-product"
      >
        {% if product_id and product_label %}
          <option value="{{ product_id }}" selected>{{ product_label }}</option>
        {% endif %}
      </select>

  <!-- Category Search -->
  <select name="cat" id="piCategorySearch" class="pi-input select2-normal">
    <option value="">All Categories</option>
    {% for cat in categories %}
      <option value="{{ cat.t_id }}" {% if cat_id == cat.t_id %}selected{% endif %}>
        {{ cat.cat_name }}
      </option>
    {% endfor %}
  </select>

  <!-- Company Search -->
  <select name="company" id="piCompanySearch" class="pi-input select2-normal">
    <option value="">All Companies</option>
    {% for c in companies %}
      <option value="{{ c }}" {% if company == c %}selected{% endif %}>
        {{ c }}
      </option>
    {% endfor %}
  </select>

  <!-- Image Status -->
  <select name="image_filter" id="piImageFilter" class="pi-input select2-normal">
    <option value="all" {% if image_filter == "all" %}selected{% endif %}>
      All Images
    </option>

    <option value="missing" {% if image_filter == "missing" %}selected{% endif %}>
      Missing Images
    </option>

    <option value="with" {% if image_filter == "with" %}selected{% endif %}>
      With Images
    </option>
  </select>

  <button type="submit" class="pi-btn pi-btn-primary">
    Filter
  </button>

  <a href="{% url 'hotel:restaurant:product_image_list' %}" class="pi-btn">
    Clear
  </a>

  <a
    href="{% url 'hotel:restaurant:product_image_bulk_upload' %}{% if filter_querystring %}?{{ filter_querystring }}{% endif %}"
    class="pi-btn pi-btn-success">
    Bulk Upload Images
  </a>
</form>

      <div class="pi-table-wrap">
        <table class="pi-table">
          <thead>
            <tr>
              <th style="width:80px;">Image</th>
              <th>Product</th>
              <th>Code</th>
              <th>Price</th>
              <th>Image Key</th>
              <th style="width:160px;">Action</th>
            </tr>
          </thead>

          <tbody>
            {% for row in rows %}
              <tr>
                <td>
                  {% if row.image_url %}
                    <img
                      src="{{ row.image_url }}"
                      alt="{{ row.product.name }}"
                      class="pi-img"
                      onerror="this.style.display='none';"
                    >
                  {% else %}
                    <div class="pi-no-img">No Img</div>
                  {% endif %}
                </td>

                <td>
                  <div class="pi-product-name">{{ row.product.name }}</div>
                  <div class="pi-muted">Product ID: {{ row.product_t_id }}</div>
                </td>

                <td>{{ row.product.product_code }}</td>
                <td>{{ row.product.l_sale_price }}</td>

                <td>
                  {% if row.image %}
                    <span class="pi-code">{{ row.image.image_key }}</span>
                  {% else %}
                    <span class="pi-muted">Not set</span>
                  {% endif %}
                </td>

                <td>
                  <a
                    href="{% url 'hotel:restaurant:product_image_form' row.product_t_id %}"
                    class="pi-btn pi-btn-sm pi-btn-primary">
                    {% if row.image %}Edit Image{% else %}Add Image{% endif %}
                  </a>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" style="text-align:center; padding:20px;">
                  No products found.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {% if page_obj.has_other_pages %}
        <div class="pi-pagination">
          {% if page_obj.has_previous %}
            <a class="pi-btn pi-btn-sm" href="?{{ filter_querystring }}{% if filter_querystring %}&{% endif %}page={{ page_obj.previous_page_number }}">
              Previous
            </a>
          {% endif %}

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

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

    </div>
  </div>
</div>

<div id="piToast" class="pi-toast"></div>

{% endblock %}

{% block javascripts %}
<script>
(function () {
  var AGENT = {
    enabled: {{ agent.enabled|yesno:"true,false" }},
    baseUrl: "{{ agent.base_url|escapejs }}",
    healthUrl: "{{ agent.health_url|escapejs }}"
  };

  var statusBox = document.getElementById("agentStatusBox");
  var healthBtn = document.getElementById("agentHealthBtn");
  var backupBtn = document.getElementById("backupAgentDbBtn");
  var toastBox = document.getElementById("piToast");

  function agentUrl(path) {
    return AGENT.baseUrl.replace(/\/$/, "") + path;
  }

  function showMessage(type, message) {
    if (!toastBox) {
      alert(message);
      return;
    }

    toastBox.className = "pi-toast " + (type === "success" ? "success" : "error");
    toastBox.innerHTML = message;
    toastBox.style.display = "block";

    setTimeout(function () {
      toastBox.style.display = "none";
    }, 3000);
  }

  function setStatus(ok, text) {
    if (!statusBox) return;

    statusBox.className = ok ? "pi-status ok" : "pi-status bad";
    statusBox.innerHTML = text;
  }

  async function checkAgent() {
    if (!AGENT.enabled) {
      setStatus(false, "Local agent disabled from settings.");
      return false;
    }

    try {
      var res = await fetch(AGENT.healthUrl, { method: "GET" });
      var data = await res.json();

      if (data.ok) {
        var storage = data.storage || "unknown";
        var version = data.version || "";
        setStatus(true, "Local agent connected: " + AGENT.baseUrl + " | version: " + version + " | storage: " + storage);
        return true;
      }

      setStatus(false, "Local agent responded but not ready.");
      return false;

    } catch (err) {
      setStatus(false, "Local agent OFF. Run BP Local Agent first. URL: " + AGENT.baseUrl);
      return false;
    }
  }

  async function backupAgentDb() {
    var ok = await checkAgent();

    if (!ok) {
      showMessage("error", "BP Local Agent ON nahi hai.");
      return;
    }

    var backupUrl = agentUrl("/backup/db");

    backupBtn.disabled = true;
    backupBtn.innerText = "Preparing Backup...";

    try {
      var res = await fetch(backupUrl, { method: "GET" });

      if (!res.ok) {
        throw new Error("Backup request failed.");
      }

      var contentType = res.headers.get("Content-Type") || "";

      if (contentType.indexOf("application/json") !== -1) {
        var json = await res.json();
        throw new Error(json.error || "Backup failed.");
      }

      var blob = await res.blob();
      var downloadName = "bp_agent_image_db_backup.db";

      var disposition = res.headers.get("Content-Disposition") || "";
      var match = disposition.match(/filename="([^"]+)"/);

      if (match && match[1]) {
        downloadName = match[1];
      }

      var objectUrl = window.URL.createObjectURL(blob);
      var a = document.createElement("a");

      a.href = objectUrl;
      a.download = downloadName;
      document.body.appendChild(a);
      a.click();
      a.remove();

      window.URL.revokeObjectURL(objectUrl);

      showMessage("success", "Image database backup downloaded successfully.");

    } catch (err) {
      showMessage("error", "Backup failed. Error: " + err.message);
    }

    backupBtn.disabled = false;
    backupBtn.innerText = "Backup Image DB";
  }

  if (healthBtn) {
    healthBtn.addEventListener("click", checkAgent);
  }

  if (backupBtn) {
    backupBtn.addEventListener("click", backupAgentDb);
  }

  checkAgent();
})();
</script>

<script>
$(function () {
  var csrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
  var csrftoken = csrfInput ? csrfInput.value : "";

  var commonSelect2 = {
    theme: "bootstrap4",
    width: "resolve",
    allowClear: true
  };

  $("#piProductSearch").select2({
    theme: "bootstrap4",
    width: "resolve",
    placeholder: "Search product...",
    minimumInputLength: 1,
    allowClear: true,
    ajax: {
      url: "{% url 'products:get_products' %}",
      type: "POST",
      headers: {
        "X-CSRFToken": csrftoken
      },
      data: function (params) {
        return {
          term: params.term
        };
      },
      processResults: function (data) {
        return {
          results: data
        };
      }
    },
    templateResult: function (row) {
      if (row.loading) {
        return row.text;
      }

      return $("<div>" + row.text + "</div>");
    },
    templateSelection: function (row) {
      return row.text || row.id;
    }
  });

  $("#piCategorySearch").select2({
    theme: "bootstrap4",
    width: "resolve",
    placeholder: "Search category...",
    allowClear: true
  });

  $("#piCompanySearch").select2({
    theme: "bootstrap4",
    width: "resolve",
    placeholder: "Search company...",
    allowClear: true
  });

  $("#piImageFilter").select2({
    theme: "bootstrap4",
    width: "resolve",
    minimumResultsForSearch: Infinity
  });
});
</script>
{% endblock %}