<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Environmental Data Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
         body {
            font-family: 'Cairo', 'Raleway', sans-serif;
        }

        #line-chart {
            width: 100%;
            height: 400px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        .header h2 {
            margin-top: 40px;
        }

        .logo {
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- Header with Logos -->
        <div class="header">
            <img src="{{ asset('week.png') }}" alt="Left Logo" class="logo"
                style="width:220px !important">
            <h2 class="text-center">Environmental Dashboard</h2>
            <img src="{{ asset('Asset 1.png') }}" alt="Right Logo" class="logo">
        </div>

        <!-- Content -->
        <div class="container mt-4">
            @if(session('device_not_found'))
            <div class="alert alert-warning text-center" role="alert">
                Please start the station to display data.
            </div>
        @endif
            <div class="card">
                <div class="card-body d-flex justify-content-between">
                    <!-- Left aligned title -->
                    <h3 class="card-title text-left">Station No : {{$latestMaster->mn}}</h3>

                    <!-- Display master->data_time on the right -->
                    <p class="ml-auto">
                        <strong>Location: </strong>إسبوع البيئة 2025
                        
                    </p>
                    <p class="ml-auto">
                        <strong>Real Time:
                        </strong>{{ \Carbon\Carbon::parse($latestMaster->data_time)->format('Y-m-d H:i:s') }}
                    </p>
                </div>
                <div class="card-body">
                    <div class="row text-center my-4">
                        <!-- Loop through dataList to display all readings -->
                        @foreach ($latestDataList as $item)
                            <div class="col-md-2">
                                <p><strong>{{ $item->name ?? 'N/A' }}</strong>: {{ $item->value ?? 'N/A' }}
                                    {{ $item->unit ?? 'N/A' }}</p>
                            </div>
                        @endforeach
                    </div>

                    <!-- Line Chart -->
                    <canvas id="mastersChart" width="400" height="150"></canvas>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            // Reload الصفحة كل 60 ثانية (60000 ملي ثانية)
            setInterval(function() {
                window.location.reload();
            }, 60000);
        </script>
        <!-- Scripts -->
        <script>
            // Prepare data for the chart
            const masterLabels = @json($recentMasters->pluck('data_time')->map(fn($date) => \Carbon\Carbon::parse($date)->format('Y-m-d H:i')));
            const masterData = @json(
                $recentMasters->map(function ($master) {
                    return $master->dataLists->map(fn($data) => ['name' => $data->code->name, 'value' => $data->value]);
                }));

            // Prepare datasets for each parameter
            const datasets = [];
            const parameterNames = {}; // A map to avoid duplicate parameters

            masterData.forEach(master => {
                master.forEach(data => {
                    if (!parameterNames[data.name]) {
                        parameterNames[data.name] = {
                            label: data.name,
                            data: Array(masterLabels.length).fill(null), // Initialize an empty array
                            borderColor: `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 1)`,
                            borderWidth: 2,
                            fill: false
                        };
                        datasets.push(parameterNames[data.name]);
                    }
                });
            });

            // Fill datasets with data points
            masterData.forEach((master, index) => {
                master.forEach(data => {
                    parameterNames[data.name].data[index] = data.value;
                });
            });

            // Create the chart
            const ctx = document.getElementById('mastersChart').getContext('2d');
            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: masterLabels, // X-axis labels (timestamps)
                    datasets: datasets // Y-axis datasets (parameter values)
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Time'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Values'
                            }
                        }
                    }
                }
            });
        </script>


</body>

</html>
