{% extends "base.html" %}{% load static %}
{% block title %} {{ title }}{% endblock %}
{% block page_heading %}{% endblock %}
{% block content %}
  <h3>Dashboard</h3>

  <div class="row">
    <div class="col-md pb-2">
      <div class="card">
        <div class="card-header">
          <h4>Upcoming Games</h4>
        </div>
        <div class="card-body p-0 m-0">

          {% for event, availability_summary in events_availabilities|slice:":4" %}
            <div class="row m-0 p-2 border-bottom">
              <div class="col p-0 m-auto" style="flex: 0 0 100px;">
                <div class="d-inline-flex m-0 p-0">
                  <div class="chart-container" style="height: 100px;width: 100px;">
                    <canvas id="availability-donut-{{ event.data.id }}" class="availability-donut"
                            data-event-id="{{ event.data.id }}"
                            data-available-yes="{{ availability_summary.data.player_going_count }}"
                            data-available-no="{{ availability_summary.data.player_not_going_count }}"
                            data-available-maybe="{{ availability_summary.data.player_maybe_count }}"
                            data-available-unknown="{{ availability_summary.data.player_unknown_count }}"
                    >
                    </canvas></div>
                </div>
              </div>
              <div class="col">
                <div>
                  <h4><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
                  <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j, g:i A" }}</h6>
                  <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6>
                </div>
                <div class="d-flex">
                  <a class="btn btn-primary btn-sm mx-1" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
                    Go to Lineup
                  </a>
                  <a class="btn btn-primary btn-sm mx-1" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}">
                    <i class="bi bi-book"></i>
                  </a>
                  <form method="get"
                        action="{% url 'instagen_generate' team_id=event.data.team_id event_id=event.data.id %}">
                    <select hidden class="form-select" name="game_id" id="game_id">
                      <optgroup label="Events">
                        <option value="" disabled="disabled">Select an event...</option>
                        <option selected
                                value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
                      </optgroup>
                    </select>
                    <input hidden class="form-check-input" type="radio" name="background"
                           id="backgroundLocation" checked value="location">
                    <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
                           value="1080x1080">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          {% endfor %}

        </div>
      </div>
    </div>
    <div class="col-md pb-2">
      <div class="card">
        <div class="card-header">
          <h4>Past Games</h4>
        </div>
        <div class="card-body p-0 m-0">

          {% for event in ts_events_past|slice:":4" %}
            <div class="row m-0 p-2 border-bottom">
              <div class="col p-0 m-auto rounded-circle bg-light" style="flex: 0 0 100px;">
                <div class="d-inline-flex m-0 p-0">
                  <div class="d-flex align-items-center justify-content-center" style="height: 100px;width: 100px;">
                    <h4 class="text-center"><strong>{{ event.data.formatted_results }}</strong></h4>
                  </div>
                </div>
              </div>
              <div class="col">
                <h4 class=""><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
                <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j" }}</h6>
                {#                                <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6><a class="btn btn-primary btn-sm" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.teamsnapsettings.managed_team.id %}">Go to Lineup</a>#}

                <div class="d-flex">
                  <form method="get"
                        action="{% url 'instagen_generate' team_id=event.data.team_id event_id=event.data.id %}">
                    <select hidden class="form-select" name="game_id" id="game_id">
                      <optgroup label="Events">
                        <option value="" disabled="disabled">Select an event...</option>
                        <option selected
                                value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
                      </optgroup>
                    </select>
                    <input hidden class="form-check-input" type="radio" name="background"
                           id="backgroundLocation" checked value="location">
                    <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
                           value="1080x1080">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          {% endfor %}

        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block inline_javascript %}
  <script>
    function donut(ctx, yes_count, maybe_count, no_count, unknown_count) {
      var style = getComputedStyle(document.body);
      const myChart = new Chart(ctx, {
        type: 'doughnut',
        responsive: 'true',
        data: {
          datasets: [{
            label: 'Availability',
            labels: [
              'Yes',
              'Maybe',
              'No',
              'Unknown'
            ],
            data: [yes_count, maybe_count, no_count, unknown_count],
            backgroundColor: [
              style.getPropertyValue('--bs-success'),
              style.getPropertyValue('--bs-info'),
              style.getPropertyValue('--bs-danger'),
              style.getPropertyValue('--bs-secondary')
            ],
            hoverOffset: 4
          }]
        },
      });

    }
    for (ctx of document.querySelectorAll('.availability-donut')){
      donut(ctx,
        ctx.dataset.availableYes,
        ctx.dataset.availableMaybe,
        ctx.dataset.availableNo,
        ctx.dataset.availableUnknown,
      )
    }
  </script>
{% endblock %}