{% extends "base.html" %}
{% block content %}
{% load static %}

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<link rel="stylesheet" href="{% static 'css/prediction.css' %}">
<script src="{% static 'js/prediction.js' %}"></script>


<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script>
  $(document).ready(function () {
    {% for match in matches %}
    $('#pred-left-{{ forloop.counter }}').on('click', function () {
      $('#detail-left-{{ forloop.counter }}').toggle(200);
      $('.vs1').toggleClass('active');
      $('.btn-prediction').toggleClass('active');
    })
    $('#pred-right-{{ forloop.counter }}').on('click', function () {
      $('#detail-right-{{ forloop.counter }}').toggle(200);
      $('.vs2').toggleClass('active');
      $('.btn-prediction').toggleClass('active');
    })
    {% endfor %}
  })
</script>


<div class="content-prediction">
  <div class="content-slider">
    <div class="container-slider">
      <div id="slider">
        <ul id="slideWrap">
          <li class="item-slider">
            <div>
              <span><a>Wimbledon</a></span>
              <span><a>Wimbledon</a></span>
              <span><a>Wimbledon</a></span>
              <span><a>Wimbledon</a></span>
            </div>
          </li>
          <li class="item-slider">
            <div>
              <span><a>RG</a></span>
              <span><a>RG</a></span>
              <span><a>RG</a></span>
              <span><a>RG</a></span>
            </div>
          </li>
          <li class="item-slider">
            <div>
              <span>Wimbledon</span>
              <span>Wimbledon</span>
              <span>Wimbledon</span>
              <span>Wimbledon</span>
            </div>
          </li>
        </ul>
        <a id="prev" href="#"><img src="{% static 'img/right-arrow.png' %}"></a>
        <a id="next" href="#"><img src="{% static 'img/left-arrow.png' %}"></a>
      </div>
    </div>
  </div>

  <div class="container-content">
    <div class="container-title-tournament">
      <div class="title-tournament">
        <span>Wimbledon</span>
      </div>
    </div>

    {% if user.is_authenticated %}
    <div class="container-predictions">
      <div class="today-match">
        <span>Today's matchs</span>
      </div>
      <div class="block-predictions">
        {% for match in matches %}
        <div class="prediction-field">
          <div class="prediction-card c-left hidden">
            <div class="info-match">
              <div class="player-versus">
                <span class="first-player">Federer</span>
                <div class="versus-container"><img src="{% static 'img/versus-logo.png' %}"
                    class="versus-logo"></div>
                <span class="second-player">Nadal</span>
              </div>
              <div class="match-date">
                <div class="date-fixed">16h30</div>
                <div class="percent-win">
                  <div class="flex-wrapper">
                    <div class="single-chart">
                      <svg viewBox="0 0 36 36" class="circular-chart green">
                        <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="67, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <text x="18" y="22" class="percentage">67%</text>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="player-percent">
                  <p>Nadal win rate on this match</p>
                </div>
              </div>
            </div>
            <div id="detail-left" class="detail-prediction-left">
              <div class="detail-info">
                <span class="title-box orange-dark-theme">Statistics</span>
                <div class="title-stat">
                  <p class="orange-light-theme">Ace percentage</p>
                  <div class="player-stat">
                    <div class="flex-wrapper fw-stat-left">
                      <div class="single-chart">
                        <svg viewBox="0 0 36 36" class="circular-chart blue">
                          <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <path class="circle" stroke-dasharray="68, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <text x="18" y="22" class="percentage">68%</text>
                        </svg>
                      </div>
                      <span class="pl1 graph">Nadal</span>
                    </div>
                    <div class="flex-wrapper fw-stat-right">
                      <div class="single-chart">
                        <svg viewBox="0 0 36 36" class="circular-chart green">
                          <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <path class="circle" stroke-dasharray="68, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <text x="18" y="22" class="percentage">68%</text>
                        </svg>
                      </div>
                      <span class="pl2 graph">Federer</span>
                    </div>
                  </div>

                  <p class="orange-light-theme">Average break</p>
                  <div class="player-stat">
                    <span class="pl1">Nadal : 10</span>
                    <span class="pl2">Federer : 14</span>
                  </div>

                  <p class="orange-light-theme">Average service speed</p>
                  <div class="player-stat">
                    <span class="pl1">Nadal : 168km/h</span>
                    <span class="pl2">Federer : 157km/h</span>
                  </div>

                  <p class="orange-light-theme">Ranking</p>
                  <div class="player-stat">
                    <canvas id="line-chart-3" width="100%" height="80%"></canvas>
                    <script>
                      new Chart(document.getElementById("line-chart-3"), {
                        type: 'line',
                        data: {
                          labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018],
                          datasets: [{
                            data: [12, 7, 4, 2, 3, 1, 4, 6, 2, 1],
                            label: "Rafael NADAL",
                            borderColor: "#ff5800"
                          },
                          {
                            data: [2, 3, 4, 2, 3, 3, 1, 1, 2, 3],
                            label: "Roger Federer",
                            borderColor: "#ff8400"
                          }
                          ]
                        },
                        options: {
                          title: {
                            display: true,
                            text: 'World Ranking Historical'
                          }
                        }
                      });
                    </script>
                  </div>
                </div>
              </div>
            </div>
            <button id="pred-left" class="btn btn-primary btn-prediction"><img
                src="{% static 'img/arrow-prediction.png' %}" class="vs-logo vs1"></button>
          </div>

          <div class="prediction-card c-right hidden">
            <div class="info-match">
              <div class="player-versus">
                <span class="first-player">Federer</span>
                <div class="versus-container"><img src="{% static 'img/versus-logo.png' %}"
                    class="versus-logo"></div>
                <span class="second-player">Nadal</span>
              </div>
              <div class="match-date">
                <div class="date-fixed">16h30</div>
                <div class="percent-win">
                  <div class="flex-wrapper">
                    <div class="single-chart">
                      <svg viewBox="0 0 36 36" class="circular-chart orange">
                        <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="43, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <text x="18" y="22" class="percentage">43%</text>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="player-percent">
                  <p>Roger win rate on this match</p>
                </div>
              </div>
            </div>
            <div id="detail-right" class="detail-prediction-right">
              <div class="detail-info">
                <span class="title-box green-theme">Statistics</span>
                <div class="title-stat">
                  <p class="blue-theme">Ace percentage</p>
                  <div class="player-stat">
                    <div class="flex-wrapper fw-stat-left">
                      <div class="single-chart">
                        <svg viewBox="0 0 36 36" class="circular-chart orange">
                          <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <path class="circle" stroke-dasharray="68, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <text x="18" y="22" class="percentage">68%</text>
                        </svg>
                      </div>
                      <span class="pl1 graph">Nadal</span>
                    </div>
                    <div class="flex-wrapper fw-stat-right">
                      <div class="single-chart">
                        <svg viewBox="0 0 36 36" class="circular-chart orange-light">
                          <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <path class="circle" stroke-dasharray="68, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                          <text x="18" y="22" class="percentage">68%</text>
                        </svg>
                      </div>
                      <span class="pl2 graph">Federer</span>
                    </div>
                  </div>

                  <p class="blue-theme">Average break</p>
                  <div class="player-stat">
                    <span class="pl1">Nadal : 10</span>
                    <span class="pl2">Federer : 14</span>
                  </div>

                  <p class="blue-theme">Average service speed</p>
                  <div class="player-stat">
                    <span class="pl1">Nadal : 168km/h</span>
                    <span class="pl2">Federer : 157km/h</span>
                  </div>

                  <p class="blue-theme">Ranking</p>
                  <div class="player-stat">
                    <canvas id="line-chart-4" width="100%" height="80%"></canvas>
                    <script>
                      new Chart(document.getElementById("line-chart-4"), {
                        type: 'line',
                        data: {
                          labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018],
                          datasets: [{
                            data: [12, 7, 4, 2, 3, 1, 4, 6, 2, 1],
                            label: "Rafael NADAL",
                            borderColor: "#3fe05a"
                          },
                          {
                            data: [2, 3, 4, 2, 3, 3, 1, 1, 2, 3],
                            label: "Roger Federer",
                            borderColor: "#00a2ff"
                          }
                          ]
                        },
                        options: {
                          title: {
                            display: true,
                            text: 'World Ranking Historical'
                          }
                        }
                      });
                    </script>
                  </div>
                </div>
              </div>
            </div>
            <button id="pred-right" class="btn btn-primary btn-prediction"><img
                src="{% static 'img/arrow-prediction.png' %}" class="vs-logo vs2"></button>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    {% else %}

    <div class="container-predictions">
      <div class="today-match">
        <span>Today's matchs</span>
      </div>
      <div class="block-predictions">
        {% for match in matches %}
        <div class="prediction-field">
          <div class="prediction-card c-left hidden">
            <div class="info-match">
              <div class="player-versus">
                <span class="first-player">{{ match.players.0.name }}</span>
                <div class="versus-container"><img src="{% static 'img/versus-logo.png' %}"
                    class="versus-logo"></div>
                <span class="second-player">{{ match.players.1.name }}</span>
              </div>
              <div class="match-date">
                <div class="date-fixed">{{ match.date }}</div>
                <div class="percent-win">
                  <div class="flex-wrapper">
                    <div class="single-chart">
                      <svg viewBox="0 0 36 36" class="circular-chart orange">
                        <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="{{ match.players.0.chance }}, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <text x="18" y="22" class="percentage tc">{{ match.players.0.chance }}%</text>
                      </svg>
                    </div>
                  </div>
                </div>

                <div class="player-percent">
                  <p class="tc">win rate on this match</p>
                </div>
              </div>
            </div>
            <div id="detail-left-{{ forloop.counter }}" class="detail-prediction-left">
              <a href="{% url 'pages:payement' %}">
                <div class="detail-info">
                  <span>Free trial<br>for a week !</span>
                </div>
              </a>
            </div>
            <button id="pred-left-{{ forloop.counter }}" class="btn btn-primary btn-prediction"><img
                src="{% static 'img/arrow-prediction.png' %}" class="vs-logo vs1"></button>
          </div>

          <div class="prediction-card c-right hidden">
            <div class="info-match">
              <div class="player-versus">
                <span class="first-player">{{ match.players.0.name }}</span>
                <div class="versus-container"><img src="{% static 'img/versus-logo.png' %}"
                    class="versus-logo"></div>
                <p class="second-player">{{ match.players.1.name }}</p>
              </div>
              <div class="match-date">
                <div class="date-fixed">{{ match.date }}</div>
                <div class="percent-win">
                  <div class="flex-wrapper">
                    <div class="single-chart">
                      <svg viewBox="0 0 36 36" class="circular-chart green">
                        <path class="circle-bg" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="{{ match.players.1.chance }}, 100" d="M18 2.0845
                                                           a 15.9155 15.9155 0 0 1 0 31.831
                                                           a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <text x="18" y="22" class="percentage tc">{{ match.players.1.chance }}%</text>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="player-percent">
                  <p class="tc">win rate on this match</p>
                </div>
              </div>
            </div>
            <div id="detail-right-{{ forloop.counter }}" class="detail-prediction-right">
              <a href="{% url 'pages:payement' %}">
                <div class="detail-info">
                  <span>Free trial<br>for a week !</span>
                </div>
              </a>
            </div>
            <button id="pred-right-{{ forloop.counter }}" class="btn btn-primary btn-prediction"><img
                src="{% static 'img/arrow-prediction.png' %}" class="vs-logo vs2"></button>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    {% endif %}

  </div>
</div>


<style>
  .content-prediction {
    background: url("{% static 'img/bg-content.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }

  {% if user.is_authenticated %}

  .detail-prediction-left,
  .detail-prediction-right {
    background: #0e1113;
  }

  {% else %}

  .detail-prediction-left,
  .detail-prediction-right {
    background: url("{% static 'img/bg-prediction-unpaid.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }

  {% endif %}
</style>

{% endblock %}