{% extends "DAIManagementApp/base.html" %}
{% block content %}
<!--app-content open-->
<!--app-content open-->
<div class="app-content">
   <div class="side-app">
      <!-- PAGE-HEADER -->
      <div class="page-header">
         <div>
            <h1 class="page-title">Dashboard</h1>
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="#">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
         </div>
      </div>
      <!-- PAGE-HEADER END -->
      <!-- ROW-1 -->
      <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 }}</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_active }}</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">154,000</h3>
                              <p class="text-muted mb-0">
                                 <span class="text-success"><i class="fa fa-chevron-circle-down text-success me-1"></i> 2.5%</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 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="">Total Channels</h6>
                              <!-- <h3 class="mb-2 number-font">{{data.number_of_channels}}</h3> -->
                              <h3 class="mb-2 number-font">{{ nb_channels}}</h3>
                           </div>
                           <div class="col col-auto">
                              <div class="counter-icon bg-success-gradient box-shadow-success brround  ms-auto">
                                 <i class="fe fe-briefcase text-white mb-5 "></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="card" >
            <form  method="post" id="indexForm" data-regions-url="{% url 'ajax_load_regions' %}" data-adspots-url="{% url 'ajax_load_adspots' %}">
               {% csrf_token %}
               <input class="form-control" id="numofwins" name="numofwin" type="text" value="" style="display:none;" >
               <div class="card">
                  <div class="card-header">
                     <h3 class="card-title">Select [ Zone - Channel - Playlist ]</h3>
                  </div>
                  <div class="card-body row">
                     <div class="form-group col-md-4">
                        <label class="form-label">Channel</label>
                        <select class="form-control select2-show-search form-select" id="channels" name="channel_id" data-placeholder="Choose one" required>
                           <option label="Choose one"></option>
                           {% for channel in channels %}
                           <option value="{{channel.id_channel}}">{{channel.channel_name}}</option>
                           {% endfor %}
                        </select>
                     </div>
                     <div class="form-group col-md-4">
                        <label class="form-label">Region</label>
                        <select class="form-control select2-show-search form-select" id="regions" name="zonename" data-placeholder="Choose one" >
                           <!-- <option label="Choose one"></option>
                              <option value="2005">France</option> -->
                        </select>
                     </div>
                     <!-- <div class="form-group col-md-4">
                        <label class="form-label">Campaigns</label>
                        <select class="form-control select2-show-search form-select" id="campaigns" name="campaign_name" data-placeholder="Choose one" >

                        </select>
                        </div> -->
                     <div class="form-group col-md-4">
                        <label class="form-label">Playlist</label>
                        <div class="input-group">
                           <input class="form-control" name="day" id="day" placeholder="MM/DD/YYYY" type="date" autocomplete="off" required>
                        </div>
                     </div>
                     <!-- <button onclick="show()">test</button> -->
                  </div>
            </form>
            <div class="card-header">
            <h3 class="card-title">Impressions</h3>
            </div>
            <div id="charttoimport">
							<div id="container">
							  <!-- <canvas id="chartArea" class="h-275 chart-donut" style="display: block; width: 100%; height: 100% !important;"  ></canvas> -->
							  <canvas id="chartArea" class="h-275 chart-donut" style="display: block; width: 100%; height: 100% !important;"  ></canvas>

							</div>
            </div>
            <div class="card-body"><div id="details" style="display: block; width: 100%; height: 100% !important;"></div></div>
            <!-- <canvas id="pie-chart"></canvas> -->
            </div>
      </div>
      <!-- COL END -->
      <!-- COL END -->
      </div>
      <!-- ROW-1 END -->
      <!-- <div class="row">
         <div class="card">
            <div class="card-header">
               <h3 class="card-title">Most Aired Advertisers</h3>
            </div>
            <br>
            <div class="row">
               {% for advertiser in advertisers %}
               <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                  <a href="{% url 'views_advertiser' id_brand=advertiser.id_brand %}">
                     <div class="card">
                        <div class="card-body text-center">-->
                           <!-- <i class="fa fa-firefox text-primary fa-3x"></i> -->
                           <!-- <img class="text-white mb-5 " style="height:50px;" src="/{{ advertiser.logo }}">
                           <h6 class="mt-4 mb-2">Total Adspots</h6>
                           <h2 class="mb-2 number-font">{{ advertiser.total_adspots }}</h2>
                           <p class="text-muted">{{ advertiser.name_brand }}</p>
                        </div>
                     </div>
                  </a>
               </div>
               {% endfor %}
            </div>
         </div> 
      </div>  -->

      <div class="row">
         <div class="col-12 col-sm-12">
            <div class="card ">
               <div class="card-header">
                  <h3 class="card-title mb-0">Impressions per Campaign</h3>
               </div>
               <div class="card-body">
                  <div class="table-responsive"> 
                     <table class="table table-bordered text-nowrap mb-0">
                        <thead class="border-top">
                           <tr> 
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="advertiser-search" onkeyup="search()" placeholder="Advertiser.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="product-search" onkeyup="search()" placeholder="Product.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="start-date-search" onkeyup="search()" placeholder="Start Date.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="end-date-search" onkeyup="search()" placeholder="End Date.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="target-search" onkeyup="search()" placeholder="Target Impressions.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="achievement-search" onkeyup="search()" placeholder="Achievement Impressions.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="total-ads-search" onkeyup="search()" placeholder="Total Ads.." class="table-search-filters form-control">
                              </th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">
                                 <input type="text" id="status-search" onkeyup="search()" placeholder="Status.." class="table-search-filters form-control">
                              </th>
                           </tr>
                           <tr>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Name</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Advertiser</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Product</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Start Date</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">End Date</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Target</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Achievement</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Total Ads</th>
                              <th style="width:11%;" class="bg-transparent border-bottom-0 text-cente">Status</th>
                           </tr> 
                        </thead>
                        <tbody id="data-campaign-table">
                           {% for campaign in campaigns_data %}
                           <tr class="border-bottom">
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.name }} {% if campaign.is_vast %} (VAST) {% endif %} </td>
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{  campaign.id_brand.brand_name  }} </td>
                               <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.product|default:""}} </td>
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.start_day }}</td>
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.end_day }}</td>  
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.volume }}</td> 
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> 
                                 {% if campaign.is_vast %}
                                     {% for vast_result in vast_results %} 
                                         {% if vast_result.id_campaign == campaign.id_campaign %}  
                                             {{ vast_result.total_impressions }}
                                         {% endif %}
                                     {% endfor %}
                                 {% else %}
                                     {% for no_vast_result in no_vast_results %} 
                                         {% if no_vast_result.id_campaign == campaign.id_campaign %}  
                                             {{ no_vast_result.total_impressions }}
                                         {% endif %}
                                     {% endfor %}
                                 {% endif %}
                             </td>  
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> 
                                 {% if campaign.is_vast %}
                                     {% for vast_result in  vast_results %} 
                                         {% if vast_result.id_campaign == campaign.id_campaign %} 
                                             {{ vast_result.total_ads }}
                                         {% endif %}
                                     {% endfor %}
                                 {% else %}
                                     {% for no_vast_result in  no_vast_results %} 
                                         {% if no_vast_result.id_campaign == campaign.id_campaign %} 
                                             {{ no_vast_result.total_ads }}
                                         {% endif %}
                                     {% endfor %}
                                 {% endif %} 
                              </td> 
                              <td style="width:11%;" class="text-muted fs-15 fw-semibold text-center"> {{ campaign.status }} </td> 
                           </tr>
                           {% endfor %}
                        </tbody>
                     </table>
                  </div>
               </div>

            </div>
         </div>
      </div>
   </div>
   <!-- COL END -->
</div>
<!-- ROW-5 END -->
</div>
</div>
<!-- CONTAINER END -->

<script type="text/javascript">
          
   var input_name = document.getElementById("name-search");
   var input_advertiser = document.getElementById("advertiser-search");
   var input_product = document.getElementById("product-search");
   var input_start_date = document.getElementById("start-date-search");
   var input_end_date = document.getElementById("end-date-search");
   var input_target = document.getElementById("target-search");
   var input_achievement = document.getElementById("achievement-search");
   var input_total_ads = document.getElementById("total-ads-search");
   var input_status = document.getElementById("status-search"); 

   var table = document.getElementById("data-campaign-table");

   function search() {
      let filter_name = input_name.value.toUpperCase();
      let filter_advertiser = input_advertiser.value.toUpperCase(); 
      let filter_product = input_product.value.toUpperCase(); 
      let filter_start_date = input_start_date.value.toUpperCase();
      let filter_end_date = input_end_date.value.toUpperCase();
      let filter_target = input_target.value.toUpperCase();
      let filter_achievement = input_achievement.value.toUpperCase();
      let filter_total_ads = input_total_ads.value.toUpperCase();
      let filter_status = input_status.value.toUpperCase(); 

      let tr = table.rows;
   
      for (let i = 0; i < tr.length; i++) {
         td = tr[i].cells;
         td_name = td[0].innerText;
         td_advertiser = td[1].innerText;
         td_product = td[2].innerText;
         td_start_date = td[3].innerText;
         td_end_date = td[4].innerText;
         td_target = td[5].innerText;
         td_achievement = td[6].innerText;
         td_total_ads = td[7].innerText;
         td_status = td[8].innerText; 

         if ( 
            td_name.toUpperCase().indexOf(filter_name) > -1
            && td_advertiser.toUpperCase().indexOf(filter_advertiser) > -1
            && td_product.toUpperCase().indexOf(filter_product) > -1
            && td_start_date.toUpperCase().indexOf(filter_start_date) > -1
            && td_end_date.toUpperCase().indexOf(filter_end_date) > -1
            && td_target.toUpperCase().indexOf(filter_target) > -1 
            && td_achievement.toUpperCase().indexOf(filter_achievement) > -1 
            && td_total_ads.toUpperCase().indexOf(filter_total_ads) > -1 
            && td_status.toUpperCase().indexOf(filter_status) > -1 
         ) {
            tr[i].style.display = "";
         } else
            tr[i].style.display = "none";
      }
   }
</script>

<script type="text/javascript">

	var result = {{ result }}
	var color = {{ color|safe }}
	var channels_sfr = {{channels_sfr|safe}}
	var labels = {{ labels|safe }}









   //console.log("test")
   var dataset = []
   for(let i = 0 ; i<result.length ;i++){
      console.log(result.length)
      console.log(labels)
   	dataset.push({
            		data: result[i],
            		borderWidth: 1,
   			backgroundColor: 'transparent',
   			borderColor: color[i],
   			borderWidth: 2,
   			pointBackgroundColor: '#ffffff',
   			pointRadius: 1,
            		label: channels_sfr[i]
          })
   }

      var config = {
        type: 'line',
        data: {
          datasets: dataset,
          labels: {{ labels|safe }}
        },
        options: {
   		responsive: true,
   		maintainAspectRatio: false,

   		scales: {
   			xAxes: [{
   				ticks: {
   					fontColor: "#77778e",
   				 },
   				display: true,
   				gridLines: {
   					color: 'rgba(119, 119, 142, 0.2)'
   				}
   			}],
   			yAxes: [{
   				ticks: {
   					fontColor: "#77778e",
   				 },
   				display: true,
   				gridLines: {
   					color: 'rgba(119, 119, 142, 0.2)'
   				},
   				scaleLabel: {
   					display: false,
   					labelString: 'Thousands',
   					fontColor: 'rgba(119, 119, 142, 0.2)'
   				}
   			}]
   		},
   		legend: {
   			labels: {
   				fontColor: "#77778e"
   			},
   		},
   	}
      };

      window.onload = function() {
        var ctx = document.getElementById('chartArea').getContext('2d');
				 window.myPie = new Chart(ctx, config);
        // var thechart = window.myPie = new Chart(ctx, config);
      };


   	$(function(e) {



   		var options = {
   			chart: {
   			height: 305,
   			type: 'radialBar',
   			offsetX: 0,
   			offsetY: 10,
   		},
   		plotOptions: {
   		    radialBar: {
   			startAngle: -135,
   			endAngle: 135,
   			size: 120,
   			imageWidth: 50,
   	        imageHeight: 50,
   			track: {
   				strokeWidth: "80%",
   			},
   			dropShadow: {
   				enabled: false,
   				top: 0,
   				left: 0,
   				bottom: 0,
   				blur: 3,
   				opacity: 0.5
   			},
   			dataLabels: {
   			  name: {
   				fontSize: '16px',
   				color: undefined,
   				offsetY: 30,
   			  },
   			  hollow: {
   				 size: "60%"
   				},
   			  value: {
   				offsetY: -10,
   				fontSize: '22px',
   				color: undefined,
   				formatter: function (val) {
   				  return val + "%";
   				}
   			  }
   			}
   		  }
   		},
   		colors: ['#ff5d9e'],
   		fill: {
   			type: "gradient",
   			gradient: {
   				shade: "gradient",
   				type: "horizontal",
   				shadeIntensity: .5,
   				gradientToColors: ['#6259ca'],
   				inverseColors: !0,
   				opacityFrom: 1,
   				opacityTo: 1,
   				stops: [0, 100]
   			}
   		},
   		stroke: {
   			dashArray: 4
   		},
   		series: [{{ playlists.purcent }}],
   			labels: [""]
   		};

   		var chart = new ApexCharts(document.querySelector("#recentorders2"), options);
   		chart.render();



   		 });


</script>

<script  type="text/javascript" >




	$(document).ready(function() {
					$('#day').change(function(){
							var url = "{% url 'load_charts' %}";
							var channelId = document.getElementById("channels").value;
							var region = document.getElementById("regions").value; // get the selected channel ID from the HTML input
							var daydate = document.getElementById("day").value;
							////console.log(channelId)
							console.log(url)
							$.ajax({
								 url: url,
								 data: {
									 'channel': channelId,
									 'region':region,
									 'daydate':daydate
								 },
								 success: function (data) {
									 // console.log(data)
									 result = data.result
									 color = data.color
									 channels_sfr = data.channels_sfr
									 labels = data.labels
									 console.log(channels_sfr)

									 var dataset = []
								   for(let i = 0 ; i<result.length ;i++){
								   	dataset.push({
								            		data: result[i],
								            		borderWidth: 1,
								   			backgroundColor: 'transparent',
								   			borderColor: color[i],
								   			borderWidth: 2,
								   			pointBackgroundColor: '#ffffff',
								   			pointRadius: 1,
								            		label: channels_sfr[i]
								          })
								   }

								      var config = {
								        type: 'line',
								        data: {
								          datasets: dataset,
								          labels: labels
								        },
								        options: {
								   		responsive: true,
								   		maintainAspectRatio: false,

								   		scales: {
								   			xAxes: [{
								   				ticks: {
								   					fontColor: "#77778e",
								   				 },
								   				display: true,
								   				gridLines: {
								   					color: 'rgba(119, 119, 142, 0.2)'
								   				}
								   			}],
								   			yAxes: [{
								   				ticks: {
								   					fontColor: "#77778e",
								   				 },
								   				display: true,
								   				gridLines: {
								   					color: 'rgba(119, 119, 142, 0.2)'
								   				},
								   				scaleLabel: {
								   					display: false,
								   					labelString: 'Thousands',
								   					fontColor: 'rgba(119, 119, 142, 0.2)'
								   				}
								   			}]
								   		},
								   		legend: {
								   			labels: {
								   				fontColor: "#77778e"
								   			},
								   		},
								   	}
								      };


								        // var ctx = document.getElementById('chartArea').getContext('2d');
												// window.myPie = new Chart(ctx, config);
								        // var thechart = window.myPie = new Chart(ctx, config);



											// var ctx = document.getElementById('chartArea').getContext('2d');
											// newchart = new Chart(ctx, config);
											window.myPie.data.datasets = dataset;
											window.myPie.data.labels = labels;
											window.myPie.update();

								 }
							 });
					});

			});


   $(document).ready(function() {
         $('#channels').change(function(){
             var url = $("#indexForm").attr("data-adspots-url"); // get the url of the `load_adspots` view
             var channelId = document.getElementById("channels").value; // get the selected channel ID from the HTML input
             //console.log(channelId)
             $.ajax({                                // initialize an AJAX request
                url: url,                            // set the url of the request (= localhost:8000/DAIManagement/load-adspots/)
                data: {
                  'channel': channelId               // add the channel id to the GET parameters
                },
                success: function (data) {           // `data` is the return of the `load_adspots` view function
                  $(".optionsofads").html(data);
           // replace the contents of the adspots input with the data that came from the server
                }
              });
         });
     });


     $(document).ready(function() {
         $('#channels').change(function(){
             var url = $("#indexForm").attr("data-regions-url");
             var channelId = document.getElementById("channels").value;
          	var regionId = document.getElementById("regions").value;
   		var day = document.getElementById('day').value

             //console.log(channelId)
             //console.log(url)
             $.ajax({
                url: url,
                data: {
                  'channel': channelId
                },
                success: function (data) {
                  $("#regions").html(data);

                }
              });

         });

     });

</script>

<script  type="text/javascript" >
   $(document).ready(function(){
   $('#day').change(function(){
   var channelId = document.getElementById("channels").value;
        var regionId = document.getElementById("regions").value;
   var day = document.getElementById('day').value
   var url = "{% url 'delete_avail' %}";
   $.ajax({
              url: url,
              data: {'channel': channelId, 'region': regionId,'playlist':day},
              success: function (data1) {
              //console.log(data1)
     $("#details").html(data1)

               }
        });
   });
   });
   $(document).ready(function(){
   $('#region').change(function(){
   var channelId = document.getElementById("channels").value;
        var regionId = document.getElementById("regions").value;
   var day = document.getElementById('day').value
   var url = "{% url 'delete_avail' %}";
   $.ajax({
              url: url,
              data: {'channel': channelId, 'region': regionId,'playlist':day},
              success: function (data1) {
              //console.log(data1)
     $("#details").html(data1)

               }
        });
   });
   });
   $(document).ready(function(){
   $('#channels').change(function(){
   var channelId = document.getElementById("channels").value;
        var regionId = document.getElementById("regions").value;
   var day = document.getElementById('day').value
   var url = "{% url 'delete_avail' %}";
   $.ajax({
   	url:"{% url 'delete_avail' %}",
   	data :{'channel': channelId, "playlist":day ,"region":regionId},
   	success: function (data1) {
              		//console.log(data1)
     		$("#details").html(data1)

               }
   });
   });
   });

   $(document).ready(function() {
            $('#channels').change(function(){
                var url = "{% url 'load_campaigns' %}";
                var channelId = document.getElementById("channels").value;
                //console.log(channelId)
                //console.log(url)
                $.ajax({
                   url: url,
                   data: {
                     'channel': channelId
                   },
                   success: function (data) {
   		   //console.log(data)
                     $("#campaigns").html(data);

                   }
                 });
            });

        });


</script>


{% endblock content %}