@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div id="main">
                <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>
                <div class="card-body">
                <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">Name</th>
                          <th scope="col">Location</th>

                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach($devices as $index=> $device)
                         @if($device->status==0)
                            @php
                                $class = "btn-danger";
                                $text = "Off";
                            @endphp
                         @else
                            @php
                                $class = "btn-success";
                                $text = "On";
                            @endphp
                         @endif
                        <tr>
                            <td>{{++$index}}</td>
                            <td>{{$device->name}}</td>
                            <td>{{$device->location}}</td>

                            <td> <button value="{{$device->id}}"  class="btn {{$class}} btn-sm status">{{$text}}</button></td>

                        </tr>
                        @endforeach
                      </tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        $(document).on('click','.status',function(e){
        $('.card').after('<div class="subcontainer"><div class="loader"></div></div>');
        e.preventDefault();
        let id=$(this).val();
        let instance=$(this);
        $.ajax({
            url: "change-status/" + id,
            type: 'get',
            data:id ,
            success: function(msg) {
            // location.reload();
                if(msg==0){
                    instance.removeClass("btn-success");
                    instance.addClass("btn-danger");
                    instance.text("Off");

                }else{
                    instance.removeClass("btn-danger");
                    instance.addClass("btn-success");
                    instance.text("On");
                }
                $('.subcontainer').remove();
            }
        });
        });
    
    });
function fetchdata(){  
  
  $.ajax({
      url: "reload",
            type: 'get',
            success: function(msg) {
                
               $("#main").html(msg);
            }
  });
} 
$(document).ready(function(){ 
  setInterval(fetchdata,2000); 
});

</script>