{% extends "base.html" %}

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

{% block page_title %}
{% inventree_title %} | {% trans "Search Results" %}
{% endblock %}

{% block content %}

<h3>
    {% trans "Search Results" %}
</h3>

<div class="container" style='width: 100%'>
    {% include "search_form.html" with query_text=query %}
</div>

{% if query %}
{% else %}
<div id='empty-search-query'>
    <h4><i>{% trans "Enter a search query" %}</i></h4>
</div>
{% endif %}

<div class='col-sm-3' id='item-panel'>
    <ul class='list-group' id='search-item-list'>
    </ul>
</div>
<div class='col-sm-9' id='details-panel'>
    <ul class='list-group' id='search-result-list'>
        <li class='list-group-item'>
            <div class='container'>
                <img class='index-bg' src='{% static "img/inventree.png" %}'>
            </div>
        </li>
    </ul>
</div>

{% endblock %}

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

    function addItemTitle(title) {
        // Add header block to the results list
        $('#search-item-list').append(
            `<li class='list-group-item'><b>${title}</b></li>`
        );
    }

    function addItem(label, title, icon, options) {
        // Add a search itme to the action list
        $('#search-item-list').append(
            `<li class='list-group-item' id='search-item-${label}'>
                <a href='#'>
                    <span class='fas ${icon}'></span>
                    ${title}
                </a>
                <span class='badge' id='badge-${label}'>
                    <span class='fas fa-spin fa-spinner'></span>
                </span>
            </li>`
        );

        // Add a results table
        $('#search-result-list').append(
            `<li class='list-group-item' id='search-result-${label}'>
                <h4>${title}</h4>
                <table class='table table-condensed table-striped' id='table-${label}'></table>
            </li>`
        );

        // Hide the results table
        $(`#search-result-${label}`).hide();

        // Add callback when the action is clicked
        $(`#search-item-${label}`).click(function() {

            // Hide all childs
            $('#search-result-list').children('li').each(function() {
                $(this).hide();
            });

            // Show the one we want
            $(`#search-result-${label}`).fadeIn();

            // Remove css class from all action items
            $("#search-item-list").children('li').each(function() {
                $(this).removeClass('index-action-selected');
            });
    
            // Add css class to the action we are interested in
            $(`#search-item-${label}`).addClass('index-action-selected');
        });

        // Connect a callback to the table
        $(`#table-${label}`).on('load-success.bs.table', function() {
            var count = $(`#table-${label}`).bootstrapTable('getData').length;

            $(`#badge-${label}`).html(count);

            if (count > 0) {
                $(`#badge-${label}`).addClass('badge-orange');
            }
        });
    }

    {% if roles.part.view %}
    addItemTitle('{% trans "Part" %}');

    addItem('part', '{% trans "Parts" %}', 'fa-shapes');

    loadPartTable("#table-part",
        "{% url 'api-part-list' %}",
        {
            params: {
                search: "{{ query }}",
            },
            checkbox: false,
            disableFilters: true,
        }
    );

    addItem('category', '{% trans "Part Categories" %}', 'fa-sitemap');

    $("#table-category").inventreeTable({
        url: "{% url 'api-part-category-list' %}",
        queryParams: {
            search: "{{ query }}",
        },
        columns: [
            {
                field: 'name',
                title: '{% trans "Name" %}',
                formatter: function(value, row, index, field) {
                    return renderLink(value, '/part/category/' + row.pk + '/');
                },
            },
            {
                field: 'description',
                title: '{% trans "Description" %}',
            },
        ],
    });

    addItem('manufacturer-part', '{% trans "Manufacturer Parts" %}', 'fa-toolbox');

    loadManufacturerPartTable(
        "#table-manufacturer-part",
        "{% url 'api-manufacturer-part-list' %}",
        {
            params: {
                search: "{{ query }}",
                part_detail: true,
                supplier_detail: true,
                manufacturer_detail: true
            },
        }
    );

    addItem('supplier-part', '{% trans "Supplier Parts" %}', 'fa-pallet');

    loadSupplierPartTable(
        "#table-supplier-part",
        "{% url 'api-supplier-part-list' %}",
        {
            params: {
                search: "{{ query }}",
                part_detail: true,
                supplier_detail: true,
                manufacturer_detail: true
            },
        }
    );

    {% endif %}

    {% if roles.build.view %}

    addItemTitle('{% trans "Build" %}');

    addItem('build-order', '{% trans "Build Orders" %}', 'fa-tools');

    loadBuildTable('#table-build-order', {
        params: {
            search: '{{ query }}',
        }
    });

    {% endif %}

    {% if roles.stock.view %}
    addItemTitle('{% trans "Stock" %}');

    addItem('stock', '{% trans "Stock Items" %}', 'fa-boxes');

    $('#table-stock').inventreeTable({
        url: "{% url 'api-stock-list' %}",
        queryParams: {
            search: "{{ query }}",
            part_detail: true,
            location_detail: true,
        },
        columns: [
            {
                field: 'part',
                title: "{% trans "Part" %}",
                sortable: true,
                formatter: function(value, row) {
                    var url = `/stock/item/${row.pk}/`;
                    var thumb = row.part_detail.thumbnail;
                    var name = row.part_detail.full_name;

                    html = imageHoverIcon(thumb) + renderLink(name, url);
                    
                    return html;
                }
            },
            {
                field: 'part_description',
                title: '{% trans "Description" %}',
                sortable: true,
                formatter: function(value, row, index, field) {
                    return row.part_detail.description;
                }
            },
            {
                field: 'quantity',
                title: '{% trans "Stock" %}',
                sortable: true,
                formatter: function(value, row, index, field) {

                    var val = parseFloat(value);

                    // If there is a single unit with a serial number, use the serial number
                    if (row.serial && row.quantity == 1) {
                        val = '# ' + row.serial;
                    } else {
                        val = +val.toFixed(5);
                    }

                    var html = renderLink(val, `/stock/item/${row.pk}/`);

                    return html;
                }
            },
            {
                field: 'status',
                title: '{% trans "Status" %}',
                sortable: 'true',
                formatter: function(value, row, index, field) {
                    return stockStatusDisplay(value);
                },
            },
            {
                field: 'location_detail.pathstring',
                title: '{% trans "Location" %}',
                sortable: true,
                formatter: function(value, row, index, field) {
                    if (value) {
                        return renderLink(value, `/stock/location/${row.location}/`);
                    }
                    else {
                        if (row.customer) {
                            var text = "{% trans "Shipped to customer" %}";
                            return renderLink(text, `/company/${row.customer}/assigned-stock/`);
                        } else {
                            return '<i>{% trans "No stock location set" %}</i>';
                        }
                    }
                }
            },
        ]
    });

    addItem('location', '{% trans "Stock Locations" %}', 'fa-map-marker-alt');

    $("#table-location").inventreeTable({
        url: "{% url 'api-location-list' %}",
        queryParams: {
            search: "{{ query }}",
        },
        columns: [
            {
                field: 'name',
                title: '{% trans "Name" %}',
                formatter: function(value, row, index, field) {
                    return renderLink(row.pathstring, '/stock/location/' + row.pk + '/');
                },
            },
            {
                field: 'description',
                title: '{% trans "Description" %}',
            },
        ],
    });

    {% endif %}

    {% if roles.purchase_order.view or roles.sales_order.view %}
    addItemTitle('{% trans "Company" %}');

    addItem('manufacturer', '{% trans "Manufacturers" %}', 'fa-industry');

    loadCompanyTable('#table-manufacturer', "{% url 'api-company-list' %}", {
        params: {
            search: "{{ query }}",
            is_manufacturer: "true",
        }
    });

    {% if roles.purchase_order.view %}
    addItem('supplier', '{% trans "Suppliers" %}', 'fa-building');

    loadCompanyTable('#table-supplier', "{% url 'api-company-list' %}", {
        params: {
            search: "{{ query }}",
            is_supplier: "true",
        }
    });

    addItem('purchase-order', '{% trans "Purchase Orders" %}', 'fa-shopping-cart');

    loadPurchaseOrderTable('#table-purchase-order', {
        params: {
            search: '{{ query }}',
        }
    });

    {% endif %}

    {% if roles.sales_order.view %}
    addItem('customer', '{% trans "Customers" %}', 'fa-user-tie');

    loadCompanyTable('#table-customer', "{% url 'api-company-list' %}", {
        params: {
            search: "{{ query }}",
            is_customer: "true",
        }
    });

    addItem('sales-orders', '{% trans "Sales Orders" %}', 'fa-truck');

    loadSalesOrderTable('#table-sales-orders', {
        params: {
            search: '{{ query }}',
        }
    });

    {% endif %}

    {% endif %}    


    

{% endblock %}