@extends('admin-panel.layout')
@section('page-title', 'Dashboard')
@section('page-content')
{{-- <div id="pg-content">Loading...</div> --}}
{{-- @include('admin-panel.dashboard.script') --}}

@foreach ($devices as $primaryLocation => $pData)
    <div class="card">
        <div class="card-header">
            <h4>{{ $primaryLocation }}</h4>
        </div>
        <div class="card-body">
            @foreach ($pData as $aLoc => $device)
            <div class="mb-3">
                <h5>{{ $aLoc }}</h5>
                @if ( empty($device) )
                    <p>No Device</p>
                @else
                    <div class="row">
                        @foreach ($device as $item)
                            @include('admin-panel.dashboard._temp-sensor', [
                                'device' => $item
                            ])
                        @endforeach
                    </div>
                @endif
            </div>
            @endforeach

        </div>
    </div>
@endforeach

<script>
    $(document).ready(function(){

        function req( deviceId ) {
            hfPostRequest(`/cp/dashboard/data/${deviceId}`).then(response => {
                console.log(response);
                if ( response.status == 200 ) {
                    
                }
            });
        }

        let allDevices = document.querySelectorAll('.device-reading');

        if ( allDevices.length > 0 ) {
            setInterval(() => {
                for ( let i = 0; i < allDevices.length; i++ ) {
    
                    // Requesting
                    req( allDevices[i].dataset.deviceId );
    
                }
            }, 5000);
        }

        console.log(allDevices.length);

    });
</script>


@endsection