{% extends "pos/base.html" %}
{% load static %}
{% block title %}Vendor & Company Mapping{% endblock %}

{% block stylesheets %}
<style>
  .vc-subtitle { color: #5c6470; font-size: .8rem; margin-bottom: 0; }
  .vc-prompt-state {
    border: 1.5px dashed #e0e2e7; border-radius: 10px; background: #fbfcfd;
    text-align: center; color: #9aa1ac; font-size: .85rem; padding: 2rem 1rem;
  }
  .vc-empty-state { text-align: center; color: #9aa1ac; font-size: .85rem; padding: 1.5rem 1rem; }
  .vc-add-row { margin-bottom: 1rem; }
  #vcCompaniesTable thead th {
    font-size: .7rem; font-weight: 700; color: #5c6470;
    text-transform: uppercase; letter-spacing: .5px; border-top: none;
  }
  .vc-product-count {
    cursor: pointer; font-weight: 700; color: #2d5f8a;
    border-bottom: 1px dashed #2d5f8a;
  }
  .vc-product-count:hover { color: #1e3a5f; }
</style>
{% endblock %}

{% block heading %}Vendor & Company Mapping{% endblock %}

{% block content %}

<div class="card shadow-sm mb-3">
  <div class="card-body">
    <label for="vcVendorSelect" class="font-weight-bold text-primary mb-1" style="font-size:.85rem;">Vendor</label>
    <p class="vc-subtitle mb-2">Pick a vendor to manage which companies (brands) it supplies.</p>
    <select id="vcVendorSelect" class="form-control" style="width:100%; max-width:420px;"></select>
  </div>
</div>

<div id="vcPromptState" class="vc-prompt-state mb-3">
  Select a vendor above to manage its companies.
</div>

<div class="card shadow mb-4" id="vcCompaniesSection" style="display:none;">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Attached Companies</h6>
  </div>
  <div class="card-body">
    <div class="vc-add-row">
      <label for="vcCompanySelect" class="font-weight-bold" style="font-size:.8rem; color:#5c6470;">Attach a company</label>
      <select id="vcCompanySelect" class="form-control" style="width:100%; max-width:420px;"></select>
    </div>

    <div class="table-responsive">
      <table class="table table-hover table-bordered" id="vcCompaniesTable">
        <thead>
          <tr>
            <th>Company</th>
            <th class="text-right" style="width:120px;">Products</th>
            <th class="text-right" style="width:100px;">Action</th>
          </tr>
        </thead>
        <tbody id="vcCompaniesTbody"></tbody>
      </table>
    </div>

    <div id="vcEmptyState" class="vc-empty-state" style="display:none;">
      No companies attached yet. Search above to add the first one.
    </div>
  </div>
</div>

<!-- Products modal -->
<div class="modal fade" id="vcProductsModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="vcProductsModalTitle">Products</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="list-group" id="vcProductList"></ul>
        <div id="vcProductListEmpty" class="vc-empty-state" style="display:none;">No products found for this company.</div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
$(function () {
  const VENDOR_SEARCH_URL  = "{% url 'purchases:vendor_company_vendor_search' %}";
  const COMPANY_LIST_URL   = "{% url 'purchases:vendor_company_list' %}";
  const COMPANY_SEARCH_URL = "{% url 'purchases:vendor_company_company_search' %}";
  const ATTACH_URL         = "{% url 'purchases:vendor_company_attach' %}";
  const DETACH_URL         = "{% url 'purchases:vendor_company_detach' %}";
  const PRODUCTS_URL       = "{% url 'purchases:vendor_company_products' %}";
  const CSRF_TOKEN         = $('[name=csrfmiddlewaretoken]').val() || '{{ csrf_token }}';

  let currentVendorTId = null;

  function esc(s) { return $('<div>').text(s == null ? '' : s).html(); }

  $('#vcVendorSelect').select2({
    placeholder: 'Search a vendor…',
    allowClear: true,
    width: '100%',
    ajax: {
      url: VENDOR_SEARCH_URL,
      dataType: 'json',
      delay: 200,
      data: params => ({ term: params.term }),
      processResults: data => ({ results: data.results }),
    },
  });

  $('#vcCompanySelect').select2({
    placeholder: 'Search a company to attach…',
    width: '100%',
    ajax: {
      url: COMPANY_SEARCH_URL,
      dataType: 'json',
      delay: 200,
      data: params => ({ term: params.term, vendor_t_id: currentVendorTId }),
      processResults: data => ({ results: data.results }),
    },
  });

  $('#vcVendorSelect').on('change', function () {
    currentVendorTId = $(this).val();
    if (!currentVendorTId) {
      $('#vcCompaniesSection').hide();
      $('#vcPromptState').show();
      return;
    }
    $('#vcPromptState').hide();
    $('#vcCompaniesSection').show();
    loadCompanies();
  });

  function loadCompanies() {
    $.getJSON(COMPANY_LIST_URL, { vendor_t_id: currentVendorTId }, function (resp) {
      const $tbody = $('#vcCompaniesTbody');
      $tbody.empty();
      if (!resp.ok || !resp.rows.length) {
        $('#vcEmptyState').show();
        $('#vcCompaniesTable').hide();
        return;
      }
      $('#vcEmptyState').hide();
      $('#vcCompaniesTable').show();
      resp.rows.forEach(row => {
        $tbody.append(
          '<tr>' +
            '<td>' + esc(row.company_name) + '</td>' +
            '<td class="text-right">' +
              '<span class="vc-product-count" data-company-t-id="' + row.company_t_id + '" ' +
                    'data-company-name="' + esc(row.company_name) + '" ' +
                    'title="Double-click to view products">' + row.product_count + '</span>' +
            '</td>' +
            '<td class="text-right">' +
              '<button type="button" class="btn btn-outline-danger btn-sm vc-remove-btn" data-link-id="' + row.link_id + '">' +
                '<i class="fas fa-trash"></i>' +
              '</button>' +
            '</td>' +
          '</tr>'
        );
      });
    });
  }

  $('#vcCompanySelect').on('select2:select', function (e) {
    const companyTId = e.params.data.id;
    $.post(ATTACH_URL, { vendor_t_id: currentVendorTId, company_t_id: companyTId, csrfmiddlewaretoken: CSRF_TOKEN }, function (resp) {
      if (!resp.ok) {
        Swal.fire({ icon: 'error', title: 'Could not attach', text: resp.message || 'Something went wrong.' });
      }
      loadCompanies();
      $('#vcCompanySelect').val(null).trigger('change');
    });
  });

  $(document).on('click', '.vc-remove-btn', function () {
    const linkId = $(this).data('link-id');
    Swal.fire({
      icon: 'warning',
      title: 'Remove this company?',
      text: 'This vendor will no longer offer it in Purchase Order suggestions.',
      showCancelButton: true,
      confirmButtonText: 'Remove',
      cancelButtonText: 'Cancel',
      confirmButtonColor: '#b91c1c',
    }).then(function (result) {
      if (!result.isConfirmed) return;
      $.post(DETACH_URL, { link_id: linkId, csrfmiddlewaretoken: CSRF_TOKEN }, function (resp) {
        if (!resp.ok) {
          Swal.fire({ icon: 'error', title: 'Could not remove', text: resp.message || 'Something went wrong.' });
        }
        loadCompanies();
      });
    });
  });

  $(document).on('dblclick', '.vc-product-count', function () {
    const companyTId = $(this).data('company-t-id');
    const companyName = $(this).data('company-name');
    $('#vcProductsModalTitle').text('Products — ' + companyName);
    $.getJSON(PRODUCTS_URL, { company_t_id: companyTId }, function (resp) {
      const $list = $('#vcProductList');
      $list.empty();
      if (!resp.ok || !resp.names.length) {
        $('#vcProductListEmpty').show();
      } else {
        $('#vcProductListEmpty').hide();
        resp.names.forEach(name => $list.append('<li class="list-group-item">' + esc(name) + '</li>'));
      }
      $('#vcProductsModal').modal('show');
    });
  });
});
</script>
{% endblock %}