{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% block style %}
    <style>
    .container-min-height{
      min-height: 50vh;
    }

    .list-group-item img {
        width: 50px;
        height: 50px;
    }

    .list-group-item .badge {
        margin-top: 15px;
    }

    .list-group-item a {
        text-decoration: none;
        margin-left: 10px;
    }

    .silver {
        background-color: lightblue;
        color: #333;
    }

    .gold {
        background-color: #D4AF37;
        color: #333;
    }

    .bronze {
        background-color: #C9AE5D;
        color: #333;
    }

    .profileimage {
        border-radius: 50%;
    }

    .titleuser {
        position: absolute;
        margin-top: 12px;
        margin-left: 5px;
    }
    input,
select,
button {
  font-family: inherit;
  font-size: inherit;
  padding: 8px;
}
select {
  padding: 8px;
}

.monthly-wrp {
  padding: 1em;
  top: 6px;
  z-index: 1000;
  border-radius: 3px;
  background-color: #2C3E50;
}

.monthly-wrp:before {
  content: "";
  border-bottom: 6px solid #2C3E50;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  top: -6px;
  left: 6px;
  z-index: 1002;
}


.monthly-wrp .years {
  margin-bottom: 0.8em;
  text-align: center;
}

.monthly-wrp .years select {
  border: 0;
  border-radius: 3px;
  width: 100%;
}

.monthly-wrp .years select:focus {
  outline: none;
}

.monthly-wrp table {
  border-collapse: collapse;
  table-layout: fixed;
}

.monthly-wrp td {
  padding: 1px;
}

.monthly-wrp table button {
  width: 100%;
  border: none;
  background-color: #bc1a1a;
  color: #FFFFFF;
  font-size: 14px;
  padding: 0.6em;
  cursor: pointer;
  border-radius: 3px;
}

.monthly-wrp table button:hover {
  background-color: #a01616;
}

.monthly-wrp table button:focus {
  outline: none;
}

    </style>
{% endblock style %}
{% block before_js %}
    <script async
            type="text/javascript"
            src="//cdn.carbonads.com/carbon.js?serve=CESDK2J7&placement=getbutterflycom"
            id="_carbonads_js"></script>
{% endblock before_js %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="row">
        <div class="col-lg-10 flex justify-center items-center">
            <h1 class="page-header">Monthly Leaderboard</h1>
            <p>
                <input type="text" id="selection" value="">
            </p>
        </div>
    </div>
    <div class="row container-min-height">
        <div class="col-lg-9">
            <div class="list-group">
                {% if not leaderboard %}
                    <p class="text-red-900">No data for this month</p>
                {% else %}
                    {% for leader in leaderboard %}
                        <div class="list-group-item">
                            {% if leader.userprofile.avatar %}
                                <img src="{{ leader.userprofile.avatar }}"
                                     class="img-responsive img-thumbnail profileimage"
                                     alt="{{ leader.username }}"
                                     width="50px"
                                     height="50px">
                            {% elif leader.socialaccount_set.all.0.get_avatar_url %}
                                <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}"
                                     class="profileimage"
                                     alt="username"
                                     width="50px"
                                     height="50px">
                            {% else %}
                                <img src="{% gravatar_url leader.email 50 %}"
                                     class="profileimage"
                                     alt="username"
                                     width="50px"
                                     height="50px">
                            {% endif %}
                            <a href="{% url 'profile' slug=leader.username %}">{{ leader.username }}</a>
                            <span class="pull-right badge">{{ leader.total_score }} Points</span>
                            {% if leader.userprofile.winnings %}
                                <span class="pull-right badge">${{ leader.userprofile.winnings|default:""|floatformat }}</span>
                            {% endif %}
                            <span><kbd class="{{ leader.userprofile.get_title_display }} titleuser">{{ leader.userprofile.get_title_display }}</kbd></span>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}
{% block after_js %}
    <script>
  function sanitizeInput(input) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(input));
    return div.innerHTML;
  }
    function padToTwo(number) {
    if (number <= 9999) {
        number = ("0" + number).slice(-2);
    }
    return number;
    }

    (function($) {
        $.fn.monthly = function(options) {
        var months = options.months || [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      Monthly = function(el) {
        this._el = $(el);
        this._init();
        this._render();
        this._renderYears();
        this._renderMonths();
        this._bind();
      };

    Monthly.prototype = {
      _init: function() {
        this._el.html(months[0] + " " + options.years[0]);
      },

      _render: function() {
        var linkPosition = this._el.offset(),
          cssOptions = {
            display: "none",
            position: "absolute",
            top:
              linkPosition.top + this._el.height() + (options.topOffset || 0),
            left: linkPosition.left
          };
        this._container = $('<div class="monthly-wrp">')
          .css(cssOptions)
          .appendTo($("body"));
      },

      _bind: function() {
        var self = this;
        this._el.on("click", $.proxy(this._show, this));
        $(document).on("click", $.proxy(this._hide, this));
        this._yearsSelect.on("click", function(e) {
          e.stopPropagation();
        });
        this._container.on("click", "button", $.proxy(this._selectMonth, this));
      },

      _show: function(e) {
        e.preventDefault();
        e.stopPropagation();
        this._container.css("display", "inline-block");
      },

      _hide: function() {
        this._container.css("display", "none");
      },

      _selectMonth: function(e) {
        var monthIndex = $(e.target).data("value"),
          month = months[monthIndex],
          year = this._yearsSelect.val();
        month = sanitizeInput(month);
        year = sanitizeInput(year);
        this._el.html(month + " " + year);
        if (options.onMonthSelect) {
          options.onMonthSelect(monthIndex+1, month, year);
        }
      },

      _renderYears: function() {
        var markup = $.map(options.years, function(year) {
          return "<option>" + year + "</option>";
        });
        var yearsWrap = $('<div class="years">').appendTo(this._container);
        this._yearsSelect = $("<select>")
          .html(markup.join(""))
          .appendTo(yearsWrap);
      },

      _renderMonths: function() {
        var markup = ["<table>", "<tr>"];
        $.each(months, function(i, month) {
          if (i > 0 && i % 4 === 0) {
            markup.push("</tr>");
            markup.push("<tr>");
          }
          markup.push(
            '<td><button data-value="' + i + '">' + month + "</button></td>"
          );
        });
        markup.push("</tr>");
        markup.push("</table>");
        this._container.append(markup.join(""));
      }
    };

    return this.each(function() {
      return new Monthly(this);
    });
  };
})(jQuery);

$(function() {

   let current_year = new Date().getFullYear();
   let years = [];
   for(let year=current_year;year>=2000;year-=1){
        years.push(year);
   }

  $("#selection").monthly({
    years: years,
    topOffset: 28,
    onMonthSelect: function(mi, m, y) {
      mi = padToTwo(mi);
      $("#selection").val(m + " " + y);
      $("#monthly").val(y + "-" + mi);

      window.location = `?month=${mi}&year=${y}`;
    }
  });


});

    </script>
{% endblock after_js %}