@extends('layouts.admin')
@push('styles')
    <style>
      .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 50%; /* Full width */
  height: 40%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
    </style>
@endpush
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('cruds.device.title_singular') }}
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("admin.devices.store") }}" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="user_id">{{ trans('cruds.device.fields.user') }}</label>
                <input hidden type="text" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
                <input disabled class="form-control {{ $errors->has('user_id') ? 'is-invalid' : '' }}" type="text" value="{{ Auth::user()->name }}">
                @if($errors->has('user'))
                <div class="invalid-feedback">
                    {{ $errors->first('user') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.user_helper') }}</span>
            </div>            
            {{-- <div class="form-group">
                <label for="device">{{ trans('cruds.device.fields.device') }}</label>
                <input class="form-control {{ $errors->has('device') ? 'is-invalid' : '' }}" type="text" name="device" id="device" value="{{ old('device', '') }}">
                @if($errors->has('device'))
                <div class="invalid-feedback">
                    {{ $errors->first('device') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.device_helper') }}</span>
            </div> --}}

            <div class="form-group">
                <label for="serial_number">{{ trans('cruds.device.fields.serial_number') }}</label>
                <input placeholder="Please click Scan Devie button" class="form-control {{ $errors->has('serial_number') ? 'is-invalid' : '' }}" type="text" name="serial_number" id="serial_number" value="{{ old('serial_number', '') }}">
                @if($errors->has('serial_number'))
                <div class="invalid-feedback">
                    {{ $errors->first('serial_number') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.serial_number_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="type">{{ trans('cruds.device.fields.type') }}</label>
                <select class="form-control {{ $errors->has('type') ? 'is-invalid' : '' }}" name="type" id="type">
                  <option value="LED">LED</option>'
                  <option value="Halogen">Halogen</option>
                </select>
                @if($errors->has('type'))
                <div class="invalid-feedback">
                    {{ $errors->first('type') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.type_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="specification">{{ trans('cruds.device.fields.specification') }}</label>
                <select class="form-control {{ $errors->has('type') ? 'is-invalid' : '' }}" name="specification" id="specification">
                  <option value="50 Watt">50 Watt</option>'
                  <option value="100 Watt">100 Watt</option>
                </select>
                @if($errors->has('specification'))
                <div class="invalid-feedback">
                    {{ $errors->first('specification') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.specification_helper') }}</span>
            </div>

            <div class="form-group">
                <label for="lat">{{ trans('cruds.device.fields.lat') }}</label>
                <input id="lat" class="form-control {{ $errors->has('lat') ? 'is-invalid' : '' }}" type="text" name="lat" id="lat" value="{{ old('lat', '') }}" placeholder="Please click Get Coordinate button">
                @if($errors->has('lat'))
                <div class="invalid-feedback">
                    {{ $errors->first('lat') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.lat_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="long">{{ trans('cruds.device.fields.long') }}</label>
                <input id="long" class="form-control {{ $errors->has('long') ? 'is-invalid' : '' }}" type="text" name="long" id="long" value="{{ old('long', '') }}" placeholder="Please click Get Coordinate button">
                @if($errors->has('long'))
                <div class="invalid-feedback">
                    {{ $errors->first('long') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.long_helper') }}</span>
            </div>
            {{-- <div id="myModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                  <span class="close">&times;</span>
                  
                </div>
              
            </div> --}}
            <div id="myModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Scan Device</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="w-1/2 modal-body">
                          <p align="center"><video class="w-1/2" id="preview"></video></p>
                      </div>
                  </div>
                </div>
            </div>
            {{-- <div id="myModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="w-1/2 modal-body">
                        <video class="w-1/2" id="preview"></video>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
            </div> --}}
            <div class="mb-2">
                <button id="myBtn" class="btn btn-primary" type="button" onclick="getLocation()">Scan Device</button>
            &nbsp;&nbsp;<span id="coordinate">Click the button to scan device</span>
            </div>

            <button class="mb-2 btn btn-success" type="button" onclick="getLocation()">Get Coordinate</button>
            &nbsp;&nbsp;<span id="coordinate">Click the button to get coordinate</span>
            <!-- <input hidden type="hidden" class="form-control" id="lat" name="lat" placeholder="Please click Get Coordinate button" />
            <input hidden type="hidden" class="form-control" id="long" name="long" placeholder="Please click Get Coordinate button" /> -->

            <!-- <div class="form-group">
                <div id="mapid" style="height: 250px; margin-top:10px; background-color: lightgrey"></div>
            </div> -->

            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>



@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
@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
  });
  function startCam(){
    scanner.addListener('scan', function(content) {
        // var modal = document.getElementById("myModal");
        var serialNumber = document.getElementById("serial_number");
        serialNumber.value = content;
        modal.style.display = "none";
        scanner.stop();
        console.log(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>
<script>
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
      startCam();
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
      scanner.stop();
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
        scanner.stop();
      }
    }
</script>

<script>
    var latitude = document.getElementById("lat");
    var longitude = document.getElementById("long");
    var coordinate = document.getElementById("coordinate");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.value = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        console.log("showPosition" + position);
        latitude.value = position.coords.latitude;
        longitude.value = position.coords.longitude;
        coordinate.innerHTML = position.coords.latitude + ' , ' + position.coords.longitude;

        // var greenIcon = new L.Icon({
        //     iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        //     shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        //     iconSize: [25, 41],
        //     iconAnchor: [12, 41],
        //     popupAnchor: [1, -34],
        //     shadowSize: [41, 41]
        // });

        // // var map = L.map('mapid').setView([-6.899525, 107.653151], 5);
        // // var map = L.map('mapid').setView([position.coords.latitude, position.coords.longitude], 14);
        // var mymap = L.map('mapid').setView([-6.887442995884511, 107.60709428994403], 12);
        // L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        //     attribution: '',
        //     maxZoom: 18,
        //     id: 'mapbox/streets-v11',
        //     tileSize: 512,
        //     zoomOffset: -1,
        //     accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
        // }).addTo(mymap);

        // var marker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
        // marker.setIcon(greenIcon);
    }
</script>
@endsection