{% extends 'buybackprogram/page.html' %}
{% load i18n %}
{% load humanize %}
{% load bootstrap %}
{% load static %}
{% load price_formats %}

{% block body %}
<div class="panel-heading">
  <h3 class="panel-title">Contract calculator</h3>
</div>
<div class="panel-body" style="min-height: 100px;">
    {% if buyback_data %}
    <div class="table-responsive" style="margin: 20px 0;">
        <p class="text-success">Based on the items we have calculated a contract price for you. Please use the following settings when creating a buyback contract at {{program.location.eve_solar_system}}, {{program.location.name}}:</p>
        <h4>Contract settings</h4>
        <table id="contract" style="margin: 20px auto;" class="table table-striped table-condensed">
            <tr>
                <th>Contract type:</th>
                <td colspan="2">Item Exhange</td>

            </tr>
            <tr>
                <th>Availability:</th>
                {% if program.is_corporation %}
                    <td data-type="copy_value">{{program.owner.corporation}}</td>
                    <td><button data-type="copy"><i class="fas fa-copy"></i></button></td>
                {% else %}
                    <td data-type="copy_value">{{program.owner.character.character}}</td>
                    <td><button data-type="copy"><i class="fas fa-copy"></i></button></td>
                {% endif %}
            </tr>
            <tr>
                <th>I will receive:</th>
                {% if contract_price_data.contract_net_total >= 0%}
                    <td data-type="copy_value">{{contract_price_data.contract_net_total|floatformat:0|intcomma}}</td>
                    <td><button data-type="copy"><i class="fas fa-copy"></i></button></td>
                {% else %}
                    <td>0 ISK <i><s>{{contract_price_data.contract_net_total|floatformat:0|intcomma}} ISK</s></i><td>
                {% endif %}


            </tr>
            <tr>
                <th>Expiration:</th>
                <td colspan="2">1 week</td>
            </tr>
            <tr>
                <th>Description:</th>
                <td data-type="copy_value">{{tracking_number}}</td>
                <td><button data-type="copy"><i class="fas fa-copy"></i></button></td>
            </tr>
        </table>
    </div>

    <div class="table-responsive" style="margin: 20px 0;">
        <h4>Invoice</h4>
            <p class="text-muted">List of expenses applied on your contract</p>
        <table id="contract" style="margin: 20px auto;" class="table table-striped table-condensed">
            <tr>
                <th>Price before expenses</th>
                <td>{{contract_price_data.total_all_items_raw|floatformat:0|intcomma}} ISK</td>
            </tr>
            <tr>
                <th>Program taxes</th>
              <td>{{contract_price_data.total_tax_amount|floatformat:0|intcomma}} ISK</td>
            </tr>
            {% if program.hauling_fuel_cost > 0 %}
            <tr>
                <th>Hauling cost</th>
                <td>{{contract_price_data.total_hauling_cost|floatformat:0|intcomma}} ISK @ {{contract_price_data.hauling_cost|floatformat:0|intcomma}} ISK / m³</td>
            </tr>
            {% endif %}
            {% if contract_price_data.total_donation_amount %}
            <tr>
                <th>Donation amount</th>
                <td>{{contract_price_data.total_donation_amount|floatformat:0|intcomma}} ISK <i> @ {{donation}} %</i></td>
            </tr>
            {% endif %}
            <tr>
                <th style="border-top:2px dotted black;">Net price</th>
                {% if contract_price_data.contract_net_total >= 0%}
                    <td style="border-top:2px dotted black;">{{contract_price_data.contract_net_total|floatformat:0|intcomma }} ISK</td>
                {% else %}
                    <td style="border-top:2px dotted black;">0 ISK <i><s>{{contract_price_data.contract_net_total|floatformat:0|intcomma }} ISK</s></i><td>
                {% endif %}
            </tr>

        </table>
    </div>

    <div class="table-responsive" style="margin: 20px 0;">
        <h4>Item details</h4>
        <p class="text-muted">Details for each item and their price calculations</p>
        <table id="value" style="margin: 20px auto;" class="table table-condensed">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Quantity</th>
                    <th>Jita sell</th>
                    <th>Jita buy</th>
                    <th>Tax</th>
                    <th>Our price</th>
                    <th>Row total</th>
                    <th>Notes</th>
                </tr>
            </thead>
            <tbody>
                {% for item in buyback_data %}
                        <tr>
                            <td><img class="item-icon" src="https://image.eveonline.com/Type/{{item.type_data.id}}_64.png" /><b>{{ item.item_values.name }}</b></td>
                            <td>{{ item.item_values.quantity|intcomma }}</td>
                            <td>{{ item.item_prices.type_prices.sell|floatformat:0|intcomma|price }}</td>
                            <td>{{ item.item_prices.type_prices.buy|floatformat:0|intcomma|price }}</td>
                            <td>{{ item.item_values.tax_value|tax }}</td>
                            <td>{{ item.item_values.unit_value|floatformat:0|intcomma|price }}</td>
                            <td>{{ item.item_values.buy_value|floatformat:0|intcomma|price }}</td>
                            <td>
                                {% for note in item.item_prices.notes%}
                                    <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                {% endfor %}
                            </td>
                        </tr>

                        {% if item.item_values.normal.value and item.item_prices.has_price_variants %}
                            <tr>
                                <td colspan="6" data-toggle="collapse" data-target="#{{ item.item_values.normal.id }}-raw" class="accordion-toggle">
                                    <i style="padding-left: 10px;" class="fas fa-angle-down"> Raw</i>
                                </td>
                            </tr>

                            <tr class="collapse" id="{{ item.item_values.normal.id }}-raw">
                                <td style="padding-left: 30px;">{{ item.item_values.name }}</td>
                                <td>{{ item.item_values.quantity|intcomma }}</td>
                                <td>{{ item.item_prices.type_prices.sell|floatformat:0|intcomma|price }}</td>
                                <td>{{ item.item_prices.type_prices.sell|floatformat:0|intcomma|price }}</td>
                                <td>{{ item.item_values.normal.total_tax|tax }}</td>
                                <td class="buy-value-{{item.item_values.normal.is_buy_value}}">{{ item.item_values.normal.unit_value|floatformat:0|intcomma|price }}</td>
                                <td class="buy-value-{{item.item_values.normal.is_buy_value}}">{{ item.item_values.normal.value|floatformat:0|intcomma|price }}</td>
                                <td>
                                    {% for note in item.item_values.normal.notes %}
                                        <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                    {% endfor %}
                                </td>
                            </tr>
                        {% endif %}

                        {% if item.item_values.npc.value %}
                            <tr>
                                <td colspan="6" data-toggle="collapse" data-target="#{{ item.item_values.normal.id }}-npc" class="accordion-toggle">
                                    <i style="padding-left: 10px;" class="fas fa-angle-down"> NPC buy order</i>
                                </td>
                            </tr>

                            <tr class="collapse" id="{{ item.item_values.normal.id }}-npc">
                                <td style="padding-left: 30px;">{{item.item_values.npc.name}}</td>
                                <td>{{item.item_values.npc.quantity|intcomma}}</td>
                                <td>{{item.item_values.npc.sell|floatformat:0|intcomma|price}}</td>
                                <td>{{item.item_values.npc.buy|floatformat:0|intcomma|price}}</td>
                                <td>{{item.item_values.npc.total_tax|tax}}</td>
                                <td class="buy-value-{{item.item_values.npc.is_buy_value}}">{{item.item_values.npc.unit_value|floatformat:0|intcomma|price}}</td>
                                <td class="buy-value-{{item.item_values.npc.is_buy_value}}">{{item.item_values.npc.value|floatformat:0|intcomma|price}}</td>
                                <td>
                                    {% for note in item.item_values.npc.notes%}
                                        <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                    {% endfor %}
                                </td>
                            </tr>
                        {% endif %}

                        {% if item.item_values.compressed.value %}
                            <tr>
                                <td colspan="6" data-toggle="collapse" data-target="#{{ item.item_values.normal.id }}-compressed" class="accordion-toggle">
                                    <i style="padding-left: 10px;" class="fas fa-angle-down"> Compressed</i>
                                </td>
                            </tr>

                            <tr class="collapse" id="{{ item.item_values.normal.id }}-compressed">
                                <td style="padding-left: 30px;">{{item.item_values.compressed.name}}</td>
                                <td>{{item.item_values.compressed.quantity|intcomma}}</td>
                                <td>{{item.item_values.compressed.sell|floatformat:0|intcomma|price}}</td>
                                <td>{{item.item_values.compressed.buy|floatformat:0|intcomma|price}}</td>
                                <td>{{item.item_values.compressed.total_tax|tax}}</td>
                                <td class="buy-value-{{item.item_values.compressed.is_buy_value}}">{{item.item_values.compressed.unit_value|floatformat:0|intcomma|price}}</td>
                                <td class="buy-value-{{item.item_values.compressed.is_buy_value}}">{{item.item_values.compressed.value|floatformat:0|intcomma|price}}</td>
                                <td>
                                    {% for note in item.item_values.compressed.notes%}
                                        <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                    {% endfor %}
                                </td>
                            </tr>
                        {% endif %}

                        {% if item.item_values.refined.value %}
                            <tr>
                                <td colspan="6" data-toggle="collapse" data-target="{% for x in item.item_values.refined.materials %}#{{ item.item_values.normal.id }}-refined{{ forloop.counter }}{% if not forloop.last %}, {% endif %} {% endfor %},#{{ item.item_values.normal.id }}-refined-total" class="accordion-toggle">
                                   <i style="padding-left: 10px;" class="fas fa-angle-down"> Refined</i>
                                </td>
                            </tr>

                            {% for material in item.item_values.refined.materials %}
                                <tr class="collapse" id="{{ item.item_values.normal.id }}-refined{{ forloop.counter }}">
                                    <td style="padding-left: 30px;">{{material.name}}</td>
                                    <td>{{material.quantity|floatformat:2}}</td>
                                    <td>{{material.sell|floatformat:0|intcomma|price}}</td>
                                    <td>{{material.buy|floatformat:0|intcomma|price}}</td>
                                    <td>{{material.total_tax|tax}}</td>
                                    <td>{{material.unit_value|floatformat:0|intcomma|price}}</td>
                                    <td>{{material.value|floatformat:0|intcomma|price}}</td>
                                    <td>
                                    {% for note in material.notes%}
                                        <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                    {% endfor %}
                                </td>
                                </tr>
                            {% endfor %}
                            <tr class="collapse" id="{{ item.item_values.normal.id }}-refined-total">
                                <td colspan="6" style="padding-left: 30px;border-top:1px dotted grey;">Total value</td>
                                <td class="buy-value-{{item.item_values.refined.is_buy_value}}" style="border-top:1px dotted grey;">{{item.item_values.refined.value|floatformat:0|intcomma|price}}</td>
                            </tr>
                        {% endif %}
                        <tr>
                            <td colspan="7"></td>
                        </tr>

                {% endfor %}
            </tbody>
        </table>
    </div>

    {% endif %}

    <h4>Buyback at {{program.location.eve_solar_system}}, {{program.location.name}} by {% if program.is_corporation %}{{ program.owner.corporation }}{% else %}{{ program.owner.character.character }}{% endif %}</h4>
    <form class="form" action="{% url 'buybackprogram:program_calculate' program_pk=program.id %}" method="POST">
        {% csrf_token %}
        {{ form|bootstrap }}
        <button type="submit" class="btn btn-primary">Calculate</button>
      </form>
</div>
{% endblock %}

{% block extra_javascript %}
<script>
document.querySelectorAll('button[data-type="copy"]')
  .forEach(function(button){
      button.addEventListener('click', function(){
      let email = this.parentNode.parentNode
        .querySelector('td[data-type="copy_value"]')
        .innerText;

      let tmp = document.createElement('textarea');
          tmp.value = email;
          tmp.setAttribute('readonly', '');
          tmp.style.position = 'absolute';
          tmp.style.left = '-9999px';
          document.body.appendChild(tmp);
          tmp.select();
          document.execCommand('copy');
          document.body.removeChild(tmp);
          console.log(`${email} copied.`);
    });
});
</script>
{% endblock %}

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

{% block extra_script %}
{% endblock %}
