{% extends "base.html" %}

{% load inventree_extras %}
{% load static %}
{% load i18n %}

{% block page_title %}
{% inventree_title %} | {% trans "Sales Orders" %}
{% endblock %}

{% block content %}

<h3>{% trans "Sales Orders" %}</h3>
<hr>

<div id='table-buttons'>
    <div class='button-toolbar container-fluid' style='float: right;'>
        <div class='btn-group'>
            {% if roles.sales_order.add %}
            <button class='btn btn-primary' type='button' id='so-create' title='{% trans "Create new sales order" %}'>
                <span class='fas fa-plus-circle'></span> {% trans "New Sales Order" %}
            </button>
            {% endif %}
            <button id='order-print' class='btn btn-default' title='{% trans "Print Order Reports" %}'>
                <span class='fas fa-print'></span>
            </button>
            <button class='btn btn-default' type='button' id='view-calendar' title='{% trans "Display calendar view" %}'>
                <span class='fas fa-calendar-alt'></span>
            </button>
            <button class='btn btn-default' type='button' id='view-list' title='{% trans "Display list view" %}'>
                <span class='fas fa-th-list'></span>
            </button>
            <div class='filter-list' id='filter-list-salesorder'>
                <!-- An empty div in which the filter list will be constructed -->
            </div>
        </div>
    </div>
</div>

<table class='table table-striped table-condensed po-table' data-toolbar='#table-buttons' id='sales-order-table'>
</table>

<div id='sales-order-calendar'></div>

{% endblock %}

{% block js_load %}
{{ block.super }}

<script type='text/javascript'>

    function loadOrderEvents(calendar) {

        var start = startDate(calendar);
        var end = endDate(calendar);

        clearEvents(calendar);

        // Request orders from the server within specified date range
        inventreeGet(
            '{% url "api-so-list" %}',
            {
                customer_detail: true,
                min_date: start,
                max_date: end,
            },
            {
                success: function(response) {

                    var prefix = '{% settings_value "SALESORDER_REFERENCE_PREFIX" %}';

                    for (var idx = 0; idx < response.length; idx++) {
                        var order = response[idx];

                        var date = order.creation_date;

                        if (order.shipment_date) {
                            date = order.shipment_date;
                        } else if (order.target_date) {
                            date = order.target_date;
                        }

                        var title = `${prefix}${order.reference} - ${order.customer_detail.name}`;

                        // Default color is blue
                        var color = '#4c68f5';

                        // Overdue orders are red
                        if (order.overdue) {
                            color = '#c22525';
                        } else if (order.status == {{ SalesOrderStatus.SHIPPED }}) {
                            color = '#25c235';
                        }

                        var event = {
                            title: title,
                            start: date,
                            end: date,
                            url: `/order/sales-order/${order.pk}/`,
                            backgroundColor: color,
                        };

                        calendar.addEvent(event);
                    }
                }
            }
        );
    }

    var calendar = null;

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('sales-order-calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            nowIndicator: true,
            aspectRatio: 2.5,
            locale: '{{request.LANGUAGE_CODE}}',
            datesSet: function() {
                loadOrderEvents(calendar);
            },
        });

        calendar.render();

    });
</script>
{% endblock %}

{% block js_ready %}
{{ block.super }}

$("#sales-order-calendar").hide();
$("#view-list").hide();

$('#view-calendar').click(function() {
    // Hide the list view, show the calendar view
    $("#sales-order-table").hide();
    $("#view-calendar").hide();
    $(".fixed-table-pagination").hide();
    $(".columns-right").hide();
    $(".search").hide();
    $('#filter-list-salesorder').hide();
    
    $("#sales-order-calendar").show();
    $("#view-list").show();
});

$("#view-list").click(function() {
    // Hide the calendar view, show the list view
    $("#sales-order-calendar").hide();
    $("#view-list").hide();
    
    $(".fixed-table-pagination").show();
    $(".columns-right").show();
    $(".search").show();
    $("#sales-order-table").show();
    $('#filter-list-salesorder').show();
    $("#view-calendar").show();
});

loadSalesOrderTable("#sales-order-table", {
    url: "{% url 'api-so-list' %}",
});

$("#order-print").click(function() {
    var rows = $("#sales-order-table").bootstrapTable('getSelections');

    var orders = [];

    rows.forEach(function(row) {
        orders.push(row.pk);
    });

    printSalesOrderReports(orders);
})

$("#so-create").click(function() {
    launchModalForm("{% url 'so-create' %}",
        {
            follow: true,
            secondary: [
                {
                    field: 'customer',
                    label: '{% trans "New Customer" %}',
                    title: '{% trans "Create new Customer" %}',
                    url: '{% url "customer-create" %}',
                }
            ]
        }
    );
});

{% endblock %}