@extends('layouts.dashboard')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    h3 {
        font-family: 'Poppins', sans-serif;
    }

    .social-box .box {
        background: #FFF;
        border-radius: 10px;
        padding: 40px 10px;
        margin: 20px 0px;
        cursor: pointer;
        transition: all 0.5s ease-out;
    }

    .social-box .box:hover {
        box-shadow: 0 0 6px #4183D7;
    }

    .social-box .box .box-text {
        margin: 20px 0px;
        font-size: 15px;
        line-height: 30px;
    }

    .social-box .box .box-btn a {
        text-decoration: none;
        color: #4183D7;
        font-size: 16px;
    }

    .fa {
        color: #4183D7;
    }

</style>
@endsection
@section('content')

<div class="pr-3">
    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/home" class="text-decoration-none text-dark">Home</a></li>
          <li class="breadcrumb-item">
            <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                {{ $project->name }}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Device</li>
        </ol>
    </nav>
    {{-- Alert --}}
    @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @elseif (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    {{-- Form Create Device --}}
    <div class="px-3">
        <form method="POST" action="{{ route("frontend.devices.store") }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="project_id" value="{{ request()->get('projectId') }}">
            <div class="form-group">
                <label class="required"  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 class="required" for="serial_number">{{ trans('cruds.device.fields.serial_number') }}</label>
                <input required 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="tags">Tags</label>
                <select class="form-control select2" name="tags[]" multiple="multiple">
                  @foreach ($tags as $tag)
                      <option value="{{$tag->id}}">{{$tag->name}}</option>
                  @endforeach
                </select>
                @if($errors->has('tags'))
                <div class="invalid-feedback">
                    {{ $errors->first('tags') }}
                </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" 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 class="d-flex flex-row align-items-center bd-highlight mb-3">
                <div class="mr-1 bd-highlight">
                    <button id="myBtn" class="btn btn-primary" type="button">Scan Device</button>
                </div>
                <div class="mr-1 bd-highlight">
                    <span id="coordinate">Click the button to scan device</span>
                </div>
            </div>
            <div class="d-flex flex-row align-items-center bd-highlight mb-3">
                <div class="mr-1 bd-highlight">
                    <button class="btn btn-success" type="button" onclick="getLocation()">Get Coordinate</button>
                </div>
                <div class="mr-1 bd-highlight">
                    <span id="coordinate">Click the button to get coordinate</span>
                </div>
            </div>
            <div class="d-flex flex-row align-items-center bd-highlight">
                <div class="mr-1 bd-highlight">
                    <button class="btn btn-danger" type="submit">{{ trans('global.save') }}</button>
                </div>
                <div class="mr-1 bd-highlight">
                    &nbsp;
                </div>
            </div>
            
        </form>
    </div>
</div>
@endsection
@section('script')
<script>
    $("#menu-device").addClass("active");
</script>
<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>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.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">
  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();
   });
  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);
  });
  }
  $('.select2').select2()
</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) {
        latitude.value = position.coords.latitude;
        longitude.value = position.coords.longitude;
        // coordinate.innerHTML = position.coords.latitude + ' , ' + position.coords.longitude;
    }
</script>
@endsection