let inputFields = [];

    let chart = null;



    function setMode(isDark) {

      if (isDark) {

        document.body.classList.add('dark-mode');

      } else {

        document.body.classList.remove('dark-mode');

      }

      localStorage.setItem('darkMode', isDark);

    }



    function toggleMode() {

      const isDark = !document.body.classList.contains('dark-mode');

      setMode(isDark);

    }



    document.addEventListener('DOMContentLoaded', () => {

      const savedMode = localStorage.getItem('darkMode');

      if (savedMode !== null) {

        setMode(savedMode === 'true');

      }

    });



    document.getElementById('toggle-mode').addEventListener('click', toggleMode);



    function calculateDays() {

      const startDate = new Date(document.getElementById("start-date").value);

      const endDate = new Date(document.getElementById("end-date").value);

      const timeDifference = endDate.getTime() - startDate.getTime();

      const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24)) + 1;



      document.getElementById("days-count").textContent = `Number of days: ${daysDifference}`;



      const inputFieldsContainer = document.getElementById("input-fields");

      inputFieldsContainer.innerHTML = "";

      inputFields = [];



      for (let i = 0; i < daysDifference; i++) {

        const currentDate = new Date(startDate);

        currentDate.setDate(startDate.getDate() + i);

        const day = currentDate.getDate().toString().padStart(2, '0');

        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');

        const year = currentDate.getFullYear();

        const dateString = `${day}.${month}.${year}`;



        const inputField = document.createElement("div");

        inputField.classList.add("input-field", "fade-in");



        const label = document.createElement("label");

        label.textContent = dateString;

        inputField.appendChild(label);



        const input = document.createElement("input");

        input.type = "text";

        input.inputMode = "numeric";

        input.placeholder = `Day ${i + 1}`;

        input.pattern = "^[0-9]*$";

        input.addEventListener('input', function(e) {

          this.value = this.value.replace(/[^0-9]/g, '');

          this.value = this.value.replace(/^0+(?=\d)/, '');

          updateTotalSum();

        });



        inputFields.push(input);

        inputField.appendChild(input);



        const percentageLabel = document.createElement("span");

        percentageLabel.classList.add("percentage");

        percentageLabel.textContent = "0%";

        inputField.appendChild(percentageLabel);



        inputFieldsContainer.appendChild(inputField);

      }



      if (chart) {

        chart.destroy();

        chart = null;

      }



      document.getElementById("result").style.display = 'block';

      document.getElementById("chart-container").style.display = 'block';

      document.getElementById("download-buttons").style.display = 'flex';

      document.getElementById("contact-form").style.display = 'block';



      document.getElementById("result").classList.add('fade-in');

      document.getElementById("chart-container").classList.add('fade-in');

      document.getElementById("download-buttons").classList.add('fade-in');

      document.getElementById("contact-form").classList.add('fade-in');



      updateTotalSum();

    }



    function updateTotalSum() {

      let totalSum = 0;

      let cumulativeSum = 0;



      inputFields.forEach(input => {

        const value = parseInt(input.value) || 0;

        totalSum += value;

      });



      document.getElementById("total-sum").textContent = `Total sum: ${totalSum}`;



      const cumulativePercentages = [];

      const dayPercentages = [];



      inputFields.forEach((input, index) => {

        const value = parseInt(input.value) || 0;

        cumulativeSum += value;

        const percentage = totalSum ? ((cumulativeSum / totalSum) * 100).toFixed(2) : 0;

        const percentageLabel = input.nextElementSibling;

        percentageLabel.textContent = `${percentage}%`;

        cumulativePercentages.push(parseFloat(percentage));



        const dayPercentage = ((index + 1) / inputFields.length * 100).toFixed(2);

        dayPercentages.push(parseFloat(dayPercentage));

      });



      renderChart(dayPercentages, cumulativePercentages);

    }



    function renderChart(dayPercentages, cumulativePercentages) {

      const ctx = document.getElementById('percentage-chart').getContext('2d');

      if (chart) {

        chart.destroy();

      }



      chart = new Chart(ctx, {

        type: 'line',

        data: {

          labels: Array.from({ length: 11 }, (_, i) => `${i * 10}%`),

          datasets: [{

            label: 'Cumulative percentage of total sum',

            data: interpolateData(dayPercentages, cumulativePercentages),

            borderColor: 'rgba(52, 152, 219, 1)',

            backgroundColor: 'rgba(52, 152, 219, 0.2)',

            fill: true,

          }]

        },

        options: {

          responsive: true,

          scales: {

            x: {

              title: {

                display: true,

                text: 'Days (%)'

              },

              min: 0,

              max: 100,

              ticks: {

                stepSize: 10

              }

            },

            y: {

              title: {

                display: true,

                text: 'Percentage of total sum (%)'

              },

              min: 0,

              max: 100

            }

          }

        }

      });

    }



    function interpolateData(xData, yData) {

      const fixedLabels = Array.from({ length: 11 }, (_, i) => i * 10);

      const interpolatedData = [];



      for (let i = 0; i < fixedLabels.length; i++) {

        const x = fixedLabels[i];

        const index = xData.findIndex(value => parseFloat(value) >= x);



        if (index === -1) {

          interpolatedData.push(yData[yData.length - 1]);

        } else if (index === 0) {

          interpolatedData.push(yData[0]);

        } else {

          const x1 = parseFloat(xData[index - 1]);

          const x2 = parseFloat(xData[index]);

          const y1 = yData[index - 1];

          const y2 = yData[index];

          const y = y1 + ((x - x1) / (x2 - x1)) * (y2 - y1);

          interpolatedData.push(y);

        }

      }



      return interpolatedData;

    }



    function downloadCSV() {

      const csvRows = [];

      csvRows.push(['Date', 'Value', 'Percentage']);



      inputFields.forEach((input, index) => {

        const dateLabel = input.previousSibling.textContent;

        const value = input.value || 0;

        const percentage = input.nextSibling.textContent;

        csvRows.push([dateLabel, value, percentage]);

      });



      const csvString = csvRows.map(row => row.join(',')).join('\n');

      const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });

      const url = URL.createObjectURL(blob);

      const a = document.createElement('a');

      a.href = url;

      a.download = 'data.csv';

      a.click();

      URL.revokeObjectURL(url);

    }



    function downloadChart() {

      const canvas = document.getElementById('percentage-chart');

      const url = canvas.toDataURL('image/png');

      const a = document.createElement('a');

      a.href = url;

      a.download = 'chart.png';

      a.click();

    }



    function showPopup(caseNumber) {

      document.getElementById('case-number').textContent = caseNumber;

      document.getElementById('popup').style.display = 'block';

    }



    function closePopup() {

      document.getElementById('popup').style.display = 'none';

    }



    async function sendToServer() {

      const agreeCheckbox = document.getElementById('agree-checkbox');

      if (!agreeCheckbox.checked) {

        alert('You must agree to the publication of anonymized data to proceed.');

        return;

      }



      const csvRows = [];

      csvRows.push(['Date', 'Value', 'Percentage']);



      inputFields.forEach((input, index) => {

        const dateLabel = input.previousSibling.textContent;

        const value = input.value || 0;

        const percentage = input.nextSibling.textContent;

        csvRows.push([dateLabel, value, percentage]);

      });



      const csvString = csvRows.map(row => row.join(',')).join('\n');

      const canvas = document.getElementById('percentage-chart');

      const imageData = canvas.toDataURL('image/png');



      try {

        const csvResponse = await fetch('save_data.php', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json'

          },

          body: JSON.stringify({ csvString })

        });



        if (!csvResponse.ok) {

          throw new Error('Error saving CSV data.');

        }



        const imageResponse = await fetch('save_data.php', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json'

          },

          body: JSON.stringify({ imageData })

        });



        if (!imageResponse.ok) {

          throw new Error('Error saving chart data.');

        }



        const responseData = await imageResponse.json();

        alert('Data saved successfully to the server.');



        // Zobrazí vyskakovací okno s číslem případu

        const caseNumber = responseData.caseNumber;

        showPopup(caseNumber);



      } catch (error) {

        console.error('Error:', error);

        alert('Error saving data to the server.');

      }

    }



    document.getElementById('send-button').addEventListener('click', sendToServer);