{{-- Version: 1.3 --}}

@extends('layouts.app')

@section('title', translate('ValueBloodpressure.list_title'))

@section('content')
    <h1>{{ translate('ValueBloodpressure.list_header') }}</h1>
    <div class="average-values">
        <strong>Durchschnittswerte:</strong>
        <span>Systolisch: {{ $avgSystolic }} mmHg</span> |
        <span>Diastolisch: {{ $avgDiastolic }} mmHg</span> |
        <span>Puls: {{ $avgPulse }} bpm</span>
    </div>

    <script>
        var translations = {
            deleteSure: @json(translate('measurement.delete.sure')),
            deleteDone: @json(translate('measurement.delete.done')),
            deleteError: @json(translate('measurement.delete.error')),
            editDone: @json(translate('measurement.edit.done')),
            editError: @json(translate('measurement.edit.error'))
        };
    </script>

    <table>
        <thead>
            <tr>
                @foreach ($tableHead as $key => $header)
                    <th>{{ $header }}</th>
                @endforeach
                <th>{{ translate('glb.actions') }}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tableData as $row)
                <tr data-measurement-id="{{ $row['measurement_id'] }}">
                    @foreach ($tableHead as $key => $header)
                        <td>
                            <input type="text" value="{{ $row[$key] ?? '-' }}" 
                                   data-key="{{ $key }}"
                                   class="editable-field">
                        </td>
                    @endforeach
                    <td>
                        <button class="btn-save" onclick="saveMeasurement({{ $row['measurement_id'] }}, this)">💾</button>
                        <button class="btn-delete" onclick="deleteMeasurement({{ $row['measurement_id'] }})">🗑️</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <script>
        function saveMeasurement(measurementId, button) {
            let row = button.closest('tr');
            let inputs = row.querySelectorAll('.editable-field');
            let newValues = {};

            inputs.forEach(input => {
                newValues[input.dataset.key] = input.value;
            });

            fetch("{{ route('edit.measurement') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    measurement_id: measurementId,
                    area_id: {{ $areaId ?? 3 }},
                    user_id: {{ $userId ?? auth()->id() }},
                    new_values: newValues
                })
            }).then(response => response.json())
              .then(data => {
                  if (data.success) {
                      alert(translations.editDone);
                      location.reload();
                  } else {
                      alert(translations.editError);
                  }
              });
        }

        function deleteMeasurement(measurementId) {
            if (!confirm(translations.deleteSure)) return;

            fetch("{{ route('delete.measurement') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    measurement_id: measurementId,
                    user_id: {{ $userId ?? auth()->id() }}
                })
            }).then(response => response.json())
              .then(data => {
                  if (data.success) {
                      alert(translations.deleteDone);
                      location.reload();
                  } else {
                      alert(translations.deleteError);
                  }
              });
        }
    </script>
@endsection