@extends("backend.layout-sticky.master")

@section("title")
    Absensi Keluar
@endsection

@push('css')

<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<script src="{{asset('js/webcam-easy-master/dist/webcam-easy.min.js')}}"></script>

<style>

  .header-clear-medium {
    padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
  }
</style>
@endpush

@section ('back')
<a href="#" data-back-button="" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
<!-- <a href="{{route('dashboard.absensi.absensi.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a> -->
@endsection

@section ('content')



<form id="form" action="" method="POST" enctype="multipart/form-data">

@csrf

<div data-card-height="200" class="card card-style preload-img" data-src="{{asset('sticky-mobile/code/images/pictures/14w.jpg')}}">
    <div class="card-center text-center">
        <h1 class="font-22 color-white pt-3">{{ Auth::user()->name }}</h1>
        <p class="color-white opacity-70">{{ Auth::user()->gaji->nama }}</p>
        <a href="#" class="default-link btn btn-m rounded-s btn-center-xl bg-red-dark font-900 text-uppercase">Absensi Keluar</a>
    </div>
    <div class="card-overlay bg-black opacity-80"></div>
</div>

<div class="card card-style">

  @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
  @endif
  <input type="hidden" name="admin_id" value="{{ Auth::user()->id}}" id="admin_id">
  <input type="hidden" name="longitude" value="" id="longitude">
  <input type="hidden" name="latitude" value="" id="latitude">
  <input type="hidden" name="jarak" value="" id="jarak">
    <div class="content mb-0">

      <div class="d-flex justify-content-center ">
        <div id="div_take_snapshot">
          <video id="webcam" autoplay playsinline width="320" height="240" style="transform: scale(1, 1)!important"></video>
          <canvas id="canvas" class="d-none"></canvas>
          <!-- <audio id="snapSound" src="" preload = "auto"></audio> -->
        </div>
      </div>

      <input type="hidden" class="image-tag">
      <input type="hidden" name="foto" id="foto">
      <div class="d-flex justify-content-center mb-2">
              <div id="results"></div>
      </div>
      <div class="d-flex justify-content-center input-style has-borders no-icon">
          <button type="button" class="btn btn-success" id="btn-take_snapshot" onClick="take_snapshot()">Take Photo</button>
          <button type="button" class="btn btn-warning" id="btn-retake_snapshot">Retake Photo</button>
      </div>

        <label class="form-label">Status</label>
        <div class="input-style has-borders no-icon  mb-4">
          <select class="form-control rounded-round" name="status_absen" id="status_absen">

                <option value="1">Hadir</option>
                <option value="2">Cuti</option>
                <option value="3">Ijin</option>
                <option value="4">Sakit</option>
          </select>
        </div>

        <label class="form-label">Klinik</label>
        <div class="input-style has-borders no-icon  mb-4">
          <select class="form-control rounded-round" name="klinik_id" id="klinik_id">
            @foreach ($klinik as $value)
            <option value="{{$value->id}}">{{$value->nama}}</option>
            @endforeach
          </select>
        </div>

        <button id="getLocation" type="button" class="btn btn-xxs mb-3 rounded-s text-uppercase font-900 shadow-s border-blue-dark  bg-blue-light">Show Me My Location</button>

        <div id="locationData"></div>
        <div id="maps"></div>

        <label class="form-label">Keterangan</label>
        <div class="input-style has-borders no-icon  mb-4">
            <textarea class="form-control validate-text" name="keterangan_keluar" id="keterangan_keluar" placeholder="Keterangan"></textarea>
        </div>

        <button type="button" class="btn btn-xxs mb-3 rounded-s text-uppercase font-900 shadow-s btn-save border-blue-dark  bg-blue-light">Submit</span> </button>
        <!-- <button class="d-none btn-submit" type="submit"></button> -->


    </div>
</div>

</form>
@endsection

@push('js')
<!-- Page level custom scripts -->
<script src="{{asset('adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/toastr/toastr.min.js')}}"></script>

<script>

@if(session()->has('success'))
Swal.fire({
    title:'success',
    text:"{{ session()->get('success') }}",
    icon:'success'
})
@endif

@if(session()->has('error'))
Swal.fire({
    title:'error',
    text:"{{ session()->get('error') }}",
    icon:'error'
})
@endif

    function dataURLtoFile(dataurl, filename) {

       var arr = dataurl.split(','),
           mime = arr[0].match(/:(.*?);/)[1],
           bstr = atob(arr[1]),
           n = bstr.length,
           u8arr = new Uint8Array(n);

       while(n--){
           u8arr[n] = bstr.charCodeAt(n);
       }

       return new File([u8arr], filename, {type:mime});
     }

$(document).ready(function() {
  $("#getLocation").click(function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(locationSuccess);
    } else {
      $("#locationData").html('Your browser does not support location data retrieval.');
    }
  });

  function locationSuccess(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    $("#locationData").html("Latitude: " + latitude + "<br>Longitude: " + longitude);
    $("#longitude").val(longitude);
    $("#latitude").val(latitude);
    klinik_id = $("#klinik_id").val()

    checkLocation(longitude, latitude, klinik_id)

    $("#maps").html(`<iframe src="https://maps.google.com/maps?q=`+latitude+`,`+longitude+`&hl=es;z=14&amp;output=embed" width="100%" height="200" frameborder="0" style="border:0"></iframe>`);
  }
});

function checkLocation(long, lat,klinik_id) {
  $.ajax({
      url:"{{ route('dashboard.absensi.' . $module. '.checkDistance') }}",
      method:"GET",
      data:{long: long, lat: lat, klinik_id: klinik_id},
      success:function(res){
        console.log(res);
        $("#jarak").val(res.jarak);

      }
    })
}

const webcamElement = document.getElementById('webcam');
const canvasElement = document.getElementById('canvas');
const snapSoundElement = document.getElementById('snapSound');
const webcam = new Webcam(webcamElement, 'user', canvasElement, snapSoundElement);


webcam.start()
 .then(result =>{
    console.log("webcam started");
 })
 .catch(err => {
     console.log(err);
});


function take_snapshot() {
  var picture = webcam.snap();
  // console.log(picture);
    $(".image-tag").val(picture);
    document.getElementById('results').innerHTML = '<img src="'+picture+'" style="width: 240px; height: 320px;"/>';
    $("#div_take_snapshot").hide()
    $("#btn-take_snapshot").hide()
    $("#submit-btn").click()
    $("#btn-retake_snapshot").show()

}

$("#btn-retake_snapshot").on("click", function (e) {
  e.preventDefault();
  $("#results").html("");
  $("#div_take_snapshot").show()
  $("#btn-take_snapshot").show()
  $("#btn-retake_snapshot").hide()
});


$(document).on('click', '.btn-save', function(e){

  let foto = $(".image-tag").val()
  let longitude = $("#longitude").val()
  let latitude = $("#latitude").val()
  let jarak = $("#jarak").val()

  let error = 0

  if (foto == undefined) {
    error += 1;
  }
  if (longitude == "") {
    error += 1;
  }
  if (latitude == "") {
    error += 1;
  }

  var file = dataURLtoFile(foto,'image.png');
  console.log(file);
  // $("#foto").val(file)

  if (error > 0) {
    Swal.fire({
        title:'error',
        text:'Silahkan ambil foto dan lokasi',
        icon:'error'
    })
  }else {
    if (jarak > 100) {
      Swal.fire({
          title:'error',
          text:'Jarak anda diluar radius. jarak anda : '+jarak+" m",
          icon:'error'
      })
    }else {
      submit()

    }
  }

});

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function submit(){
  var formData = $("#form").serializeArray()
  var dataArray = []
  var foto_base64 = $(".image-tag").val()
  var foto = dataURLtoFile(foto_base64,'image.png');

  var formData = new FormData(form);
  if (foto == undefined) {
      foto = "";
  }

  formData.append("status_absen", $("#status_absen").val());
  formData.append("keterangan_keluar", $("#keterangan_keluar").val());
  formData.append("longitude", $("#longitude").val());
  formData.append("latitude", $("#latitude").val());
  formData.append("admin_id", $("#admin_id").val());
  formData.append("jarak_keluar", $("#jarak").val());
  formData.append("foto", foto);

    var url = "{{ route('dashboard.absensi.absensi.storeKeluar') }}"

    $.ajax({
        url:url,
        method:"POST",
        enctype: "multipart/form-data",
        contentType: false,
        processData: false,
        data:formData,
        success:function(res){
          console.log(res.status);
          if(res.status === true){
            $("#my-modal").modal("hide")
              Swal.fire({
                  title:'Success',
                  text:res.messages,
                  icon:'success'
              }).then((done)=>{
                  if (done) {
                    window.location.href = "/dashboard";
                  }
              })
          } else {
            Swal.fire({
                title:'Error',
                text:res.messages,
                icon:'error'
            })
          }
        }
      })
}

  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
@endpush