{# JavaScript for rendering people count/attendance charts #}
{# Expects: event, people_count_by_day, all_days, all_times, people_count_by_place, people_counts_by_event_day #}

<script>
  // People count over time chart - all days in one graph
  {% if people_count_by_day %}
  (function() {
    const ctx = document.getElementById('peopleCountChart');
    if (ctx) {
      // Collect all unique times across all days
      const allTimes = new Set();
      {% for day, counts in people_count_by_day.items() %}
      [{% for item in counts %}'{{ item.time }}'{% if not loop.last %}, {% endif %}{% endfor %}].forEach(t => allTimes.add(t));
      {% endfor %}
      const sortedTimes = Array.from(allTimes).sort();
      
      // Define colors for each day
      const dayColors = {
        'Freitag': '#4bc0c0',
        'Samstag': '#ff6384',
        'Ohne Tag': '#999999'
      };
      
      // Create datasets for each day
      const datasets = [];
      {% for day, counts in people_count_by_day.items() %}
      {
        const dayData = {};
        [{% for item in counts %}['{{ item.time }}', {{ item.count }}]{% if not loop.last %}, {% endif %}{% endfor %}].forEach(([time, count]) => {
          dayData[time] = count;
        });
        
        datasets.push({
          label: '{{ day }}',
          data: sortedTimes.map(time => dayData[time] || null),
          borderColor: dayColors['{{ day }}'] || '{{ event.color }}',
          tension: 0.4,
          fill: false,
          spanGaps: true
        });
      }
      {% endfor %}
      
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: sortedTimes,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: true,
              position: 'top'
            },
            title: {
              display: false
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'Uhrzeit'
              }
            },
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Anzahl Personen'
              },
              ticks: { precision: 0 }
            }
          }
        }
      });
    }
  })();
  {% endif %}

  // Stacked area charts - one per day showing places
  {% if people_count_by_place %}
  {% for day in all_days %}
  (function() {
    const ctx = document.getElementById('peopleCountStackedChart{{ day | replace(' ', '') }}');
    if (ctx) {
      // Get all times for this day
      const dayTimes = {{ all_times | tojson }};
      
      // Get all unique places for this day
      const placesSet = new Set();
      {% if people_count_by_place.get(day) %}
      {% for time, entries in people_count_by_place[day].items() %}
      {% for entry in entries %}
      placesSet.add('{{ entry.place }}');
      {% endfor %}
      {% endfor %}
      {% endif %}
      const places = Array.from(placesSet);
      
      // Color palette for places
      const placeColors = [
        '#4bc0c0', '#ff6384', '#ffce56', '#36a2eb', 
        '#9966ff', '#ff9f40', '#c9cbcf', '#4dc9f6'
      ];
      
      // Create datasets for each place
      const datasets = places.map((place, index) => {
        const data = dayTimes.map(time => {
          {% if people_count_by_place.get(day) %}
          const entries = {{ people_count_by_place[day] | tojson }};
          if (entries[time]) {
            const entry = entries[time].find(e => e.place === place);
            return entry ? entry.count : 0;
          }
          {% endif %}
          return 0;
        });
        
        const color = placeColors[index % placeColors.length];
        return {
          label: place,
          data: data,
          backgroundColor: color + '66', // Add transparency
          borderColor: color,
          borderWidth: 1,
          fill: true
        };
      });
      
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: dayTimes,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: true,
              position: 'top'
            },
            title: {
              display: false
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'Uhrzeit'
              }
            },
            y: {
              stacked: true,
              beginAtZero: true,
              title: {
                display: true,
                text: 'Anzahl Personen'
              },
              ticks: { precision: 0 }
            }
          },
          elements: {
            line: {
              tension: 0.4
            }
          }
        }
      });
    }
  })();
  {% endfor %}
  {% endif %}

  // Cross-event people count comparison chart
  {% if people_counts_by_event_day %}
  (function() {
    const ctx = document.getElementById('peopleCountEventComparisonChart');
    if (ctx) {
      // Collect all unique times across all event-days
      const allTimes = new Set();
      {% for data in people_counts_by_event_day %}
      [{% for item in data.time_data %}'{{ item.time }}'{% if not loop.last %}, {% endif %}{% endfor %}].forEach(t => allTimes.add(t));
      {% endfor %}
      const sortedTimes = Array.from(allTimes).sort();
      
      // Create datasets for each event-day combination
      const datasets = [];
      {% for data in people_counts_by_event_day %}
      {
        const eventData = {};
        [{% for item in data.time_data %}['{{ item.time }}', {{ item.count }}]{% if not loop.last %}, {% endif %}{% endfor %}].forEach(([time, count]) => {
          eventData[time] = count;
        });
        
        datasets.push({
          label: '{{ data.name }} - {{ data.day }}',
          data: sortedTimes.map(time => eventData[time] !== undefined ? eventData[time] : null),
          borderColor: '{{ data.color }}',
          tension: 0.4,
          fill: false,
          spanGaps: true
        });
      }
      {% endfor %}
      
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: sortedTimes,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: true,
              position: 'top'
            },
            title: {
              display: false
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'Uhrzeit'
              }
            },
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Anzahl Personen'
              },
              ticks: { precision: 0 }
            }
          }
        }
      });
    }
  })();
  {% endif %}
</script>