{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% block page_title %}{% translate "Market Browser" %}{% endblock %}

{% block content %}
    <div class="col-lg-12 container">
        <br>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#market-manager-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="{% url 'marketmanager:marketbrowser' %}">Market Browser</a>
                </div>
                <div class="collapse navbar-collapse" id="market-manager-navbar-collapse-1">
                    <ul class="navbar-form navbar-left">
                        {% include 'marketmanager/marketbrowser/search.html' %}
                    </ul>
                    <ul class="navbar-form navbar-left">
                        {% include 'marketmanager/marketbrowser/region_selector.html' %}
                    </ul>
                    {% comment %} <ul class="navbar-form navbar-left">
                        {% include 'marketmanager/marketbrowser/item_selector.html' %}
                    </ul> {% endcomment %}
                    <ul class="nav navbar-nav pull-right">
                    <li class>
                        <a href="{% url 'marketmanager:add_char' %}">Add Character Token</a>
                    </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right">
                    <li class>
                        <a href="{% url 'marketmanager:add_corp' %}">Add Corporate Token</a>
                    <li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
        {% include 'marketmanager/marketbrowser/item_details.html' %}
    <div class="col-lg-12">
        {% include 'marketmanager/marketbrowser/sell_orders.html' %}
        {% include 'marketmanager/marketbrowser/buy_orders.html' %}
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/jquery-ui-js.html' %}
    {% include 'bundles/moment-js.html' %}
    {% include "bundles/jquery-ui-css.html" %}
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    {% include 'bundles/jquery-ui-css.html' %}
    <link rel="stylesheet" type="text/css" href="{% static 'marketmanager/css/marketmanager.css' %}">
{% endblock %}

{% block extra_script %}
    $(document).ready(function(){
        $('#table-sell-orders').DataTable({
            {% if eve_type.id is not None %}
            "ajax": {
                "url": "{% url 'marketmanager:marketbrowser_sell_orders' %}",
                "dataSrc": "sell_orders",
                "data": {
                    {% if eve_region is not None %}"region_id": {{ eve_region.id }}, {% endif %}
                    "type_id": {{ eve_type.id }}
                }
            },{% endif %}
            columns: [
            {
                data: "eve_region__name"
            },
            {
                data: "volume_remain",
                render: $.fn.dataTable.render.number(',', '.', 0, null, "")
            },
            {
                data: 'price',
                render: $.fn.dataTable.render.number(',', '.', 2, null, " ISK")
            },
            {
                data: "location_resolved"
            },
            {
                data: "expiry_calculated"
            },
            {
                data: "updated_at"
            },
            ],
            "fnRowCallback": function(nRow, aData) {
                if (aData["user_is_owner"] == true) {
                    $('td', nRow).addClass('bg-info');
                };
                if (aData["corporation_is_owner"] == true) {
                    $('td', nRow).addClass('bg-success');
                }
            },
            "order": [[ 2, "asc" ]],
            "processing": true,
            "stateSave": true,
            "stateDuration": 0
        } );

        $('#table-buy-orders').DataTable({
            {% if eve_type.id is not None %}
            "ajax": {
                "url": "{% url 'marketmanager:marketbrowser_buy_orders' %}",
                "dataSrc": "buy_orders",
                "data": {
                    {% if eve_region is not None %}"region_id": {{ eve_region.id }}, {% endif %}
                    "type_id": {{ eve_type.id }}
                }
            },{% endif %}
            columns: [
            {
                data: "eve_region__name"
            },
            {
                data: "volume_remain",
                render: $.fn.dataTable.render.number(',', '.', 0, null, "")
            },
            {
                data: 'price',
                render: $.fn.dataTable.render.number(',', '.', 2, null, " ISK")
            },
            {
                data: "location_resolved"
            },
            {
                data: "expiry_calculated"
            },
            {
                data: "updated_at"
            },
            ],
            "fnRowCallback": function(nRow, aData) {
                if (aData["user_is_owner"] == true) {
                    $('td', nRow).addClass('bg-info');
                };
                if (aData["corporation_is_owner"] == true) {
                    $('td', nRow).addClass('bg-success');
                }
            },
            "order": [[ 2, "desc" ]],
            "processing": true,
            "stateSave": true,
            "stateDuration": 0
        } );
    });

    $(document).ready(function() {
        $("#search").autocomplete({
            source: "{% url 'marketmanager:marketbrowser_autocomplete' %}",
            minLength:2,
            autoFocus: true,
            select: function(event, ui){
                SearchTypeID(ui.item.label, ui.item.value);
                event.preventDefault();
            },
            focus: function(event, ui){
                event.preventDefault();
            },
       });
    });

    function SearchTypeID(eve_type_name, eve_type_id) {
          window.location.href = "?type_id="+eve_type_id{% if eve_region != None %} +"&region_id="+ {{ eve_region.id }} {% endif %};
    }

{% endblock %}