{{ block title }}
    Verhandeln Sie als Spieler {{colorDE}}
{{ endblock }}
{{ block content }}

<div class="container mt-4 ">
  <div id="chipbargainphase" class="w-100">
  <h7 class="mb-3">Anleitung: Sie werden nun gebeten Ihrem/Ihrer SpielpartnerIn Angebote für die Aufteilung der 20 Pokerchips zu unterbreiten. Mit Bewegen des Schiebereglers zwischen 0 bis 20, geben Sie an wie viele von den 20 Pokerchips Sie für sich behalten möchten. Der Rest an Pokerchips geht dann an den/die SpielpartnerIn. Sobald Sie den Schieberegler bewegen, wird Ihnen
    auch der Geldwert des Angebots für Sie und dem/der SpielpartnerIn angezeigt. Sobald Sie mit Ihrem Angebot zufrieden sind, gehen Sie auf "Angebot unterbreiten". In der untenstehenden Liste
    wird Ihr aktuelles Angebot und das aktuelle Angebot des Spielpartners angezeigt. Solange Sie nicht das gleiche Angebot machen, können Sie und Ihr/Ihre SpielpartnerIn jederzeit die eigenen Angebote verändern. </h7><br>
  <div class="w-100 mb-3">
    <br> <b>Schieberegler: </b>
    <input type="range" class="form-range w-100" value="0" min="0" max="20" step="1" id="offer" oninput="this.nextElementSibling.value = this.value" onchange="highlightWinnings(this.value)" />
    <output id="offer_output" class="input-group-text">0</output>
  </div>
  <div class="mb-100">
    <br>
    <div class="container d-flex justify-content-between mt-3">
      <strong>Geldwert Ihrer Pokerchips bei diesem Angebot</strong>
      <!--<ul class="list-inline" id="my_winnings">
        {% for item in my_winnings %}
        <li class="list-inline-item" id="mw_{{ item }}" onclick="handleItemClick(this)">{{ item }}</li>
        {% endfor %}
      </ul>-->
      {% for item in my_winnings %}
        <span class="list-inline-item mx-1 clickable-span" id="mw_{{ item }}" onclick="handleItemClick(this)">{{ item }}</span>

          {% endfor %}
    </div>
    <div class="container d-flex justify-content-between">
      <strong>Geldwert der Chips des Spielpartners bei diesem Angebot</strong>
           {% for item in opp_winnings %}
          <span class="list-inline-item mx-1" id="ow_{{ item }}">{{ item }}</span>
          {% endfor %}
    </div>
    <br>
    <br>
    </div>

    <div class="d-flex justify-content-end align-self-end">

      <button type="button" class="btn btn-primary" onclick="sendValue()" id="sendOfferBtn">Angebot unterbreiten</button>
    </div>
</div>
<div id="acceptphase" class="d-none border border-primary">
  <div>
    Anzahl Pokerchips für Sie: <span id="mychips"></span>  <br>
    Anzahl Pokerchips für SpielpartnerIn: <span id="oppchips"></span> <br>

    <!-- forced Es wurde ein finales Angebot eingereicht ; nicht forciert Sie sind zum gleichen Angebot gekommen-->
    <p id="premise">Sie sind zum gleichen Angebot gekommen.</p>
 Bitte geben Sie nun an, ob Sie das Angebot annehmen oder ablehnen möchten.
Falls Sie das Angebot annehmen, so werden die Pokerchips gemäß des gemeinsamen Angebots aufgeteilt.
Falls Sie das Angebot ablehnen, so kommt es zu keiner Einigung und Sie beide erhalten jeweils 0 Pokerchips.

      <br>
</div>
  <br><br>
  <button  class="btn btn-secondary d-none" name="offer_accept" value="False" id="declineOfferBtn" >Angebot ablehnen</button>
  <button  class="btn btn-primary  d-none" name="offer_accept" value="True" id="acceptOfferBtn">Angebot annehmen</button>

  </div>
  <br><br>
</div>
  <h4>Liste an Angeboten</h4>
  <table id="history" class="table table-striped table-hover align-middle mt-4 bg-white">
    <thead class="bg-light">
      <tr>
        <th>Spieler</th>
        <th>Anzahl Pokerchips für Sie</th>
        <th>Anzahl Pokerchips für SpielpartnerIn</th>
        <!--<th>Akzeptiert</th>-->
      </tr>
    </thead>
    <tbody id="tablerow">
      <tr id="my_row">
        <td>Sie</td>
        <td id="me-chip-me"></td>
        <td id="me-chip-opp"></td>
      </tr>
    <tr id="opp_row">
      <td>SpielpartnerIn</td>
       <td id="opp-chip-me"></td>
       <td id="opp-chip-opp"></td>
    </tr>
    </tbody>
  </table>
  <!--<button type="button" class="btn btn-warning d-none" id="force_my_distribution" title="{{title_force}}" onclick="sendValue(true)">Mein letztes Angebot </button>-->
  <button type="button" class="btn btn-warning d-none" id="abort_bargain" title="{{title_abort}}" onclick="showDecisionAbort()">Abbrechen</button>
  <button type="button" class="btn btn-primary d-none" id="abort_bargain_no" title="{{title_abort_reject}}" onclick="showDecisionAbort(false)">Verhandlung nicht abbrechen</button>
  <button type="button" class="btn btn-danger d-none" id="abort_bargain_yes" title="{{title_abort_confirm}}" onclick="hackedClickOnDecline()">Bestätigung Verhandlung abbrechen</button>
{{ formfield_errors 'offer_accept' }}
<style>

  .highlight {
    background-color: yellow;
  }
  .highlight-opponent{
    background-color: skyblue;
  }
  .highlight-agreement{
    background-color: lawngreen;
  }
  .highlight-red{
    background-color: lightpink;
    opacity: 75%;
  }
  .highlight-green{
    background-color: lightgreen;
    opacity: 75%;
  }
   .clickable-span {
    cursor: pointer;
  }


</style>
<script>

  let selectedMyItem = null;
  let selectedOppItem = null;
  let history = document.getElementById("history");
  let table_body = document.getElementById('tablerow')
  let offer = document.getElementById("offer");
  let offer_output = document.getElementById("offer_output");
  let sendOfferBtn = document.getElementById("sendOfferBtn");
  let declineOfferBtn = document.getElementById("declineOfferBtn");
  let acceptOfferBtn = document.getElementById("acceptOfferBtn");
  let forced_button = document.getElementById('force_my_distribution');
  let myType = 'green';
  let forciertes_ende = "";
  let counter_forced = 0;
  let abort_button = document.getElementById('abort_bargain');
  let abort_button_yes = document.getElementById('abort_bargain_yes');
  let abort_button_no = document.getElementById('abort_bargain_no');
  let chip_bargain_div = document.getElementById("chipbargainphase");
  let accept_div = document.getElementById("acceptphase");

  function hackedClickOnDecline(){
    // Behnud - das könnte für die Zukunft intressant sein
    // https://otree.readthedocs.io/en/latest/forms.html#button-that-submits-the-form  funktioniert anscheinend nur 1x
    // hier jetzt 2 mal "gehackt",

    let data = {offer: 0, forced: false, declined: true}
    //sendValue(false,true);
    liveSend(data);
    declineOfferBtn.click();
  }
function sendValue(forced=false, declined=false) {
    offer_given = parseInt(offer.value)
    let data = {offer : offer_given, forced: forced, declined: declined }
    //liveSend(offer_given, forced);
    liveSend(data)
    setEndSpans(offer_given);
}
function showDecisionAbort(confirmed=true){

  abort_button.classList.add('d-none');
  abort_button_no.classList.remove('d-none');
  abort_button_yes.classList.remove('d-none');

  if(!confirmed){
    abort_button_no.classList.add('d-none');
    abort_button_yes.classList.add('d-none');
    abort_button.classList.remove('d-none');
  }
  // Gegenüber raus schmeissen aus der Page (force next page)
  // ignoring livesend

}

function setEndSpans(offer_given){
    let mychips = offer_given;
    let oppchips = js_vars.num_chips - offer_given;
    let mc = document.getElementById("mychips");
    mc.innerHTML = mychips;
    let oc =document.getElementById("oppchips");
    oc.innerHTML = oppchips;
}

function highlightWinnings(offer_given){
    var highlightedElement = document.querySelectorAll('.highlight');

    if (highlightedElement.length > 0) {
        for(let i=0; i<highlightedElement.length;i++){
            var highlightedValue = highlightedElement[i].innerText;
            highlightedElement[i].classList.remove('highlight');

        }
    } else {
      //console.log("No element with the 'highlight' class found.");
    }
    var my_item = js_vars.my_winnings[offer_given];
    var opp_item = js_vars.opp_winnings[js_vars.num_chips-offer_given];
    var offer_highlight = document.getElementById("mw_"+my_item);
    var opp_highlight = document.getElementById("ow_"+opp_item);
     offer_highlight.classList.add('highlight');
    opp_highlight.classList.add('highlight');

    offer.value = offer_given; // Set slider value to the selected offer
    offer_output.value = offer_given; // Update the output value to match the selected offer



}

function liveRecv(data){

        let sender = data;
        let type = data.type;

        const accept = (type==='finished') ? true : false;
        const forced = (type == 'forced')? true : false;

        if (type==='declined'){
          // händisch aussteigen
          hackedClickOnDecline();
        }

        change_table_entry(data, accept, forced);

  }

function change_table_entry(data, accepted=false , forced=false) {
  counter_forced++;
  let mychips = data.offer_me;
  let oppchips = data.offer_opp;
  let offerer = 'Sie';
  let table_mychips = document.getElementById("me-chip-me");
  let table_oppchips = document.getElementById("me-chip-opp");
  let trow = document.getElementById("my_row");
  if (data.id_in_group === js_vars.my_id) {
    table_mychips.innerHTML = mychips;
    table_oppchips.innerText = js_vars.num_chips - mychips;
  }
  if (data.id_in_group !== js_vars.my_id) {
    offerer = 'PartnerIn'
    mychips = oppchips
    oppchips = data.offer_me;
    table_mychips = document.getElementById("opp-chip-me");
    table_oppchips = document.getElementById("opp-chip-opp");
    trow = document.getElementById("opp_row");
    table_mychips.innerHTML = js_vars.num_chips - oppchips;
    table_oppchips.innerText = oppchips;
    if(forced){
       let table_mychips = document.getElementById("me-chip-me");
       let table_oppchips = document.getElementById("me-chip-opp");

      table_mychips.innerHTML = oppchips;
      table_oppchips.innerText = js_vars.num_chips - oppchips;
        let mc = document.getElementById("mychips");
    mc.innerHTML = js_vars.num_chips - oppchips;
    let oc =document.getElementById("oppchips");
    oc.innerHTML = oppchips;
    }
  }
  setAcceptButton(false);
  if (accepted || forced) { // im force fall auch
    if (forced){
      let premise = document.getElementById('premise');
      premise.innerText = forciertes_ende;
    }
    setAcceptButton(true);
    trow.style.fontWeight = 'bold';
  }

  if(counter_forced >= js_vars.amount_till_forced){
    if(forced_button != null){
      forced_button.classList.remove('d-none');
    }
    if(abort_button_yes.classList.contains('d-none') && acceptOfferBtn.classList.contains('d-none')) {
      abort_button.classList.remove('d-none');
    }
  }

}


function setAcceptButton(visible){
  // show accept button
  let class_ = 'd-none'
  if (visible){
    acceptOfferBtn.classList.remove(class_);
    declineOfferBtn.classList.remove(class_);
    sendOfferBtn.classList.add(class_);
    //forced_button.classList.add(class_)
    //divs anpassen

    accept_div.classList.remove(class_);
    chip_bargain_div.classList.add(class_);

    abort_button.classList.add(class_);
  }
  else{
    acceptOfferBtn.classList.add(class_);
    declineOfferBtn.classList.add(class_);
    sendOfferBtn.classList.remove(class_);
    //forced_button.classList.remove(class_)
  }


}
 function handleItemClick(itemElement) {
    myID = js_vars.my_winnings.indexOf(parseInt(itemElement.innerText));
    highlightWinnings(myID);

  }
  /*
   function sameOffer() {
            let form = document.getElementById('form');
            let isValid = form.reportValidity();
            if (!isValid) return;

            let warnings = [];

            let contribution = forminputs.contribution.value;
            if (contribution === '0') {
                warnings.push("Are you sure you don't want to contribute anything?");
            }

            let reason = forminputs.reason.value;
            if (reason.length < 10) {
                warnings.push("Are you sure you don't want to give a longer explanation?")
            }

            if (warnings.length > 0) {
                warnings.push("Press OK to proceed anyway.")
                let confirmed = window.confirm(warnings.join('\r\n'));
                if (!confirmed) return;
            }

            form.submit();
        }*/
</script>
{{ endblock }}