document.addEventListener('DOMContentLoaded', function() {
  const ctx = document.getElementById('repairsChart').getContext('2d');
  const repairsData = JSON.parse(document.getElementById('repairsData').textContent);
  const labels = repairsData.map(data => data.employee);
  const data = repairsData.map(data => data.count);

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Počet Oprav',
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
});

function fetchRepairsByDate() {
  const startDate = document.getElementById('startDate').value;
  const endDate = document.getElementById('endDate').value;

  fetch(`/repairs_by_date?start=${startDate}&end=${endDate}`)
    .then(response => response.json())
    .then(data => {
      const ctx = document.getElementById('timeRepairsChart').getContext('2d');
      const labels = data.map(item => item.date);
      const counts = data.map(item => item.count);

      new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: 'Počet Oprav',
            data: counts,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });
}