@extends('layouts.app')

@section('title', 'Monitoring - Hidroponik')
@section('page-title', 'Monitoring')

@section('content')

<div class="section-label">
    <i class="bi bi-graph-up-arrow" style="color:var(--primary)"></i> Grafik Monitoring Sensor Real-Time
    <span id="lastUpdate" class="badge bg-light text-muted ms-2" style="font-size:9px; letter-spacing:0.5px;">
        <i class="bi bi-arrow-repeat me-1"></i>Memuat...
    </span>
</div>

<div class="row g-4" id="chartContainer">
    @php
        $warnaSensor = [
            'ph_level'  => '#1a9eb5',
            'TDS'       => '#10b981',
            'turbidity' => '#f59e0b',
            'suhu_air'  => '#ef4444',
        ];
        $unitSensor = [
            'ph_level'  => 'pH',
            'TDS'       => 'ppm',
            'turbidity' => 'NTU',
            'suhu_air'  => '°C',
        ];
        $labelSensor = [
            'ph_level'  => 'pH Level',
            'TDS'       => 'TDS',
            'turbidity' => 'Turbidity',
            'suhu_air'  => 'Suhu Air',
        ];
    @endphp

    @foreach($grafik_sensor as $index => $grafik)
    @php
        $w     = $warnaSensor[$grafik['nama']] ?? '#1a9eb5';
        $unit  = $unitSensor[$grafik['nama']] ?? '';
        $label = $labelSensor[$grafik['nama']] ?? strtoupper($grafik['nama']);
    @endphp
    <div class="col-md-6">
        <div class="card-clean p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <div class="fw-bold" style="color:{{ $w }}; letter-spacing:2px; font-size:12px; text-transform:uppercase;">
                        <i class="bi bi-circle-fill me-1" style="font-size:8px;"></i>{{ $label }}
                    </div>
                    <div class="small mt-1" style="color:#a0aec0; font-size:10px; letter-spacing:1px;">
                        Satuan: {{ $unit }}
                    </div>
                </div>
                <div class="text-end">
                    <div id="nilai-{{ $index }}" style="font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:700; color:{{ $w }};">
                        @if($grafik['nilai_terkini'] !== null)
                            {{ $grafik['nilai_terkini'] }}
                        @else
                            -
                        @endif
                    </div>
                    <div style="font-size:10px; color:#a0aec0;">{{ $unit }}</div>
                </div>
            </div>
            <canvas id="grafik-{{ $index }}" height="150"></canvas>
        </div>
    </div>
    @endforeach
</div>

@endsection

@section('scripts')
<script>
// Warna & label per sensor (urutan fixed: 0=pH, 1=TDS, 2=Turbidity, 3=Suhu)
const warnaSensor = [
    '#1a9eb5',
    '#10b981',
    '#f59e0b',
    '#ef4444',
];
const unitSensor = [
    'pH',
    'ppm',
    'NTU',
    '°C',
];
const labelSensor = [
    'pH Level',
    'TDS',
    'Turbidity',
    'Suhu Air',
];

// Rentang Y: [min, max, step] per index — null = auto
const yConfig = [
    [2.0, 9.0, 1.0],     // pH: 2.0 - 9.0
    [400, 1800, 200],    // TDS: 400 - 1800
    [0, 100, 10],        // Turbidity: 0 - 100
    [22.0, 35.0, 2.0],   // Suhu: 22 - 35
];

const chartInstances = {};

/**
 * Inisialisasi chart
 */
function initCharts() {
    const data = @json($grafik_sensor);

    data.forEach((sensor, i) => {
        const ctx = document.getElementById('grafik-' + i);
        if (!ctx) return;

        const warna = warnaSensor[i] || '#1a9eb5';
        const label = labelSensor[i] || 'Sensor';
        const yc    = yConfig[i] || [null, null, null];

        // Opsi sumbu Y
        const yOpts = {
            title: {
                display: true,
                text: label,
                color: warna,
                font: { size: 10, family: 'Inter', weight: '600' }
            },
            ticks: {
                color: '#a0aec0',
                font: { size: 9 }
            },
            grid: { color: '#f0f4f7', drawBorder: false }
        };
        if (yc[0] !== null) yOpts.min = yc[0];
        if (yc[1] !== null) yOpts.max = yc[1];
        if (yc[2] !== null) yOpts.ticks.stepSize = yc[2];
        // Format tick agar menampilkan 1 desimal jika min/max bukan bilangan bulat
        if (yc[0] !== null || yc[1] !== null) {
            yOpts.ticks.callback = function(value) {
                return value.toFixed(1);
            };
        }

        chartInstances[i] = new Chart(ctx, {
            type: 'line',
            data: {
                labels: sensor.labels,
                datasets: [{
                    label: label,
                    data: sensor.values,
                    borderColor: warna,
                    backgroundColor: warna + '15',
                    borderWidth: 2.5,
                    pointRadius: 3,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: warna,
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                    tension: 0.3,
                    fill: true,
                    spanGaps: false,
                }]
            },
            options: {
                responsive: true,
                animation: { duration: 300 },
                interaction: { intersect: false, mode: 'index' },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#fff',
                        borderColor: warna,
                        borderWidth: 1,
                        titleColor: '#2d3748',
                        bodyColor: '#2d3748',
                        padding: 10,
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#a0aec0',
                            font: { size: 9 },
                            maxRotation: 45,
                            maxTicksLimit: 12,
                        },
                        grid: { display: false }
                    },
                    y: yOpts
                }
            }
        });
    });
}

/**
 * Fetch & update chart
 */
function fetchAndUpdateCharts() {
    fetch('{{ route("monitoring.grafik-data") }}')
        .then(res => res.json())
        .then(data => {
            const now = new Date();
            document.getElementById('lastUpdate').innerHTML =
                '<i class="bi bi-check-circle-fill me-1" style="color:#10b981;"></i>Update: ' +
                now.toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit', second:'2-digit' });

            data.forEach((sensor, i) => {
                const ch = chartInstances[i];
                if (!ch) return;

                // Nilai terkini
                const el = document.getElementById('nilai-' + i);
                if (el && sensor.nilai_terkini !== null && sensor.nilai_terkini !== undefined) {
                    const old = el.textContent;
                    el.textContent = sensor.nilai_terkini;
                    if (old !== sensor.nilai_terkini) {
                        el.style.transition = 'transform 0.15s';
                        el.style.transform = 'scale(1.25)';
                        setTimeout(() => { el.style.transform = 'scale(1)'; }, 150);
                    }
                }

                // Data chart
                if (sensor.labels && sensor.labels.length) {
                    ch.data.labels = sensor.labels;
                    ch.data.datasets[0].data = sensor.values;

                    // Set Y range ulang (pastikan tidak hilang)
                    const yc = yConfig[i] || [null, null, null];
                    const yOpts = ch.options.scales.y;
                    if (yc[0] !== null) yOpts.min = yc[0];
                    if (yc[1] !== null) yOpts.max = yc[1];
                    if (yc[2] !== null) yOpts.ticks.stepSize = yc[2];

                    ch.update('none');
                }
            });
        })
        .catch(err => console.error('Gagal ambil data grafik:', err));
}

document.addEventListener('DOMContentLoaded', function() {
    initCharts();
    setTimeout(fetchAndUpdateCharts, 1000);
    setInterval(fetchAndUpdateCharts, 5000);
});
</script>
@endsection