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

{% block title %}Bulk Product Image Upload{% endblock %}

{% block content %}

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

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

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

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

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

  .bi-body {
    padding: 18px;
  }

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

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

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

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

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

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

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

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

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

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

  .bi-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow-x: auto;
  }

  .bi-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
  }

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

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

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

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

  .bi-name {
    font-weight: 800;
  }

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

  .bi-file {
    width: 240px;
  }

  .bi-preview {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    display: none;
  }

  .bi-row-status {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
  }

  .bi-row-status.ok {
    color: #15803d;
  }

  .bi-row-status.bad {
    color: #b91c1c;
  }

  .bi-progress {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
  }
</style>

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

    <div class="bi-head">
      <div>
        <h2 class="bi-title">Bulk Product Image Upload</h2>
        <p class="bi-subtitle">
          Selected products ki images pehle local agent par upload hongi. Failed rows skip hongi, successful rows save hongi.
        </p>
      </div>

      <div class="bi-actions">
        <a
          href="{% url 'hotel:restaurant:product_image_list' %}{% if filter_querystring %}?{{ filter_querystring }}{% endif %}"
          class="bi-btn">
          Back
        </a>

        <button type="button" id="bulkCheckAgentBtn" class="bi-btn">
          Check Agent
        </button>

        <button type="button" id="bulkUploadBtn" class="bi-btn bi-btn-success">
          Upload & Save Selected
        </button>
      </div>
    </div>

    <div class="bi-body">

      <div id="bulkAgentStatus" class="bi-status">
        Local agent status: checking...
      </div>

      <form method="post" id="bulkSaveForm">
        {% csrf_token %}
        <input type="hidden" name="bulk_payload" id="bulkPayload">

        <div class="bi-table-wrap">
          <table class="bi-table">
            <thead>
              <tr>
                <th style="width:80px;">Current</th>
                <th>Product</th>
                <th>Code</th>
                <th>Price</th>
                <th style="width:280px;">Select New Image</th>
                <th style="width:90px;">Preview</th>
                <th style="width:170px;">Status</th>
              </tr>
            </thead>

            <tbody>
              {% for row in rows %}
                <tr
                  class="bulk-row"
                  data-product-t-id="{{ row.product_t_id }}"
                >
                  <td>
                    {% if row.image_url %}
                      <img src="{{ row.image_url }}" class="bi-img" alt="{{ row.product.name }}">
                    {% else %}
                      <div class="bi-no-img">No Img</div>
                    {% endif %}
                  </td>

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

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

                  <td>
                    <input
                      type="file"
                      class="bi-file bulk-file"
                      accept="image/*"
                    >
                  </td>

                  <td>
                    <img class="bi-preview bulk-preview" alt="">
                  </td>

                  <td>
                    <span class="bi-row-status bulk-status">Not selected</span>
                  </td>
                </tr>
              {% empty %}
                <tr>
                  <td colspan="7" style="text-align:center; padding:20px;">
                    No products found for bulk upload.
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="bi-progress" id="bulkProgress">
          Ready.
        </div>
      </form>

    </div>
  </div>
</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("bulkAgentStatus");
  var checkBtn = document.getElementById("bulkCheckAgentBtn");
  var uploadBtn = document.getElementById("bulkUploadBtn");
  var progressBox = document.getElementById("bulkProgress");
  var form = document.getElementById("bulkSaveForm");
  var payloadInput = document.getElementById("bulkPayload");

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

  function setStatus(ok, text) {
    if (!statusBox) return;
    statusBox.className = ok ? "bi-status ok" : "bi-status bad";
    statusBox.innerHTML = text;
  }

  function setRowStatus(row, type, text) {
    var el = row.querySelector(".bulk-status");
    if (!el) return;

    el.className = "bi-row-status bulk-status";

    if (type === "ok") {
      el.className += " ok";
    }

    if (type === "bad") {
      el.className += " bad";
    }

    el.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) {
        setStatus(true, "Local agent connected: " + AGENT.baseUrl);
        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;
    }
  }

  function bindPreview() {
    var inputs = document.querySelectorAll(".bulk-file");

    inputs.forEach(function (input) {
      input.addEventListener("change", function () {
        var row = input.closest(".bulk-row");
        var preview = row.querySelector(".bulk-preview");
        var file = input.files && input.files[0];

        if (!file) {
          preview.style.display = "none";
          preview.removeAttribute("src");
          setRowStatus(row, "", "Not selected");
          return;
        }

        preview.src = URL.createObjectURL(file);
        preview.style.display = "block";
        setRowStatus(row, "", "Ready");
      });
    });
  }

  async function uploadOneRow(row) {
    var input = row.querySelector(".bulk-file");
    var file = input && input.files && input.files[0];
    var productTId = row.getAttribute("data-product-t-id");

    if (!file) {
      setRowStatus(row, "", "Skipped: no file");
      return null;
    }

    try {
      setRowStatus(row, "", "Uploading...");

      var fd = new FormData();
      fd.append("file", file);

      var res = await fetch(agentUrl("/upload?folder=products"), {
        method: "POST",
        body: fd
      });

      var data = await res.json();

      if (!data.ok || !data.image_key) {
        setRowStatus(row, "bad", "Skipped: upload failed");
        return null;
      }

      setRowStatus(row, "ok", "Uploaded");

      return {
        product_t_id: productTId,
        image_key: data.image_key,
        original_name: data.original_name || file.name
      };

    } catch (err) {
      setRowStatus(row, "bad", "Skipped: " + err.message);
      return null;
    }
  }

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

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

    var rows = Array.prototype.slice.call(document.querySelectorAll(".bulk-row"));
    var payload = [];

    uploadBtn.disabled = true;
    uploadBtn.innerHTML = "Uploading...";

    var selectedCount = 0;

    rows.forEach(function (row) {
      var input = row.querySelector(".bulk-file");
      if (input && input.files && input.files[0]) {
        selectedCount += 1;
      }
    });

    if (selectedCount <= 0) {
      alert("Please select at least one image.");
      uploadBtn.disabled = false;
      uploadBtn.innerHTML = "Upload & Save Selected";
      return;
    }

    var done = 0;

    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      var uploaded = await uploadOneRow(row);

      done += 1;
      progressBox.innerHTML = "Processed " + done + " of " + rows.length + " rows.";

      if (uploaded) {
        payload.push(uploaded);
      }
    }

    if (!payload.length) {
      alert("No image uploaded successfully. Nothing to save.");
      uploadBtn.disabled = false;
      uploadBtn.innerHTML = "Upload & Save Selected";
      return;
    }

    payloadInput.value = JSON.stringify(payload);
    form.submit();
  }

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

  if (uploadBtn) {
    uploadBtn.addEventListener("click", uploadAndSave);
  }

  bindPreview();
  checkAgent();
})();
</script>
{% endblock %}