{% extends "base.html" %}

{% load i18n %}
{% load static from staticfiles %}

{% block headtitle %}{{blueprint.typeName}}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'industry/css/industry.css' %}" />
{% endblock %}

{% block main_content %}
<div class="page-header"">
  <h1>{{blueprint.typeName}} <small>&#35;{{blueprint.id}}</small></h1>
</div>

<div class="row-fluid">
  <div class="span1">
    <img src="//image.eveonline.com/Type/{{blueprint.typeID}}_64.png" />
  </div>
  <div class="span3">
    <dl class="table">
      <dt>Produces Item</dt>
        <dd>{{blueprint.catalog_entry.permalink|safe}}</dd>
      <dt>Material Efficiency</dt>
        <dd id="{{blueprint.id}}" class="me editable">{{blueprint.me}}</dd>
      <dt>Production Efficiency</dt>
        <dd id="{{blueprint.id}}" class="pe editable">{{blueprint.pe}}</dd>
      <dt>Copy</dt>
        <dd><input type="checkbox" id="{{blueprint.id}}" class="copy" {% if blueprint.copy %}checked{% endif %} /></dd>
      <dt>Runs</dt>
        <dd id="{{blueprint.runs}}" class="runs editable">{{blueprint.runs}}</dd>
    </dl>
  </div>
  <div class="span7">
    <dl class="table">
      <dt>Manufacturing Time</dt>
        <dd id="time">{{blueprint.manufacturing_time|ecm_duration_long}}</dd>
      <dt>Material Research Time</dt>
        <dd>{{blueprint.me_research_time|ecm_duration_long}}</dd>
      <dt>Productivity Research Time</dt>
        <dd>{{blueprint.pe_research_time|ecm_duration_long}}</dd>
      <dt>Copy Time</dt>
        <dd>{{blueprint.copy_time|ecm_duration_long}}</dd>
      <dt>Invention Time</dt>
        <dd>{{blueprint.invention_time|ecm_duration_long}}</dd>
    </dl>
  </div>
</div>

{% with blueprint.product.portionSize as batch %}
<h2>Needed Materials for {{ batch }} unit{{ batch|pluralize }}
{% if batch > 1 %}<small>produced in 1 run</small>{% endif %}</h2>
{% endwith %}

<div class="btn-toolbar" >
  <span class="label label-info">Activity</span>
  <div class="btn-group" data-toggle="buttons-radio" id="activity_buttons">
  {% for act in blueprint.activities %}
    <button class="btn btn-small btn-info" id="{{act.activityID}}">{{act.name}}</button>
  {% endfor %}
  </div>
</div>

<table id="materials_table" class="table table-bordered table-condensed" style="width: 60%;">
  <thead>
    <tr>
      <th>Icon</th>
      <th>Item</th>
      <th>Quantity</th>
      <th>Damage Per Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4" class="dataTables_empty">Loading data from server...</td>
    </tr>
  </tbody>
</table>

{% endblock %}



{% block post_javascripts %}
<script type="text/javascript">
ACTIVITY_ID = "1"; /* manufacturing by default */

$(document).ready(function() {

    var table = $('#materials_table').dataTable($.extend(true, {}, DATATABLE_DEFAULTS, {
        iDisplayLength: 50, /* default display 50 items */
        sAjaxSource: '/industry/catalog/blueprints/{{blueprint.id}}/materials/',
        sDom: 'rt', /* table layout. see http://www.datatables.net/usage/options */
        aoColumns: [
            { /* 0 Icon */        sWidth: "10%", bSortable: false, sClass: 'center'},
            { /* 1 Item */        sWidth: "50%", bSortable: false},
            { /* 2 Quantity */    sWidth: "10%", bSortable: false},
            { /* 3 Waste */       sWidth: "10%", bSortable: false},
        ],
        fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            $('td:eq(0)', nRow).html('<img src="//image.eveonline.com/Type/'+aData[0]+'_32.png"/>');
            $('td:eq(2)', nRow).addClass('right');
            $('td:eq(3)', nRow).addClass('right');
            return nRow;
        },
        /* this function will be called when the table has to query data to be displayed */
        fnServerData: function ( sSource, aoData, fnCallback ) {
            /* Add some extra variables to the url */
            aoData.push( {
                name: "activityID",
                value: ACTIVITY_ID
            } );
            $.getJSON( sSource, aoData, function (json) {
                fnCallback(json)
            } );
        },

        /* the search field being outside the table object, we need to save its status
         * explicitly here in order to restore it with the rest */
        fnStateSaveParams: function (oSettings, oData) {
            oData.sFilter = $("#search_text").val()
            oData.activityID = ACTIVITY_ID;
        },

        /* restore the search field content */
        fnStateLoadParams: function (oSettings, oData) {
            $("#search_text").val(oData.sFilter);
            if ('activityID' in oData) {
                ACTIVITY_ID = oData.activityID;
                updateButtons();
            }
            return true;
        }
    }));

    /* Set jEditable handlers */
    $('dd.me').editable('/industry/catalog/blueprints/me/', {
            cssclass: 'edited',
            style: 'inherit',
            tooltip: 'Click to edit...',
            callback: function () {
                table.fnDraw();
            }
    });
    $('dd.pe').editable('/industry/catalog/blueprints/pe/', {
            cssclass: 'edited',
            style: 'inherit',
            tooltip: 'Click to edit...',
            callback: function () {
                $('#time').load('/industry/catalog/blueprints/{{blueprint.id}}/time/');
            }
    });
    $('input.copy').click(function () {
        var thisId = $(this).attr('id');
        var checked = $(this).is(':checked');
        $.post('/industry/catalog/blueprints/copy/', {id: thisId, value: checked})
        .error(function () {
            alert('Failed to change copy!');
        });
    });
    $('dd.runs').editable('/industry/catalog/blueprints/runs/', {
            cssclass: 'edited',
            style: 'inherit',
            tooltip: 'Click to edit...',
    });

    $('#activity_buttons button').on('click', function() {
        ACTIVITY_ID = $(this).attr('id');
        table.fnDraw();
    });

    updateButtons();
});

function updateButtons() {
    var buttons = $('#activity_buttons button');
    for (var i = 0; i < buttons.length; i++) {
        if (buttons[i].id == ACTIVITY_ID) {
            $(buttons[i]).addClass('active');
        } else {
            $(buttons[i]).removeClass('active');
        }
    }
}

</script>
{% endblock %}