@extends('layouts.main')

@section('title', 'Data Sensor')

@section('content')
    <div class="table-container">
        <h2>Data Sensor & Prediksi</h2>
        <table border="1" cellspacing="0" cellpadding="5">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Suhu (°C)</th>
                    <th>Kelembaban (%)</th>
                    <th>Waktu</th>
                    <th>Prediksi Suhu (°C)</th>
                    <th>Prediksi Kelembaban (%)</th>
                    <th>Waktu Prediksi</th>
                </tr>
            </thead>
            <tbody id="sensorTableBody">
                <tr>
                    <td colspan="7" style="text-align: center;">Memuat data...</td>
                </tr>
            </tbody>
        </table>
    </div>
@endsection

@section('script')
    <script>
        async function fetchSensorData() {
            try {
                const sensorResponse = await axios.get('/api/latest-sensor-data');
                const predictionResponse = await axios.get('/api/latest-predictions');

                const sensorData = sensorResponse.data || [];
                const predictions = predictionResponse.data || [];

                let tableBody = '';

                // Ambil jumlah data yang lebih banyak untuk menghindari error
                let maxLength = Math.max(sensorData.length, predictions.length);

                for (let i = 0; i < maxLength; i++) {
                    let sensor = sensorData[i] || {};
                    let prediction = predictions[i] || {};

                    tableBody += `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${sensor.temperature ?? '-'}</td>
                            <td>${sensor.humidity ?? '-'}</td>
                            <td>${sensor.created_at ? new Date(sensor.created_at).toLocaleString() : '-'}</td>
                            <td>${prediction.predicted_suhu ?? '-'}</td>
                            <td>${prediction.predicted_kelembaban ?? '-'}</td>
                            <td>${prediction.prediction_datetime ? new Date(prediction.prediction_datetime).toLocaleString() : '-'}</td>
                        </tr>
                    `;
                }

                document.getElementById('sensorTableBody').innerHTML = tableBody;
            } catch (error) {
                console.error("Gagal mengambil data:", error);
                document.getElementById('sensorTableBody').innerHTML =
                    `<tr><td colspan="7" style="text-align: center;">Gagal memuat data</td></tr>`;
            }
        }

        setInterval(fetchSensorData, 10000);
        fetchSensorData();
    </script>
@endsection