@extends('Web/layout')
@section('title','Meeting Input')
@section('content')
<div class="pt-3">
    <div class="page-title d-flex">
        <div class="align-self-center">
            <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
            <i class="bi bi-chevron-left color-theme font-14"></i>
            </a>
        </div>
        <div class="align-self-center me-auto">
            <h1 class="color-theme mb-0 font-18">Meeting Input <span class="color-highlight font-14"> (Upload Meeting Image)</span></h1>
        </div>
        <div class="align-self-center ms-auto">
        
        </div>
    </div>
</div>
<div class="content">
    <form action="#" method="post" class="demo-animation needs-validation m-0" novalidate="">
        <div class="form-custom form-label form-icon mb-3">
            <i class="bi bi-person-circle font-14"></i>
            <input type="number" class="form-control rounded-xs" id="no_of_user" placeholder="No Of User">
            <label for="c1" class="color-theme">No Of User</label>
        </div>
        <div class="form-custom form-label form-icon mb-3">
            <i class="bi bi-person-circle font-14"></i>
            <textarea type="text" class="form-control rounded-xs" id="reference" placeholder="Reference/Comments" ></textarea>
            <label for="c1" class="color-theme">Reference/Comments</label>
        </div>
    </form>
</div>
<div class="content text-center">
    <h3>Capture Live Photo</h3>
    <div class="divider mb-0"></div>
    <span class="font-16 font-800 text-danger" style="margin-bottom:10px;" id="errorMessage"></span>
    <div class="captureimage">
    
        <div id="my_camera" class="pre_capture_frame  mt-4 mb-3 mx-auto" ></div>
        <input type="hidden" name="captured_image_data" id="captured_image_data">
        <input id="latitute" type="hidden" class="validate" name="latitute">
        <input id="longitude" type="hidden" class="validate" name="longitude">
        <div id="results" ></div>
        <div class="row">
            <div class="col-6">
                <p class="btn btn-full gradient-yellow rounded-s shadow-bg shadow-bg-s" onClick="take_captureimage()" style="width:100%">Open <i class="bi bi-camera"></i></a>
            </div>
            <div class="col-6">
                <p class="btn btn-full gradient-highlight rounded-s shadow-bg shadow-bg-s" id="take_snapshot"  onClick="take_snapshot()" style="width:100%">Take Snapshot</p>
                <a href="" id="downloadlink" download><button type="button" class="btn btn-full gradient-red rounded-s shadow-bg shadow-bg-s" style="width:100%">Download</button></a>
                <!-- <p class="btn btn-full gradient-green rounded-s shadow-bg shadow-bg-s" id="saveSnap" onclick="saveSnap()">Download</a> -->
            </div>
            
        </div>
        <div class="row mt-5">
            <div class="col-12">
                <p class="btn btn-full gradient-green rounded-s shadow-bg shadow-bg-s" id="selectMeetingImage" style="display:none;width:100%">Save</a>
            </div>
            
        </div>
        <!-- <div id="footer-bar" class="row footer-bar-1 footer-bar-detached savebtn">
            <p class="btn btn-full gradient-green rounded-s shadow-bg shadow-bg-s" id="selectVisitImage" style="display:none;">Save</a>
        </div>   -->
    </div>
</div>
<div id="menu-transfer-ok" style="width: 320px; display: block; visibility: hidden;" class="offcanvas offcanvas-modal offcanvas-detached rounded-m"  aria-hidden="true">
    <div class="content text-center">
        <i style="font-size:65px;" class="scale-box bi bi-check-circle-fill color-green-dark shadow-s rounded-circle p-0 mt-3 mb-3 d-inline-block"></i>
        <h1 class="pt-3 font-24" id="success_title">Success</h1>
        <p class="font-16" id="success_subtitle">
            Your transfer was successfully processed.
        </p>
        <a href="#" data-bs-toggle="offcanvas" class="btn btn-full gradient-green shadow-bg shadow-bg-xs" onclick="cancel()">Okay</a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script language="JavaScript">
    $("#no_of_user").val("");
    $("#reference").val("");
    $("#take_snapshot").show();
    $("#downloadlink").hide();
    $("#selectMeetingImage").hide();
    $("#previewbtn").hide();
    $(".savebtn").hide();
    let width = screen.width;
    let height = screen.height;
    
    function take_captureimage(){
        $("#take_snapshot").show();
        $("#downloadlink").hide();
        $("#results").hide();
        $("#my_camera").show();
        $(".savebtn").hide();
        $("#selectMeetingImage").hide();
        $("#previewbtn").hide();
        Webcam.set({
            width: width/1.25,
            height: height/1.75,
            image_format: 'jpeg',
            jpeg_quality: 90,
            facingMode : { exact: "environment" },
        });
    
        Webcam.attach( '#my_camera' );
        
    }
    take_captureimage();
   
  
    function take_snapshot() {
        let width = screen.width;
        let height = screen.height;
        // play sound effect
        //shutter.play();
        // take snapshot and get image data
        if(Webcam.loaded)
        Webcam.snap( function(data_uri) {
        // display results in page
            document.getElementById('results').innerHTML = 
            '<img class="after_capture_frame img-fluid rounded-s mt-4 mb-3 mx-auto" src="'+data_uri+'" style="height:'+height+';width:'+width+'"/>';
            $("#captured_image_data").val(data_uri);
            

            $("#errorMessage").html("");
            var captured_image_data = $("#captured_image_data").val();

            if(captured_image_data.trim() == ""){
                $("#errorMessage").html("Meeting Image Required");
                return
            }
            $("#downloadlink").show();
            $("#downloadlink").attr("href", data_uri);
            $("#selectMeetingImage").show();
            $("#previewbtn").show();
            $("#my_camera").hide();
            $("#results").show();
            $("#take_snapshot").hide();
            $(".savebtn").show();

        });	 
       
        Webcam.reset();
    }

var allowGeoRecall = true;
var x = document.getElementById("errorMessage");

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

function showPosition(position) {
  $('#latitute').val(position.coords.latitude);
  $('#longitude').val(position.coords.longitude);
  $('#iframedata').html('<iframe src = "https://maps.google.com/maps?q='+position.coords.latitude+','+position.coords.longitude+'&hl=es;z=14&output=embed" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>');
  console.log('https://maps.google.com/maps?q='+position.coords.latitude+','+position.coords.longitude+'&hl=es;z=14&output=embed" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>');
  allowGeoRecall = false;
  // x.innerHTML = "Latitude: " + position.coords.latitude + 
  // "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
      
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      $.confirm({
        title: 'GPS Location!',
        content: 'GPS disabled or location permission denied',
        buttons: {
            ok: function () {
                //$.alert('OK!');
                if(allowGeoRecall) getLocation();
                console.log('click ok');
                x.innerHTML = "";
                window.location.href = "index.php";
                // location.reload();
            },
            cancel: function () {
              window.location.href = "index.php";
                // $.alert('Canceled!');
            }
        }
    });
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
getLocation();
</script>
@endsection