{% 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="card">
                    <div class="card-body">
                        <h5 class="card-title">{% translate "Calculator" %}</h5>
                        {% if has_pricing %}
                            {{ form|bootstrap }}
                            <br>
                            <p><strong>{% translate "Reward" %}</strong></p>
                            <h2 id="text_price">
                                <span id="text_price_2">{{ price|formatnumber:"0"|default_if_none:"-" }}
                                    &nbsp;{% translate "ISK" %}
                                </span>
                                <span class="copy_to_clipboard" data-clipboard-text="{{ price }}">
                                    &nbsp;&nbsp;<i class="far fa-copy"></i></span>
                                </span>
                            </h2>
                                <button class="btn btn-success btn-lg" type="submit">
                                    {% translate "Click To Calculate Reward!" %}
                                </button>
                        {% else %}
                            <p class="text-warning">
                                {% translate "Please define a pricing/route!" %}
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="col-md-6">

                <div class="card">
                    <div class="card-body" style="min-height: 100px;">
                        <h5 class="card-title">{% translate "Pricing details" %}</h5>
                        {% if pricing %}
                            <dl class="dl-horizontal">
                                {% if pricing.is_bidirectional %}
                                    <dt>{% translate "From / To:" %}</dt>
                                {% else %}
                                    <dt>{% translate "From:" %}</dt>
                                {% endif %}

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

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

                                <dt><dt>{% translate "Both directions:" %}</dt></dt>
                                <dd>{{ pricing.is_bidirectional|yesno }}</dd>

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

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

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

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

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

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

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

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

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

                            </dl>

                        {% else %}
                            <p class="text-warning">{% translate "Please define a pricing/route!" %}</p>
                        {% endif %}

                    </div>
                </div>

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

                                <dt>{% translate "Availability:" %}</dt>
                                <dd>{{ availability }}</dd>

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

                                <hr>

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

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

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

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

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

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

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

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

            </div>
        </div>

    </form>

{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/clipboard-js.html' %}

    <script type="application/javascript">
        const clipboard = new ClipboardJS('.copy_to_clipboard');

        clipboard.on('success', function (e) {
            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

        $(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)
                );
            });

        });
    </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 %}