{# templates/products/vendors.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Vendors{% endblock title %}

{% block stylesheets %}

{% endblock stylesheets %}

{% block heading %}Vendors{% endblock heading %}

{% block content %}
<!-- DESKTOP / LAPTOP (md+) : single line -->
<div class="row ml-0 mb-3 d-none d-md-flex align-items-center" style="flex-wrap:nowrap;">
  <a href="{% url 'products:vendors_add' %}" class="btn btn-success font-weight-bold mr-2">
    <i class="fas fa-plus mr-2"></i>
    Create new vendor
  </a>
  {% if 'vendor_edit' in allowed_features %}
  <a href="{% url 'products:vendors_quick_edit' %}"
     class="btn btn-sm btn-outline-success mr-2" title="Edit Vendor">
    <i class="fas fa-edit mr-1"></i>
    Edit Vendor
  </a>
  {% endif %}
  <button type="button" class="btn btn-sm btn-outline-primary mr-2"
          data-toggle="collapse" data-target="#vendorExcelPanel"
          aria-expanded="false" aria-controls="vendorExcelPanel">
    <i class="fas fa-file-excel mr-1"></i>
    Excel Upload
  </button>
  <a href="https://blueprimes.com/"  target="_blank"
     class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center justify-content-center"
     title="YouTube">
    <i class="fab fa-youtube text-danger fa-lg"></i>
  </a>
</div>

<!-- MOBILE (sm) : grid -->
<div class="mb-3 d-md-none">
  <div class="row no-gutters">
    <div class="col-6 pr-1 mb-2">
      <a href="{% url 'products:vendors_add' %}" class="btn btn-success font-weight-bold btn-block">
        <i class="fas fa-plus mr-2"></i> New
      </a>
    </div>

    {% if 'vendor_edit' in allowed_features %}
    <div class="col-6 pl-1 mb-2">
      <a href="{% url 'products:vendors_quick_edit' %}" class="btn btn-outline-success btn-block" title="Edit Vendor">
        <i class="fas fa-edit mr-1"></i> Edit
      </a>
    </div>
    {% endif %}

    <div class="col-12 mb-2">
      <button type="button" class="btn btn-outline-primary btn-block"
              data-toggle="collapse" data-target="#vendorExcelPanel"
              aria-expanded="false" aria-controls="vendorExcelPanel">
        <i class="fas fa-file-excel mr-1"></i> Excel Upload
      </button>
    </div>

    <div class="col-12 mb-2">
      <a href="#" class="btn btn-outline-secondary btn-block d-flex align-items-center justify-content-center" title="YouTube">
        <i class="fab fa-youtube text-danger fa-lg"></i>
      </a>
    </div>
  </div>
</div>


<!-- Excel Upload panel (template download + bulk upload) -->
<div class="collapse mb-3" id="vendorExcelPanel">
  <div class="card shadow border-left-primary">
    <div class="card-body">
      <h6 class="font-weight-bold text-primary mb-3">Bulk Vendor Upload (Excel)</h6>

      <div class="alert alert-light border mb-3" role="alert">
        <strong>How it works:</strong>
        <ol class="mb-0 pl-3">
          <li>Click <em>Download Excel Template</em> below.</li>
          <li>Fill in one row per vendor: <code>Name</code>, <code>Address</code>, <code>Mobile</code>, <code>Phone</code>, <code>Opening Balance</code>, <code>Max Balance</code>. Delete the sample row first.</li>
          <li>Upload the filled file below — a vendor record will be created for each row, and if <code>Opening Balance</code> is not zero, a matching "Starting Balance" entry will also be posted in the vendor's payment ledger.</li>
          <li>Vendors with a name that already exists will be skipped automatically.</li>
        </ol>
      </div>

      <a href="{% url 'products:download_vendor_excel_template' %}" class="btn btn-info mb-3">
        <i class="fas fa-download mr-1"></i> Download Excel Template
      </a>

      <form method="POST" action="{% url 'products:upload_vendor_excel' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group">
          <label for="vendorExcelFileInput">Choose filled Excel/CSV file:</label>
          <input
            type="file"
            name="excel_file"
            id="vendorExcelFileInput"
            accept=".xlsx, .xls, .csv"
            required
            class="form-control-file"
          >
        </div>
        <button type="submit" class="btn btn-success mt-2">
          <i class="fas fa-upload mr-1"></i> Upload
        </button>
      </form>
    </div>
  </div>
</div>

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">All Vendors</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th>#</th>
            <th>Name</th>
            <th>Address</th>
            <th>Mobile</th>
            <th>Phone</th>
            <th>Balance</th>
            <th>Max Balance</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for v in vendors %}
          <tr>
            <td>{{ v.id }}</td>
            <td>{{ forloop.counter }}</td>
            <td>{{ v.name }}</td>
            <td>{{ v.address }}</td>
            <td>{{ v.mobile }}</td>
            <td>{{ v.phone }}</td>
            <td>{{ v.balance }}</td>
            <td>{{ v.max_balance }}</td>
            <td class="text-center">
              {% if 'vendor_edit' in allowed_features %}
                <a href="{% url 'products:vendors_update' v.id %}" class="text-decoration-none">
                  <button class="btn btn-warning btn-sm" title="Update vendor">
                    <i class="fas fa-pen"></i>
                  </button>
                </a>
              {% endif %}
              {% if 'vendor_delete' in allowed_features %}
              <button
                class="btn btn-danger btn-sm"
                title="Delete vendor"
                onclick="
                  if (confirm('Are you sure you want to delete vendor: {{ v.name|escapejs }}?')) {
                    window.location.href = '{% url 'products:vendors_delete' v.id %}';
                  }
                ">
                <i class="fas fa-trash"></i>
              </button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
  <!-- include your DataTables buttons scripts here… -->

  <script>
    $(function(){
      $('#dataTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
          { extend: 'print',      className: 'btn btn-info',  exportOptions: { columns: [0,1,2,3,4,5,6,7]} },
          { extend: 'excelHtml5', className: 'btn btn-success', exportOptions: { columns: [0,1,2,3,4,5,6,7]} },
          { extend: 'pdfHtml5',   className: 'btn btn-danger',  exportOptions: { columns: [0,1,2,3,4,5,6,7]} },
        ],
        columnDefs: [
          { targets: [0],    visible: false, searchable: false },
          { targets: -1,     orderable: false }
        ]
      });
    });
  </script>
{% endblock javascripts %}