{% extends 'base.html' %}
{% block title %}Process Delivery Note{% endblock title %}

{% load static %}

{% block page_style %}
		<link href="{% static 'autocomplete/easy-autocomplete.min.css' %}" rel="stylesheet" type="text/css">
        <style>
            th{background-color: rgb(233, 236, 239);}
            .fa-trash-alt, .fa-trash{color: red;}
        </style>
{% endblock page_style %}

{% block page_js %}
    <script src="{% static 'autocomplete/jquery-1.11.2.min.js' %}"></script>
	<script src="{% static 'autocomplete/jquery.easy-autocomplete.min.js' %}" type="text/javascript" ></script>
{% endblock page_js %}

{% block page_content %}
    <nav class="navbar navbar-expand-lg context-bar">
      <a class="navbar-brand" href="#">
          <i class="fa fa-users"></i> Delivery Note
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link" href="{% url 'deliveries:home' %}">
              <i class="fa fa-list-ul"></i> View Deliveries
          </a>
        </div>
      </div>
    </nav>

    {% include 'messages.html' %}

    <div class="card ">
        <div class="card-header">
            <h4 class="card-title m-0">Processing delivery from {{ request.session.supplier.supplier_name }}</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <form method="post" action="{% url 'deliveries:create-delivery-note' %}">{% csrf_token %}
                        {{ form.as_p }}
                        <button type="submit" class="btn btn-block btn-info"> Add </button>
                        <button type="reset" id="reset-btn" class="btn btn-outline-dark btn-block">Reset form</button>
                        <a href="{% url 'deliveries:set-supplier' %}" class="btn btn-link btn-block">Change Supplier</a>
                    </form>
                </div>
                <div class="col-8">
                    {% if request.session.products|length > 0 %}

                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <th>#</th><th>Name</th><th>Qty</th><th>Buying</th><th>Retail</th><th>Wholesale</th><th>Total</th>
                            </thead>
                            <tbody>
                                {% for product in request.session.products %}
                                    <tr>
                                        <td>{{ product.num }}.</td>
                                        <td>{{ product.product_name }}</td>
                                        <td>{{ product.quantity }}</td>
                                        <td class="text-right">{{ product.buying_price }}</td>
                                        <td class="text-right">{{ product.retail_price }}</td>
                                        <td class="text-right">{{ product.wholesale_price }}</td>
                                        <td class="product_total text-right">{{ product.total_cost }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                               <tr class="text-center">
                                   <td colspan="3" id="cart-total">
                                       Total <span class="badge badge-pill badge-danger">0.0</span>
                                   </td>
                                   <td>
                                       <a href="{% url "deliveries:clear-delivery-note" %}">
                                           Clear <i class="fa fa-trash"></i>
                                       </a>
                                   </td>
                                   <td colspan="3" style="border-right: none;">
                                       <a href="{% url 'deliveries:post-stock' %}" class="btn btn-info text-right">Post Products</a>
                                   </td>
                               </tr>
                            </tfoot>
                        </table>
                    {% else %}
                        <div class="alert alert-info">No items in this delivery note, add items from the left.</div>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $("button#reset-btn").click(function (e) {
            $("input#product_id").attr("readonly", false);
        });
        let options = {

            url: "{% url 'deliveries:search-product' %}?product=" + $("#product_id").val(),

            getValue: "product_name",

            template: {
                type: "description",
                fields: {
                    description: "product_name"
                }
            },

            list: {
                match: {enabled: true,},
                onChooseEvent: function() {
                    let product_name = $("#product_id").getSelectedItemData().product_name;
                    let product_id = $("#product_id").getSelectedItemData().product_id;

                    $("input#product_id").val(product_id);
                    $("input#product_id").attr("readonly", true);

                    $("label[for='product_id']").html("Product: <strong style='color: black;'>"+product_name+"</strong>");
                }
            },

            theme: "plate-dark"
        };

    $("#product_id").easyAutocomplete(options);

    $(document).ready(function () {

        let cart_total = 0.0;
        let product_totals = document.getElementsByClassName('product_total');

        let i;
        for (i = 0; i < product_totals.length; i++) {
            cart_total += parseFloat(product_totals[i].textContent);
        }

        $('#cart-total').html("<h4 class='card-title mb-0'>Total : "+cart_total+"</h4>");

    });
    </script>

{% endblock page_content %}