@extends('admin.layout')

@section('content')
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Blood Tests</h4>
            <a href="{{ route('admin.health-tests.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-lg"></i> Add Blood
            </a>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif


        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Blood Test Name</th>
                    {{-- <th>Price</th> --}}
                    <th>Actions</th>
                    <th>Created At</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tests as $index => $test)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $test->test_name }}</td>
                       {{-- <td>₹{{ number_format($test->price, 2) }}</td> --}}
                        <td>
                            <a href="{{ route('admin.health-tests.edit', $test->id) }}" class="btn btn-sm btn-warning">
                                <i class="bi bi-pencil-square"></i> Edit
                            </a>

                            <form action="{{ route('admin.health-tests.destroy', $test->id) }}" method="POST"
                                class="d-inline" onsubmit="return confirm('Are you sure to delete this test?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-danger">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </form>
                        </td>

                        <td>{{ $test->created_at->format('d M Y') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection


  <!-- Script -->
  <script>
    let tests = [];
    let chart;

    window.addEventListener("DOMContentLoaded", () => {
      fetch('/api/tests')
        .then(res => res.json())
        .then(data => {
          tests = data;
          addTestRow(); // add first row
        })
        .catch(err => console.error("Error loading tests:", err));
    });

    function addTestRow() {
      const allRows = document.querySelectorAll('#testContainer .test-row');
      const lastRow = allRows[allRows.length - 1];

      if (lastRow) {
        const lastSelect = lastRow.querySelector('select');
        if (!lastSelect.value) {
          alert('Please select a test before adding a new one.');
          lastSelect.focus();
          return;
        }
      }

      const row = document.createElement('div');
      row.className = 'row test-row align-items-end';

      const isFirstRow = allRows.length === 0;

      row.innerHTML = `
        <div class="col-md-3">
          <label class="form-label"><i class="fas fa-dna"></i> Test Name</label>
          <select class="form-select" onchange="updatePrices(this)">
            <option value="">Select</option>
            ${tests.map(t => `<option value="${t.id}">${t.name}</option>`).join('')}
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">GD Fixed</label>
          <input type="number" class="form-control gd-fixed" readonly>
        </div>
        <div class="col-md-2">
          <label class="form-label">GD Custom</label>
          <input type="number" class="form-control gd-custom" readonly>
        </div>
        <div class="col-md-2">
          <label class="form-label">CRL Fixed</label>
          <input type="number" class="form-control crl-fixed" readonly>
        </div>
        <div class="col-md-2">
          <label class="form-label">CRL Custom</label>
          <input type="number" class="form-control crl-custom" readonly>
        </div>
        ${isFirstRow ? '' : `
        <div class="col-md-1 text-end">
          <button class="btn btn-danger btn-sm mt-n3" onclick="deleteRow(this)">
            <i class="fas fa-trash-alt"></i>
          </button>
        </div>
        `}
      `;
      document.getElementById('testContainer').appendChild(row);
    }

    function deleteRow(btn) {
      if (confirm('Are you sure you want to delete this test row?')) {
        const row = btn.closest('.test-row');
        row.remove();
        calculateTotals();
      }
    }

    function updatePrices(select) {
      const testId = parseInt(select.value);
      const test = tests.find(t => parseInt(t.id) === testId);
      const row = select.closest('.row');

      if (test) {
        row.querySelector('.gd-fixed').value = test.gd_price;
        row.querySelector('.gd-custom').value = test.gd_custom;
        row.querySelector('.crl-fixed').value = test.crl_price;
        row.querySelector('.crl-custom').value = test.crl_custom;
      } else {
        row.querySelectorAll('input').forEach(input => input.value = '');
      }

      calculateTotals();
    }

    function calculateTotals() {
      let gdFixed = 0, gdCustom = 0, crlFixed = 0, crlCustom = 0;
      document.querySelectorAll('.test-row').forEach(row => {
        gdFixed += parseFloat(row.querySelector('.gd-fixed')?.value || 0);
        gdCustom += parseFloat(row.querySelector('.gd-custom')?.value || 0);
        crlFixed += parseFloat(row.querySelector('.crl-fixed')?.value || 0);
        crlCustom += parseFloat(row.querySelector('.crl-custom')?.value || 0);
      });

      document.getElementById('gdFixedTotal').textContent = gdFixed.toFixed(2);
      document.getElementById('gdCustomTotal').textContent = gdCustom.toFixed(2);
      document.getElementById('crlFixedTotal').textContent = crlFixed.toFixed(2);
      document.getElementById('crlCustomTotal').textContent = crlCustom.toFixed(2);

      document.getElementById('gdFixedLegend').textContent = gdFixed.toFixed(2);
      document.getElementById('gdCustomLegend').textContent = gdCustom.toFixed(2);
      document.getElementById('crlFixedLegend').textContent = crlFixed.toFixed(2);
      document.getElementById('crlCustomLegend').textContent = crlCustom.toFixed(2);

      const totalSum = gdFixed + gdCustom + crlFixed + crlCustom;

      if (totalSum > 0) {
        document.getElementById('pieChartContainer').style.display = 'flex';
        document.getElementById('legendContainer').style.display = 'block';
        document.getElementById('chartMessage').style.display = 'none';
        updateChart(gdFixed, gdCustom, crlFixed, crlCustom);
      } else {
        document.getElementById('pieChartContainer').style.display = 'none';
        document.getElementById('legendContainer').style.display = 'none';
        document.getElementById('chartMessage').style.display = 'block';
      }
    }

    function updateChart(gdFixed, gdCustom, crlFixed, crlCustom) {
      const ctx = document.getElementById('priceChart').getContext('2d');
      const data = {
        labels: [
          `GD Fixed - ₹${gdFixed.toFixed(2)}`,
          `GD Custom - ₹${gdCustom.toFixed(2)}`,
          `CRL Fixed - ₹${crlFixed.toFixed(2)}`,
          `CRL Custom - ₹${crlCustom.toFixed(2)}`
        ],
        datasets: [{
          data: [gdFixed, gdCustom, crlFixed, crlCustom],
          backgroundColor: ['#007bff', '#6610f2', '#28a745', '#dc3545']
        }]
      };

      if (chart) {
        chart.data = data;
        chart.update();
      } else {
        chart = new Chart(ctx, {
          type: 'pie',
          data: data,
          options: {
            responsive: false,
            plugins: {
              legend: { display: false }
            }
          }
        });
      }
    }
  </script>