@extends('layouts.app')

@section('css')
<!-- Sweet Alert css -->
<link href="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="page-head">
    <h4 class="mt-2 mb-2">Daftar Device</h4>
</div>


<div class="row">

    <div class="col-lg-12 col-sm-12">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="text-left">
                    @if($data->count() == 0)
                    <a class="btn btn-success" href="{{ route('device.create') }}">Tambah</a>
                    @endif
                </div>
                <br>
                <div class="table-responsive">
                <table class="table table-hover tabel">
                    <thead>
                        <th>Device</th>
                        <th>Phone Sender</th>
                        <th class="text-center">Aksi</th>
                    </thead>
                    <tbody>

                     @if($data->count() > 0)
                        @foreach($data as $d)
                            <tr>
                                <td>{{ $d->device_name }}</td>
                                <td>{{ $d->phone_sender }}</td>
                                <td class="text-center">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <a attr-value="{{ $d->token }}" href="#" id="status" class="btn btn-xs btn-outline-info btn-status"><i class="fa fa-info"></i> Status
                                        </a>
                                        <a attr-value="{{ $d->token }}" href="#" id="restrt" class="btn btn-xs btn-outline-success btn-restart"><i class="fa fa-refresh"></i> Reload
                                        </a>
                                        <!-- <a href="https://pati.wablas.com/api/device/scan?token={{ $d->token }}" id="scan" target="_blank" class="btn btn-xs btn-outline-warning"><i class="fa fa-qrcode"></i> Scan
                                        </a> -->
                                        <a href="#" attr-value="{{ $d->token }}" id="scan" class="btn btn-xs btn-outline-warning btn-scan2"><i class="fa fa-qrcode"></i> Scan
                                        </a>
                                        <a href="{{ route('device.edit', [ 'id'=>$d->id ]) }}" class="btn btn-xs btn-outline-info"><i class="fa fa-edit"></i> Ubah
                                        </a>
                                        <a href="{{ route('device.delete', [ 'id'=>$d->id ]) }}" class="btn btn-xs btn-outline-danger">
                                            <i class="fa fa-trash"></i> Hapus
                                        </a>
                                    </div>

                                </td>
                            </tr>
                        @endforeach
                     @else
                        <tr>
                            <th colspan='2' class='text-center'>Tidak Ada Data</th>
                        </tr>
                     @endif

                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade"  tabindex="-1" id="modal-scan">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Scan Qrcode</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
              <div id="qrcode">

              </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.js') }}"></script>

<script type="text/javascript">
$(document).ready(function() {
    var url = "{{ url('/') }}";

    $(".tabel").on('click', '.btn-status', function() {
        var token = $(this).attr('attr-value');

        console.log(token);

        var settings = {
          "url": url+'/api/qrcode',
          "dataType": 'json',
          "method": "POST",
          "timeout": 0,
          "data": {
            "token": token
          }
        };

        $.ajax(settings).done(function (response) {
          //var res = JSON.parse(response);
          console.log(response);
          if(response.qrcode === null){
            swal('Conneted !!');
          }else{
            swal('Not Conneted !! Scan qrcode now');

          }
        });

        // $.ajax({
        //     url: 'https://us.wablas.com/api/device/info?token='+token,
        //     dataType: 'json',
        //     type: 'get',

        //     success: function( data, textStatus, jQxhr ){
        //         console.log(data);
        //         if(data.status===false){
        //             swal('Warning!', data.message, 'warning');
        //         }else{
        //             swal(data.data.whatsapp.status+' !!');
        //         }

        //     },
        //     error: function( jqXhr, textStatus, errorThrown ){
        //         //console.log( errorThrown );
        //         //console.log( data );
        //         swal('Warning!', 'Silahkan scan dlu', 'warning');

        //     }
        // });
    });

    $(".tabel").on('click', '.btn-restart', function() {
        var token = $(this).attr('attr-value');

        console.log(token);

        location.reload();

        // $.ajax({
        //     url: 'https://us.wablas.com/api/device/reconnect?token='+token,
        //     dataType: 'json',
        //     type: 'get',

        //     success: function( data, textStatus, jQxhr ){
        //         console.log(data);
        //         if(data.status===false){
        //             swal('Warning!', data.message, 'warning');
        //         }else{
        //             swal('Restart '+data.message+' !!');
        //         }

        //     },
        //     error: function( jqXhr, textStatus, errorThrown ){
        //         //console.log( errorThrown );
        //         //console.log( data );
        //         swal('Warning!', 'Silahkan scan dlu', 'warning');

        //     }
        // });
    });

    $(".tabel").on('click', '.btn-scan', function() {

        var token = $(this).attr('attr-value');

        console.log(token);

        var settings = {
          "url": url+'/api/qrcode_image',
          "dataType": 'json',
          "method": "POST",
          "timeout": 0,
          "data": {
            "token": token
          }
        };

        $.ajax(settings).done(function (response) {
          console.log(response);
          swal(response);
        });

    });

    $(".tabel").on('click', '.btn-scan2', function() {
        var token = $(this).attr('attr-value');
        var html = '<iframe align="center" src="https://pati.wablas.com/api/device/scan?token='+token+'" height="550px" width="750px"></iframe>';

        var settings = {
          "url": "https://pati.wablas.com/api/device/scan?token="+token,
          "method": "GET",
          "timeout": 0,
        };

        $.ajax(settings).done(function (response) {
          //console.log(response);
          $('#modal-scan').modal('show');
          $('#qrcode').html(html);
        }).fail(function(x,s,e){
          alert('token salah atau tidak ada');
        });


    });


});

var openLink = function(url) {
  $.ajax({
    url : "google.com",
    success : function(result){
        alert(result);
    }
});
}
</script>
@endsection