@if ($pemantauan)

    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <span class="badge bg-label-primary">Info IoT</span>

            </div>

            <div class="col-12 mt-1">
                <table class="table table-bordered">
                    <tr>

                        <td>Nama :</td>
                        <td>{{ $pemantauan->iot->mikrokontroler }} </td>
                    </tr>
                    <tr>

                        <td>Serial :</td>
                        <td>
                            {{ $pemantauan->iot->iot_serial }}
                        </td>
                    </tr>
                    <tr>

                        <td>Status Alat :</td>
                        <td>
                            @if ($isOn)
                                <span class="badge bg-label-success">On</span>
                            @else
                                <span class="badge bg-label-danger">Off</span>
                            @endif
                        </td>

                    </tr>
                    <tr>
                        <td colspan="2">
                            <h6>Hidupkan alat ?</h6>
                            @if ($is_available == 0)
                            <div class="alert alert-dark mt-3">
                               ioT sedang tidak terpasang 
                            </div>
                            @endif
                            <label class="switch switch-square switch-lg">
                                <input type="checkbox" {{$is_available == 0 ? 'disabled' : ''}}  class="switch-input" wire:model="isOn"
                                    wire:change="toggleRelay" />
                                <span class="switch-toggle-slider">
                                    <span class="switch-on">
                                        <i class="bx bx-check"></i>
                                    </span>
                                    <span class="switch-off">
                                        <i class="bx bx-x"></i>
                                    </span>
                                </span>
                                <span class="switch-label">{{ $isOn ? 'On' : 'Off' }}</span>
                            </label>

                            @if ($isLoading)
                                <div class="mt-3">
                                    <span class="spinner-border spinner-border-sm" role="status"
                                        aria-hidden="true"></span>
                                    Loading...
                                </div>
                            @endif

                            @if (session()->has('message'))
                                <div class="alert alert-success mt-3">
                                    {{ session('message') }}
                                </div>
                            @endif

                             
                            @error('mqtt')
                                <div class="alert alert-danger mt-3">
                                    {{ $message }}
                                </div>
                            @enderror
                        </td>
                    </tr>
                </table>
            </div>

        </div>
    </div>
@endif