@extends ('Layouts.Application')

@section ('MainContent')

<style>
video {
  object-fit: cover;
}
</style>

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <strong>Picture of {{ $studentDetails->student_name }}

          <a class="btn btn-xs btn-warning pull-right" href="{{ route('LoggedIn.Settings.Student.index') }}">
            <i class="fa fa-chevron-left"></i> Back
          </a>
        </strong>
      </div>

      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <div class="row">
          <div class="col-md-12">
            <video id="video" autoplay width="100%" height="100%"></video>
          </div>
          <div class="col-md-12 text-center">
            <form id="takePhotoForm" method="POST" enctype="multipart/form-data"
              action="{{ route('LoggedIn.Settings.Student.storePicture', ['id' => $studentDetails->student_id]) }}"
            >
              @csrf

              <input type="hidden" name="student_id" value="{{ $studentDetails->student_id }}">
              <button class="btn btn-info switchCamera" type="button">
                <i class="fa fa-refresh" aria-hidden="true"></i> Switch Camera
              </button>
              <button class="btn btn-success takePhoto" type="button">
                <i class="fa fa-camera" aria-hidden="true"></i> Take Photo
              </button><br>
              <button class="btn btn-primary" type="submit">
                <i class="fa fa-floppy-o" aria-hidden="true"></i> Save Photo
              </button>
            </form>
          </div>
          <div class="col-md-12" style="margin-top: 15px;">
            @if (!empty($studentDetails->profile_image) && file_exists('img/StudentPicture/' . $studentDetails->profile_image))
              <img id="media-object" src="{{ asset('img/StudentPicture') . '/' . $studentDetails->profile_image }}"
                alt="{{ $studentDetails->student_name }}" class="img-responsive"
                style="border: 1px solid blue; margin: 0 auto; width: 100%; max-width: 550px; height: auto;"
              />
            @else
              <img id="media-object" src="{{ asset('img/StudentPicture/default.png') }}" alt="No image" class="img-responsive"
                style="border: 1px solid blue; margin: 0 auto; width: 100%; max-width: 550px; height: auto;"
              />
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
$(document).ready(function() {
  const videoStream = document.getElementById('video');
  var currentOrientation = true;
  const canvas = document.createElement('canvas');

  function loadCamera(data) {
    navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        facingMode: data
      }
    })
    .then(function(mediaStream) {
      videoStream.srcObject = mediaStream;
    }).catch(function(err) {
      Swal.fire({
        type: 'warning',
        title: 'Warning!',
        text: err.name + ": " + err.message
      });
    });
  }

  function dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];

    for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }

    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
  }

  loadCamera("user");

  $(".switchCamera").on('click', function() {
    videoStream.srcObject.getTracks().map(t => t.stop());
    this.currentOrientation = !this.currentOrientation;

    if (this.currentOrientation) {
      loadCamera({ exact: "environment" });
    } else {
      loadCamera("user");
    }
  });

  $(".takePhoto").on('click', function() {
    let img = document.getElementById('media-object');

    canvas.width = videoStream.videoWidth;
    canvas.height = videoStream.videoHeight;
    canvas.getContext('2d').drawImage(videoStream, 0, 0);
    // Other browsers will fall back to image/png
    img.src = canvas.toDataURL('image/png');

    $("#takePhotoForm").append("<input type='hidden' class='student_photo' name='student_photo' value='"
      + canvas.toDataURL('image/png') + "'>");
  });
});
</script>

@endsection