{% load static %}

{% block content %}

    <div class="container-fluid py-4">

      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Active Trainers</p>
                    <h5 class="font-weight-bolder mb-0">{{totalActive}}</h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-time-zone-line text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-9">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">In Process Trainers</p>
                    <h5 class="font-weight-bolder mb-0">{{totalInProcess}}</h5>
                  </div>
                </div>
                <div class="col-3 text-end">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-map-pin-user-fill text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Passive Trainers</p>
                    <h5 class="font-weight-bolder mb-0">{{totalPassive}}</h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-file-user-line text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Passive Trainer's last 6 Months</p>
                    <h5 class="font-weight-bolder mb-0">{{trainer_per_standard6}}</h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-discount-percent-line text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col-lg-6">
          <div class="card z-index-2">
            <div class="card-header pb-0">
              <h6>Standard wise Active Trainers</h6>
            </div>
            <div class="card-body p-3">
              <div class="chart">
                <canvas id="chart-line" class="chart-canvas" width="400" height="200"></canvas>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="card z-index-2">
            <div class="card-header pb-0">
              <h6>Standard wise Active Trainers in last 3 Months</h6>
            </div>
            <div class="card-body p-3">
              <div class="chart">
                <canvas id="trainer-line" class="chart-canvas" width="400" height="200"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-lg-6">
          <div class="card z-index-2">
            <div class="card-header pb-0">
              <h6>Standard wise TOF</h6>
            </div>
            <div class="card-body p-3">
              <div class="chart">
                <canvas id="chart-lineTOF" class="chart-canvas" width="400" height="200"></canvas>
              </div>
            </div>
          </div>
        </div>
      <!-- </div>
      <div class="row mt-4"> -->
        <div class="col-lg-6">
          <div class="card z-index-2">
            <div class="card-header pb-0">
              <h6>Country wise Active Trainers</h6>
            </div>
            <div class="card-body p-3">
              <div class="chart">
                <canvas id="trainer-country" class="chart-canvas" width="400" height="200"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block scripts %}

  <script src="{% static 'js/plugins/chartjs.min.js' %}"></script>
  <script>
    const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  function getRandomColor() {
        const randomColor = Math.floor(Math.random() * 16777215).toString(16);
        return `#${randomColor}`;
    }

    function lightenColor(color, factor) {
       
        const r = parseInt(color.slice(1, 3), 16);
        const g = parseInt(color.slice(3, 5), 16);
        const b = parseInt(color.slice(5, 7), 16);
    
        const newR = Math.min(255, Math.floor(r + (255 - r) * factor));
        const newG = Math.min(255, Math.floor(g + (255 - g) * factor));
        const newB = Math.min(255, Math.floor(b + (255 - b) * factor));
    
        return `rgba(${newR}, ${newG}, ${newB}, 0.2)`;  
    }
  // Trainer standard wise data
    const coursesData = {{ trainer_per_standard|safe }};

    const countsByStandard = {};

    coursesData.forEach(item => {
        if (countsByStandard[item.standard]) {
            countsByStandard[item.standard] += item.course_count; 
        } else {
            countsByStandard[item.standard] = item.course_count; 
        }
    });

    const standards = Object.keys(countsByStandard); 
    const dataCounts = Object.values(countsByStandard);

    const borderColor = getRandomColor();
    const backgroundColor = lightenColor(borderColor, 0.5);

    const datasets = [{
        label: 'Trainers Count',
        data: dataCounts, 
        backgroundColor: backgroundColor, 
        borderColor: borderColor, 
        borderWidth: 2 
    }];

    const ctxv = document.getElementById('chart-line').getContext('2d');
    const chart = new Chart(ctxv, {
        type: 'bar',
        data: {
            labels: standards,  
            datasets: datasets  
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

  // Trainer standard wise of last three Months data
    const trainerlast3 = {{ trainer_per_standard3|safe }};

    const countsByStandard3mnth = {};

    trainerlast3.forEach(item => {
        if (countsByStandard3mnth[item.standard]) {
            countsByStandard3mnth[item.standard] += item.course_count; 
        } else {
            countsByStandard3mnth[item.standard] = item.course_count; 
        }
    });

    const standards3mnth = Object.keys(countsByStandard3mnth); 
    const dataCounts3 = Object.values(countsByStandard3mnth);

    const borderColor3 = getRandomColor();
    const backgroundColor3 = lightenColor(borderColor3, 0.5);

    const datasets2 = [{
        label: 'Trainers Count',
        data: dataCounts3, 
        backgroundColor: backgroundColor3, 
        borderColor: borderColor3, 
        borderWidth: 2 
    }];

    const ctxv1 = document.getElementById('trainer-line').getContext('2d');
    const chart1 = new Chart(ctxv1, {
        type: 'line',
        data: {
            labels: standards3mnth,  
            datasets: datasets2  
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

  // Trainer Country wise
  const trainerCountry = {{ trainer_per_country|safe }}; 
    console.log(trainerCountry);

    const countsByCountry = {};

    trainerCountry.forEach(item => {
        if (countsByCountry[item.country]) {
            countsByCountry[item.country] += item.count;
        } else {
            countsByCountry[item.country] = item.count;
        }
    });

    const countries = Object.keys(countsByCountry); 
    const dataCountsCountry = Object.values(countsByCountry);

    const borderColorCountry = countries.map(() => getRandomColor());
    const backgroundColorCountry = borderColorCountry.map(color => lightenColor(color, 0.5));

    const datasetsCountry = [{
        label: 'Trainers Count',
        data: dataCountsCountry,
        backgroundColor: backgroundColorCountry, 
        borderColor: borderColorCountry, 
        borderWidth: 2 
    }];

    const ctxv3 = document.getElementById('trainer-country').getContext('2d');
    const chart3 = new Chart(ctxv3, {
        type: 'doughnut',
        data: {
            labels: countries,  
            datasets: datasetsCountry  
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
              legend: {
                  position: 'top',
              },
              tooltip: {
                  callbacks: {
                      label: function(tooltipItem) {
                          return `${tooltipItem.label}: ${tooltipItem.raw}`; // Custom tooltip
                      }
                  }
              }
          }
        }
    });

    // Trainer standard wise data
    const tof = {{ tof_count_per_standard|safe }};

    const countsBytof = {};

    // tof.forEach(item => {
    //     if (countsBytof[item.standard]) {
    //         countsBytof[item.standard] += item.course_count; 
    //     } else {
    //         countsBytof[item.standard] = item.course_count; 
    //     }
    // });

    const standardstof = Object.keys(tof); 
    const dataCountstof = Object.values(tof);

    const borderColortof = getRandomColor();
    const backgroundColortof = lightenColor(borderColortof, 0.5);

    const datasetstof = [{
        label: 'TOF Count',
        data: dataCountstof, 
        backgroundColor: backgroundColortof, 
        borderColor: borderColortof, 
        borderWidth: 2 
    }];

    const ctxvTOF = document.getElementById('chart-lineTOF').getContext('2d');
    const chartTOF = new Chart(ctxvTOF, {
        type: 'bar',
        data: {
            labels: standardstof,  
            datasets: datasetstof  
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
  </script>

{% endblock scripts %}