<div class="d-inline-flex">
    <div class="ampel_circle mx-2" id="ampel_green"></div>
    <div class="ampel_circle mx-2" id="ampel_yellow"></div>
    <div class="ampel_circle mx-2" id="ampel_red"></div>
    {% if instance.ampel.note %}
    <button class="btn btn-sm btn-primary" onclick="getNoteText()" id="note_button">Note</button>
    {% else %}
    <button class="btn btn-sm btn-secondary" onclick="getNoteText()" id="note_button">Note</button>
    {% endif %}
</div>
<script>
    let ampel_status = "{{instance.ampel.status|escapejs}}";
    let note_text = "{{instance.ampel.note|escapejs}}";

  /**
    if (ampel_status === ""){
        ampel_status = "{{instance.ampel.status|escapejs}}"
    }
    **/

    const set_selected_color = ()=> {$(`#ampel_${ampel_status}`).css("background-color", ampel_status);};
    set_selected_color();
    $(".ampel_circle").on("mouseenter", (el)=>{
        el_color = el.target.id.split("_")[1];
        $(el.target).css("background-color", el_color)
    });
    
    $(".ampel_circle").on("mouseout", (el)=> {
        el_color = el.target.id.split("_")[1];

        if (ampel_status != el_color){
        $(el.target).css("background-color", "darkgrey");
        }
    });

    $(".ampel_circle").on("click", updateAmpelResponse)
    
    function updateAmpelResponse(el){
        //console.log(el.target.id)
        status = el.target.id.split("_")[1];
        console.log(status)
        if (ampel_status != status){
        
        ampel_id = "{{instance.id|escapejs}}";
            /**
        if (ampel_id === ""){
            ampel_id = "{{instance.id|escapejs}}"
        }
        **/
        $.ajax({
            type: "POST",
            url: "{% url 'dubletten_tool:update_ampel'%}",
            data: {
              "id": ampel_id,
              "status": status,
            },
            beforeSend: function (request) {
              let csrftoken = getCookie("csrftoken");
              request.setRequestHeader("X-CSRFToken", csrftoken);
          },
            success: function (result) {
               console.log(result);
               $(`#ampel_${ampel_status}`).css("background-color", "darkgrey");
               ampel_status = status;
               set_selected_color();
               //todo: alert if success is false
            },
            dataType: "json"
          });
        }
    }

    function getNoteText(){
        ampel_id = "{{instance.id|escapejs}}";

        /**
        if (ampel_id === ""){
            ampel_id = "{{instance.id|escapejs}}"
        }
        **/
        /**
        fetch("{% url 'dubletten_tool:get_note_text' ampel_pk='111122223333'%}".replace("111122223333", ampel_id)).then((res)=> res.json()).then((j)=> { if (j.success){
            console.log(j);
            note_text = j.text;
        }
        **/
        new_text = prompt("Update Note", note_text);
        console.log(new_text)
        /** if (new_text === ""){
            new_text = note_text
        } 
        **/
        if (new_text != note_text && new_text != null){
            updateNoteResponse(new_text)
        }
        }

    
    function updateNoteResponse(text){
        $.ajax({
            type: "POST",
            url: "{% url 'dubletten_tool:update_note_text' %}",
            data: {
              "id": ampel_id,
              "note_text": text,
            },
            beforeSend: function (request) {
              let csrftoken = getCookie("csrftoken");
              request.setRequestHeader("X-CSRFToken", csrftoken);
          },
            success: function (result) {
             note_text = text;
             console.log(note_text, note_text != "")
             if (note_text.trim().length === 0){
                $("#note_button").removeClass("btn-primary");
                $("#note_button").addClass("btn-secondary");
             } else {
                $("#note_button").removeClass("btn-secondary");
                $("#note_button").addClass("btn-primary");
             }
            },
            dataType: "json"
          });

    }
    
  
    
</script>
<style> 
    .ampel_circle{
        background-color:darkgrey;
        border: 2px solid black;
        width: 20px;
        height: 20px;
        border-radius: 30px;
    }
</style>