@extends('layouts.main')

@section('main-container')
<div class="container">
    <h3 class="mb-4">Baseline Measurement Summary</h3>

    <table class="table table-bordered ">
        <thead>
            <tr>
                <th class="bg-light text-secondary text-center">Baseline ID</th>
                <th class="bg-light text-secondary text-center">Measurement Date</th>
                <th class="bg-light text-secondary text-center">Avg HI</th>
                <th class="bg-light text-secondary text-center">Avg RL</th>
                <th class="bg-light text-secondary text-center">Total Readings</th>
                <th class="bg-light text-secondary text-center">Avg Reading RL</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($baselines as $b)
                <tr>
                    <td>{{ $b->id }}</td>
                    <td>{{ $b->measurement_date }}</td>
                    <td>{{ number_format($b->avg_hi, 2) }}</td>
                    <td>{{ number_format($b->avg_rl, 2) }}</td>
                    <td>{{ $b->total_readings }}</td>
                    <td>{{ number_format($b->avg_reading_rl, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <canvas id="rlChart" height="100"></canvas>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('rlChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($baselines->pluck('measurement_date')),
            datasets: [{
                label: 'Avg RL (Baseline)',
                data: @json($baselines->pluck('avg_rl')),
                borderColor: 'blue',
                fill: false,
                tension: 0.4
            },
            {
                label: 'Avg RL (Readings)',
                data: @json($baselines->pluck('avg_reading_rl')),
                borderColor: 'green',
                fill: false,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Average RL Over Time'
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: 'RL (m)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Measurement Date'
                    }
                }
            }
        }
    });
</script>
@endsection