@extends('layouts.app')

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

@section('content')

{{-- ═══ STATISTIK ATAS ═══ --}}
<div class="row g-3 mb-4">

    {{-- Total Sensor --}}
    <div class="col-md">
        <div class="stat-card">
            <div class="stat-card-body">
                <div class="stat-icon" style="background: linear-gradient(135deg,#1a9eb5,#000000);">
                    <i class="bi bi-cpu-fill"></i>
                </div>
                <div>
                    <div class="stat-label">Total Sensor</div>
                    <div class="stat-value">{{ $total_sensor }}</div>
                </div>
            </div>
            <div class="stat-bar" style="background: linear-gradient(90deg,#1a9eb5,#67e8f9);"></div>
        </div>
    </div>

    {{-- Sensor Terpakai --}}
    <div class="col-md">
        <div class="stat-card">
            <div class="stat-card-body">
                <div class="stat-icon" style="background: linear-gradient(135deg,#6366f1,#000000);">
                    <i class="bi bi-plugin"></i>
                </div>
                <div>
                    <div class="stat-label">Sensor Terpakai</div>
                    <div class="stat-value" style="color:#4f46e5;">{{ $total_terpakai }}</div>
                </div>
            </div>
            <div class="stat-bar" style="background: linear-gradient(90deg,#6366f1,#a5b4fc);"></div>
        </div>
    </div>

    {{-- Sensor Normal --}}
    <div class="col-md">
        <div class="stat-card">
            <div class="stat-card-body">
                <div class="stat-icon" style="background: linear-gradient(135deg,#10b981,#000000);">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <div>
                    <div class="stat-label">Sensor Normal</div>
                    <div class="stat-value" style="color:#059669;">{{ $total_normal }}</div>
                </div>
            </div>
            <div class="stat-bar" style="background: linear-gradient(90deg,#10b981,#6ee7b7);"></div>
        </div>
    </div>

    {{-- Sensor Waspada (Early Warning) --}}
    <div class="col-md">
        <div class="stat-card">
            <div class="stat-card-body">
                <div class="stat-icon" style="background: linear-gradient(135deg,#f59e0b,#000000);">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
                <div>
                    <div class="stat-label">Sensor Waspada</div>
                    <div class="stat-value" style="color:#d97706;">{{ $total_waspada ?? 0 }}</div>
                </div>
            </div>
            <div class="stat-bar" style="background: linear-gradient(90deg,#f59e0b,#fcd34d);"></div>
        </div>
    </div>

    {{-- Sensor Bahaya --}}
    <div class="col-md">
        <div class="stat-card">
            <div class="stat-card-body">
                <div class="stat-icon" style="background: linear-gradient(135deg,#ef4444,#000000);">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>
                <div>
                    <div class="stat-label">Sensor Bahaya</div>
                    <div class="stat-value" style="color:#dc2626;">{{ $total_bahaya }}</div>
                </div>
            </div>
            <div class="stat-bar" style="background: linear-gradient(90deg,#ef4444,#fca5a5);"></div>
        </div>
    </div>

</div>


{{-- ═══ STATUS SENSOR TERKINI ═══ --}}
<div class="section-label">
    <i class="bi bi-broadcast" style="color:var(--primary)"></i> Status Sensor Terkini
</div>

<div class="row g-3 mb-4">
@foreach($monitoring_terbaru as $index => $m)
@php
    $status  = $m->batasPeringatan->status_ket ?? 'normal';
    $isWaspada = $m->is_waspada ?? false;
    $nilai   = $m->nilai;
    $sensor  = $m->jenisSensor->nama_sensor;

    $ranges = [
        'ph_level'  => ['min' => 0,    'max' => 14,   'unit' => 'pH'],
        'TDS'       => ['min' => 1500, 'max' => 2000,  'unit' => 'ppm'],
        'turbidity' => ['min' => 0,    'max' => 1000,  'unit' => 'NTU'],
        'suhu_air'  => ['min' => 25,   'max' => 35,    'unit' => '°C'],
    ];
    $range = $ranges[$sensor] ?? ['min' => 0, 'max' => 100, 'unit' => ''];

    // Warna per sensor (warna bersih)
    $warnaSensor = [
        'ph_level'  => ['accent' => '#1a9eb5', 'bg' => '#e8f6f9', 'bar' => '#67e8f9'],
        'TDS'       => ['accent' => '#10b981', 'bg' => '#ecfdf5', 'bar' => '#6ee7b7'],
        'turbidity' => ['accent' => '#f59e0b', 'bg' => '#fffbeb', 'bar' => '#fcd34d'],
        'suhu_air'  => ['accent' => '#ef4444', 'bg' => '#fff5f5', 'bar' => '#fca5a5'],
    ];
    $w = $warnaSensor[$sensor] ?? ['accent' => '#1a9eb5', 'bg' => '#e8f6f9', 'bar' => '#67e8f9'];

    // Cek apakah sensor punya data (nilai null = sensor baru tanpa data)
    $tidakAdaData = is_null($nilai);

    // Tentukan badge class & label
    if ($tidakAdaData) {
        $badgeClass  = 'normal';
        $labelStatus = 'Normal';
    } elseif (in_array($status, ['bahayakurang', 'bahayalebih'])) {
        $badgeClass  = $status;
        $labelStatus = $status === 'bahayakurang' ? 'Bahaya Kurang' : 'Bahaya Lebih';
    } elseif ($isWaspada) {
        $badgeClass  = 'waspada';
        $labelStatus = 'Waspada';
    } else {
        $badgeClass  = 'normal';
        $labelStatus = 'Normal';
    }

    $sensorLabel = [
        'ph_level'  => 'pH Level',
        'TDS'       => 'TDS',
        'turbidity' => 'Turbidity',
        'suhu_air'  => 'Suhu Air',
    ][$sensor] ?? strtoupper($sensor);
@endphp

<div class="col-md-3 d-flex">
    <div class="card-clean p-0 overflow-hidden d-flex flex-column w-100">

        {{-- Header warna sensor --}}
        <div class="px-4 pt-4 pb-2" style="background:{{ $w['bg'] }}; border-bottom:2px solid {{ $w['accent'] }}20;">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <div style="font-size:12px; font-weight:700; color:{{ $w['accent'] }}; text-transform:uppercase; letter-spacing:1px;">
                    {{ $sensorLabel }}
                </div>
                <span class="badge-{{ $badgeClass }}">{{ $labelStatus }}</span>
            </div>
        </div>

        @if(!$tidakAdaData)
        {{-- Gauge canvas --}}
        <div class="text-center py-2 px-3">
            <canvas id="gauge-{{ $index }}" width="200" height="120"></canvas>
        </div>

        {{-- Nilai besar --}}
        <div class="text-center pb-1">
            <span style="font-family:'Poppins',sans-serif; font-size:2.2rem; font-weight:700; color:{{ $w['accent'] }};">
                {{ $nilai }}
            </span>
            <span style="font-size:14px; color:#718096; font-weight:500;"> {{ $range['unit'] }}</span>
        </div>

        {{-- Keterangan --}}
        <div class="px-4 pb-2 text-center flex-grow-1 d-flex align-items-center justify-content-center" style="font-size:12px; color:#718096; min-height:40px;">
            {{ $m->batasPeringatan->keterangan ?? 'Dalam batas normal' }}
        </div>

        {{-- Waktu --}}
        <div class="px-4 pb-3 text-center" style="font-size:11px; color:#a0aec0;">
            <i class="bi bi-clock me-1"></i>{{ $m->create_at }}
        </div>
        @else
        {{-- Belum ada data --}}
        <div class="text-center py-4 flex-grow-1 d-flex flex-column align-items-center justify-content-center">
            <div style="font-size:3rem; color:#e2e8f0; margin-bottom:8px;">
                <i class="bi bi-dash-circle"></i>
            </div>
            <div style="font-size:11px; color:#a0aec0; font-weight:500;">
                Belum ada data monitoring
            </div>
        </div>
        @endif

        {{-- Garis warna bawah --}}
        <div style="height:4px; background:linear-gradient(90deg, {{ $w['accent'] }}, {{ $w['bar'] }});"></div>
    </div>
</div>
@endforeach
</div>


{{-- ═══ GRAFIK TREN ═══ --}}
<div class="section-label">
    <i class="bi bi-graph-up-arrow" style="color:var(--primary)"></i> Grafik Tren Sensor
</div>

<div class="row g-3 mb-4">
    @foreach($grafik_data as $index => $grafik)
    <div class="col-md-6">
        <div class="card-clean p-0">
            <div class="card-header">
                <i class="bi bi-activity me-2" style="color:var(--primary)"></i>
                {{ $grafik['nama'] }}
            </div>
            <div class="p-3">
                <canvas id="chart-{{ $index }}" height="100"></canvas>
            </div>
        </div>
    </div>
    @endforeach
</div>


{{-- ═══ RIWAYAT PERINGATAN ═══ --}}
<div class="section-label">
    <i class="bi bi-bell" style="color:var(--primary)"></i> Riwayat Peringatan
</div>

<div class="card-clean mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-table me-2"></i>Data Peringatan Terbaru</span>
        @if($monitoring_bahaya->count() > 0)
        <span class="badge" style="background:#fee2e2;color:#991b1b;border-radius:20px;padding:4px 10px;font-size:11px;">
            {{ $monitoring_bahaya->count() }} Peringatan
        </span>
        @endif
    </div>
    <div class="table-responsive">
        <table class="table table-clean mb-0">
            <thead>
                <tr>
                    <th>Sensor</th>
                    <th>Nilai</th>
                    <th>Status</th>
                    <th>Keterangan</th>
                    <th>Waktu</th>
                </tr>
            </thead>
            <tbody>
                @forelse($monitoring_bahaya as $m)
                @php
                    $status = $m->batasPeringatan->status_ket ?? '';
                    $rowClass = match($status) {
                        'bahayakurang' => 'row-bahayakurang',
                        'bahayalebih'  => 'row-bahayalebih',
                        default        => ''
                    };
                @endphp
                <tr class="{{ $rowClass }}">
                    <td>
                        <span style="font-weight:600; color:var(--primary)">
                            {{ strtoupper($m->jenisSensor->nama_sensor) }}
                        </span>
                    </td>
                    <td style="font-weight:700; color:#2d3748;">{{ $m->nilai }}</td>
                    <td>
                        <span class="badge-{{ $status }}">
                            {{ $status === 'bahayakurang' ? 'Kurang' : 'Lebih' }}
                        </span>
                    </td>
                    <td style="color:#718096; font-size:13px;">
                        {{ $m->batasPeringatan->keterangan ?? '-' }}
                    </td>
                    <td style="color:#a0aec0; font-size:12px;">
                        <i class="bi bi-clock me-1"></i>{{ $m->create_at }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-5" style="color:#a0aec0;">
                        <i class="bi bi-check-circle fs-3 d-block mb-2" style="color:#10b981"></i>
                        <span style="font-size:13px;">Tidak ada peringatan saat ini</span>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ═══ EARLY WARNING — SENSOR DALAM PEMANTAUAN ═══ --}}
@if(isset($monitoring_waspada) && $monitoring_waspada->count() > 0)
<div class="section-label">
    <i class="bi bi-graph-up-arrow" style="color:var(--primary)"></i> Early Warning — Sensor Dalam Pemantauan
</div>

<div class="card-clean mb-4" style="border-left:3px solid #f59e0b;">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-eye me-2"></i>Tren Mendekati Batas (Belum Bahaya)</span>
        <span class="badge" style="background:#fef3c7;color:#92400e;border-radius:20px;padding:4px 10px;font-size:11px;">
            {{ $monitoring_waspada->count() }} Sensor
        </span>
    </div>
    <div class="table-responsive">
        <table class="table table-clean mb-0">
            <thead>
                <tr>
                    <th>Sensor</th>
                    <th>Nilai Terbaru</th>
                    <th>Status</th>
                    <th>Waktu</th>
                </tr>
            </thead>
            <tbody>
                @foreach($monitoring_waspada as $m)
                <tr class="row-waspada">
                    <td>
                        <span style="font-weight:600; color:var(--primary)">
                            {{ strtoupper($m->jenisSensor->nama_sensor) }}
                        </span>
                    </td>
                    <td style="font-weight:700; color:#2d3748;">{{ $m->nilai }}</td>
                    <td><span class="badge-waspada">Waspada</span></td>
                    <td style="color:#a0aec0; font-size:12px;">
                        <i class="bi bi-clock me-1"></i>{{ $m->create_at }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="card-footer px-4 py-2" style="font-size:12px; color:#92400e;">
        <i class="bi bi-info-circle me-1"></i>
        Nilai sensor masih dalam batas normal, namun tren 5 pembacaan terakhir bergerak konsisten mendekati ambang batas.
    </div>
</div>
@endif

@endsection

@section('scripts')
<script>
const monitoringData = @json($gauge_data);
const sensorNames    = @json($monitoring_terbaru->pluck('jenisSensor.nama_sensor')->values());

// Warna accent per sensor (light theme)
const warnaSensor = {
    'ph_level':  '#1a9eb5',
    'TDS':       '#10b981',
    'turbidity': '#f59e0b',
    'suhu_air':  '#ef4444',
};

// ── Gauge rendering ──────────────────────────────────────
monitoringData.forEach((data, index) => {
    const ctx = document.getElementById('gauge-' + index);
    if (!ctx || data.nilai === null) return;

    const sensorName = sensorNames[index];
    const warna = warnaSensor[sensorName] || '#1a9eb5';
    const persen = Math.min(1, Math.max(0, (data.nilai - data.min) / (data.max - data.min)));
    const angle  = Math.PI + (persen * Math.PI);

    const c = ctx.getContext('2d');
    const cx = 100, cy = 110, r = 80;

    // Track background
    c.beginPath();
    c.arc(cx, cy, r, Math.PI, 2 * Math.PI);
    c.strokeStyle = '#e2e8f0';
    c.lineWidth = 14;
    c.lineCap = 'round';
    c.stroke();

    // Value arc
    c.beginPath();
    c.arc(cx, cy, r, Math.PI, angle);
    c.strokeStyle = warna;
    c.lineWidth = 14;
    c.lineCap = 'round';
    c.stroke();

    // Needle
    const nx = cx + (r - 10) * Math.cos(angle);
    const ny = cy + (r - 10) * Math.sin(angle);
    c.beginPath();
    c.moveTo(cx, cy);
    c.lineTo(nx, ny);
    c.strokeStyle = '#2d3748';
    c.lineWidth = 2;
    c.stroke();

    // Center dot
    c.beginPath();
    c.arc(cx, cy, 6, 0, 2 * Math.PI);
    c.fillStyle = warna;
    c.fill();

    // Min/max labels
    c.font = '11px Inter, sans-serif';
    c.fillStyle = '#a0aec0';
    c.fillText(data.min, 16, cy + 18);
    c.fillText(data.max, 165, cy + 18);
});

// ── Grafik tren ──────────────────────────────────────────
const grafikData  = @json($grafik_data);
const warnaGrafik = ['#1a9eb5', '#10b981', '#f59e0b', '#ef4444'];

// Rentang Y: [min, max, step] per index — null = auto (sama seperti halaman monitoring)
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
];

grafikData.forEach((sensor, index) => {
    const ctx = document.getElementById('chart-' + index);
    if (!ctx) return;

    const warna = warnaGrafik[index % warnaGrafik.length];
    const yc    = yConfig[index] || [null, null, null];

    // Opsi sumbu Y (sama seperti halaman monitoring)
    const yOpts = {
        title: {
            display: true,
            text: sensor.nama,
            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];
    if (yc[0] !== null || yc[1] !== null) {
        yOpts.ticks.callback = function(value) {
            return value.toFixed(1);
        };
    }

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: sensor.labels,
            datasets: [{
                label: sensor.nama,
                data: sensor.values,
                borderColor: warna,
                backgroundColor: warna + '18',
                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',
                    titleColor: '#2d3748',
                    bodyColor: '#2d3748',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    padding: 10,
                }
            },
            scales: {
                x: {
                    ticks: {
                        color: '#a0aec0',
                        font: { size: 9 },
                        maxRotation: 45,
                        maxTicksLimit: 12,
                    },
                    grid: { display: false }
                },
                y: yOpts
            }
        }
    });
});

// ── Auto refresh countdown ───────────────────────────────
let countdown = 3600;
const refreshEl  = document.getElementById('refresh-info');
const refreshEl2 = document.getElementById('refresh-info-2');

setInterval(() => {
    countdown--;
    const txt = `Auto refresh: ${countdown}s`;
    if (refreshEl)  refreshEl.textContent  = txt;
    if (refreshEl2) refreshEl2.textContent = txt;
    if (countdown <= 0) location.reload();
}, 1000);
</script>
@endsection