{% extends "DAIManagementApp/base.html" %}
{% block content %}
{% load diff %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
   display:none;
   }
   .ui-datepicker td.ui-state-disabled>span{background:#b5b5b5 !important;}
   .ui-datepicker td.ui-state-disabled{opacity:50 !important;}
</style>


<!--app-content open-->
<div class="app-content">
   <div class="side-app">
      <!-- PAGE-HEADER -->
      <div class="page-header">
         <div>
            <h1 class="page-title">Create New VAST</h1>
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="#">Vast</a></li>
               <li class="breadcrumb-item active" aria-current="page">Vast Report</li>
            </ol>
         </div>

      </div>
      
      <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xl-12">
            <div class="row">
               <div class="col-lg-6 col-md-12 col-sm-12 col-xl-4">
                  <div class="card overflow-hidden">
                     <div class="card-body">
                        <div class="row">
                           <div class="col">
                              <h6 class="">Total Campaigns</h6>
                              <!-- <h3 class="mb-2 number-font">{{data.total_number_of_campaigns}}</h3> -->
                              <h3 class="mb-2 number-font">{{ campaigns|length }}</h3>
                              <p class="text-muted mb-0">
                                 <!-- <span class="text-primary"><i class="fa fa-chevron-circle-up text-primary me-1"></i> {{data.active_number_of_campaigns}}</span> -->
                                 <span class="text-primary"><i class="fa fa-chevron-circle-up text-primary me-1"></i> {{ campaigns|length }}</span>
                                 Active
                              </p>
                           </div>
                           <div class="col col-auto">
                              <div class="counter-icon bg-primary-gradient box-shadow-primary brround ms-auto">
                                 <i class="icon icon-rocket text-white mb-5 "></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-6 col-md-4 col-sm-12 col-xl-4">
                  <div class="card overflow-hidden">
                     <div class="card-body">
                        <div class="row">
                           <div class="col">
                              <h6 class="">Impressions Today</h6>
                              <h3 class="mb-2 number-font">{{vast_impression}}</h3>
                              <p class="text-muted mb-0">
                                 <span class="text-success"><i class="fa fa-chevron-circle-down text-success me-1">{% diff vast_impression prev_impression %}</i> </span>
                                 Yesterday
                              </p>
                           </div>
                           <div class="col col-auto">
                              <div class="counter-icon bg-secondary-gradient box-shadow-secondary brround ms-auto">
                                 <i class="fe fe-trending-up text-white mb-5 "></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               
            </div>
         </div>
      </div>
      <div class="row">
         
         <div>
            <div class="card">
               <div class="card-body row">
                  <div class="form-group col-md-4">
                     <input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
                  </div>
               </div>
               <div>
                  <canvas id="myChart" style="display: block; width: 100%; height: 400px" ></canvas>
               </div>
            </div>
            
          </div>
          
      </div>
      <!-- ROW-5 END -->
   </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<script type="text/javascript">
   async function setupChart(campaigns) {
      // Get the chart context
      const ctx = document.getElementById('myChart').getContext('2d');

      // Create an empty chart with no data
      var chart = new Chart(ctx, {
         type: 'bar',
         height: 305,
         data: {
            labels: [], // Start with empty labels
            datasets: [] // Start with empty datasets
         },
         options: {
            plugins: {
               title: {
                  display: true,
                  text: 'Campaign Requests by Date'
               },
            },
            responsive: true,
            interaction: {
               intersect: false,
            },
            scales: {
               x: {
                  stacked: true,
               },
               y: {
                  stacked: true,
                  title: {
                     display: true,
                     text: 'Total Requests'
                  }
               }
            }
         }
      });
         // Fetch data and update the chart
         try {
            const data = campaigns; // Fetch campaign data
            const labels = [];
            const datasets = [];

            // Predefined colors for campaigns
            const colors = [
               'rgba(255, 99, 132, 0.5)',  // Red
               'rgba(54, 162, 235, 0.5)',  // Blue
               'rgba(75, 192, 192, 0.5)',  // Green
               'rgba(255, 206, 86, 0.5)',  // Yellow
               'rgba(153, 102, 255, 0.5)', // Purple
               'rgba(255, 159, 64, 0.5)',  // Orange
               'rgba(199, 199, 199, 0.5)'  // Gray
            ];

            const aggregatedData = {};

            // Process data
            data.slice(0, 7).forEach((entry) => {
               const date = entry.date;
               labels.push(date); 
               
               if (!aggregatedData[date]) {
                  aggregatedData[date] = {};
               }

               entry.campaigns.forEach((campaign) => {
                  const campaignName = campaign.campaign;

                  if (!aggregatedData[date][campaignName]) {
                     aggregatedData[date][campaignName] = 0;
                  }

                  campaign.spots.forEach((spot) => {
                     aggregatedData[date][campaignName] += spot.stats.total_requests;
                  });
               });
            });

            const campaignNames = Object.keys(aggregatedData[labels[0]]);
            
            campaignNames.forEach((campaignName, index) => {
               const dataset = {
                  label: campaignName,
                  backgroundColor: colors[index % colors.length],
                  data: labels.map(date => aggregatedData[date][campaignName] || 0)
               };
               datasets.push(dataset);
            });

            // Update chart data
            chart.data.labels = labels;
            chart.data.datasets = datasets;
            chart.update(); // Render the updated data
         } catch (error) {
            console.error("Error setting up the chart:", error);
         }
   }
   
   function organizeCampaignData(data) {
      const result = data.map(entry => {
         return {
            date: entry.date,
            
            campaigns: entry.campaigns.map(campaign => {
               return {
                  campaign: campaign.campaign,
                  spots: campaign.spots.map(spot => ({
                     spot_id: spot.spot_id,
                     spot_name: spot.spot_name,
                     brand_name: spot.brand_name,
                     total_requests: spot.stats.total_requests
                  }))
               };
            })
         };
      });

      return result;
   }
   
   async function get_last_week(start = null, end = null) {
      // Get the chart context
      const ctx = document.getElementById('myChart').getContext('2d');
      var campaigns = null;
      // Determine the request URL and parameters
      let apiUrl = "{% url 'vast_report' %}";
      if (start && end) {
         campaigns = await get_campaigns(start,end)
         // console.log("Last week Campaigs: ",campaigns)
      }else{
         campaigns = await get_campaigns()
      }

      try {
         
         setupChart(campaigns)
         

      } catch (error) {
         console.error('Error fetching campaigns data:', error);
      }
   }

   function get_campaigns(start=null,end=null){
      console.log(start,end)
      return new Promise((resolve, reject) => {
         const getMonths = [];
         $.ajax({
            type: "POST",
            url: "{% url 'vast_report' %}",
            data: {
               'start': start,
               'end': end
            },
            success: function(data) {
               data.forEach(campaign => {
                  console.log("Date:", campaign["date"]);
                  getMonths.push(campaign);
               });
               resolve(getMonths); // Resolve the Promise with getMonths after data is fully loaded
            },
            error: function(error) {
               reject(error); // Reject the Promise if there's an error
            }
         });
      });
      
   }
   
   document.addEventListener('DOMContentLoaded', function() {
      const data=null;
      const dateInput = document.querySelector('input[name="daterange"]');
      
      var start = moment().subtract(29, 'days');
      if (dateInput) {
         // Initialize daterangepicker         
         new daterangepicker(dateInput, {
               opens: 'right',
               startDate: start
         }, function(start, end, label) {
               console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
               
               get_last_week(start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'))
         });
         // console.log("Month list: ",getMonths)

         
      }
      
   });
   window.onload = function() {
      get_last_week()
      // setupChart()
      };
   

   

   
</script>

{% endblock content %}