@extends('patients.layouts.app')
 
@section('content')
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  #ecg {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between graphs */
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 80px;
    margin-left: 61px;
    height: auto;
    width: 1438px;
    background: black;
  }
 
  .chart-container {
    height: 250px; /* Height of each chart */
    width: 100%;
    background-color: white;
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
  }
  
     .chart-container {
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }  
        
        
        .control-panel {
  display: flex;
  justify-content: space-around;
  background-color: #1e2a38;
  padding: 10px;
  border-bottom: 2px solid #333;
}

.control-btn, .channel-btn {
  background-color: #333;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}

.channel-select {
  display: flex;
  gap: 5px;
}

.channel-btn.active {
  background-color: #007bff;
}


.container {
    display: flex;
    height: calc(80vh - 0px);
} 
.ecg-section {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
}

.vital-section {
  flex: 1;
  background-color: #2e3b4e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

canvas {
  background-color: black;
  height: 80px !important;
  display: none; /* Initially hidden, shown via JS */
}

.vital {
  margin-bottom: 40px;
  text-align: center;
}

.vital h3 {
  margin-bottom: 10px;
  font-weight: normal;
  color: lightgray;
}

.vital .value {
  font-size: 32px;
  font-weight: bold;
}

</style>
 
<main class="flex-grow-1">
<div id="ecg">
  <div class="container">
   <div class="ecg-section">
      <!-- Channel buttons added here -->
      <div class="channel-buttons">
        <button class="channel-btn active" data-channel="standard">Standard</button>
        <button class="channel-btn" data-channel="limb">Limb</button>
        <button class="channel-btn" data-channel="augmented">Augmented</button>
        <button class="channel-btn" data-channel="precordial">Precordial</button>
      </div>
      
     <div style="text-align: center; color: #3fa9f5; font-weight: bold;">I</div>
      <canvas id="lead1"></canvas>
      <div style="text-align: center; color: #7cd7c8; font-weight: bold;">II</div>
      <canvas id="lead2"></canvas>
      <div style="text-align: center; color: #f25bf0; font-weight: bold;">V</div>
      <canvas id="leadV"></canvas>
    </div>
    
    
       <div class="vital-section">
      <div class="vital">
        <h3>Heart Rate</h3>
        <div class="value" style="color: #3fa9f5">030 BPM</div>
      </div>
      <div class="vital">
        <h3>Respiration Rate</h3>
        <div class="value" style="color: #7cd7c8">15 BrPM</div>
      </div>
      <div class="vital">
        <h3>Lead III</h3>
        <div class="value" style="color: #f25bf0">56</div>
      </div>
    </div>
      </div>


</div>
</main>
 <script>
    fetch('ecg_data.json')
      .then(res => res.json())
      .then(data => {
        const fs = data.fs;
        const windowSize = fs * 2; // 2 seconds
        let index = 0;
        let currentChannel = 'standard';

        const x = Array.from({ length: windowSize }, (_, i) => i / fs);

        // Get all available leads from the data
        const leads = {
          'I': data.LeadI || Array(data.LeadII.length).fill(0),
          'II': data.LeadII,
          'III': data.LeadIII || Array(data.LeadII.length).fill(0),
          'aVR': data.aVR || Array(data.LeadII.length).fill(0),
          'aVL': data.aVL || Array(data.LeadII.length).fill(0),
          'aVF': data.aVF || Array(data.LeadII.length).fill(0),
          'V1': data.V1 || Array(data.LeadII.length).fill(0),
          'V2': data.V2 || Array(data.LeadII.length).fill(0),
          'V3': data.V3 || Array(data.LeadII.length).fill(0),
          'V4': data.V4 || Array(data.LeadII.length).fill(0),
          'V5': data.V5 || Array(data.LeadII.length).fill(0),
          'V6': data.V6 || Array(data.LeadII.length).fill(0),
          'V': data.LeadV
        };

        // If Lead I and III aren't in the data, calculate them
        if (!data.LeadI && data.LeadII && data.LeadIII) {
          leads.I = data.LeadII.map((v, i) => v - data.LeadIII[i]);
        }
        if (!data.LeadIII && data.LeadI && data.LeadII) {
          leads.III = data.LeadII.map((v, i) => v - data.LeadI[i]);
        }
        // Calculate augmented leads if not present
        if (!data.aVR && data.LeadI && data.LeadII) {
          leads.aVR = data.LeadI.map((v, i) => -(data.LeadI[i] + data.LeadII[i]) / 2);
          leads.aVL = data.LeadI.map((v, i) => data.LeadI[i] - data.LeadII[i] / 2);
          leads.aVF = data.LeadII.map((v, i) => data.LeadII[i] - data.LeadI[i] / 2);
        }

        // Channel configurations
        const channelConfigs = {
          'standard': ['I', 'II', 'V'],
          'limb': ['I', 'II', 'III'],
          'augmented': ['aVR', 'aVL', 'aVF'],
          'precordial': ['V1', 'V2', 'V3']
        };

        const leadLabels = {
          'I': 'I',
          'II': 'II',
          'III': 'III',
          'aVR': 'aVR',
          'aVL': 'aVL',
          'aVF': 'aVF',
          'V1': 'V1',
          'V2': 'V2',
          'V3': 'V3',
          'V4': 'V4',
          'V5': 'V5',
          'V6': 'V6',
          'V': 'V'
        };

        const leadColors = {
          'I': '#3fa9f5',
          'II': '#7cd7c8',
          'III': '#f25bf0',
          'aVR': '#3fa9f5',
          'aVL': '#7cd7c8',
          'aVF': '#f25bf0',
          'V1': '#3fa9f5',
          'V2': '#7cd7c8',
          'V3': '#f25bf0',
          'V4': '#3fa9f5',
          'V5': '#7cd7c8',
          'V6': '#f25bf0',
          'V': '#f25bf0'
        };

        function createChart(canvasId, color) {
          return new Chart(document.getElementById(canvasId), {
            type: 'line',
            data: {
              labels: x,
              datasets: [{
                data: Array(windowSize).fill(0),
                borderColor: color,
                borderWidth: 1,
                pointRadius: 0,
                tension: 0
              }]
            },
            options: {
              responsive: true,
              animation: false,
              plugins: { legend: { display: false } },
              scales: {
                x: { display: false },
                y: {
                  display: false,
                  min: -1,
                  max: 1
                }
              }
            }
          });
        }

        const chart1 = createChart('lead1', '#3fa9f5');
        const chart2 = createChart('lead2', '#7cd7c8');
        const chart3 = createChart('leadV', '#f25bf0');

        // Get all label elements
        const label1 = document.querySelector('#lead1').previousElementSibling;
        const label2 = document.querySelector('#lead2').previousElementSibling;
        const label3 = document.querySelector('#leadV').previousElementSibling;

        // Function to update the displayed leads
        function updateDisplayedLeads() {
          const leadsToShow = channelConfigs[currentChannel];
          
          // Update labels
          label1.textContent = leadLabels[leadsToShow[0]];
          label2.textContent = leadLabels[leadsToShow[1]];
          label3.textContent = leadLabels[leadsToShow[2]];
          
          // Update label colors
          label1.style.color = leadColors[leadsToShow[0]];
          label2.style.color = leadColors[leadsToShow[1]];
          label3.style.color = leadColors[leadsToShow[2]];
        }

        // Set up button event listeners
        document.querySelectorAll('.channel-btn').forEach(btn => {
          btn.addEventListener('click', function() {
            // Update active button
            document.querySelectorAll('.channel-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            // Update current channel
            currentChannel = this.dataset.channel;
            updateDisplayedLeads();
          });
        });

        function updateCharts() {
          if (index + windowSize >= leads.II.length) index = 0;

          const leadsToShow = channelConfigs[currentChannel];

          chart1.data.datasets[0].data = leads[leadsToShow[0]].slice(index, index + windowSize);
          chart2.data.datasets[0].data = leads[leadsToShow[1]].slice(index, index + windowSize);
          chart3.data.datasets[0].data = leads[leadsToShow[2]].slice(index, index + windowSize);

          chart1.update();
          chart2.update();
          chart3.update();

          index++;
        }

        setInterval(updateCharts, 4);
      });
  </script>
@endsection