@extends('web.layout')
@section('page-title', 'Dashboard')
@section('page-content')

    @if (empty($devices))
        No Devices
    @else
        <div class="row">
            @foreach ($devices as $device)
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h3><i class="fas fa-microchip" style="margin-right: 10px;"></i><b>{{ $device['device_nickname'] }}</b><br><small>{{ $device['device_type'] }}</small></h3>
                            @if ( $device['sensors']['count'] == 0 )
                                <p>No sensors found</p>
                            @else
                                <div class="row">
                                    @foreach ($device['sensors']['data'] as $sensor)
                                        @if ($sensor['sensor_behaviour'] ==  'temp-sensor')
                                            @include('web.dashboard.widgets._chart', ['device' => $device,'sensor' => $sensor])
                                        @endif
                                        @if ($sensor['sensor_behaviour'] ==  'switch')
                                            @include('web.dashboard.widgets._switch', ['device' => $device,'sensor' => $sensor])
                                        @endif
                                        @if ($sensor['sensor_behaviour'] ==  'power-reader-3')
                                            {{-- @include('web.dashboard.widgets._chart_p3', ['device' => $device,'sensor' => $sensor]) --}}
                                        
                                            <div class="row three-phase-numbers" data-live-url="{{ webPermalink('sensor/fetch-reading/'.$sensor['ss_id'].'/'.$device['device_id'].'/3phase') }}" >
                                                @for ($i = 1; $i <= 3; $i++)
                                                    <div class="col-lg-4">
                                                        <div class="card" style="box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
                                                            <div class="card-body">
                                                                <p><b>Phase {{ $i }}</b></p>
                                                                <div class="row">
                                                                    <div class="col">
                                                                        Watt<br>
                                                                        <span id="p_{{ $i }}_w" style="font-size: 2rem;">-</span>
                                                                    </div>
                                                                    <div class="col">
                                                                        Voltage<br>
                                                                        <span id="p_{{ $i }}_v" style="font-size: 2rem;">-</span>
                                                                    </div>
                                                                    <div class="col">
                                                                        Amps<br>
                                                                        <span id="p_{{ $i }}_a" style="font-size: 2rem;">-</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endfor
                                            </div>

                                            

                                        @endif
                                    @endforeach
                                </div>
                            @endif
                            <p><i class="fas fa-map-signs"></i> {{ $device['location']['location_name'] }} - {{ $device['location']['room_name'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    @include('web.dashboard.script')

@endsection