{% load static %} {% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="" method="get" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">State</label>
                            <select class="form-select select2" name="user_state" id="id_state">
                                <option value="">Select State</option>
                                {% for state in states %}
                                <option value="{{ state.id }}" {% if request.GET.user_state == state.id|stringformat:"i" %} selected {% endif %}>{{ state.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">District</label>
                            <select class="form-select select2" name="user_district" id="id_district">
                                <option value="">Select District</option>
                                {% for district in districts %}
                                <option value="{{ district.id }}" {% if request.GET.user_district == district.id|stringformat:"i" %} selected {% endif %}>{{ district.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">Sub District</label>
                            <select class="form-select select2" name="user_subdistrict" id="id_subdistrict">
                                <option value="">Select Sub District</option>
                                {% for subdistrict in subdistricts %}
                                <option value="{{ subdistrict.id }}" {% if request.GET.user_subdistrict == subdistrict.id|stringformat:"i" %} selected {% endif %}>{{ subdistrict.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">City/Village</label>
                            <select class="form-select select2" name="user_city" id="id_city">
                                <option value="">Select City/Village</option>
                                {% for city in cities %}
                                <option value="{{ city.id }}" {% if request.GET.user_city == city.id|stringformat:"i" %} selected {% endif %}>{{ city.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">Area</label>
                            <select class="form-select select2" name="user_area" id="id_area">
                                <option value="">Select Area</option>
                                {% for area in areas %}
                                <option value="{{ area.id }}" {% if request.GET.user_area == area.id|stringformat:"i" %} selected {% endif %}>{{ area.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-2 mb-3">
                            <label class="form-label">Sub Area</label>
                            <select class="form-select select2" id="id_subarea" name="subarea">
                            <option value="">Select Sub Area</option>
                            {% if subarea %}
                                {% for subarea in subareas %}
                                <option value="{{ subarea.id }}" {% if request.GET.subarea == subarea.id|stringformat:"i" %} selected {% endif %}>{{ subarea.name }}</option>
                                {% endfor %}
                            {% else %}
                                {% for subarea in allsubareas %}
                                <option value="{{ subarea.id }}" {% if request.GET.subarea == subarea.id|stringformat:"i" %} selected {% endif %}>{{ subarea.name }}</option>
                                {% endfor %}
                            {% endif %}
                            </select>
                        </div>
                      
                        <div class="col-md-12 col-lg-12 col-xl-12">
                            <div class="btn-grp">
                                <button class="btn btn-primary w-md me-1 mb-1" type="submit" id="user">Search</button>
                                <span>
                                    <a class="btn btn-primary w-md me-1 mb-1" href="{% url 'dashboard' %}">Reset</a>
                                </span>
                            </div>
                        </div>
                        {% comment %}
                        <div class="col-md-1"></div>
                        {% endcomment %}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
  <div class="col-xl-8">
    <div class="row">
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s ">
                Identified Potential Breeding Sites
              </div>
              <h4 class="mb-0 purple-font">{{total_data}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s">
                Pending Sites
              </div>
              <h4 class="mb-0 red-font">{{total_pending}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s">
                Sites Covered by Ground Team
              </div>
              <h4 class="mb-0 green-font">{{comp_gt}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s">
                Sites Not Reachable by Ground Team
              </div>
              <h4 class="mb-0 orange-font">{{unreach_gt}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s">
                Sites Covered by Drone Team
              </div>
              <h4 class="mb-0 blue-font">{{comp_dt}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-column">
              <div class="flex-1 overflow-hidden font-s">
                Not Reachable Sites
              </div>
              <h4 class="mb-0 black-font">{{unreach_dt}}</h4>
              {% comment %}
              <div class="text-primary ms-auto">
                <i class="ri-stack-line font-size-24"></i>
              </div>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title mb-4">{{total_data}} Sites Analytics</h4>
        <div id="apex-pie-chart"></div>
      </div>
    </div>
  </div>
</div>
<!-- end row -->
<div class="row">
  <div class="col-xl-12">
    <!-- end row -->
    <div class="card">
      <div class="card-body">
        <h4 class="card-title mb-4">Sites Analytics</h4>
        <div>
          <div id="line-column-chart" class="apex-charts" dir="ltr"></div>
          
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock content %} {% block scripts %}
{% block extra_javascript %}
<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/apexcharts.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var selectedSubarea 
  var data1;
  $(document).ready(function () {
      $("#id_subarea").on("change", function () {

        var input = $(this).val()
      
        const area_id_sel = $('#id_area').val()

        if (input === "") {

          // Clear suggestions and hide the suggestions list
          $("#suggestions-list").empty().hide();
          $("#no-records-message").hide();
          return; // Exit early if the input is blank
        } 
          // Make an API call to retrieve the autocomplete suggestions
          $.ajax({
              url: "/images/get-subarea-names/",
              method: "GET",
              data: {
              term: input, // Pass the entered value as the query parameter 'term'
              },
              success: function (data) {
              // Process the received response
              data1 = data;
              selectedSubarea = data1[0]


              var suggestions = data.map(function (item) {
                  $("#id_state").val(item.state_id).change();
              });

              
              },
              error: function () {
              console.log("API request failed");
              },
          });
        
      });

  $("#id_state").change(function () {
    const url2 = $("#id_district").attr("district-queries-url");
    const stateID = $(this).val();
    if (stateID != '') {
      $.ajax({
        url: "{% url 'ajax_load_districts' %}",
        data: { state_id: stateID },
        success: function (data) {
          $("#id_district").html(data);
              if (selectedSubarea && selectedSubarea.state_id == stateID) {
                  $("#id_district").val(selectedSubarea.district_id).trigger("change");
                  $('#id_subdistrict').find('option:not(:first)').remove();
                  $('#id_city').find('option:not(:first)').remove();
                  $('#id_area').find('option:not(:first)').remove();
              }else{
                  $('#id_subdistrict').find('option:not(:first)').remove();
                  $('#id_city').find('option:not(:first)').remove();
                  $('#id_area').find('option:not(:first)').remove();
                  $('#id_subarea').find('option:not(:first)').remove();
              }

        },
      });
    }
    else {
      $('#id_subdistrict').find('option:not(:first)').remove();
      $('#id_city').find('option:not(:first)').remove();
      $('#id_area').find('option:not(:first)').remove();
      $('#id_subarea').find('option:not(:first)').remove();


    }




  });
  
  $("#id_district").change(function () {
    const url = $("#id_subdistrict").attr("subdistrict-queries-url");
    const districtID = $(this).val();

    if (districtID != '') {
      $.ajax({
        url: "{% url 'ajax_load_subdistricts' %}",
        data: { district_id: districtID },
        success: function (data) {
          $("#id_subdistrict").html(data);
          if (selectedSubarea && selectedSubarea.district_id == districtID){

              $("#id_subdistrict").val(selectedSubarea.subdistrict_id).trigger("change");
              $("#id_city").find('option:not(:first)').remove();
              $('#id_area').find('option:not(:first)').remove();
          }else{
              $("#id_city").find('option:not(:first)').remove();
              $('#id_area').find('option:not(:first)').remove();
              $('#id_subarea').find('option:not(:first)').remove();
          }
            
        },
      });
    } else {
      $('#id_city').find('option:not(:first)').remove();
      $('#id_area').find('option:not(:first)').remove();
      $('#id_subarea').find('option:not(:first)').remove();
    }
  });

  $("#id_subdistrict").change(function () {
    const url = $("#id_city").attr("city-queries-url");
    const subdistrictID = $(this).val();
  
    if (subdistrictID != '') {
      $.ajax({
        url: "{% url 'ajax_load_cities' %}",
        data: { subdistrict_id: subdistrictID },
        success: function (data) {
          $("#id_city").html(data);
          if (selectedSubarea && selectedSubarea.subdistrict_id == subdistrictID){
            $("#id_city").val(selectedSubarea.city_id).trigger("change");
            $('#id_area').find('option:not(:first)').remove();
          }else{   
            $('#id_area').find('option:not(:first)').remove();
            $('#id_subarea').find('option:not(:first)').remove();
          }
        },
      });
    } else {
      
      $('#id_city').find('option:not(:first)').remove();
      $('#id_area').find('option:not(:first)').remove();
      $('#id_subarea').find('option:not(:first)').remove();
    }
  });

  $("#id_city").change(function () {
    const url = $("#id_area").attr("area-queries-url");
    const cityID = $(this).val();
    if (cityID != '') {
      $.ajax({
        url: "{% url 'ajax_load_areas' %}",
        data: { city_id: cityID },
        success: function (data) {
          $("#id_area").html(data);
          if (selectedSubarea && selectedSubarea.city_id == cityID){
              $("#id_area").val(selectedSubarea.area_id).trigger("change");
          }else{
              $('#id_subarea').find('option:not(:first)').remove();
          }
            
        },
      });
    } else {
      $('#id_area').find('option:not(:first)').remove();
      $('#id_subarea').find('option:not(:first)').remove();
    }
  });

  $("#id_area").change(function () {
    const url = $("#id_subarea").attr("subarea-queries-url");
    const areaID = $(this).val();
    const area_id_sel = $('#id_area').val();

    if (areaID != '') {
      $.ajax({
        url: "{% url 'ajax_load_subareas' %}",
        data: { area_id: areaID },
        success: function (data) {

          if (!selectedSubarea) {
            $("#id_subarea").html(data);
          }else if (selectedSubarea.area_id != area_id_sel) {
              $("#id_subarea").html(data);
            // Do something else if the area_id does not match
          }
        },
      });
    } else {
      $('#id_subarea').find('option:not(:first)').remove();
    }
  });
});

</script>
<script>
      var total_pending = {{ total_pending }};
      var comp_gt = {{ comp_gt }};
      var unreach_gt = {{ unreach_gt }};
      var comp_dt = {{ comp_dt }};
      var unreach_dt = {{ unreach_dt }};
      var options = {
      legend: {
      display: true,
              position: 'bottom'
      },
              chart: {
              height: 370,
                      type: 'pie',
              },
              dataLabels: {
              enabled: true,
                      formatter: function (val, opts) {
                      return opts.w.config.series[opts.seriesIndex]
                      },
                      dropShadow: {
                      enabled: false,
                              top: 1,
                              left: 1,
                              blur: 1,
                              opacity: 0.45
                      }
              },
              //stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
              colors: ['#FF0000', '#078c24', '#FAC576', '#0e6aeb', '#000000'],
              labels: ['Pending Sites', 'Sites Covered by Ground Team', 'Sites Not Reachable by Ground Team', 'Sites Covered by Drone Team', 'Not Reachable Sites'],
              series: [total_pending, comp_gt, unreach_gt, comp_dt, unreach_dt]
      };
      var chart = new ApexCharts(
              document.querySelector('#apex-pie-chart'),
              options
              );
      chart.render();
      var monthlyData = {{ monthly_data | safe }};
      var monthlistpending = {{ month_list_pending | safe }};
      var monthlistcompgt = {{ month_list_com_gt | safe }};
      var monthlistunrechgt = {{ month_list_unrech_gt | safe }};
      var monthlistcompdt = {{ month_list_com_dt | safe }};
      var monthlistunrechdt = {{ month_list_unrech_dt | safe }};

  // Create an object to map month to count
      var monthlyMap = {};
      var pendingMap = {};
      var completedMap = {};
      var unreachedGTMap = {};
      var completedDTMap = {};
      var unreachedDTMap = {};
      monthlyData.forEach(function (item) {
      if ( monthlyMap[item.Month]) {
        monthlyMap[item.Month] += item.count;
      }else {
        monthlyMap[item.Month] = item.count;
      }
      });
      monthlistpending.forEach(function (item) {
      if (pendingMap[item.Month]) {
      pendingMap[item.Month] += item.count;
      } else {
      pendingMap[item.Month] = item.count;
      }
      });
      monthlistcompgt.forEach(function(item) {
        var month = item.Month;
        
        if (completedMap[month]) {
          completedMap[month] += item.count;
        } else {
          completedMap[month] = item.count;
        }
      });

      monthlistunrechgt.forEach(function(item) {
      var month = item.Month;
      if (unreachedGTMap[month]) {
        unreachedGTMap[month] += item.count;
      } else {
        unreachedGTMap[month] = item.count;
      }
    });

    monthlistcompdt.forEach(function(item) {
      var month = item.Month;
      if (completedDTMap[month]) {
        completedDTMap[month] += item.count;
      } else {
        completedDTMap[month] = item.count;
      }
    });

    monthlistunrechdt.forEach(function(item) {
      var month = item.Month;
      if (unreachedDTMap[month]) {
        unreachedDTMap[month] += item.count;
      } else {
        unreachedDTMap[month] = item.count;
      }
    });
  // Create an array of counts for each month
      var graphCounts = [];
      var graphCountPending = [];
      var graphCountCompleted = [];
      var graphCountUnreachedGT = [];
      var graphCountCompletedDT = [];
      var graphCountUnreachedDT = [];
      for (var i = 1; i <= 12; i++) {
      var count = monthlyMap[i] || 0;
      var pendingCount = pendingMap[i] || 0;
      var completedCount = completedMap[i] || 0;
      var unreachedGTCount = unreachedGTMap[i] || 0;
      var completedDTCount = completedDTMap[i] || 0;
      var unreachedDTCount = unreachedDTMap[i] || 0;
      graphCounts.push(count);
      graphCountPending.push(pendingCount);
      graphCountCompleted.push(completedCount);
      graphCountUnreachedGT.push(unreachedGTCount);
      graphCountCompletedDT.push(completedDTCount);
      graphCountUnreachedDT.push(unreachedDTCount);
      }


  // Define colors for each series
      var colors = ['purple', '#FF0000', '#078c24', '#FAC576', '#0e6aeb', '#000000']; // Add more colors as needed

  // Revenue Analytics Bar Graph
      var options = {
      series: [
      {
      name: 'Total Sites',
              data: graphCounts,
              color: colors[0],
      },
      {
      name: 'Pending Sites',
              data: graphCountPending,
              color: colors[1],
      },
      {
      name: 'Completed Sites (GT)',
              data: graphCountCompleted,
              color: colors[2],
      },
      {
      name: 'Unreached Sites (GT)',
              data: graphCountUnreachedGT,
              color: colors[3],
      },
      {
      name: 'Completed Sites (DT)',
              data: graphCountCompletedDT,
              color: colors[4],
      },
      {
      name: 'Unreached Sites (DT)',
              data: graphCountUnreachedDT,
              color: colors[5],
      },
      ],
              chart: {
              type: 'bar',
                      height: 350,
              },
              plotOptions: {
              bar: {
              horizontal: false,
                      columnWidth: '30%',
              },
              },
              dataLabels: {
              enabled: false,
              },
              stroke: {
              show: true,
                      width: [2, 4, 2, 4, 2],
                      colors: colors,
              },
              xaxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
              },
              yaxis: {
              title: {
              text: 'No. of Sites',
              },
              },
              fill: {
              opacity: 1,
              },
              tooltip: {
              y: {
              formatter: function (val) {
              return val;
              },
              },
              },
              colors: colors,
      };
      var chart = new ApexCharts(document.querySelector("#line-column-chart"), options);
      chart.render();
</script>
{% endblock extra_javascript %}
{% endblock scripts %}