@extends('admin.layout.main')
@section('title', 'Dashboard')
@section('content')
    <style>
        h5 {
            font-size: 8px;
        }

        .metric-label {
            font-size: 12px;
        }

        .metric-value h1 {
            font-size: 20px;
        }
    </style>
    <div class="container-fluid dashboard-content">
        <div class="row">
            <div class="col-lg-3">
                <label for="id_device">PILIH DEVICE :</label>
                <select name="id_device" id="id_device" class="form-control">
                    <option value="">-- Semua Device --</option>
                </select>
            </div>
            <div class="col-lg-3">
                <label for="date_range">PILIH TANGGAL :</label>
                <input type="date" id="date_range" name="date_range" class="form-control">
                <br>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-PH">pH TANAH</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-PH" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-PH">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-MOIS">KELEMBAPAN</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-MOIS" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-MOIS">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-AIR1">LEVEL AIR 1 (Wadah Pupuk)</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-AIR1" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-AIR1">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-AIR2">LEVEL AIR 2 (Wadah Air)</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-AIR2" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-AIR2">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-POMPA1">POMPA 1 (Supply Pupuk)</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-POMPA1" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-POMPA1">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-muted" id="label-S-POMPA2">POMPA 2 (Supply Air)</h5>
                        <div class="metric-value d-inline-block">
                            <h1 id="sensor-S-POMPA2" class="mb-1">-</h1>
                        </div>
                        <div class="metric-label d-inline-block float-right" id="status-S-POMPA2">
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">Grafik trend data sensor</h5>
                    <div class="card-body">
                        <div id="chartSensorRealtime" class="ct-golden-section"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        async function loadDevices() {
            try {
                const response = await fetch('/api/devices');
                const result = await response.json();
                const deviceSelect = document.getElementById('id_device');
                deviceSelect.innerHTML = '<option value="">-- Semua Device --</option>';
                if (result.success && result.data.length > 0) {
                    result.data.forEach(device => {
                        const option = document.createElement('option');
                        option.value = device.id_device;
                        option.textContent = `${device.name} (${device.id_device})`;
                        deviceSelect.appendChild(option);
                    });
                    // Set default device ke perangkat pertama jika ada
                    deviceSelect.value = result.data[0].id_device;
                    return result.data[0].id_device; // Return default device ID
                }
            } catch (error) {
                console.error("Gagal memuat daftar device:", error);
            }
        }

        async function fetchChartData(deviceId, date) {
            try {
                const response = await fetch('/api/dashboard/graph-data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        id_device: deviceId,
                        date: date // Kirim tanggal tunggal
                    })
                });
                const result = await response.json();
                if (result.success) {
                    updateChart(result.data, result.xAxis);
                } else {
                    console.error("Error fetching chart data:", result.message);
                }
            } catch (error) {
                console.error("API Error:", error);
            }
        }

        function updateChart(dataArray, xAxisArray) {
            const labels = xAxisArray.slice(1); // Hilangkan 'x' dari label
            const series = dataArray.map(series => ({
                name: series[0], // nama sensor sebagai legend
                data: series.slice(1).map(val => parseFloat(val)).filter(v => !isNaN(
                    v)) // pastikan semua nilai adalah float
            }));
            const options = {
                chart: {
                    type: 'line',
                    height: 500,
                    zoom: {
                        enabled: true
                    },
                    toolbar: {
                        show: true
                    }
                },
                stroke: {
                    curve: 'smooth'
                },
                title: {
                    text: 'Trend Data Sensor',
                    align: 'left'
                },
                xaxis: {
                    categories: labels,
                    title: {
                        text: 'Sensor Time'
                    },
                    labels: {
                        rotate: -45,
                        formatter: function(value) {
                            if (!value || typeof value !== 'string') return '';
                            const parts = value.split(" ");
                            if (parts.length < 2) return value;
                            return parts[1].substring(0, 5);
                        }
                    }
                },
                yaxis: {
                    title: {
                        text: 'Nilai Sensor'
                    }
                },
                tooltip: {
                    shared: true,
                    intersect: false
                },
                legend: {
                    show: true
                }
            };
            const chartElement = document.querySelector("#chartSensorRealtime");
            // Jika sudah ada chart, destroy dulu
            if (window.sensorChart) {
                window.sensorChart.destroy();
            }
            window.sensorChart = new ApexCharts(chartElement, {
                ...options,
                series: series
            });
            window.sensorChart.render();
        }

        async function updateMetricCards(deviceId) {
            try {
                const response = await fetch('/api/dashboard/last-sensor-values', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        id_device: deviceId
                    })
                });
                const result = await response.json();
                if (result.success) {
                    const data = result.data;
                    for (const sensorId in data) {
                        const sensor = data[sensorId];
                        const valueEl = document.getElementById(`sensor-${sensorId}`);
                        const statusEl = document.getElementById(`status-${sensorId}`);
                        if (!valueEl) continue;

                        // Update metric card values and statuses
                        if (sensorId.startsWith('S-POMPA')) {
                            const statusText = sensor.status || "UNKNOWN";
                            valueEl.innerText = statusText;
                            valueEl.className = '';
                            if (statusText === "ON") {
                                valueEl.classList.add('text-success');
                            } else if (statusText === "OFF") {
                                valueEl.classList.add('text-danger');
                            } else {
                                valueEl.classList.add('text-muted');
                            }
                        } else {
                            const value = parseFloat(sensor.latest_value);
                            let suffix = "";
                            let statusText = "";
                            if (['S-MOIS', 'S-AIR1', 'S-AIR2'].includes(sensorId)) {
                                suffix = "%";
                            }
                            if (sensorId === 'S-MOIS') {
                                statusText = value < 50 ? "KERING" : "LEMBAB";
                            } else if (sensorId.startsWith('S-PH')) {
                                statusText = value < 6 ? "ASAM" : value <= 7 ? "NETRAL" : "BASA";
                            } else if (sensorId === 'S-AIR1' || sensorId === 'S-AIR2') {
                                statusText = value < 20 ? "KURANG" : "NORMAL";
                            }
                            valueEl.innerText = value + suffix;
                            statusEl.innerText = statusText;
                            statusEl.className = '';
                            if (["KERING", "ASAM", "BASA", "KURANG"].includes(statusText)) {
                                statusEl.classList.add('text-danger');
                            } else if (["LEMBAB", "NETRAL", "NORMAL"].includes(statusText)) {
                                statusEl.classList.add('text-success');
                            } else {
                                statusEl.classList.add('text-warning');
                            }
                        }
                    }
                } else {
                    console.error("Error fetching last values:", result.message);
                }
            } catch (error) {
                console.error("API Error:", error);
            }
        }

        document.addEventListener("DOMContentLoaded", async () => {
            // Set default tanggal ke hari ini
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('date_range').value = today;

            // Load devices and set default device
            const defaultDeviceId = await loadDevices();

            // Fetch initial data for metric cards and graph
            updateMetricCards(defaultDeviceId);
            fetchChartData(defaultDeviceId, today);

            // Event listener untuk dropdown id_device
            document.getElementById('id_device').addEventListener('change', () => {
                const selectedDeviceId = document.getElementById('id_device').value;
                const selectedDate = document.getElementById('date_range').value;
                updateMetricCards(selectedDeviceId);
                fetchChartData(selectedDeviceId, selectedDate);
            });

            // Event listener untuk date_range
            document.getElementById('date_range').addEventListener('change', () => {
                const selectedDeviceId = document.getElementById('id_device').value;
                const selectedDate = document.getElementById('date_range').value;
                fetchChartData(selectedDeviceId, selectedDate);
            });


            setInterval(() => {
                const selectedDeviceId = document.getElementById('id_device').value;
                updateMetricCards(selectedDeviceId);
            }, 1000);
        });
    </script>
@endpush