{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container mt-4">
  <div class="row">
    <div class="col-md-10">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'add_product' %}">Add Component Order</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Component Orders</li>
        </ol>
      </nav>
    </div>
    <div class="col-md-2">
      <a
        href="{% url 'add_product' %}"
        class="btn btn-primary btn-lg w-150 d-flex justify-content-center align-items-center"
        style="height: 40px;"
      >
        New Component Orders
      </a>
    </div>
  </div>

  <!-- Search -->
  <div class="row mb-3">
    <div class="col-md-8"></div>
    <div class="col-md-4">
      <input type="text" id="searchFieldProducts" class="form-control" placeholder="Search">
    </div>
  </div>

  <!-- Export -->
  <div class="export-container mb-3">
    <button class="btn export-btn">Export</button>
    <ul id="exportMenuProducts" class="export-menu">
      <li><a href="{% url 'export_products_pdf' %}">PDF</a></li>
      <li><a href="{% url 'export_products_csv' %}">CSV</a></li>
      <li><a href="{% url 'export_products_xlsx' %}">XLSX</a></li>
    </ul>
  </div>

  <!-- Filter -->
  <div class="row mb-3">
    <div class="col">
      <div class="d-flex">
        <button class="btn filter-btn" data-status="request">Inquired</button>
        <button class="btn filter-btn" data-status="offer">Quoted</button>
        <button class="btn filter-btn" data-status="purchased_request">Purchased Request</button>
        <button class="btn filter-btn" data-status="purchased">Purchased</button>
        <button class="btn filter-btn" data-status="all">All</button>
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="app-table-products">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Project Name</th>
          <th>Component</th>
          <th>Part No</th>
          <th>Brand</th>
          <th>Company</th>
          <th class="qty-header">Quantity</th>
          <th>Link</th>
          <th>Date</th>
          <th>Price</th>
          <th>Currency</th>
          <th>Photo</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for p in products %}
        <tr data-status="{{ p.order_status }}" data-id="{{ p.id }}">
          <td>{{ p.project_name }}</td>
          <td>
            {% if p.component %}
              {{ p.component.title }}
            {% else %}
              –
            {% endif %}
          </td>
          <td>{{ p.part_no }}</td>
          <td>{{ p.brand }}</td>
          <td>{{ p.company.name|default:"–" }}</td>
          <td class="qty-cell">
            {% if p.order_status != 'request' %}
              {{ p.product_quantity }}
            {% else %}
              –
            {% endif %}
          </td>
          <td>
            <a href="{{ p.product_link }}" target="_blank">{{ p.product_link }}</a>
          </td>
          <td>{{ p.product_date }}</td>
          <td>
            {% if p.order_status != 'request' %}
              {{ p.product_price|default:"–" }}
            {% else %}
              –
            {% endif %}
          </td>
          <td>
            {% if p.order_status != 'request' %}
              {{ p.get_currency_display|default:"–" }}
            {% else %}
              –
            {% endif %}
          </td>
          <td>
            {% if p.product_photo %}
              <img src="{{ p.product_photo.url }}" width="50" alt="Photo">
            {% else %}
              –
            {% endif %}
          </td>
          <td class="actions-cell">
            <div class="d-flex flex-nowrap align-items-center">
              {% if p.order_status == 'request' %}
                <a href="{% url 'product_offer' p.id %}" class="btn btn-info btn-sm ml-1 offer-btn" title="Offer">Offer</a>
                <a href="{% url 'product_order' p.id %}" class="btn btn-warning btn-sm ml-1 order-btn" title="Order">Order</a>
                <a href="{% url 'edit_ordered_product' p.id %}" class="btn btn-secondary btn-sm ml-1" title="Edit">Edit</a>
                <a href="{% url 'delete_product' p.id %}" class="btn btn-sm ml-1 text-danger" title="Delete"><i class="fas fa-trash-alt"></i></a>
              {% elif p.order_status == 'offer' %}
                <a href="{% url 'product_order' p.id %}" class="btn btn-warning btn-sm ml-1 order-btn" title="Order">Order</a>
                <a href="{% url 'product_cancel' p.id %}" class="btn btn-danger btn-sm ml-1" title="Cancel Quote">Quote Canceled</a>
                <a href="{% url 'edit_quoted_product' p.id %}" class="btn btn-secondary btn-sm ml-1" title="Edit">Edit</a>
                
              {% elif p.order_status == 'purchased_request' %}
                <a href="{% url 'product_purchase' p.id %}" class="btn btn-success btn-sm ml-1" title="Purchase">Purchase</a>
                <a href="{% url 'product_cancel_request' p.id %}" class="btn btn-danger btn-sm ml-1" title="Cancel Request">Cancel Request</a>
                <a href="{% url 'edit_ordered_product' p.id %}" class="btn btn-secondary btn-sm ml-1" title="Edit">Edit</a>
              {% elif p.order_status == 'order' %}
                <button type="button" class="btn btn-success btn-sm ml-1 deliver-btn" data-id="{{ p.id }}" title="Confirm Delivered">Confirm Delivered</button>
                <a href="{% url 'edit_ordered_product' p.id %}" class="btn btn-secondary btn-sm ml-1" title="Edit">Edit</a>
                <a href="{% url 'product_cancel' p.id %}" class="btn btn-danger btn-sm ml-1" title="Cancel Purchase">Purchase Canceled</a>
                {% elif p.order_status == 'purchased' %}
                <!-- Confirm Delivered butonu -->
                <button
                  type="button"
                  class="btn btn-success btn-sm ml-1 deliver-btn"
                  data-id="{{ p.id }}"
                  title="Confirm Delivered"
                >
                  Confirm Delivered
                </button>
              
                <a
                  href="{% url 'product_purchased_canceled' p.id %}"
                  class="btn btn-danger btn-sm ml-1"
                  title="Purchased Canceled"
                >
                  Purchased Canceled
                </a>
                <a
                  href="{% url 'edit_ordered_product' p.id %}"
                  class="btn btn-secondary btn-sm ml-1"
                  title="Edit"
                >
                  Edit
                </a>
              {% endif %}
              
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- AJAX Results -->
  <div class="table-output-products" style="display:none;">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Project Name</th>
          <th>Component</th>
          <th>Part No</th>
          <th>Brand</th>
          <th>Quantity</th>
          <th>Link</th>
          <th>Date</th>
          <th>Price</th>
          <th>Currency</th>
          <th>Photo</th>
        </tr>
      </thead>
      <tbody class="table-body-products"></tbody>
    </table>
  </div>

  <!-- Pagination -->
  <nav class="pagination_section mt-4 pagination-container-products">
    <ul class="pagination justify-content-center">
      {% if products.has_previous %}
        <li class="page-item"><a class="page-link" href="?page=1">« First</a></li>
        <li class="page-item"><a class="page-link" href="?page={{ products.previous_page_number }}">Previous</a></li>
      {% endif %}
      {% for num in products.paginator.page_range %}
        {% if products.number == num %}
          <li class="page-item active"><span class="page-link">{{ num }}</span></li>
        {% else %}
          <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
        {% endif %}
      {% endfor %}
      {% if products.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ products.next_page_number }}">Next</a></li>
        <li class="page-item"><a class="page-link" href="?page={{ products.paginator.num_pages }}">Last »</a></li>
      {% endif %}
    </ul>
  </nav>

  
</div>

<!-- Quantity Input Modal -->
<div id="qtyModal" class="custom-modal" style="display:none;">
  <div class="modal-box">
    <span class="close-btn">×</span>
    <h5 class="fw-semibold mb-3 text-center text-brown">Teslim Edilen Miktarı Girin</h5>
    <input id="deliveredQtyInput" type="number" class="form-control mb-3" placeholder="Miktar girin" required>
    <div class="text-end">
      <button id="confirmQtyBtn" class="btn btn-primary px-4">Confirm</button>
    </div>
  </div>
</div>
 <!-- Teslim Edilen Miktar Modalı -->
 <div id="quantityModal" class="custom-modal">
  <div class="modal-box">
    <span class="close-btn">×</span>
    <h5 class="fw-semibold mb-3 text-center text-brown">Teslim Edilen Miktarı Girin</h5>
    <form id="quantityForm">
      <input id="deliveredQuantity" type="number" class="form-control mb-3" required>
      <div class="text-end">
        <button type="submit" class="btn btn-primary px-4">Confirm</button>
      </div>
    </form>
  </div>
</div>

<!-- Teslim Lokasyon Seçme Modalı -->
<div id="deliverModal" class="custom-modal">
  <div class="modal-box">
    <span class="close-btn">×</span>
    <h5 class="text-center mb-3">Teslim Lokasyonunu Seç</h5>
    <input
      type="text"
      id="locationSearch"
      class="form-control mb-2"
      placeholder="Lokasyon ara…"
    >
    <ul id="locationList" class="list-group mb-3" style="max-height:200px; overflow:auto;"></ul>
    <button id="confirmDeliver" class="btn btn-primary w-100" disabled>
      Confirm
    </button>
  </div>
</div>




<!-- Order/Offer Modal -->
<div id="prodActionModal" class="custom-modal">
  <div class="modal-box">
    <span class="close-btn">×</span>
    <h5 id="modalTitleProd" class="fw-semibold mb-3 text-center text-brown">Title</h5>
    <form id="prodActionForm">
      <!-- Mevcut miktar (sadece Order için) -->
      <p id="currentQtyDisplay" class="mb-2" style="display:none; font-weight:500;"></p>

      <!-- Input Label -->
      <label id="inputLabelProd" class="form-label mb-1"></label>
      <input id="prodActionInput"
             name="newqty"
             type="number"
             class="form-control mb-3"
             placeholder="" 
      >

      <!-- Currency & Company (sadece Offer için) -->
      <div id="currencySectionProd" style="display:none;">
        <label class="form-label mb-1">Currency</label>
        <select id="prodCurrencySelect" name="currency" class="form-control mb-3">
          <option value="TL">TL</option>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
        </select>
      </div>
      <div id="companySectionProd">
              <label class="form-label mb-1">Firma</label>
              <select id="productCompanySelect" name="company_id" class="form-control mb-3">
                <option value="">— Firma Seçin —</option>
                {% for comp in companies %}
                  <option value="{{ comp.id }}">{{ comp.name }}</option>
               {% endfor %}
            </select>
            </div>

      <div class="text-end">
        <button type="submit" class="btn btn-primary px-4">Save</button>
      </div>
    </form>
  </div>
</div>



      </div>
      <div id="currencySection" style="display:none;">
        <label class="form-label mb-1">Currency</label>
        <select id="prodCurrencySelect" class="form-control mb-3">
          <option value="TL">TL</option>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
        </select>
      </div>
      <!-- **YENİ**: Company Seçimi -->
      <div id="companySectionProd" class="mb-3" style="display:none;">
        <label class="form-label mb-1">Company</label>
        <input
          id="prodCompanyInput"
          name="company_name"
          type="text"
          class="form-control mb-3"
          placeholder="Firma adını girin"
        >
      </div>
      <div class="text-end">
        <button id="prodSubmitBtn" type="submit" class="btn btn-primary px-4">Save</button>
      </div>
      

<!-- Company seçimi -->


<style>
  .filter-btn {
    background: #D7CCC8;
    color: #5D4037;
    margin-right: 5px;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 120px; /* Filtre butonları için sabit bir minimum genişlik */
  text-align: center; /* Yazıyı ortalamak için */

  }
  .filter-btn.active {
    background: #5D4037;
    color: #fff;
  }
  .pagination_section .page-link {
    border-radius: 9999px;
  }
  .pagination_section .page-link:hover:not(.active) {
    background: #997e76;
    color: #fff;
  }
  .pagination_section .active .page-link {
    background: #8b786b;
    border-color: #8b786b;
    color: #fff;
  }
  .export-container {
    position: relative;
  }
  .export-btn {
    background: #bc8f8f;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
  }
  .export-menu {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
  }
  .export-menu li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
  }
  .export-menu li a:hover {
    background: #f1f1f1;
  }
  .btn-xs {
    padding: 4px 8px;
    font-size: .8rem;
    margin-right: 5px;
    border-radius: 4px;
  }
  .btn-info {
    background-color: #6f42c1;
    border-color: #6f42c1;
  }
  .btn-warning {
    background-color: #fd7e14;
    border-color: #fd7e14;
  }
  .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .btn-success {
    background-color: #28a745;
    border-color: #28a745;
  }
  .actions-cell {
    vertical-align: middle;
    padding: .75rem;
    text-align: left;
  }
  .actions-cell .d-flex {
  overflow-x: visible !important;  /* kaydırma çubuğunu kaldır */
  gap: 0.2rem;                      /* butonlar arası boşluğu azalt */
  flex-wrap: nowrap !important;    /* tek satıra zorla */
}
  .custom-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,.35);
  z-index: 2000;
}

.custom-modal.show {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  position: fixed; /* Changed from absolute to fixed for viewport centering */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
    color: #6c757d;
  }
  .text-brown {
    color: #5D4037;
  }
  .table th {
    background-color: #8b786b;
    color: #fff;
    padding: 10px;
  }
  .table td {
    padding: 10px;
    vertical-align: middle;
  }
  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }
  .actions-cell .btn-sm {
  min-width: auto !important;      /* sabit genişlikten kurtul */
  padding: 0.12rem 0.25rem !important; /* iç boşluğu küçült */
  font-size: 0.75rem !important;        /* yazıyı küçült */
  white-space: nowrap;             /* metin satır atlamasın */
}
.actions-cell .ml-1 {
  margin-left: 0 !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  // CSRF token helper
  function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || '';
  }

  // Generic modal toggle
  function toggleModal(modal, show) {
    modal.classList.toggle('show', show);
  }

  // --- Modal elemanları ---
  const quantityModal     = document.getElementById('quantityModal');
  const deliverModal      = document.getElementById('deliverModal');
  const prodActionModal   = document.getElementById('prodActionModal');
  const quantityForm      = document.getElementById('quantityForm');
  const qtyInput          = document.getElementById('deliveredQuantity');
  const confirmDeliverBtn = document.getElementById('confirmDeliver');
  const locSearch         = document.getElementById('locationSearch');
  const locList           = document.getElementById('locationList');
  const prodActionForm    = document.getElementById('prodActionForm');
  const modalTitleProd    = document.getElementById('modalTitleProd');
  const inputLabelProd    = document.getElementById('inputLabelProd');
  const prodActionInput   = document.getElementById('prodActionInput');
  const currencySection   = document.getElementById('currencySectionProd');
  const prodCurrencySelect= document.getElementById('prodCurrencySelect');
  const companySection    = document.getElementById('companySectionProd');
  const prodCompanyInput  = document.getElementById('prodCompanyInput');
  const companySelect = document.getElementById('prodCompanySelect');

  let currentId, deliveredQty, selectedLoc, prodActionType;

  // Hepsi için kapanma butonları
  [quantityModal, deliverModal, prodActionModal].forEach(modal => {
    modal.querySelector('.close-btn').addEventListener('click', () => toggleModal(modal, false));
    modal.addEventListener('click', e => {
      if (e.target === modal) toggleModal(modal, false);
    });
  });

  // --- TESLİM (deliver) FLOW ---
  document.querySelectorAll('.deliver-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      currentId = btn.dataset.id;
      qtyInput.value = btn.closest('tr').querySelector('.qty-cell').textContent.trim();
      toggleModal(quantityModal, true);
    });
  });

  quantityForm.addEventListener('submit', e => {
    e.preventDefault();
    deliveredQty = parseInt(qtyInput.value, 10);
    if (!deliveredQty || deliveredQty < 1) {
      return alert('Geçerli bir miktar girin.');
    }
    toggleModal(quantityModal, false);
    confirmDeliverBtn.disabled = true;
    locList.innerHTML = '<li class="list-group-item">Yükleniyor…</li>';
    toggleModal(deliverModal, true);
    fetch("{% url 'locations_json' %}")
      .then(res => res.json())
      .then(json => {
        locList.innerHTML = '';
        json.locations.forEach(loc => {
          const li = document.createElement('li');
          li.className = 'list-group-item';
          li.textContent = loc.label;
          li.dataset.id = loc.id;
          locList.appendChild(li);
        });
      })
      .catch(() => {
        locList.innerHTML = '<li class="list-group-item">Lokasyonlar yüklenemedi.</li>';
      });
  });

  locSearch.addEventListener('input', () => {
    const q = locSearch.value.toLowerCase();
    locList.querySelectorAll('li').forEach(li => {
      li.style.display = li.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  });

  locList.addEventListener('click', e => {
    if (e.target.tagName === 'LI') {
      locList.querySelectorAll('li').forEach(li => li.classList.remove('active'));
      e.target.classList.add('active');
      selectedLoc = e.target.dataset.id;
      confirmDeliverBtn.disabled = false;
    }
  });

  confirmDeliverBtn.addEventListener('click', () => {
    if (!selectedLoc) return;
    const base = `{% url 'product_deliver' 0 %}`.replace('/0/', `/${currentId}/`);
    window.location.href = `${base}?newqty=${deliveredQty}&location_id=${selectedLoc}`;
  });

  // --- PRODUCT ORDER/OFFER MODAL ---
  function openProdModal(type, titleText, showCurrency, showCompany) {
    prodActionType = type;
    modalTitleProd.textContent = titleText;
    inputLabelProd.textContent = type === 'offer' ? 'Birim fiyatı' : 'Miktar';
    prodActionInput.value = '';
    if (type === 'order') {
    prodActionInput.placeholder = 'Mevcut miktar için boş bırak';
  } else {
    prodActionInput.placeholder = 'Birim fiyatı girin';
  }
    prodActionInput.step = type === 'offer' ? '0.001' : '1';
    prodActionInput.min  = type === 'offer' ? '0' : '1';
    currencySection.style.display = showCurrency ? '' : 'none';
    companySection.style.display  = showCompany  ? '' : 'none';
    currentQtyDisplay.style.display = type === 'order' ? '' : 'none';
    toggleModal(prodActionModal, true);
    prodActionInput.focus();
  }

  document.querySelectorAll('.offer-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      currentId = btn.closest('tr').dataset.id;
      openProdModal('offer', 'Teklif Ver – Birim Fiyatı Girin', true, true);
    });
  });

  document.querySelectorAll('.order-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      const row = btn.closest('tr');
      currentId = row.dataset.id;
      const curQty = row.querySelector('.qty-cell').textContent.trim();
      currentQtyDisplay.textContent = `Mevcut miktar: ${curQty}`;
      openProdModal('order', 'Sipariş Ver – Miktarı Girin', false, false);
    });
  });
  const productCompanySelect = document.getElementById('productCompanySelect');

prodActionForm.addEventListener('submit', e => {
  e.preventDefault();
  const val = prodActionInput.value.trim();
  const params = new URLSearchParams();
  let baseUrl;

  if (prodActionType === 'offer') {
    // Birim fiyat ve currency zaten ekleniyor
    params.append('newprice', val);
    params.append('currency', prodCurrencySelect.value);

    // !!! Sadece BURADA bir kez compId tanımla:
    const compId = productCompanySelect.value;
    if (!compId) {
      return alert('Lütfen bir firma seçin.');
    }
    params.append('company_id', compId);

    baseUrl = `{% url "product_offer" 0 %}`.replace('/0/', `/${currentId}/`);
  } else {
    // Order işlemi…
    params.append('newqty', val || '');
    baseUrl = `{% url "product_order" 0 %}`.replace('/0/', `/${currentId}/`);
  }

  window.location.href = `${baseUrl}?${params.toString()}&status=purchased_request`;
});


  // --- EXPORT MENU ---
  const $expBtn  = $('.export-btn');
  const $expMenu = $('#exportMenuProducts');
  $expBtn.on('click', e => {
    e.stopPropagation();
    $expMenu.toggle();
  });
  $(document).on('click', e => {
    if (!$expMenu.is(e.target) && $expMenu.has(e.target).length === 0 && !$expBtn.is(e.target)) {
      $expMenu.hide();
    }
  });

  // --- FILTER BUTTONS ---
  const $fBtns = $('.filter-btn');
  const $rows  = $('.app-table-products tbody tr');
  const $qH    = $('.qty-header');
  const $qC    = $('.qty-cell');
  function applyFilter(st) {
    $fBtns.each(function() {
      $(this).toggleClass('active', $(this).data('status') === st);
    });
    $rows.each(function() {
      $(this).toggle(st === 'all' || $(this).data('status') === st);
    });
    const hideQty = st === 'request';
    $qH.toggle(!hideQty);
    $qC.toggle(!hideQty);
  }
  $fBtns.on('click', function() {
    applyFilter($(this).data('status'));
  });
  applyFilter(new URLSearchParams(window.location.search).get('status') || 'request');

  // --- SEARCH ---
  $('#searchFieldProducts').on('input', debounce(function() {
    const txt = $(this).val().trim();
    if (txt.length < 2) {
      $('.table-output-products').hide();
      $('.app-table-products').show();
      return;
    }
    $.ajax({
      url: "{% url 'search_products' %}",
      method: 'POST',
      headers: {'X-CSRFToken': getCsrfToken()},
      contentType: 'application/json',
      data: JSON.stringify({searchText: txt}),
      success(data) {
        $('.app-table-products').hide();
        $('.table-output-products').show();
        const $tb = $('.table-body-products').empty();
        if (data.products.length) {
          data.products.forEach(p => {
            $tb.append(`
              <tr data-status="${p.order_status}" data-id="${p.id}">
                <td>${p.project_name || '–'}</td>
                <td>${p.component__title || '–'}</td>
                <td>${p.part_no || '–'}</td>
                <td>${p.brand || '–'}</td>
                <td>${p.company__name || '–'}</td>
                <td class="qty-cell">${p.product_quantity || '–'}</td>
                <td>${p.product_link ? `<a href="${p.product_link}" target="_blank">${p.product_link}</a>` : '–'}</td>
                <td>${p.product_date || '–'}</td>
                <td>${p.product_price != null ? p.product_price : '–'}</td>
                <td>${p.currency != null ? p.currency : '–'}</td>
                <td>${p.product_photo ? `<img src="${p.product_photo}" width="50" alt="Ürün fotoğrafı">` : '–'}</td>
                <td class="actions-cell">
                  <div class="d-flex flex-nowrap align-items-center">
                    ${p.order_status==='request'
                      ? `<a href="{% url 'product_offer' 0 %}".replace('0',p.id) class="btn btn-info btn-sm ml-1 offer-btn">Offer</a>
                         <a href="{% url 'product_order' 0 %}".replace('0',p.id) class="btn btn-warning btn-sm ml-1 order-btn">Order</a>
                         <a href="{% url 'edit_ordered_product' 0 %}".replace('0',p.id) class="btn btn-secondary btn-sm ml-1">Edit</a>
                         <a href="{% url 'delete_product' 0 %}".replace('0',p.id) class="btn btn-sm ml-1 text-danger"><i class="fas fa-trash-alt"></i></a>`
                      : p.order_status==='offer'
                      ? `<a href="{% url 'product_order' 0 %}".replace('0',p.id) class="btn btn-warning btn-sm ml-1 order-btn">Order</a>
                         <a href="{% url 'edit_quoted_product' 0 %}".replace('0',p.id) class="btn btn-secondary btn-sm ml-1">Edit</a>
                         <a href="{% url 'product_cancel' 0 %}".replace('0',p.id) class="btn btn-danger btn-sm ml-1">Quote Canceled</a>`
                      : p.order_status==='purchased_request'
                      ? `<a href="{% url 'product_purchase' 0 %}".replace('0',p.id) class="btn btn-success btn-sm ml-1">Purchase</a>
                         <a href="{% url 'product_cancel_request' 0 %}".replace('0',p.id) class="btn btn-danger btn-sm ml-1">Cancel Request</a>
                         <a href="{% url 'edit_ordered_product' 0 %}".replace('0',p.id) class="btn btn-secondary btn-sm ml-1">Edit</a>`
                      : p.order_status==='order'
                      ? `<button class="btn btn-success btn-sm ml-1 deliver-btn" data-id="${p.id}">Confirm Delivered</button>
                         <a href="{% url 'edit_ordered_product' 0 %}".replace('0',p.id) class="btn btn-secondary btn-sm ml-1">Edit</a>
                         <a href="{% url 'product_cancel' 0 %}".replace('0',p.id) class="btn btn-danger btn-sm ml-1">Purchase Canceled</a>`
                      : p.order_status==='purchased'
                      ? `<a href="{% url 'product_purchased_canceled' 0 %}".replace('0',p.id) class="btn btn-danger btn-sm ml-1">Purchased Canceled</a>
                         <a href="{% url 'edit_ordered_product' 0 %}".replace('0',p.id) class="btn btn-secondary btn-sm ml-1">Edit</a>`
                      : ``
                    }
                  </div>
                </td>
              </tr>
            `);
          });
        } else {
          $tb.append('<tr><td colspan="12" class="text-center">Sonuç bulunamadı.</td></tr>');
        }
      },
      error() {
        $('.table-body-products').html('<tr><td colspan="12" class="text-center">Arama sırasında bir hata oluştu.</td></tr>');
      }
    });
  }, 300));

  // Debounce helper
  function debounce(fn, ms) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, arguments), ms);
    };
  }

});
</script>






{% endblock %}