{% extends "admin/base_site.html" %}
{% block extrahead %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
{% endblock %}
{% block content %}
<style>
  .wrapper {
    margin: 0 56px;
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  h2.dashboard {
    font-size: 36px;
    font-weight: 900;
    color: #0b0f37;
  }

  h3.dashboard {
    font-size: 26px;
    font-weight: 900;
    color: #0b0f37;
  }

  #header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  #filter-form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .filter-item {
    display: flex;
    align-items: center;
  }

  .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .info-card {
    display: flex;
    width: 352px;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background-color: #f7f8fd;
  }

  .info-card span {
    color: #0b0f37;
    font-size: 26px;
    font-weight: 700;
  }

  .info-card p {
    color: #727796;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
  }

  .column {
    flex: 50%;
  }

  table.dashboard {
    width: 100%;
    border-collapse: collapse;
  }

  thead.dashboard {
    background-color: #f7f8fd;
  }

  th.dashboard {
    font-size: 18px;
    font-weight: 700;
    color: #0b0f37;
  }

  td.dashboard,
  th.dashboard {
    text-align: left;
    padding: 8px;
  }

  tr.dashboard {
    border-bottom: 1px solid #d8dbf3;
  }

  .filter {
    border-radius: 8px;
    border: 1px solid #d8dbf3;
    background: #f7f8fd;
    height: 30px;
    margin-left: 5px;
  }

  #selected-campaigns {
    border-radius: 8px;
    border: 1px solid #d8dbf3;
    background: #f7f8fd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    margin-left: 5px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
  }

  .dropdown-check-list {
    display: inline-block;
    position: relative;
  }

  #selected-campaigns:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  .dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    left: 0;
    right: 0;
  }

  .dropdown-check-list ul.items li {
    list-style: none;
    display: flex;
    gap: 5px;
  }

  .dropdown-check-list.visible .items {
    display: block;
    position: absolute;
    background-color: white;
  }

  .error-message {
    position: absolute;
    color: red;
    z-index: -1;
    width: inherit;
  }

  .filter-container {
    position: relative;
  }
</style>
<div class="wrapper">
  <div id="header-container">
    <h2 class="dashboard">Dashboard</h2>
    <div id="filter-form">
      <div class="filter-container">
        <div class="filter-item">
          <label for="start">Start date:</label>
          <input type="date" id="start" class="filter" value={{ initial_selectors_data.start }} />
        </div>
        {% if errors.start %}
        <span class="error-message">{{errors.start}}</span>
        {% endif %}
        {% if errors.non_field_errors %}
        {% for error in errors.non_field_errors %}
        <span class="error-message">{{error}}</span>
        {% endfor %}
        {% endif %}
      </div>
      <div class="filter-container">
        <div class="filter-item">
          <label for="end">End date:</label>
          <input type="date" id="end" class="filter" value={{ initial_selectors_data.end }} />
        </div>
        {% if errors.end %}
        <span class="error-message">{{errors.end}}</span>
        {% endif %}
      </div>
      <div class="filter-container">
        <div class="filter-item">
          <label for="advertiser">Advertiser:</label>
          <select name="Advertiser" id="advertiser" class="filter">
            <option value="" selected>---</option>
            {% for advertiser in advertisers %}
            {% if advertiser.id == initial_selectors_data.advertiser.id %}
            <option value={{ advertiser.id }} selected>{{ advertiser.name }}</option>
            {% else %}
            <option value={{ advertiser.id }}>{{ advertiser.name }}</option>
            {% endif %}
            {% endfor %}
          </select>
        </div>
        {% if errors.advertiser %}
        <span class="error-message">{{errors.advertiser}}</span>
        {% endif %}
      </div>
      <div class="filter-container">
        <div class="filter-item">
          <label for="campaign">Campaign:</label>
          <div id="campaign" class="dropdown-check-list">
            <span class="selected-campaigns" id="selected-campaigns">---</span>
            <ul class="items">
              <li><input type="checkbox" value="" />---</li>
              {% for campaign in campaigns %}
              {% if campaign.id in initial_selectors_data.campaigns %}
              <li><input type="checkbox" value={{ campaign.id }} checked />{{ campaign.title }}</li>
              {% else %}
              <li><input type="checkbox" value={{ campaign.id }} />{{ campaign.title }}</li>
              {% endif %}
              {% endfor %}
            </ul>
          </div>
        </div>
        {% if errors.campaign %}
        <span class="error-message">{{errors.campaign}}</span>
        {% endif %}
      </div>
      <script>
        var checkList = document.getElementById("campaign");
        checkList.getElementsByClassName("selected-campaigns")[0].onclick =
          function (evt) {
            checkList.classList.contains("visible")
              ? checkList.classList.remove("visible")
              : checkList.classList.add("visible");
          };

        const selectedCampaigns = document.getElementById("selected-campaigns");
        const items = checkList.querySelectorAll(".items input");

        function updateSelectedCampaigns() {
          const selected = Array.from(items)
            .filter((item) => item.checked)
            .map((item) => item.parentElement.innerText)
            .join(", ");
          selectedCampaigns.innerText = selected || '---';
        }

        items.forEach((item) => {
          item.addEventListener("click", function (event) {
            if (event.target.value === "") {
              items.forEach((item) => {
                item.checked = false;
              });
              selectedCampaigns.innerText = "---";
              return;
            }
            updateSelectedCampaigns();
          });
        });

        function setDefaultSelectedValues() {
          var urlParams = new URLSearchParams(window.location.search);
          const campaigns = urlParams.getAll("campaign");
          items.forEach((item) => {
            if (campaigns.includes(item.value)) {
              item.checked = true;
            }
          });
          updateSelectedCampaigns();
        }

        setDefaultSelectedValues();
      </script>
      <input type="button" id="submit" value="Filter" />
      <script>
        const start = document.getElementById("start");
        const end = document.getElementById("end");
        const advertiser = document.getElementById("advertiser");
        const campaign = document.getElementById("campaign");
        const submit = document.getElementById("submit");

        const errorMessages = document.querySelectorAll('.error-message');

        errorMessages.forEach(function (error) {
          error.textContent = error.textContent.replace(/^\['(.*)'\]$/, '$1');
        });
        document
          .getElementById("submit")
          .addEventListener("click", function (event) {
            const params = new URLSearchParams();

            if (start.value) {
              params.set("start", start.value);
            }

            if (end.value) {
              params.set("end", end.value);
            }

            const dateFilter = params.toString();
            const advertiserFilter = advertiser.value
              ? `advertiser=${advertiser.value}`
              : "";
            const selectedCampaigns = Array.from(
              campaign.querySelectorAll(".items input")
            )
              .filter((item) => item.checked)
              .map((item) => `campaign=${item.value}`)
              .join("&");
            const filters = [dateFilter, advertiserFilter, selectedCampaigns]
              .filter(Boolean)
              .join("&");
            const url = `{% url 'dashboard' %}?${filters}`;
            window.location.href = url;
          });
      </script>
    </div>
  </div>
  <div>
    <h3 class="dashboard">Overview</h3>
    <div class="container">
      <div class="info-card">
        <span>{{ dashboard_data.advertisers_count|default:0 }}</span>
        <p>advertiser accounts</p>
      </div>
      <div class="info-card">
        <span>{{ dashboard_data.billboard_impressions|default:0 }}</span>
        <p>impressions on the billboard ad</p>
      </div>
      <div class="info-card">
        <span>{{ dashboard_data.app_impressions|default:0 }}</span>
        <p>impressions on the in app ad</p>
      </div>
      <div class="info-card">
        <span>{{ dashboard_data.active_campaigns|default:0 }}</span>
        <p>active campaigns</p>
      </div>
      <div class="info-card">
        <span>{{ dashboard_data.reactions|default:0 }}</span>
        <p>like reactions</p>
      </div>
      <div class="info-card">
        <span>{{ dashboard_data.impressions_on_the_ad_link|default:0 }}</span>
        <p>impressions on the ad link</p>
      </div>
    </div>
  </div>
  <div>
    <h3 class="dashboard">Impressions by cities</h3>
    <div style="height: 435px">
      <canvas id="impressions-chart"></canvas>
    </div>
  </div>
  <div class="container">
    <div class="column">
      <h3 class="dashboard">Advertisers</h3>
      <table class="dashboard">
        <thead class="dashboard">
          <tr class="dashboard">
            <th class="dashboard">Name</th>
            <th class="dashboard">Sector</th>
          </tr>
        </thead>
        <tbody class="dashboard">
          {% for advertiser in dashboard_data.advertisers %}
          <tr class="dashboard">
            <td class="dashboard">{{ advertiser.name }}</td>
            <td class="dashboard">{{ advertiser.industry }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="column">
      <h3 class="dashboard">Current campaigns</h3>
      <table class="dashboard">
        <thead class="dashboard">
          <tr class="dashboard">
            <th class="dashboard">Campaign name</th>
            <th class="dashboard">Destination</th>
          </tr>
        </thead>
        <tbody class="dashboard">
          {% for campaign in dashboard_data.current_campaigns %}
          <tr class="dashboard">
            <td class="dashboard">{{ campaign.name }}</td>
            <td class="dashboard">{{ campaign.destination }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
  const ctx = document.getElementById("impressions-chart");
  new Chart(ctx, {
    type: "bar",
    data: {
      labels: [
        {% for place in dashboard_data.impressions_by_places %}
                "{{ place.name }}",
    {% endfor %}
        ],
    datasets: [
    {
      label: "Impressions",
      data: [
        {% for place in dashboard_data.impressions_by_places %}
                    {{ place.count }},
    {% endfor %}
  ],
    borderWidth: 1,
    backgroundColor: "#161F70",
    borderRadius: 4,
          },
        ],
      },
    options: {
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
      },
    },
    plugins: {
      legend: {
        position: "bottom",
      },
    },
  },
    });
</script>
{% endblock %}