<!DOCTYPE html>
<html lang="id">
<head>
    <title>Smart Chili Farm Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body { background-color: #f4f6f9; }
        .navbar { background-color: #2e7d32; }
        .navbar-brand { color: white !important; font-weight: bold; }
        .card { border-radius: 12px; }
        .sensor-value { font-size: 28px; font-weight: bold; }

        /* Thumbnail timelapse */
        .small-img {
            height: 70px;
            width: 100%;
            object-fit: cover;
            border-radius: 8px;
            display: block;
        }

        /* Gambar utama responsif */
        .main-photo {
            width: 100%;
            height: auto;
            max-height: 400px;
            object-fit: cover;
            border-radius: 8px;
        }

        /* Info overlay di bawah foto */
        .photo-meta {
            background: #1a1a1a;
            color: #e2e8f0;
            border-radius: 0 0 8px 8px;
            padding: 8px 14px;
            font-size: 13px;
            word-break: break-word;
        }

        /* Sensor value ukuran adaptif */
        @media (max-width: 576px) {
            .sensor-value { font-size: 22px; }
            .small-img { height: 56px; }
            .photo-meta { font-size: 11px; }
        }
    </style>
</head>

<body>

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <span class="navbar-brand">Smart Chili Farm Dashboard</span>
    </div>
</nav>

<div class="container mt-4 pb-4">

    <div class="row g-3">

        <!-- LEFT: Foto Utama -->
        <div class="col-12 col-md-8">
            <div class="card h-100">
                <div class="card-header fw-semibold">Recent Photograph</div>
                <div class="card-body p-0">
                    @if($image)
                        <img src="{{ asset('storage/'.$image->image_path) }}"
                             class="main-photo"
                             alt="Foto Tanaman">
                        <div class="photo-meta">
                            TEMP: {{ $data->suhu }}°C &nbsp;|&nbsp;
                            HUM: {{ $data->kelembapan }}% &nbsp;|&nbsp;
                            SOIL: {{ $data->soil }}% &nbsp;|&nbsp;
                            DATE: {{ $data->created_at }}
                        </div>
                    @else
                        <div class="p-4 text-center text-muted">No Image Available</div>
                    @endif
                </div>
            </div>
        </div>

        <!-- RIGHT: Sensor + Timelapse -->
        <div class="col-12 col-md-4">

            <!-- Sensor Status -->
            <div class="card mb-3">
                <div class="card-header fw-semibold">Sensor Status</div>
                <div class="card-body text-center py-3">
                    <p class="mb-1 text-muted small">Temperature</p>
                    <div class="sensor-value text-danger">{{ $data->suhu ?? 0 }}°C</div>

                    <p class="mt-3 mb-1 text-muted small">Humidity</p>
                    <div class="sensor-value text-success">{{ $data->kelembapan ?? 0 }}%</div>

                    <p class="mt-3 mb-1 text-muted small">Soil Moisture</p>
                    <div class="sensor-value text-primary">{{ $data->soil ?? 0 }}%</div>
                </div>
            </div>

            <!-- Time-lapse -->
            <div class="card">
                <div class="card-header fw-semibold">Time-lapse Progress</div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach($images as $img)
                            <div class="col-4">
                                <img src="{{ asset('storage/'.$img->image_path) }}"
                                     class="small-img"
                                     alt="timelapse">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Chart -->
    <div class="card mt-3">
        <div class="card-header fw-semibold">Temperature & Soil Chart</div>
        <div class="card-body" style="position:relative; min-height:250px;">
            <canvas id="sensorChart"></canvas>
        </div>
    </div>

</div>

<script>
const ctx = document.getElementById('sensorChart');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: {!! json_encode($chartLabels) !!},
        datasets: [
            {
                label: 'Temperature',
                data: {!! json_encode($chartTemp) !!},
                borderColor: 'red',
                backgroundColor: 'rgba(255,0,0,0.05)',
                fill: true,
                tension: 0.4
            },
            {
                label: 'Soil Moisture',
                data: {!! json_encode($chartSoil) !!},
                borderColor: 'green',
                backgroundColor: 'rgba(0,128,0,0.05)',
                fill: true,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true
    }
});
</script>

</body>
</html>
