{% extends "epic/base_layout.html" %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block buttons %}
  <a class="btn btn-default" href="{% url 'epic:part_list' %}">
    Up <i class="glyphicon glyphicon-chevron-up"></i>
  </a>

  {{ page_nav|safe }}
{% endblock buttons %}

{% block content %}
{{ block.super }}

<div class="row">
  <div class="col-md-6">
    <table class="table table-bordered table-hover table-striped"
	   style="background-color: white">
      {% for field in fields %}
      <tr>
	<td><strong>{{ field.0 }}</strong></td>
	<td>{% if field.0 != 'Notes' %}{{ field.1|safe }}{% endif %}</td>
      </tr>
      {% endfor %}
    </table>
    <a class="btn btn-primary" href="{% url 'epic:part_edit' part.id %}">
      Edit <i class="glyphicon glyphicon-edit"></i></a>
    <a class="btn btn-danger" href="{% url 'epic:part_delete' part.id %}"
       onclick="return confirm ('Are you sure you want to delete this part?')">
      Delete <i class="glyphicon glyphicon-remove"></i></a>
  </div>
  <div class="col-md-6">
    <table class="table table-bordered table-hover table-striped"
	   style="background-color: white">
      <thead>
	<th>Vendor</th><th>Vendor's Part #</th><th>Price</th><th>Status</th>
      </thead>
      {% for v in vendor_parts %}
      <tr>
	<td>{{ v.vendor.name }}</td><td>{{ v.html_link|safe }}</td>
	<td class="text-right">
	  $&nbsp;{{ v.price }}</td><td>{{ v.strstatus }}</td>
      </tr>
      {% endfor %}
    </table>
    <div class="panel panel-default">
      <div class="panel-heading">
	<h3 class="panel-title">Notes</h3>
      </div>
      <div class="panel-body">
	{% for field in fields %}
	{%   if field.0 == 'Notes' %}{{ field.1|linebreaks }}{% endif %}
	{% endfor %}
      </div>
    </div>
  </div>
</div>

<br>

{% if part_users %}
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Assemblies using this part
      (<span data-toggle="collapse" data-target="#obsolete_part_users"><!--
      --><input type="checkbox"></span> show obsolete assemblies)
    </h3>
  </div>
  <div class="panel-body">
    {{ part_users|safe }}
    {% if obsolete_part_users %}
    <div class="collapse" id="obsolete_part_users">
      {{ obsolete_part_users|safe }}
    </div>
    {% endif %}
  </div>
</div>
{% endif %}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Open Orders for this part</h3>
  </div>
  <div class="panel-body">
    {%  for item in open_order_items %}
    {{   item.txtn.order.html_link|safe }}
    ({{ item.txtn.order.vendor.name }},
    {{ item.qty_remaining_to_ship }}&times;{{ item.part.html_link|safe }})
    {%   if forloop.last %}.{% else %}, {% endif %}
    {%  endfor %}
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Cost Summary</h3>
  </div>
  <div class="panel-body">
    <table
       class="table table-bordered table-hover table-condensed table-striped"
       style="background-color: white">
      <thead>
	<tr>
	  <th></th>
	  <th class="text-right">Target</th>
	  <th class="text-right">Avg</th>
	</tr>
      </thead>
      {% if bom %}
        <tr>
	  <td>Assembly:</td>
	  <td class="text-right">
	    $&nbsp;{{ cost_summary.part.tgt|floatformat:2|intcomma }}
	  </td>
	  <td class="text-right">
	    $&nbsp;{{ cost_summary.part.avg|floatformat:2|intcomma }}
	  </td>
	</tr>
        <tr>
	  <td>Components:</td>
	  <td class="text-right">
	    $&nbsp;{{ cost_summary.cmp.tgt|floatformat:2|intcomma }}
	  </td>
	  <td class="text-right">
	    $&nbsp;{{ cost_summary.cmp.avg|floatformat:2|intcomma }}
	  </td>
	</tr>
      {% endif %}
      <tr>
	<td><strong>Total:</strong></td>
	<td  class="text-right">
	  <strong>$&nbsp;{{ cost_summary.tot.tgt|floatformat:2|intcomma }}
	  </strong>
	</td>
	<td class="text-right">
	  <strong>$&nbsp;{{ cost_summary.tot.avg|floatformat:2|intcomma }}
	  </strong>
	</td>
      </tr>
    </table>
  </div>
</div>

<div class="panel-group" id="accordion" role="tablist">

  {% if history %}
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h3 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
	  Part history (including substitutes)
	</a>
      </h3>
    </div>
    <div id="collapse1"
	 class="panel-collapse collapse {% if not bom %}in{% endif %}"
	 role="tabpanel">

      <form class="form-horizontal" role="form" method="GET" id="filter_by">
	<div class="col-md-6">
	  <select class="form-control" name="ht"
		  onchange="javascript:$('#filter_by').submit();">
	    <option value='truncated' {% if ht != "full" %}selected{% endif %}>
	      Truncate history at most recent inventory</option>
	    <option value='full' {% if ht == "full" %}selected{% endif %}>
	      Show full history</option>
	  </select>
	</div>
      </form>

      <table class="table table-bordered table-hover table-striped"
             style="background-color: white">
        <thead>
	  <tr>
	    <th colspan="2"></th>
	    <th colspan="{{history.warehouses|length}}">Warehouse Stock</th>
	  </tr>
	  <tr>
	    <th>Date</th>
	    <th>Description</th>
	    {% for w in history.warehouses %}
	      <th>{{ w.name }}</th>
	    {% empty %}
	      <th></th>
	    {% endfor %}
	  </tr>
	</thead>
	<tbody>
	  {% for e in history.events %}
	  <tr class="{{e.class}}">
	    <td>{{ e.ts|date:"Y‑m‑d" }}</td>
	    <td>{{ e.desc|safe }}</td>
	    {% for item_list in e.warehouses %}
	    <td class="text-right">
	      {% for item in item_list %}
	      <div class="form-element">
		{{ item.qty|intcomma }}&times;{{ item.part.html_link|safe }}
	      </div>
	      {% endfor %}
	    </td>
	    {% empty %}
	      <td><em>&mdash;None&mdash;</em></td>
	    {% endfor %}
	  </tr>
	  {% endfor %}
	</tbody>
      </table>
    </div>
  </div>
{% endif %}

 <div class="panel panel-default">
    <div class="panel-heading clearfix" role="tab">
      <h3 class="panel-title pull-left">
	<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
	  BOM
	</a>
      </h3>
      <div class="pull-right">
	{% if bom %}
	<a class="btn btn-primary"
	   href="{% url 'epic:part_bom_edit' part.id %}">
	  Edit <i class="glyphicon glyphicon-edit"></i></a>

	<a class="btn btn-default"
	   href="{% url 'epic:part_bom_export' part.id %}">
	  Export <i class="glyphicon glyphicon-export"></i></a>

	<a class="btn btn-default"
	   href="{% url 'epic:part_bom_compare' part.id %}">
	  Compare <i class="glyphicon glyphicon-transfer"></i></a>
	{% else %}
	<a class="btn btn-primary"
	   href="{% url 'epic:part_bom_edit' part.id %}">
	  Add BOM <i class="glyphicon glyphicon-plus"></i></a>
	{% endif %}
      </div>
    </div>
    <div id="collapse3" class="panel-collapse collapse in" role="tabpanel">
      {% if bom %}
      <table
	 class="table table-bordered table-hover table-condensed table-striped"
	 style="background-color: white">
	<thead>
	  <tr>
	    <th>Idx</th><th>PN</th><th>Mfg PN</th><th>Qty</th><th>Refdes</th>
	    <th>SPQ</th><th>Target</th><th>Avg</th><th>Line</th>
	    <th>Cumulative</th>
	  </tr>
	</thead>
	{% for row in bom %}
	<tr>
	  <td class="text-right">{{ forloop.counter }}</td>
	  <td>{{ row.best_part.html_link|safe }}</td>
	  <td>{{ row.best_part.mfg }}&nbsp;{{ row.best_part.mfg_pn }}</td>
	  <td class="text-right">{{ row.assy_item.qty }}</td>
	  <td><div style="max-width:150px;max-height:2.5ex;text-overflow:ellipsis;overflow:auto">{{ row.refdes_list|join:", " }}</div></td>
	  <td class="text-right">{{ row.best_part.spq|intcomma }}</td>
	  <td class="text-right">
	    $&nbsp;{{ row.best_part.target_price|floatformat:6|intcomma }}
	  </td>
	  <td class="text-right">
	    $&nbsp;{{ row.avg_cost|floatformat:6|intcomma }}
	  </td>
	  <td class="text-right">
	    $&nbsp;{{ row.amount|floatformat:2|intcomma }}
	  </td>
	  <td class="text-right">
	    $&nbsp;{{ row.cumulative_cost|floatformat:2|intcomma }}
	  </td>
	</tr>
	{% endfor %}
      </table>
      {% endif %}
    </div>
  </div>

</div>

<br>

{% endblock content %}
