{% extends "base.html" %}
{% block content %}
{% load static %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<link rel="stylesheet" href="{% static 'css/h2h.css' %}">
<script src="{% static 'search-h2h.js' %}"></script>
<div class="container-header">
  <div class="container-search">
    <div class="redirect-1">
      <a href="{% url 'search:tournament' %}" class="search-redirect"><img
          src="{% static 'img/fleche-gauche.png' %}" class="fleche-gauche" style="width: 15%"><span
          class="title-redirect">TOURNAMENT SEARCH</span></a>
    </div>
    <div class="container-title-search">
      <span class="title-search">H2H</span>
    </div>
    <div class="redirect-2">
      <a href="{% url 'search:players' %}" class="search-redirect"><span class="title-redirect">PLAYERS</span><img
          src="{% static 'img/fleche.png' %}" class="fleche-droite" style="width: 15%"></a>
    </div>
  </div>
</div>

<style>
  .container-header {
    width: 100%;
    background: url("{% static 'img/bgg-search-h2h.png' %}") no-repeat center;
    -webkit-background-size: cover;
    /*background-size: cover;*/
  }
</style>

<div class="container-form-search">
  <form class="form-search-1" method="POST">
    <input type="text" class="input-search" autocomplete="off" required>
    <label for="name" class="label-name">
      <span class="content-name-1">Search first player</span>
    </label>
  </form>
  <form class="form-search-2" method="POST">
    <input type="text" class="input-search" autocomplete="off" required>
    <label for="name" class="label-name">
      <span class="content-name-2">Search second player</span>
    </label>
  </form>
</div>

<div class="container-h2h-player">
  <div class="container-first-player">
    <div class="img-first-player">
      <style>
        .img-first-player {
          background: url("{% static 'img/bgg-search-player.png' %}") no-repeat center;
          -webkit-background-size: cover;
          /*background-size: cover;*/
        }
      </style>
    </div>
    <div class="detail-first-player">
      <div class="container-first-player-name">
        <span class="first-player-name">
          Rafael<br>NADAL
        </span>
      </div>
    </div>
  </div>

  <div class="container-second-player">

    <div class="detail-second-player">
      <div class="container-second-player-name">
        <span class="second-player-name">
          Rafael<br>NADAL
        </span>
      </div>
    </div>
    <div class="img-second-player">
      <style>
        .img-second-player {
          background: url("{% static 'img/bgg-search-player.png' %}") no-repeat center;
          -webkit-background-size: cover;
          /*background-size: cover;*/
        }
      </style>
    </div>
  </div>
</div>

<div class="container-h2h-detail">
  <div class="container-first-player-detail">
    <div class="first-player-detail">
      <div class="stat-first-part">
        <div class="container-avg">
          <div class="avg-1">
            <p class="avg-win">Average win</p>
          </div>
          <div class="avg-2">
            <p class="avg-pourcent">61,2%</p>
          </div>
          <div class="avg-3"><img src="{% static 'img/arrow-down.png' %}" style="width: 6%" class="arrow-avg">
            <span class="avg-evolve">2,21%<br>
              <p class="avg-duration">since last month</p>
            </span></div>
        </div>
        <div class="container-atp">
          <div class="atp-1">
            <p class="atp-ptn">ATP point</p>
          </div>
          <div class="atp-2">
            <p class="atp-pourcent">7945</p>
          </div>
          <div class="atp-3"><img src="{% static 'img/arrow-up.png' %}" style="width: 6%" class="arrow-atp">
            <span class="atp-evolve">145<br>
              <p class="atp-duration">since last month</p>
            </span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-second-player-detail">
    <div class="second-player-detail">
      <div class="second-player-detail">
        <div class="stat-second-part">
          <div class="container-avg-second">
            <div class="avg-1">
              <p class="avg-win">Average win</p>
            </div>
            <div class="avg-2">
              <p class="avg-pourcent">61,2%</p>
            </div>
            <div class="avg-3"><img src="{% static 'img/arrow-down.png' %}" style="width: 6%" class="arrow-avg">
              <span class="avg-evolve">2,21%<br>
                <p class="avg-duration">since last month</p>
              </span></div>
          </div>
          <div class="container-atp-second">
            <div class="atp-1">
              <p class="atp-ptn">ATP point</p>
            </div>
            <div class="atp-2">
              <p class="atp-pourcent">7945</p>
            </div>
            <div class="atp-3"><img src="{% static 'img/arrow-up.png' %}" style="width: 6%" class="arrow-atp">
              <span class="atp-evolve">145<br>
                <p class="atp-duration">since last month</p>
              </span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="stat-third-part">
  <div class="container-select-graph">
    <div class="button-select">
      <button type="button" class="btn btn-graph btn-md" onclick="rankGraph()">Ranking</button>
    </div>
    <div class="button-select">
      <button type="button" class="btn btn-graph btn-md-2" onclick="aceGraph()">Average ace</button>
    </div>
    <div class="button-select">
      <button type="button" class="btn btn-graph btn-md" onclick="showdownGraph()">Showdown</button>
    </div>
    <div class="button-select">
      <button type="button" class="btn btn-graph btn-md" onclick="">Showdown</button>
    </div>
  </div>
  <div id="rank-graph">
    <canvas id="line-chart" width="700" height="400"></canvas>
    <script>
      new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
          labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018],
          datasets: [{
            data: [1, 4, 6, 3, 2, 1, 1, 3, 2, 5],
            label: "Nadal",
            borderColor: "#FF8400",
            fill: false
          }, {
            data: [3, 2, 2, 1, 1, 2, 3, 4, 6, 7],
            label: "Federer",
            borderColor: "#ff5800",
            fill: false
          }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'World Ranking'
          }
        }
      });
    </script>
  </div>
  <div id="ace-graph">
    <canvas id="bar-chart-grouped" width="700" height="400"></canvas>
    <script>
      new Chart(document.getElementById("bar-chart-grouped"), {
        type: 'bar',
        data: {
          labels: [2012, 2013, 2014, 2015, 2016, 2017, 2018],
          datasets: [
            {
              label: "Nadal",
              backgroundColor: "#ff5800",
              data: [50, 46, 44, 47, 46, 44, 47]
            }, {
              label: "Federer",
              backgroundColor: "#ff8400",
              data: [39, 41, 42, 37, 46, 44, 47]
            }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'Average ace'
          }
        }
      });
    </script>
  </div>
  <div id="showdown-graph">
    <canvas id="pie-chart" width="800" height="450"></canvas>
    <script>
      new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
            data: [2478, 5267, 734, 784, 433]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Some data'
          }
        }
      });
    </script>
  </div>
</div>
{% endblock %}