{% extends 'main/base.html' %} 


{% block content %}

<script>
    function checkSW(){
        let item = document.getElementById("sw_select").value;
        if (item != "0"){
            document.getElementById("submit_alarm").classList.remove("disabled")
        } else {
            document.getElementById("submit_alarm").classList.add("disabled")
        }
    }
</script>

<div id="box1">
    <h4 style="color: red; text-transform: uppercase; margin-bottom: 2rem"><b>Einsatzgenerierung</b></h4>
    <form method="post">{% csrf_token %}
        <div class="row mb-5">
            <div class="col-5" style="text-align: left;">
                <div id="stichwort">
                    <h4>Stichwort:</h4>
                    <select class="form-select" name="stichwort" id="sw_select" onchange="checkSW()" aria-label="Default select example" required>
                        <option selected value="0">Stichwort wählen...</option>
                        {% for sw in sw %}
                        <option value="1">{{sw.1}}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-2"></div>

            <div class="col-5">
                <div id="zusatztext">
                    <h4>Freitext</h4>
                    <input type="text" class="form-control" name="freitext" placeholder="z.B. ROLLER Markt" maxlength="50" required>
                </div>
            </div>
        </div>

        <script>
            function fzcb(fzid){
                let item_div = document.getElementById("fz_"+fzid+"_div")
                let item_cb = document.getElementById("fz_"+fzid+"_cb")
                if (!item_cb.checked){
                    item_cb.checked = true;
                    item_div.classList.add("fz_activ")
                } else {
                    item_cb.checked = false;
                    item_div.classList.remove("fz_activ")
                }
            }

            function allFZ(){
                let items = Array.from(document.getElementsByClassName("fz_item"))
                var cb_all = document.getElementById("all_select")
                var all_checked = false
                if (cb_all.checked) {
                    all_checked = true
                    cb_all.checked = false
                    document.getElementById("selAll").innerHTML = "Alle Auswählen"
                } else {
                    all_checked = false
                    cb_all.checked = true
                    document.getElementById("selAll").innerHTML = "Alle Abwählen"
                }
                items.forEach(function (item){
                    let item_id = item.id
                    let item_nr = item_id.replace("fz_", "").replace("_div", "")
                    if (all_checked) {
                        document.getElementById(item_id).classList.remove("fz_activ")
                        document.getElementById("fz_"+item_nr+"_cb").checked = false
                    } else {
                        document.getElementById(item_id).classList.add("fz_activ")
                        document.getElementById("fz_"+item_nr+"_cb").checked = true
                    }
                })
            }   
        </script>

        <h4 style="margin-bottom: 1rem;">Fahrzeuge<span class="btn btn-warning" style="margin-left: 2rem;" id="selAll" onclick="allFZ()">Alle Auswählen</span></h4>
        <input type="checkbox" class="d-none" id="all_select">
        <div class="row mb-5">
            {% for fz in fz %}
            <div class="col-3 fz_item" id="fz_{{fz.0}}_div" onclick='fzcb("{{fz.0}}")' style="padding: 1rem; margin-left: 0.5rem; box-shadow: 0 0 1rem gray; border-radius: 1rem; align-items: center; cursor: pointer; text-align:center; margin-bottom:0.5rem;">
                {{ fz.3 }} - {{ fz.2 }}
                <input type="checkbox" class="d-none" name="fz" value="{{fz.0}}" id="fz_{{fz.0}}_cb">
            </div>
            {% endfor %}
        </div>

        <input class="btn-danger btn disabled" type="submit" id="submit_alarm" value="AUSLÖSEN"> 
        <a href="/leitstelle/" class="btn btn-secondary">ABBRUCH</a>
    </form>       
    </div>


{% endblock %}