@extends('layouts.master')

@section('content')
<div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                @include('layouts.includes.template_setting')
                <div class="page-header hidden-print">
                    <h1>
                        Whatsapp
                    </h1>
                </div><!-- /.page-header -->
                @if(!$data)
                   <div class="white-area-content">
                       <strong>API is not working, please refresh</strong>
                   </div>
               @endif
                <div class="white-area-content">
                  <div class="db-header clearfix">
                      <div class="db-header-extra form-inline">
                          @if(isset($data['message']) && $data['message'] == "WhatsApp has been connected successfully")
                              <a href="{{ route('whatsapp.reboot_instance') }}"
                                 title="Reset WhatsApp"
                                 class="btn btn-success">
                                 Reset Connection
                              </a>
                          @endif
                      </div>
                  </div>

                  @if($data['status'] === 'success')
                      <h2>Scan the QR Code below to connect WhatsApp:</h2>
                      <img src="{{ $data['qr_code'] }}" alt="QR Code" style="max-width:300px;">
                  @elseif($data['status'] === 'error')
                      <h2>WhatsApp</h2>
                      <p>{{ $data['message'] }}</p>
                  @endif
                </div>
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
@endsection

@section('js')
<script>
    setTimeout(function () {
        location.reload();
    }, 60000); // 30 seconds
</script>
@endsection