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

{% block title %}Inventory Report{% endblock %}
{% block stylesheets %}

  <style>
    .filter-box .form-control, .filter-box .form-check-input { font-size: .85rem; }
    .action-btns .btn { margin-right:4px; }
 
        /* +++ add this +++ */
    .action-btns .icon-btn { padding: .25rem .4rem; line-height: 1; }
    .action-btns .icon-btn i { font-size: 14px; }



  </style>
{% endblock %}

{% block heading %}Inventory Report{% endblock %}
{% block content %}
  <form id="filterForm" method="get" class="filter-box mb-3">
    <div class="row g-3 align-items-end">
      <!-- Code -->
      <div class="col-md-2">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="fc_code" name="filter_code" {% if filter_code %}checked{% endif %}>
          <label class="form-check-label" for="fc_code">Code</label>
        </div>
        <input type="text" name="code" value="{{ code_q }}" class="form-control form-control-sm">
      </div>
      <!-- Name -->
      <div class="col-md-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="fc_name" name="filter_name" {% if filter_name %}checked{% endif %}>
          <label class="form-check-label" for="fc_name">Name</label>
        </div>
        <select id="filter_name" name="name" class="form-control form-control-sm select2">
          {% if name_q %}<option value="{{ name_q }}" selected>{{ name_q }}</option>{% endif %}
        </select>
      </div>
      <!-- Company -->
      <div class="col-md-2">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="fc_comp" name="filter_company" {% if filter_company %}checked{% endif %}>
          <label class="form-check-label" for="fc_comp">Company</label>
        </div>
        <select name="company" class="form-control form-control-sm select2">
          <option value=""></option>
          {% for c in companies %}
            <option value="{{ c }}" {% if c == company_q %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>
      <!-- Category -->
      <div class="col-md-2">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="fc_cat" name="filter_category" {% if filter_category %}checked{% endif %}>
          <label class="form-check-label" for="fc_cat">Category</label>
        </div>
        <select name="category" class="form-control form-control-sm select2">
          <option value=""></option>
          {% for cat in categories %}
            <option value="{{ cat }}" {% if cat == category_q %}selected{% endif %}>{{ cat }}</option>
          {% endfor %}
        </select>
      </div>
      <!-- Search -->
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary btn-sm">Search</button>
      </div>
    </div>
  </form>

  <!-- Export (separate form) -->
  <div class="mb-3 text-end">
    <div class="dropdown">
      <button class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
        Export
      </button>
      <div class="dropdown-menu p-3">
        <form id="exportForm" method="post" action="{% url 'reports:export_inventory_report' %}">
          {% csrf_token %}
          <!-- preserve filters -->
          <input type="hidden" name="filter_code"    value="{{ filter_code|yesno:'on,' }}">
          <input type="hidden" name="filter_name"    value="{{ filter_name|yesno:'on,' }}">
          <input type="hidden" name="filter_company" value="{{ filter_company|yesno:'on,' }}">
          <input type="hidden" name="filter_category"value="{{ filter_category|yesno:'on,' }}">
          <input type="hidden" name="code"           value="{{ code_q }}">
          <input type="hidden" name="name"           value="{{ name_q }}">
          <input type="hidden" name="company"        value="{{ company_q }}">
          <input type="hidden" name="category"       value="{{ category_q }}">

          <div class="mb-2"><strong>Columns to export:</strong></div>
          {% for col in export_columns %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="columns" value="{{ col }}" id="exp_{{ col }}" checked>
              <label class="form-check-label" for="exp_{{ col }}">{{ col }}</label>
            </div>
          {% endfor %}

          <hr class="my-2"/>
          <button name="export_type" value="pdf"   class="btn btn-sm btn-outline-primary w-100 mb-1">PDF</button>
          <button name="export_type" value="excel" class="btn btn-sm btn-outline-success w-100">Excel</button>
        </form>
      </div>
    </div>
  </div>

  <!-- RESULTS TABLE -->
  <div class="table-responsive">
    <table id="items_table" class="table table-striped table-bordered table-sm">
      <thead class="table-light">
        <tr>
          <th>S/No</th><th>ID</th><th>Code</th><th>Name</th><th>Company</th>
          <th>Category</th><th class="text-end">Purchase</th><th class="text-end">Sale</th>
          <th class="text-end">Wholesale</th><th class="text-end">Stock</th>
          <th class="text-end">Investment</th><th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for p in products %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ p.prod_id }}</td>
            <td>{{ p.product_code }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.prod_company }}</td>
            <td>{{ p.prod_category }}</td>
            <td class="text-end">{{ p.purchase_price|floatformat:2 }}</td>
            <td class="text-end">{{ p.l_sale_price|floatformat:2 }}</td>
            <td class="text-end">{{ p.whole_sale_price|floatformat:2 }}</td>
            <td class="text-end">{{ p.present_stock|floatformat:2 }}</td>
            <td class="text-end">{{ p.investment|floatformat:2 }}</td>
            <td class="action-btns">
              <div class="btn-group">
                <!-- Main Action dropdown (as you already have) -->
                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                  Action
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a class="dropdown-item" href="{% url 'products:products_edit_with_id' p.id %}">
                      Edit Product
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#viewModal"
                       data-id="{{ p.prod_id }}" data-name="{{ p.name }}">
                      View
                    </a>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item delete-btn"
                       href="#"
                       data-href="{% url 'reports:inventory_delete_product' p.id %}">
                      Delete
                    </a>
                  </li>
                </ul>

                <!-- Quick Edit icon: black (no yellow) -->
                <a class="btn btn-sm btn-outline-dark icon-btn"
                   href="{% url 'products:products_update' p.id %}"
                   title="Edit Product (Quick)">
                  <i class="fas fa-pen" aria-hidden="true"></i>
                </a>
              </div>
            </td>


          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- TOTALS -->
  <div class="mt-3 text-end">
    <span class="badge bg-primary me-2">Total Units: {{ total_units|floatformat:2 }}</span>
    <span class="badge bg-success">Total Investment: {{ total_investment|floatformat:2 }}</span>
  </div>

  <!-- VIEW MODAL -->
  <div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Product: <span id="viewName"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body d-flex justify-content-around">
          <a id="histLink" class="btn btn-outline-primary">See Product History</a>
          <a id="fifoLink" class="btn btn-outline-secondary">FIFO Layers</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block javascripts %}

  <script>
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    const common = { theme:'bootstrap4', width:'100%' };

    $(function(){
      $('#filter_name').select2({
        ...common,
        placeholder: 'Search product…',
        minimumInputLength: 1,
        allowClear: true,
        ajax: {
          url: "{% url 'products:get_products' %}",
          type: 'POST',
          headers: {'X-CSRFToken': csrftoken},
          data: params=>({term:params.term}),
          processResults: data=>({results:data})
        },
        templateResult: r=>r.loading?r.text:$('<div>'+r.text+'</div>'),
        templateSelection: r=>r.text
      });

      $('select.select2').not('#filter_name').select2(common);
      $('#items_table').DataTable({ pageLength:25, lengthChange:false });

      // Delete
      $('.delete-btn').click(function(e){
        e.preventDefault();
        if (confirm('Really delete?')) window.location = $(this).data('href');
      });

      // View modal
      $('#viewModal').on('show.bs.modal', function(ev){
        const btn = ev.relatedTarget,
              id  = btn.dataset.id,
              nm  = btn.dataset.name;
        $('#viewName').text(nm);
        $('#histLink').attr('href',
          "{% url 'reports:product_history' 0 %}".replace('/0/','/'+id+'/')
        );
        $('#fifoLink').attr('href',
          "{% url 'reports:fifo_layers' 0 %}".replace('/0/','/'+id+'/')
        );
      });
    });
  </script>
{% endblock %}