@extends('WebApp.template.master')

@section('menu')
@include('WebApp.template.header')
@endsection

@push('cssStyle')

@endpush


@push('jsScript')
<script type="text/javascript" src="{{asset('/assets/js/page/whatsapp.js')}}"></script>
@endpush


@section('content')
<div id="consultaSimulacao">
    <div class="bg-light p-3">
        <div id="formPesquisa">
            <fieldset>
                <legend class="my-3 p2 text-primary">
                    WhatsApp - <span class="text-sm">{{$whatsConfig->whatsappNumber}}</span>
                </legend>
                <div id="dataWhatsConfig" data-whatsappNumber="{{$whatsConfig->whatsappNumber}}" data-lastConnection="{{$whatsConfig->lastConnection}}" data-batteryLevel="{{$whatsConfig->batteryLevel}}"></div>
                <div class="form-row">
                    <ul class="list-group list-group-flush list-group-no-gutters border d-none">
                        <li id="appState" class="list-group-item py-3">
                            <div class="media">
                                <div class="mt-1 mr-3 ml-2" style="width: 35px;">
                                    <span class="fas fa-mobile-alt" style="font-size:35px;"></span>
                                </div>
                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <div class="d-block font-size-sm mt-2 pt-1">
                                                <span id="applicationIsConnected" class=""></span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- List Group Item -->
                        <li class="list-group-item py-3">
                            <div class="media">
                                <div class="mt-1 mr-3">
                                    <span class="fas fas fa-wifi " style="font-size:35px;"></span>
                                </div>
                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <div class="d-block font-size-sm"><span id="isConnected" class=""></span></div>
                                            <span id="lastConnection" class="text-small"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item py-3">
                            <div class="media">
                                <div class="mt-1 mr-3">
                                    <span class="fas fa-battery-empty" style="font-size:35px;"></span>
                                </div>
                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <span class="text-small mb-0">Bateria</span>
                                            <span id="batteryLevel" class="d-block font-size-sm"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item py-3">
                            <div class="form-check">
                                <input id="activeProcess" class="form-check-input" type="checkbox" value="" disable>
                                <label id="labelActiveProcess" class="control-label" for="activeProcess">Desativar disparo de mensagem automático</label>
                            </div>
                        </li>
                        <li id="listButton" class="list-group-item d-flex">
                            <button id="startWhatsapp" type="button" class="btn btn-outline-success p-2 mx-auto" data-value="1"  style="font-size:15px;" disable><span class="far fa-play-circle mr-2"></span>Start WhatsApp</button>
                            <button id="stopWhatsapp" type="button" class="btn btn-outline-danger p-2 mx-auto"  data-value="0" style="font-size:15px;" disable><span class="fas fa-stop mr-2"></span>Stop WhatsApp</button>
                            <button id="restartWhatsapp" type="button" class="btn btn-outline-info p-2 mx-auto"  data-value="0" style="font-size:15px;" disable><span class="fas fa-sync-alt"></span></button>
                        </li>
                    </ul>
                </div>
            </fieldset>
        </div>
    </div>
</div>
@endsection