{% extends 'freight/base.html' %}
{% load i18n %}
{% load humanize %}
{% load bootstrap %}
{% load static %}
{% load freight_filters %}

{% block details %}
    <form id="form_calculator" class="form" action="{% url 'freight:calculator' %}" method="POST">
        {% csrf_token %}
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Calculator</h3>
                    </div>
                    <div class="panel-body">
                        {{ form|bootstrap }}
                        <br>
                        <p><strong>Reward</strong></p>
                        <h2 id="text_price">
                            <span id="text_price_2">{{ price|formatnumber:"0"|default_if_none:"-" }} ISK</span>
                            <span class="copy_to_clipboard" data-text="{{ price }}">
                                &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                            </span>
                        </h2>
                            <button class="btn btn-success btn-lg" type="submit">Click To Calculate Reward!</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Pricing details</h3>
                    </div>

                    <div class="panel-body" style="min-height: 100px;">

                        {% if pricing %}
                            <dl class="dl-horizontal">
                                {% if pricing.is_bidirectional %}
                                    <dt>From / To:</dt>
                                {% else %}
                                    <dt>From:</dt>
                                {% endif %}

                                <dd>{{ pricing.start_location }}</dd>

                                {% if pricing.is_bidirectional %}
                                    <dt>From / To:</dt>
                                {% else %}
                                    <dt>To:</dt>
                                {% endif %}
                                <dd>{{ pricing.end_location }}</dd>

                                <dt>Both directions:</dt>
                                <dd>{{ pricing.is_bidirectional|yesno }}</dd>
                                <br>

                                {% if pricing.price_min != None %}
                                    <dt>Minimum price:</dt>
                                    <dd>{{ pricing.price_min|formatnumber:"0" }} ISK</dd>
                                {% endif %}

                                {% if pricing.price_base != None %}
                                    {% if pricing.is_fix_price %}
                                        <dt>Fix price:</dt>
                                    {% else %}
                                        <dt>Base price:</dt>
                                    {% endif %}
                                    <dd>{{ pricing.price_base|formatnumber:"0" }} ISK</dd>
                                {% endif %}

                                {% if pricing_price_per_volume_eff != None %}
                                    <dt>Price add-on per m3:</dt>
                                    <dd>{{ pricing_price_per_volume_eff|formatnumber:"0" }} ISK</dd>
                                {% endif %}

                                {% if pricing.price_per_collateral_percent != None %}
                                    <dt>Price add-on collateral:</dt>
                                    <dd>{{ pricing.price_per_collateral_percent }} %</dd>
                                {% endif %}

                                <br>
                                {% if pricing.volume_min != None %}
                                    <dt>Min Volume:</dt>
                                    <dd>{{ pricing.volume_min|formatnumber:"0"|default_if_none:"-" }} m3</dd>
                                {% endif %}

                                {% if pricing.volume_max != None %}
                                    <dt>Max Volume:</dt>
                                    <dd>{{ pricing.volume_max|formatnumber:"0"|default_if_none:"-" }} m3</dd>
                                {% endif %}

                                {% if pricing.collateral_min != None %}
                                    <dt>Min. Collateral:</dt>
                                    <dd>{{ pricing.collateral_min|formatnumber:"0" }} ISK</dd>
                                {% endif %}

                                {% if pricing.collateral_max != None %}
                                    <dt>Max. Collateral:</dt>
                                    <dd>{{ pricing.collateral_max|formatnumber:"0" }} ISK</dd>
                                {% endif %}

                                <br>

                                {% if pricing.details %}
                                    <dt>Additional Instructions:</dt>
                                    <dd>{{ pricing.details|linebreaks }}</dd>
                                {% endif %}

                            </dl>

                        {% else %}

                            <p class="text-muted">No pricing defined</p>

                        {% endif %}

                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Your contract</h3>
                    </div>
                    <div class="panel-body" style="min-height: 100px;">
                        {% if price != None %}
                            <dl class="dl-horizontal">
                                <dt>Contract Type:</dt>
                                <dd>Courier</dd>

                                <dt>Availability:</dt>
                                <dd>{{ availability }}</dd>

                                <dt>Location:</dt>
                                <dd>
                                    {{ pricing.start_location }}
                                    <span class="copy_to_clipboard" data-text="{{ pricing.start_location }}">
                                        &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                    </span>
                                </dd>

                                <hr>

                                <dt>Ship To:</dt>
                                <dd>
                                    {{ pricing.end_location }}
                                    <span class="copy_to_clipboard" data-text="{{ pricing.end_location }}">
                                        &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                    </span>
                                </dd>

                                <dt>Reward:</dt>
                                <dd>
                                    {{ price|formatnumber:"0"|default_if_none:"???" }} ISK
                                    <span class="copy_to_clipboard" data-text="{{ price }}">
                                        &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                    </span>
                                </dd>

                                <dt>Collateral:</dt>
                                <dd>
                                    {{ collateral|formatnumber:"0"|default_if_none:"???" }} ISK
                                    <span class="copy_to_clipboard" data-text="{{ collateral }}">
                                        &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                    </span>
                                </dd>

                                {% if pricing.days_to_expire %}
                                    <dt>Expiration:</dt>
                                    <dd>{{ pricing.days_to_expire }} days ({{ expires_on|date:'Y-m-d' }})</dd>
                                {% endif %}

                                {% if pricing.days_to_complete %}
                                    <dt>Days to complete:</dt>
                                    <dd>
                                        {{ pricing.days_to_complete|default_if_none:"-" }}
                                        <span class="copy_to_clipboard" data-text="{{ pricing.days_to_complete }}">
                                            &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                        </span>
                                    </dd>
                                {% endif %}

                                {% if pricing.requires_volume %}
                                    <dt>Volume:</dt>
                                    <dd>{{ volume|formatnumber:"0"|default_if_none:"???" }} m3</dd>
                                {% endif %}

                                <hr>
                                Note that this route is bidirectional, so Location and Destination can be switched.
                            </dl>

                        {% else %}
                            <p class="text-muted">No price calculated yet</p>
                        {% endif %}
                    </div>
                </div>

            </div>
        </div>
    </form>
<br>

{% endblock %}

{% block extra_javascript %}
    <script type="application/javascript">
        function copyToClipboard(text) {
            if (window.clipboardData && window.clipboardData.setData) {
                // IE specific code path to prevent textarea being shown while dialog is visible.
                return clipboardData.setData("Text", text);
            } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                const textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("copy");  // Security exception may be thrown by some browsers.
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                }
            }
        }

        $(document).ready(function(){
            /* redirecting to updated calculator view with chosen pricing */
            $("#id_pricing").change(function(){
                let value = $("#id_pricing").val();
                if (value == null) {
                    value = 0;
                }
                window.location.replace(
                    "{% url 'freight:calculator' 0 %}".replace("0", value)
                );
            });

            $('.copy_to_clipboard').on('click', function (event) {
                const text = event.currentTarget.getAttribute("data-text")
                copyToClipboard(text)
            });
        });
    </script>
{% endblock %}

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

{% block extra_script %}
{% endblock %}
