{% extends 'base.html.twig' %}

{% block title %}MPP-Tool{% endblock %}

{% block body %}
    <div class="mini-nav">
        <a href="{{ path('start') }}">Zurück zur Instandhaltungsplanung</a>
    </div>
    <h1>MPP-Tool</h1>
    <p id="instruction">Bitte füllen sie alle Felder aus, um eine Risikoanalyse zu erstellen. *</p>
    <form method="post" id="form-risk" class="form form--catalogue">
        <div class="row-box row-box-up">
            <div class="col-box">
                <div class="form-fields">
                    <label for="asset">Bitte wählen sie eine Anlage.</label>
                    <select name="asset" id="asset">
                        {% for asset in dinAssets %}
                            <option value="{{ asset.id }}">{{ asset.dinNumber }} - {{ asset.name }}</option>
                        {% endfor %}
                    </select>
                </div>
{#                style="display: {% if benchmarkValues|length < 1 %} block {% else %} none {% endif %}"#}
                <div class="benchmark-not-available" id="no-benchmark-data">
                    <p style="color: #6D0507;">Für diese Anlage sind leider keine Benchmark-Daten vorhanden.</p>
                </div>
                <div class="benchmark-available" id="benchmark-data">
                    <h2>Risikoanalyse</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="failure">Wie hoch ist die Ausfallwahrscheinlichkeit?</label>
                                <select name="failure" id="failure">
                                    {% for key, failure in riskFailure %}
                                        <option value="{{ key }}">{{ failure[0] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="costs">Wie hoch ist der Schaden bei Ausfall?</label>
                                <select name="costs" id="costs">
                                    {% for key, costs in riskCosts %}
                                        <option value="{{ key }}">{{ costs[0] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <h2>Optimierungsckeck</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="maintenance">Wird durch die Wartung der Abnutzungsvorrat positiv beeinflusst?</label>
                                <select name="maintenance" id="maintenance">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="inspection">Kann durch eine Inspektion der Zustand der Anlage erkannt werden?</label>
                                <select name="inspection" id="inspection">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <h2>Zyklus und Größencluster</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="cycle">Aktueller Zyklus (in Monaten)</label>
                                <input name="cycle" type="number" id="cycle" value="" min="1">
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="benchmark">Größencluster</label>
                                <select name="benchmark" id="benchmark">
                                    {%  for key, benchmarkValue in benchmarkValues %}
                                        <option value="{{ key }}">{{ benchmarkValue }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <span class="btn" id="calculate">Potenzial ermitteln</span>
                </div>
            </div>
            <div class="col-box">
                <div class="result-box" id="result-box">
                    <h3>Ergebnis</h3>
                    <p class="result-not-existing">
                        <span id="calculate-first">Bitte erst Potenzial ermitteln!</span>
                        <span class="btn" id="create-worksheet">Arbeitskarte erstellen</span>
                    </p>
                    <div class="result-existing">
                        <dl>
                            <dt>Inspektion<br />
                                (empfohlener Zyklus in Monaten)</dt>
                            <dd id="resInspection"></dd>
                            <dt>Wartung<br />
                                (empfohlener Zyklus in Monaten)</dt>
                            <dd id="resMaintenance"></dd>
                            <dt>Kostenersparnis in Prozent</dt>
                            <dd id="resPercentage"></dd>
                            <dt>Kostenersparnis in Euro</dt>
                            <dd id="resEuro"></dd>
                        </dl>
                        <span class="btn" id="worksheet">Arbeitskarte erstellen</span>
                        <p class="footnote">* Vergleichskosten sind nach BKI indiziert (März 2023)</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}