<?php include "common2.php" ?>

<link rel="stylesheet" href="<?php echo base_url();?>files/assets/css/style.ed12.css">

<style type="text/css">
  .btn--outline-light {
  background-color: #d3d3d3;
  border: 1px solid hsl(var(--light));
  border-color: #d3d3d3;
/*  color: hsl(var(--light));*/
}

.cmn--btn:hover, .cmn--btn.active {
  background: #afdb1f;
  color: #fff;
}

.login-wrapper {
    background: #fff !important;
    backdrop-filter: none;
}
</style>

<div class="overlay"></div>
<a href="javascript::void(0)" class="scrollToTop"><i class="las la-chevron-up"></i></a>


<div class="face-section login-section upload-file-loader" style="display: none;">
    <div class="login-thumb d-none d-lg-block">
        <!-- <img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-bg.png" alt="thumb" class="object-point-none"> -->
    </div>
    <!-- <a href="<?=base_url()?>" class="login-logo d-none d-lg-block"><img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-logo.png" alt="thumb"></a> -->
    <div class="reset-area wait-sec-wrapper-two bg-transparent" style="background: transparent !important;">
        <div class="wait-sec">
            <div class="animated-ball-wrapper text-center">
                <span class="animate-ball ball-one"></span>
                <span class="animate-ball ball-two"></span>
            </div>
            <div class="text-bottom-wrapper text-center mb-4">
                <h4 class="title mb-2">Wait a sec</h4>
                <p class="text">Please wait while importing</p>
            </div>
        </div>
    </div>
</div>



<div class="face-section login-section upload-file-image">
    <div class="login-thumb d-none d-lg-block">
        <!-- <img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-bg.png" alt="thumb" class="object-point-none"> -->
    </div>
    
    <div class="container font-poppins">
        <div class="flex justify-center items-center mt-10">
            <!-- <a href="<?=base_url()?>" class="login-logo register-logo d-none d-lg-block"><img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-logo.png" alt="thumb" class="object-point-none"></a> -->
            <!-- <a href="<?=base_url()?>" class="login-logo-two d-lg-none d-block text-center"><img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-logo.png" alt="thumb" class="object-point-none"></a> -->
        </div>

        <div class="reset-area login-area d-flex justify-content-center align-items-center">

            

            <div class="login-wrapper border-none md:shadow-2xl">
                <div class="text-wrapper pb-35">
                    <h3 class="title">Take a Selfie</h3>
                </div>

                <input type="hidden" name="photo" id="photo" value="">
                <div id="alert"></div>

                <div class="face-thumb-two text-center pb-40">
                    <!-- <img src="<?php echo base_url();?>files/assets/images/thumb/face-thumb.png" alt="thumb"> -->
                    <div id="my_camera" style="width: 100%; margin: auto;"></div>
                    <div id="results" style="width: 100%; display: none;"></div>
                </div>

                <ul class="info-listing" id="capture_div">
                    <li class="mb-sm-1">
                        <button type="button" class="height-58 cmn--btn w-100 text-center btn--lg btn--lg-face mb-2 btn-effect" onclick="return capture();" style="width: 100%; border: none !important;">Take</button>
                    </li>
                    <li>
                         <?php 
                    if(!empty($_GET['loginFace']))
                    {
                        ?>
                        <a href="<?php echo base_url(); ?>addface/<?php echo $id; ?>" class="height-58 cmn--btn btn--outline-light w-100 text-center btn--lg btn--lg-face mt-1">Cancel</a>
                     <?php
                    }
                    else
                    {
                        ?>
                        <a href="<?php echo base_url(); ?>face-recognition/<?php echo $id; ?>" class="height-58 cmn--btn btn--outline-light w-100 text-center btn--lg btn--lg-face mt-1">Cancel</a>
                        <?php
                    }
                    ?>
                    </li>
                </ul>


                <ul class="info-listing" id="submit_div" style="display: none;">
                    <li class="mb-sm-1">
                        <button type="button" class="height-58 cmn--btn btn--outline-light w-100 text-center btn--lg btn--lg-face mb-2" onclick="return recapture();" style="width: 100%;">Re-take</button>
                    </li>

                    <li class="mb-sm-1">
                        <button type="button" class="height-58 cmn--btn w-100 text-center btn--lg btn--lg-face mt-1 btn-effect" style="border: none !important;" id="submit_btn" onclick="return upload_func();">Submit</button>
                    </li>
                    <div style="height: 20px;"></div>

                </ul>


            </div>
        </div>
    </div>
</div>






    <script type="text/javascript" src="<?php echo base_url();?>assets/js/webcam.min.js"></script>
    <script>
        var capture_image;
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
            video.srcObject = stream;
            })
            .catch(function (err0r) {
                console.log("Something went wrong!");
            });
        }

        function stop(e) {
            var stream = video.srcObject;
            var tracks = stream.getTracks();
    
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
    
            video.srcObject = null;
        }

        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );

        // TAKE A SNAPSHOT.
        capture = function () {
            Webcam.freeze();
            Webcam.snap(function (data_uri) {
                document.getElementById('results').innerHTML = 
                        '<img id="imageprev" src="'+data_uri+'"/>';
                capture_image = data_uri;
            });
            
            // Play Audio
            var audio = new Audio('<?php echo base_url("assets/shutter.mp3")?>');
            audio.play();

            $("#my_camera").hide();
            $("#results").show();
            $("#capture_div").hide();
            $("#submit_div").show();

            SiteDataStore('Take Selfie', 'Take a Selfie');
        }

        function recapture(){
            // cancel preview freeze and return to live camera feed
			Webcam.unfreeze();

            $("#my_camera").show();
            $("#results").hide();
            $("#capture_div").show();
            $("#submit_div").hide();

            SiteDataStore('Re Capture', 'Re Capture');

        }


        function upload_func() {  



            $("#alert").html('');
            $("#photo").val(capture_image);
            var image = document.getElementById('photo');
            // console.log(image.value);
            if(image.value == "") 
            {
                var shtml = '';
                shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                shtml += 'Please capture your photo';
                shtml += '</div>';
                $("#alert").html(shtml);
            }
            
            $(".upload-file-image").hide();
            $(".upload-file-loader").show();


            if(image.value != "") 
            {
                SiteDataStore('Take Selfie', 'Take Selfie Submit');
                $.ajax({
                    url : '<?=base_url()?>AuthController/SaveImageCompress',
                    type : 'POST',
                    data : {
                        photo : image.value,
                    },
                    dataType: 'json',
                    success : function(msg){
                        uploadServer(msg.success)
                    }
                });
            }
        }


        function uploadServer(photoimg) 
        {
                <?php
                if(!empty($_GET['addface']) || !empty($_GET['loginFace']))
                { ?>

                    $.ajax({
                        url : 'https://makeabl.net/api/add_faces',
                        type : 'POST',
                        data : {
                            id: '<?php echo $id;?>',
                            photo : photoimg
                        },
                        success : function(msg){
                            var shtml = '';
                            if(msg.result == "success")
                            {
                                shtml += '<div class="alert alert-success fade in alert-dismissible show" style="margin-top:18px;">';
                                shtml += '    <strong>Success!</strong> Successfully registered!';
                                shtml += '</div>';

                                <?php 
                                if(!empty($_GET['loginFace']))
                                {
                                ?>  
                                    document.location.href = "<?php echo base_url('sgallery'); ?>";
                                <?php 
                                }
                                else
                                {
                                    ?>
                                    document.location.href = "<?php echo base_url('addface-image/'.$id); ?>";
                                    <?php
                                }
                                ?>                                                    
                            }
                            else
                            {
                                shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                                shtml += ''+msg.message;
                                shtml += '</div>';

                                $(".upload-file-image").show();
                                $(".upload-file-loader").hide();

                                $("#my_camera").show();
                                $("#results").hide();
                                $("#capture_div").show();
                                $("#submit_div").hide();
                            }

                            $("#alert").html(shtml);
                        }
                    });

                <?php }
                else
                {
                    ?>


                        $.ajax({
                            url : 'https://makeabl.net/api/faceregister',
                            type : 'POST',
                            data : {
                                id: '<?php echo $id;?>',
                                photo : photoimg
                            },
                            success : function(msg){
                                var shtml = '';
                                if(msg.result == "success")
                                {
                                    shtml += '<div class="alert alert-success fade in alert-dismissible show" style="margin-top:18px;">';
                                    shtml += '    <strong>Success!</strong> Successfully registered!';
                                    shtml += '</div>';

                                    document.location.href = "<?php echo base_url('addface-image/'.$id); ?>";                               

                                } else if (msg.result == "undefined") {
                                    shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                                    shtml += 'This face has been registered. Kindly contact support team for assistance.' ;
                                    shtml += '</div>';
                                    $(".upload-file-loader").hide();
                                    $(".upload-file-image").show();                    
                                } else {
                                    shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                                    shtml += '' + msg.result;
                                    shtml += '</div>';
                                    $(".upload-file-loader").hide();
                                    $(".upload-file-image").show();                    
                                }

                                $("#alert").html(shtml);
                            }
                        });

                    <?php
                }
                ?>    
        }

        function SiteDataStore(type, desc) 
        {
            $.ajax({
                    url : '<?=base_url()?>SiteDataStoreController/SiteDataStore',
                    type : 'POST',
                    data : {
                        id: '<?php echo $id;?>',
                        type : type,
                        desc : desc,
                    },
                    success : function(msg){
                      
                    }
                });

        }
    </script>