@extends('layouts.admin')
@section('content')
<h1>Scanner</h1>
<div class="section-header-breadcrumb">
  <div class="breadcrumb-item active"><a href="#">Scanner QR Code</a></div>
</div>

<div class="card">
  <div class="card-body">
    <div class="flex items-center justify-center">
      <video class="w-1/2" id="preview"></video>
    </div>
  </div>
</div>
@endsection
@section('scripts')
  @if(Auth::check())
    <script>
        var userID = "{{ Auth::id() }}";
    </script>
  @endif
  <script src="/js/instascan/instascan.min.js"></script>
  <script type="text/javascript">
  //Define your post url
  let url = '/admin/devices';
  let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  console.log(userID);
  console.log(token);
  let scanner = new Instascan.Scanner({
    video: document.getElementById('preview'), mirror:false
  });
  scanner.addListener('scan', function(content) {
    // window.location.href = "/admin/applications/status/" + content;
    fetch(url, {   
            headers: {     
              "Content-Type": "application/json",     
              "Accept": "application/json, text-plain, */*",     
              "X-Requested-With": "XMLHttpRequest",     
              "X-CSRF-TOKEN": token    
            },   
          method: 'post',
          credentials: "same-origin",
          body: JSON.stringify({     status:"off",device: content,     lat: "107.1231", long:"-7.23123", user_id:1   })  })
        .then((data) => {
              alert("Device berhasil ditambahkan");
              window.location.href = url;   
        })  
        .catch(function(error) {      
          console.log(error);    
        }); 
   });
  Instascan.Camera.getCameras().then(function(cameras) {
    if (cameras.length == 1) {
      scanner.start(cameras[0]);
    } else if(cameras.length == 2) {
      scanner.start(cameras[1]);
    }else{      console.error('No cameras found.');}
  }).catch(function(e) {
    console.error(e);
  });
</script>
@endsection