{% extends layout.twig %}

{% block title %}irgendwas mit Vermessungen{% endblock %}

{% block content %}
  <form action="/vermessung" method="post">
    <div class="form-floating">
      <textarea class="form-control" name="protocol" id="protocol" style="height: 100px">{{ $protocol }}</textarea>
      <label for="protocol">Gesamtes Clanprotokoll einfügen (strg-a, strg-c)</label>
    </div>
    <br>
    <input class="btn btn-primary" type="submit" value="abschnalzen">
  </form>

  {% if(isset($newest)): %}
  <hr />
  <span id="wao">wao, {{ number_format($newest['gm'], 0, '', '.') }} Goldm&uuml;nzen durch {{ count($newest['list']) }} Vermessungen erwirtschaftet!</span>
  <select id="dtswitch">
    {% foreach($vms as $vm): %}
    <option>{{ $vm['dtact'] }}</option>
    {% endforeach; %}
  </select>
  <hr />

  <div class="container-fluid">
    <div class="row justify-content-md-center">
      <div class="col-sm-4">
        <div class="card">
          <h5 class="card-header">Topliste:</h5>
          <div class="card-body">
            <table class="table table-sm table-striped" style="width: 100%">
              <thead>
                <th>#</th>
                <th>Spieler</th>
                <th>Vermessungen</th>
                <th>Gold</th>
              </thead>
              <tbody id="toplist">
                {% $i = 0; %}
                {% foreach($newest['user'] as $name => $player): %}
                <tr>
                  <td>{{ ++$i }}</td>
                  <td>{{ $name }}</td>
                  <td>{{ $player['count'] }}</td>
                  <td>{{ number_format($player['gold'], 0, '', '.') }}</td>
                </tr>
                {% endforeach; %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <h5 class="card-header">ber&uuml;cksichtigte Messungen:</h5>
          <div class="card-body">
            <table class="table table-sm table-striped" style="width: 100%">
            <thead>
              <tr>
                <th>Datum</th>
                <th>Summe</th>
                <th>à</th>
                <th>Amtsteher</th>
                <th>L&auml;ufer</th>
              </tr>
            </thead>
            <tbody id="vmlist">
              {% foreach($newest['list'] as $tmp): %}
              <tr>
                <td style="vertical-align: top">{{ $tmp['datum'] }}</td>
                <td style="vertical-align: top">{{ number_format($tmp['gold'], 0, '', '.') }} gm</td>
                <td style="vertical-align: top">{{ number_format($tmp['a'], 0, '', '.') }} gm</td>
                <td style="vertical-align: top">{{ $tmp['amt'] }}</td>
                <td style="vertical-align: top">{{ implode(', ', $tmp['laeufer']) }}</td>
              </tr>
              {% endforeach; %}
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>const vms = {{ json_encode($vms) }};
  (() => {
    const toplist = document.querySelector('#toplist');
    const vmlist = document.querySelector('#vmlist');
    const wao = document.querySelector('#wao');
    const dtswitch = document.querySelector('#dtswitch');

    dtswitch.addEventListener('change', e => {
      const vm = vms[dtswitch.value];
      
      toplist.innerHTML = '';
      vmlist.innerHTML = '';

      let gm = 0;
      let cvm = 0;
      let i = 1;

      for(let [ name, player ] of Object.entries(vm.user)) {
        console.log(player);
        // fill toplist
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${i}</td><td>${name}</td><td>${player.count}</td><td>${player.gold.toLocaleString('de-DE')}</td>`;
        toplist.insertAdjacentElement('beforeend', tr);
        i++;
      }
      
      for(let entry of vm.list) {
        // fill vmlist
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${entry.datum}</td><td>${entry.gold.toLocaleString('de-DE')} gm</td><td>${entry.a.toLocaleString('de-DE')} gm</td><td>${entry.amt}</td><td>${entry.laeufer.join(', ')}</td>`;
        vmlist.insertAdjacentElement('beforeend', tr);
      }

      wao.innerHTML = `wao, ${vm.gm.toLocaleString('de-DE')} Goldm&uuml;nzen durch ${vm.list.length} Vermessungen erwirtschaftet!`;
    });
  })();
  </script>
  {% endif; %}
  {% endblock %}