<%# Code for landing page %>
<%# ARGUMENTS: experience - an object containing ranking for XP %>

<%- include("../partials/header") -%>
<%- include("../partials/navigationPublic") -%>

<%- include("../partials/components/iconBar") -%>

<%# Jumbotron and contents inside %>

<script>
  window.onload = () => {
    // init AOS
    AOS.init({
      disable: function() {
        var maxWidth = 800;
        return window.innerWidth < maxWidth;
      },
      mirror: true
    });

    // render pie chart
    var ctxPassrate = document.getElementById("piechart");

    var style = ctxPassrate.style;
    style.marginLeft = "auto";
    style.marginRight = "auto";

    var myChart = new Chart(ctxPassrate, {
      type: "pie",
      data: {
        labels: ["Correct", "Wrong"],
        datasets: [{
          label: "User Performance",
          data: [Math.round(200 + 100 * Math.random()), Math.round(100 + 100 * Math.random())],
          backgroundColor: [
            "rgba(80, 185, 20, 1)",
            "rgba(215, 80, 80, 1)"
          ],
          hoverBackgroundColor: [
            "rgba(80, 185, 20, 1)",
            "rgba(215, 80, 80, 1)"
          ],
          borderColor: [
            "rgba(255, 255, 255, 0.5)",
            "rgba(255, 255, 255, 0.5)"
          ],
          borderWidth: 2
        }]
      },
      options: {
        title: {
          display: true,
          text: "My Performance",
          fontSize: 20
        },
        legend: {
          display: false
        },
        cutoutPercentage: 40,
        responsive: true
      }
    });

    // render sample rating chart
    var ratingData = {
      "Physics": [Math.round(1600 + 200 * Math.random())],
      "Chemistry": [Math.round(1600 + 200 * Math.random())],
      "Biology": [Math.round(1600 + 200 * Math.random())]
    }
    var labels = ["1 Ago"];
    var labelCounter = 1;

    var ctxTracker = document.getElementById("sampleTrackerChart");

    var style = ctxTracker.style;
    style.marginLeft = "auto";
    style.marginRight = "auto";

    var myChart = new Chart(ctxTracker, {
      type: "line",
      data: {
        labels,
        datasets: [{
          label: "Physics",
          data: ratingData["Physics"],
          backgroundColor: "rgba(100, 200, 230, 1)",
          borderColor: "rgba(100, 200, 230, 1)",
          fill: false,
          borderWidth: 5
        }, {
          label: "Chemistry",
          data: ratingData["Chemistry"],
          backgroundColor: "rgba(245, 170, 40, 1)",
          borderColor: "rgba(245, 170, 40, 1)",
          fill: false,
          borderWidth: 5
        }, {
          label: "Biology",
          data: ratingData["Biology"],
          backgroundColor: "rgba(40, 240, 110, 1)",
          borderColor: "rgba(40, 240, 110, 1)",
          fill: false,
          borderWidth: 5
        }]
      },
      options: {
        title: {
          display: true,
          text: "My Rating Tracker",
          fontSize: 20
        },
        legend: {
          display: true,
          position: "bottom"
        },
        scales: {
          yAxes: [{
            ticks: {
              min: Math.round((Math.min(Math.min.apply(null, ratingData["Physics"]), Math.min.apply(null, ratingData["Chemistry"]), Math.min.apply(null, ratingData["Biology"])) - 50) / 50) * 50,
              max: Math.round((Math.max(Math.max.apply(null, ratingData["Physics"]), Math.max.apply(null, ratingData["Chemistry"]), Math.max.apply(null, ratingData["Biology"])) + 50) / 50) * 50,
              stepSize: 50
            }
          }],
          xAxes: [{
            ticks: {
              display: false
            }
          }]
        },
        responsive: true
      }
    });

    // update rating charts in motion
    setInterval(() => {
      if (labelCounter < 30) {
        labelCounter++;
        myChart.data.labels.unshift(labelCounter + " Problems Ago");

        myChart.data.datasets.forEach((subject) => {
          subject.data.push(subject.data[subject.data.length - 1] + Math.round(10 + 30 * Math.random()) * (2 * (Math.round(Math.random()) - 0.5)));
        });

        myChart.options.scales.yAxes[0].ticks = {
          min: Math.round((Math.min(Math.min.apply(null, myChart.data.datasets[0].data), Math.min.apply(null, myChart.data.datasets[1].data), Math.min.apply(null, myChart.data.datasets[2].data)) - 50) / 50) * 50,
          max: Math.round((Math.max(Math.max.apply(null, myChart.data.datasets[0].data), Math.max.apply(null, myChart.data.datasets[1].data), Math.max.apply(null, myChart.data.datasets[2].data)) + 50) / 50) * 50,
          stepSize: 50
        }

        myChart.update();
      }
    }, 500);
  };

  $(document).ready(function() {

    // animate cards
    $(".thumbnail").fadeTo(0, 0.8);
    $(".thumbnail").on({
      mouseenter: function() {
        $(this).fadeTo(200, 1);
      },
      mouseleave: function() {
        $(this).fadeTo(200, 0.8);
      }
    });

  });

  document.addEventListener('DOMContentLoaded', () => {
    var typed_options = {
      strings: ['free', 'challenging', 'adaptive', 'open-source'],
      typeSpeed: 40,
      backSpeed: 40,
      backDelay: 1500,
      startDelay: 500,
      loop: true,
      preStringTyped: (pos, self) => {
        $("#typed-a").html((pos > 1) ? "an" : "a");
      },
    };
    var typed = new Typed("#typed-span", typed_options);
    typed.start();
  });
</script>

<div class="container mt-5">
  <%- include("../partials/flashes") -%>

  <h1 class="text-center mb-3">
    Mutorials is <span id="typed-a">a</span>
    <br class="d-block d-lg-none">
    <em id="typed-span"></em><br class="d-block d-xl-none">science trainer.
  </h1>
  <h3 class="text-center" data-aos="zoom-out" data-aos-duration="500" data-aos-delay="500">Sign up today to practice thousands of science problems from honors curriculum to rigorous national competition level, all with explanations!</h3>
</div>

<div class="container mt-5">
  <div class="jumbotron" data-aos="fade-right" data-aos-duration="500">
    <div class="row">
      <div class="col-lg-7" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="200">
        <div class="canvas-container-center text-center">
          <canvas id="sampleTrackerChart" width="400" height="400" class=""></canvas>
        </div>
      </div>

      <div class="col-lg-5" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="300">
        <h1 class="text-center">Detailed Analytics</h1>

        <div class="row">
          <div class="col-2">
          </div>
          <div class="col-8">
            <div class="canvas-container-center text-center">
              <canvas id="piechart" width="400" height="400" class="mt-3"></canvas>
            </div>
          </div>
          <div class="col-2">
          </div>
        </div>

        <h3 class="mt-3 text-center">Performance Indicators</h3>
        <h3 class="text-center">Skillset Recommendations</h3>
        <h3 class="text-center">Comprehensive Reports</h3>
      </div>
    </div>

  </div>

  <div class="my-5 container" data-aos="fade-left" data-aos-duration="500">
    <div class="row">
      <div class="col-lg-5">
        <h1 class="text-center">Wide Coverage</h1>
        <h3 class="mt-3 text-center">Physics + Biology + Chemistry</h3>
        <h3 class="text-center">30 Distinct Units</h3>
        <h3 class="text-center">AP and IB Style Problems</h3>
      </div>

      <div class="col-lg-7">
        <div class="row">
          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="200">
            <img id="physics-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Physics_Main.svg" alt="Physics icon">
          </div>

          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="300">
            <img id="chem-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Chem_Main.svg" alt="Chem icon">
          </div>

          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="400">
            <img id="bio-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Bio_Main.svg" alt="Bio icon">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="jumbotron" data-aos="fade-right" data-aos-duration="500">
    <div class="row">
      <div class="col-lg-7">
        <div class="row">
          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="200">
            <img id="classic-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Train_Classic.svg" alt="Classic icon">
          </div>

          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="300">
            <img id="rush-icon" class="thumbnail mu-rounded" width="100%" src="https://cdn.mutorials.org/images/icons/Train_Rush.svg" alt="Rush icon">
          </div>

          <div class="col-4" data-aos="flip-right" data-aos-duration="500" data-aos-delay="400">
            <img id="daily-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Train_Daily.svg" alt="Daily icon">
          </div>
        </div>
      </div>

      <div class="col-lg-5">
        <h1 class="text-center">Fun Gamemodes</h1>
        <h3 class="mt-3 text-center">Adaptive Classic Training</h3>
        <h3 class="text-center">Engaging Problem Rush</h3>
        <h3 class="text-center">Daily Challenge</h3>
      </div>
    </div>

  </div>
</div>

<div class="container">
  <%- include("../partials/components/siteStats") -%>
</div>

<div class="container jumbotron mt-5" data-aos="fade-left" data-aos-duration="500">
  <h1 class="text-center">Learn & grow with the Mutorials community!</h1>
  <div class="row">
    <div class="col-lg-5" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="200">
      <table class="text-center table mt-3">
        <thead>
          <tr>
            <th scope="col">Rank</th>
            <th scope="col">Username</th>
            <th scope="col">Level</th>
            <th scope="col">Experience</th>
          </tr>
        </thead>
        <tbody>
          <% let rankExperience = 1; %>
          <% experience.forEach((user) => { %>
          <% let style = ""; %>
          <% if(rankExperience == 1) { style = "background-color:#ffd700"; } %>
          <% if(rankExperience == 2) { style = "background-color:#c0c0c0"; } %>
          <% if(rankExperience == 3) { style = "background-color:#cd7f32"; } %>
          <tr style=<%= style %>>
            <th scope="row"><%= rankExperience %></th>
            <td><%= user.ign.length <= 18 ? user.ign : user.ign.substring(0, 15)+"..." %></td>
            <td><%= user.level.level %></td>
            <td><%= Math.round(user.experience) %></td>
          </tr>
          <% rankExperience++; %>
          <% }) %>
        </tbody>
      </table>
    </div>

    <div class="col-lg-7" data-aos="zoom-in" data-aos-duration="500" data-aos-delay="300">
      <%- include("../partials/components/dailySnippet") -%>
    </div>
  </div>
</div>

<div class="container mt-5">
  <a class="btn btn-lg w-100 btn-primary" href="/signup" data-aos="fade-up" data-aos-duration="500">Start Training!</a>
  <a class="btn btn-lg w-100 btn-secondary mt-2" href="/whoWeAre#joinMutorials" data-aos="fade-up" data-aos-duration="800">Join the Mutorials Team!</a>
</div>

<%- include("../partials/footer") -%>
