<!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Pairing WhatsApp </h1>
          </div>
          <div class="row">
            
          </div>
          <div class="row">
            <div class="col-md-4">
              <!-- Earnings (Monthly) Card Example -->
            <div class="col-md-12" id="status_pairing" style ="display:none;">
              <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Status</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">UNPAIR</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-times fa-2x text-danger"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Earnings (Monthly) Card Example -->
            <div class="col-md-12" style="display: none;" id="status_paired">
              <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Status</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">PAIRED</div>
                      <small><a href="javascript:void(0)" id="unpair">Unpair Now</a></small>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-check fa-2x text-success"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <div class="col-lg-4">
              
              <!-- Collapsable Card Example -->
              <div class="card shadow mb-4"  id="card_qr" style="display: none;">
                <!-- Card Header - Accordion -->
                <a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
                  <h6 class="m-0 font-weight-bold text-primary">SCAN QR CODE</h6>
                  
                </a>
                <!-- Card Content - Collapse -->
                <div class="collapse show">
                  <div class="card-body">
                    
                    <img src="" class="w-100" id="img_qr" />
                    <center><p id="idle"></p></center>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script type="text/javascript">
            $(document).ready(function(){
              var base_url = "<?=base_url()?>";
              var pairing = function(){
              jQuery.ajax({
                url: base_url+"Whatsapp/pairing",
                dataType:'json',
                success:function(response){ 
                  // alert(response.qrcode)
                  if (response.status == 'success') {
                    if (response.pair == true) {
                      $("#status_pairing").css("display","none");
                      $("#status_paired").css("display","block");
                      $("#card_qr").css("display","none");

                    }else{
                      $("#status_pairing").css("display","block");
                      $("#status_paired").css("display","none");
                      $("#img_qr").attr("src",response.qrcode)
                      $("#card_qr").css("display","block");
                    //   alert(response.status_pair)
                      if (response.status_pair == "IDLE") {
                        $("#idle").html("QRCode Sedang Dimuat Silahkan Tunggu ...");
                      }else{
                        $("#idle").html("Silahkan Scan QRCode")
                      }
                      // alert(response.status_pair)
                    }
                  }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                  $('#loading').modal('hide');
                    Command: toastr["error"](errorThrown, "Error");
                  }  ,
                beforeSend: function () {
                  $('#loading').modal('hide');
                }
                });
              
              }
              setInterval(function() { 
                pairing();
                // alert("re")
              }, 2000);

              $("#unpair").click(function(){
                jQuery.ajax({
                url: base_url+"Whatsapp/unpair",
                dataType:'json',
                success:function(response){ 
                  pairing();
                  Command: toastr["success"](errorThrown, "Berhasil Unpair");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                  $('#loading').modal('hide');
                    Command: toastr["error"](errorThrown, "Error");
                  }  ,
                beforeSend: function () {
                  $('#loading').modal('hide');
                }
                });
              })
            
          });
          </script>