{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}
{% block searchTerm %}{% endblock %}

{% block breadcrumb %}
    <a href="{{ path('tanks') }}">Tanks</a> > Tank erstellen
{% endblock %}

{% block body %}
    <div class="edit_tanktype">
        <form action="{{ path("tanks_save") }}" method="POST">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title">
                                <b>Tank-Daten</b>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="m-0 pt-2">Bezeichnung</label>
                                    <input class="form-control item-required" name="name">
                                </div>
                                <div class="col-sm-6">
                                    <label class="m-0 pt-2">Firma</label>
                                    <input type="text" class="form-control" value="Firma wird durch Topas-ID festgelegt" readonly>
                                </div>
                                <div class="col-sm-6">
                                    <label class="m-0 pt-2">Tank-Typ</label>
                                    <select class="form-control" name="tanktype">
                                        {% for tanktype in tanktypes %}
                                            <option value="{{ tanktype.id }}">{{ tanktype.name }}</option>
                                        {% else %}
                                            <option disabled>Keine Tank-Typen vorhanden</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label class="m-0 pt-2">Gasarten</label>
                                    <select class="form-control" name="gastype">
                                        {% for gastype in gastypes %}
                                            <option value="{{ gastype.id }}">{{ gastype.name|raw }}</option>
                                        {% else %}
                                            <option disabled>Keine Gasarten vorhanden</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="m-0 pt-2">Beschreibung</label>
                                    <textarea class="form-control" name="description"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title">
                                <b>Topas-Daten</b>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label class="m-0 pt-2">Topas ID</label>
                                    <input class="form-control item-required" name="topasid">
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="m-0 pt-2">Topas Ports</label>
                                            <div class="Rtable">
                                                {% for data in portdata %}
                                                    <div class="Rtable-row Rtable-row-{{ cycle(['odd', 'even'], loop.index0) }}">
                                                        {% for port in data.ports %}
                                                            <div class="Rtable-cell Rtable-cell-center rw-12_5">
                                                                <label class="m-0" for="port{{ port }}">{{ port }}</label>
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input" type="checkbox" id="port{{ port }}" name="ports[{{ port }}]">
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-12">
                                                    <label class="m-0 pt-2">E-Mail-Warnung senden an:</label>
                                                    <input class="form-control" name="emailwarning">
                                                </div>
                                                <div class="col-12">
                                                    <label class="m-0 pt-2">Bestell-Warnung senden an:</label>
                                                    <input class="form-control" name="orderwarning">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-6">
                                            <label class="m-0 pt-2">Primär-Port</label>
                                            <select class="form-control" name="primaryport">
                                                {% for data in portdata %}
                                                    {% if 'primary' in data.selectable %}
                                                        {% for port in data.ports %}
                                                            <option value="{{ port }}">{{ port }}</option>
                                                        {% endfor %}
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-3 col-sm-6">
                                            <label class="m-0 pt-2">Alarm-Port</label>
                                            <select class="form-control" name="alertport">
                                                {% for data in portdata %}
                                                    {% if 'primary' in data.selectable %}
                                                        {% for port in data.ports %}
                                                            <option value="{{ port }}">{{ port }}</option>
                                                        {% endfor %}
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title">
                                <b>Disposition-Daten</b>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <label class="m-0 pt-2">Tourenkennzeichen</label>
                                    <input type="text" class="form-control" name="touridentifier">
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Tourenkennzeichen Klartext</label>
                                    <input type="text" class="form-control" name="touridentifierraw">
                                </div>
                                <div class="col-6">
                                    <label class="m-0 pt-2">Lieferant</label>
                                    <select class="form-control" name="supplier">
                                        <option value="">Kein Fremdlieferant gewählt</option>
                                        {% for supplier in suppliers %}
                                            <option value="{{ supplier.id }}">{{ supplier.name }}</option>
                                        {% else %}
                                            <option disabled>Keine Fremdlieferanten vorhanden</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Liefermengen-Maßeinheit</label>
                                    <select class="form-control" name="deliveryunit">
                                        <option value="">Keine Maßeinheit gewählt</option>
                                        {% for measurement in measurements %}
                                            <option value="{{ measurement.id }}">{{ measurement.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Umrechnungsfaktor der Liefermenge</label>
                                    <input type="number" class="form-control" name="deliveryunitfactor">
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Max. disponierbarer Tankinhalt</label>
                                    <input type="number" class="form-control" name="maxdispotankcontent">
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Anzahl Bündel</label>
                                    <input type="number" class="form-control" name="bundlecount" step="1">
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Tankgröße in Litern</label>
                                    <input type="text" class="form-control" name="litercontent">
                                </div>
                                <div class="col-6">
                                    <label class="m-0 pt-2">Abweichender Standort </label>
                                    <input type="text" class="form-control" name="alternativelocation">
                                </div>
                                <div class="col-3">
                                    <label class="m-0 pt-2">Abweichende Lieferadressnummer </label>
                                    <input type="text" class="form-control" name="alternativelocationnumber">
                                </div>
                                <div class="col-12">
                                    <hr>
                                </div>
                                <div class="col-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="basiowned">
                                        <label class="form-check-label">Basi-eigener Tank</label>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="basidispo">
                                        <label class="form-check-label">Basi disponiert</label>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="deliverydeactivated">
                                        <label class="form-check-label">Automatische Lieferung deaktivieren</label>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="basimailing" disabled>
                                        <label class="form-check-label">Stattdessen Mail an basi Auftragsannahme</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <hr>
                                </div>
                                <div class="col-12">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="tankblocked">
                                        <label class="form-check-label">Für weitere Lieferung gesperrt (Wird bereits beliefert)</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title">
                                <b>Sensorüberwachung</b>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="sensormonitoring">
                                        <label class="form-check-label">Sensorüberwachung aktivieren</label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-12">
                                    <label class="m-0 pt-2">Anzahl gleichbleibender Messungen bis Fehler</label>
                                    <input type="number" step="1" class="form-control" name="sensormonitoringcount">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function () {

            $('input[name=deliverydeactivated]').on('change', function () {
                let ischecked = $(this).is(':checked');
                $('input[name=basimailing]').prop('disabled', !ischecked)
                if (!ischecked) {
                    $('input[name=basimailing]').prop('checked', false)
                }
            })

            $('select[name=primaryport]').on('change', function () {
                checkValidPrimaryPort()
            })
            $('.Rtable .switch-input').on('change', function () {
                checkValidPrimaryPort()
            })
            checkValidPrimaryPort()
        })

        function checkValidPrimaryPort() {
            let primaryport = $('select[name=primaryport]').val()
            let valid = ($('#port' + primaryport).is(':checked'))
            $('.btn[type=submit]').attr('disabled', !valid)
            $('.alert-danger').toggleClass('d-none', valid)
        }
    </script>
{% endblock %}