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

{% block title %}Investors{% endblock %}

{% block stylesheets %}
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}Investors{% endblock %}

{% block content %}
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Investors</h6>
  </div>
  <div class="card-body">
    <div class="mb-3">
      <a href="{% url 'products:investors_add' %}" class="btn btn-success">Add Investor</a>
    </div>
    <div class="table-responsive">
      <table id="dataTable" class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>Investor ID</th>
            <th>Name</th>
            <th class="text-right">Balance</th>
            <th class="text-right">Advance Due</th>
            <th class="text-right">Saved Profit</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for inv in investors %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ inv.t_id }}</td>
            <td>{{ inv.name }}</td>
            <td class="text-right">{{ inv.balance|floatformat:2 }}</td>
            <td class="text-right">{{ inv.advance_due|floatformat:2 }}</td>
            <td class="text-right">{{ inv.profit_saved|floatformat:2 }}</td>
            <td>
              <a href="{% url 'products:investors_update' inv.id %}" class="btn btn-warning btn-sm">Edit</a>
              <a href="{% url 'products:investors_delete' inv.id %}"
                 onclick="return confirm('Delete investor {{ inv.name }}?')"
                 class="btn btn-danger btn-sm">Del</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
$(function(){
  $('#dataTable').DataTable({ order: [[1,'asc']] });
});
</script>
{% endblock %}