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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">


    <title>Tugas Akhir</title>
    {{-- jquery untuk proses realtime --}}
    <script type="text/javascript" src="{{ 'jquery/jquery.min.js' }}"></script>

    {{-- ajax untuk realtime  --}}
    <script type="text/javascript">
        $(document).ready(function() {
            setInterval(function() {
                $("#suhu").load(
                    "{{ url('bacasuhu') }}"
                ); //baca suhu adalah adalah sebuah method di dalam controller SensorHDT22// Baca suhu akan mengambil nilai sensor yang ada di database
                $("#kelembaban").load(
                    "{{ url('bacakelembaban') }}"
                ); //baca kelembaban adalah adalah sebuah method di dalam controller SensorHDT22// Baca suhu akan mengambil nilai sensor yang ada di database
            }, 1000); //1000  = 1 Detik 
        });
    </script>
</head>

<body>
    {{-- <h1>Hello, world!</h1> --}}

    {{-- Tampilan Untuk Sensor - Start --}}
    <div class="container" style="text-align: center; margin-top:50px;">
        {{-- pada baris ini.... tambahkan gambar / logo jika perlu --}}
        <h2>Dashboard </h2>
        {{-- nilai sensor ditampikan dalam bentuk kartu - stard --}}
        <div class="container mt-5">

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="text-center">Suhu Ruangan</h5>
                        </div>
                        <div class="card-body text-center">
                            <i class="fas fa-thermometer-half fa-3x mb-3"></i>
                            <h5><span id="suhu">0</span><span
                                    style="font-size: 16px; vertical-align:top;">°C</span>
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="text-center">Kelembaban</h5>
                        </div>
                        <div class="card-body text-center">
                            <i class="fas fa-tint fa-3x mb-3"></i>
                            <h5><span id="kelembaban">0</span><span
                                    style="font-size: 16px; vertical-align:top;">%</span></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--  --}}
        <div class="container mt-5">

            <div class="row">
                {{-- servo --}}
                <div class="col-md-4 col-sm-6">
                    <div class="card">
                        <div class="card-header" style="background-color: aqua">
                            <h5 class="text-center" style="font-size: 18px;">Set Waktu</h5>
                            
                        </div>
                        <div class="card-body" style="padding: 10px;">
                            <div class="form-group" style="margin-bottom: 5px;">
                                <label for="setTime" style="font-size: 14px;">Pilih Waktu:</label>
                                <input type="time" id="setTime" class="form-control form-control-sm"
                                    style="font-size: 14px;">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-sm">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- rtc --}}
                <div class="col-md-4 col-sm-6">
                    <div class="card">
                        <div class="card-header" style="background-color: aqua">
                            <h5 class="text-center" style="font-size: 18px;">RTC</h5>
                        </div>
                        <div class="card-body text-center">
                            <i class="fas fa-tint fa-3x mb-3"></i>
                            <h5><span id="kelembaban">0</span><span
                                    style="font-size: 16px; vertical-align:top;">%</span></h5>
                        </div>
                    </div>
                </div>

                {{-- relay --}}
                <div class="col-md-4 col-sm-6">
                    <div class="card">
                        <div class="card-header" style="background-color: rgb(235, 179, 179)">
                            <h5 class="text-center">Relay</h5>
                        </div>
                        <div class="card-body">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch1"
                                    style="transform: scale(3);">
                                <label class="custom-control-label" for="customSwitch1"
                                    style="font-size: 14px;">OFF</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- nilai sensor ditampikan dalam bentuk kartu- end --}}

    </div>
    {{-- Tampilan Untuk Sensor - end --}}

    <script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- Font Awesome -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">
    </script>



    {{-- include views grafik --}}

</body>



</html>
