@extends('layouts.app')

@section('content')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoring</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: roboto;
            background-color: #f8f9fa;
            padding-top: 50px;
            overflow-y: auto;
        }
        .container {
            max-width: 100%;
            margin: auto;
            overflow-x: auto; /* Tambahkan ini untuk membuat container bisa digulir */
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #4D869C;
            border-radius: 10px 10px 0 0;
            color: #fff;
            font-size: 24px;
            padding: 20px;
            text-align: center;
        }
        .card-body {
            padding: 20px;
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 300px;
            margin: 20px auto;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .chart {
            width: auto;
            height: 100%;
        }
        .row {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        @media (max-width: 576px) {
            .card-header {
                font-size: 20px;
            }
            .chart-container {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                TDS Data
            </div>
            <div class="card-body">
                @if ($tdsData->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No data available for TDS
                    </div>
                @else
                    <div class="row">
                        <div class="chart-container">
                            <canvas id="tdsChart" class="chart"></canvas>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Waterflow1 Data
            </div>
            <div class="card-body">
                @if ($waterflow1Data->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No data available for Waterflow1
                    </div>
                @else
                    <div class="row">
                        <div class="chart-container">
                            <canvas id="waterflow1Chart" class="chart"></canvas>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Waterflow2 Data
            </div>
            <div class="card-body">
                @if ($waterflow2Data->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No data available for Waterflow2
                    </div>
                @else
                    <div class="row">
                        <div class="chart-container">
                            <canvas id="waterflow2Chart" class="chart"></canvas>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Ultrasonik Data
            </div>
            <div class="card-body">
                @if ($ultrasonikData->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No data available for Ultrasonik
                    </div>
                @else
                    <div class="row">
                        <div class="chart-container">
                            <canvas id="ultrasonikChart" class="chart"></canvas>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if (!$tdsData->isEmpty() || !$waterflow1Data->isEmpty() || !$waterflow2Data->isEmpty() || !$ultrasonikData->isEmpty())
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var ctxTds = document.getElementById('tdsChart').getContext('2d');
        var ctxWaterflow1 = document.getElementById('waterflow1Chart').getContext('2d');
        var ctxWaterflow2 = document.getElementById('waterflow2Chart').getContext('2d');
        var ctxUltrasonik = document.getElementById('ultrasonikChart').getContext('2d');

        var tdsLabels = {!! json_encode($tdsData->pluck('tanggal')) !!};
        var tdsData = {!! json_encode($tdsData->pluck('tds')) !!};

        var waterflow1Labels = {!! json_encode($waterflow1Data->pluck('tanggal')) !!};
        var waterflow1ArusData = {!! json_encode($waterflow1Data->pluck('arus')) !!};
        var waterflow1TotalData = {!! json_encode($waterflow1Data->pluck('total')) !!};

        var waterflow2Labels = {!! json_encode($waterflow2Data->pluck('tanggal')) !!};
        var waterflow2ArusData = {!! json_encode($waterflow2Data->pluck('arus')) !!};
        var waterflow2TotalData = {!! json_encode($waterflow2Data->pluck('total')) !!};

        var ultrasonikLabels = {!! json_encode($ultrasonikData->pluck('tanggal')) !!};
        var ultrasonikData = {!! json_encode($ultrasonikData->pluck('ultrasonik')) !!};

        var tdsChart = new Chart(ctxTds, {
            type: 'line',
            data: {
                labels: tdsLabels,
                datasets: [{
                    label: 'TDS',
                    data: tdsData,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontColor: '#36a2eb'
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: '#36a2eb',
                    titleFontColor: '#fff',
                    bodyFontColor: '#fff',
                    footerFontColor: '#fff',
                    footerFontSize: 14,
                    footerAlign: 'center',
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Date: ' + tdsLabels[tooltipItems[0].index];
                        },
                        label: function(tooltipItem, data) {
                            return 'Value: ' + tooltipItem.yLabel;
                        },
                        footer: function(tooltipItems, data) {
                            return 'Timestamp: ' + new Date().toLocaleString();
                        }
                    }
                }
            }
        });

        var waterflow1Chart = new Chart(ctxWaterflow1, {
            type: 'bar',
            data: {
                labels: waterflow1Labels,
                datasets: [{
                    label: 'Arus',
                    data: waterflow1ArusData,
                    backgroundColor: '#00FFFF',
                    borderColor: '#007bff',
                    borderWidth: 1
                }, {
                    label: 'Total',
                    data: waterflow1TotalData,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontColor: '#007bff'
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: '#007bff',
                    titleFontColor: '#fff',
                    bodyFontColor: '#fff',
                    footerFontColor: '#fff',
                    footerFontSize: 14,
                    footerAlign: 'center',
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Date: ' + waterflow1Labels[tooltipItems[0].index];
                        },
                        label: function(tooltipItem, data) {
                            return 'Value: ' + tooltipItem.yLabel;
                        },
                        footer: function(tooltipItems, data) {
                            return 'Timestamp: ' + new Date().toLocaleString();
                        }
                    }
                }
            }
        });

        var waterflow2Chart = new Chart(ctxWaterflow2, {
            type: 'bar',
            data: {
                labels: waterflow2Labels,
                datasets: [{
                    label: 'Arus',
                    data: waterflow2ArusData,
                    backgroundColor: '#00FFFF',
                    borderColor: '#007bff',
                    borderWidth: 1
                }, {
                    label: 'Total',
                    data: waterflow2TotalData,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontColor: '#007bff'
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: '#007bff',
                    titleFontColor: '#fff',
                    bodyFontColor: '#fff',
                    footerFontColor: '#fff',
                    footerFontSize: 14,
                    footerAlign: 'center',
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Date: ' + waterflow2Labels[tooltipItems[0].index];
                        },
                        label: function(tooltipItem, data) {
                            return 'Value: ' + tooltipItem.yLabel;
                        },
                        footer: function(tooltipItems, data) {
                            return 'Timestamp: ' + new Date().toLocaleString();
                        }
                    }
                }
            }
        });

        var ultrasonikChart = new Chart(ctxUltrasonik, {
            type: 'line',
            data: {
                labels: ultrasonikLabels,
                datasets: [{
                    label: 'Ultrasonik',
                    data: ultrasonikData,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#495057'
                        },
                        gridLines: {
                            color: '#e9ecef'
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontColor: '#4bc0c0'
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: '#4bc0c0',
                    titleFontColor: '#fff',
                    bodyFontColor: '#fff',
                    footerFontColor: '#fff',
                    footerFontSize: 14,
                    footerAlign: 'center',
                    callbacks: {
                        title: function(tooltipItems, data) {
                            return 'Date: ' + ultrasonikLabels[tooltipItems[0].index];
                        },
                        label: function(tooltipItem, data) {
                            return 'Value: ' + tooltipItem.yLabel;
                        },
                        footer: function(tooltipItems, data) {
                            return 'Timestamp: ' + new Date().toLocaleString();
                        }
                    }
                }
            }
        });
    </script>
    @endif
</body>
</html>
@endsection
