@extends('Web/layout')
@section('title','Vist Upload Image')
@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">Visit Input <span class="color-highlight font-14"> (Upload Visit Image)</span></h1>
        </div>
        <div class="align-self-center ms-auto">
        
        </div>
    </div>
</div>
<div class="card card-style" style="border-radius: 20px;">
   <div class="content">
        <div class="row">
            <div class="col-6">
                <p class="font-14 mb-2">
                    Scheme Name: 
                </p>
            </div>
            <div class="col-6">
                <span class="color-highlight font-14" id="schemname_display"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <p class="font-14 mb-2">
                    Client Full Name: 
                </p>
            </div>
            <div class="col-6">
                <span class="color-highlight font-14" id="client_full_name_display"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <p class="font-14 mb-2">
                    Father/Spouse Name: 
                </p>
            </div>
            <div class="col-6">
                <span class="color-highlight font-14" id="father_name_display"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <p class="font-14 mb-2">
                    Email Address: 
                </p>
            </div>
            <div class="col-6">
                <span class="color-highlight font-14" id="email_address_display"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <p class="font-14 mb-2">
                    Mobile Number: 
                </p>
            </div>
            <div class="col-6">
                <span class="color-highlight font-14" id="mobile_number_display"></span>
            </div>
        </div>
      
   </div>
</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" style="display:none;" 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-6">
                <a href="{{route('visitnote.chooseSchemeName')}}" ><button id="previewbtn" type="button" class="btn btn-full gradient-highlight rounded-s shadow-bg shadow-bg-s" style="display:none;width:100%">Edit/Preview</button></a>
            </div> -->
            <div class="col-12">
                <p class="btn btn-full gradient-green rounded-s shadow-bg shadow-bg-s" id="selectVisitImage" 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>

<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">
    
    var visitInputInsertData = JSON.parse(localStorage.getItem('visitInputInsertData')); 
    if(visitInputInsertData == null){
        window.location.href = site_url;
    }

    $("#take_snapshot").show();
    $("#downloadlink").hide();
    $("#selectVisitImage").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();
        $("#selectVisitImage").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' );
        
    }
    var visitInputInsertData = JSON.parse(localStorage.getItem('visitInputInsertData')); 
    if(visitInputInsertData.visit_image == ""){
        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("Visit Image Required");
                return
            }

            var visitInputInsertData = JSON.parse(localStorage.getItem('visitInputInsertData')); 
            visitInputInsertData.visit_image = captured_image_data;
            localStorage.setItem('visitInputInsertData',JSON.stringify(visitInputInsertData));

            $("#downloadlink").show();
            $("#downloadlink").attr("href", data_uri);
            $("#selectVisitImage").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 location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
getLocation();
</script>
@endsection