@extends('layouts.master')
@section('title')
    @lang('translation.dashboards')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card overflow-hidden">
                <div class="card-body bg-marketplace">
                    <div class="row mx-1">
                        <div class="col-12 col-lg-8">
                            <h4 class="fs-18 lh-base mb-0 mt-2">Selamat datang! Anda masuk sebagai <span
                                    class="text-success">{{ Auth::user()->name }}.</span> </h4>
                            <p class="mb-0 mt-2 pt-1 text-muted">Platform ini dirancang untuk memantau dan kontrol lampu otomatis</p>
                        </div>
                        <div class="col-0 col-lg-2"></div>
                        <div class="col-12 col-lg-2 mt-4 mt-md-0 align-content-center">
                            <form action="javascript:void(0);">
                                <div class="row g-3 mb-0 align-items-center justify-content-between">
                                    <div class="col-sm-auto">
                                         <br>
                                        <h2 id="realTime" class="h2 text-dark">00:00:00</h2>
                                        <script type='text/javascript'>
                                            var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober',
                                                'November', 'Desember'
                                            ];
                                            var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
                                            var date = new Date();
                                            var day = date.getDate();
                                            var month = date.getMonth();
                                            var thisDay = date.getDay(),
                                                thisDay = myDays[thisDay];
                                            var yy = date.getYear();
                                            var year = (yy < 1000) ? yy + 1900 : yy;
                                            document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);

                                            function updateRealTime() {
                                                var now = new Date();
                                                var hours = now.getHours().toString().padStart(2, '0');
                                                var minutes = now.getMinutes().toString().padStart(2, '0');
                                                var seconds = now.getSeconds().toString().padStart(2, '0');
                                                var timeString = hours + ':' + minutes + ':' + seconds;
                                                document.getElementById('realTime').textContent = timeString;
                                            }
                                            setInterval(updateRealTime, 1000);
                                            updateRealTime();
                                        </script>

                                    </div>
                                </div>
                                <!--end row-->
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end col-->
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card crm-widget">
                <div class="card-body p-0">
                    <div class="row row-cols-md-3 row-cols-1">
                        <div class="col col-lg border-end">
                            <div class="py-4 px-3">
                                <h5 class="text-muted text-uppercase fs-13">Kontrol Lampu
                                    <div class="d-flex align-items-center">
                                        <br>
                                        <div class="flex-shrink-0">
                                            <i class="ri-lightbulb-line display-6 text-muted"></i>
                                        <div class="flex-grow-1 ml-3">
                                            <form method="POST" action="{{ route('device.control') }}">
    @csrf
                                         <div class="btn-group material-shadow btn-group-lg" role="group" aria-label="Basic example">
       <button type="submit" name="action" value="on" class="btn btn-success material-shadow-none">On</button>
        <button type="submit" name="action" value="off" class="btn btn-danger material-shadow-none">Off</button>
        <button type="submit" name="action" value="auto" class="btn btn-warning material-shadow-none">Auto</button>
</div>
</form>

                                        </div>
                                    </div>
                            </div>
                        </div><!-- end col -->
                        
                    </div><!-- end row -->

                </div><!-- end card body -->
            </div><!-- end card -->
        </div><!-- end col -->
    </div><!-- end row -->
                           <div class="row">
       

        <div class="col-xl-12">
            <!-- card -->
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1"><i class="ri-sensor-fill me-1"></i>Riwayat Sensor</h4>
                </div><!-- end card header -->

                <div class="card-body">
                    <livewire:sensor-table />


                </div><!-- end card body -->
            </div><!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <div class="row">
        <div class="col">
            <div class="h-100">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1"><i class="ri-lightbulb-line me-1"></i>Riwayat Lampu</h4>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <livewire:lamp-table />

                               
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.insert-btn').on('click', function() {
                var customerId = $(this).data('customer-id');
                var customerName = $(this).data('customer-name');
                $('#formCustomerName').val(customerName);
                $('#formCustomerId').val(customerId);
            });
            
        });
    </script>
   \
    {{-- ini script untuk display 5 --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let rows = document.querySelectorAll("#minPressureTable tbody tr");
            let showAllBtn = document.getElementById("showAllBtn");

            rows.forEach((row, index) => {
                if (index >= 5) {
                    row.style.display = "none";
                }
            });


        });
    </script>
   
    <!-- apexcharts -->
    <script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
    <script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>
    <!-- dashboard init -->
    <script src="{{ URL::asset('build/js/pages/dashboard-nft.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/dashboard-ecommerce.init.js') }}"></script>

@endsection