{% extends tpl/layout.html %}

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

{% block content %}
<form action="/vermessung" method="post">
  <p>Gesamtes Clanprotokoll einfügen (strg-a, strg-c):</p>
  <textarea name="protocol" rows="4" cols="60">{{ $protocol }}</textarea>
  <br />
  <input 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">
            <ul class="list-group list-group-flush list-top" id="toplist">
              {% foreach($newest['user'] as $name => $c): %}
              <li class="list-group-item d-flex justify-content-between align-items-center p-1">
                {{ $name }}
                <span class="badge bg-primary rounded-pill">{{ $c }} Vermessungen</span>
              </li>
              {% endforeach; %}
            </ul>
          </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>Goldm&uuml;nzen</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">{{ $tmp['gold'] }} 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;

      for(let [ user, count ] of Object.entries(vm.user)) {
        // fill toplist
        const li = document.createElement('li');
        li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center', 'p-1');
        li.innerText = user;
        const span = document.createElement('span');
        span.classList.add('badge', 'bg-primary', 'rounded-pill');
        span.innerText = `${count} Vermessungen`;
        li.insertAdjacentElement('beforeend', span);
        toplist.insertAdjacentElement('beforeend', li);
      }

      for(let entry of vm.list) {
        // fill vmlist
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${entry.datum}</td><td>${entry.gold} 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 %}