<?php include "common2.php" ?>

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

<style type="text/css">
.mobile-show {
    display: none;
}
.login-wrapper {
    background: #fff !important;
    backdrop-filter: none;
}
.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;
}

@media (max-width:576px) {
    .mobile-show {
        display: flex;
    }
    .mobile-hide {
        display: none;
    }
}

</style>

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



<div class="login-section register-section upload-file-image">
    <div class="login-thumb d-small-none">
        <!-- <img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-bg.png" alt="thumb"> -->
    </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"></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"></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 position-relative d-none d-lg-block mb-0">
                    <h3 class="title">Take a Selfie</h3>
                    <?php
                    if(!empty($loginFace))
                    {
                        ?>
                        <a href="<?=base_url('account')?>" class="skip-text">Back</a>
                        <?php
                    }
                    else
                    {
                        ?>
                        <a href="javascript:;" class="skip-text skipLogin">Skip</a>
                        <?php
                    }
                    ?>
                    

                    <p class="text">To ensure you receive your content, we require a front facing selfie</p>
                </div>
                <div class="text-wrapper position-relative d-lg-none mb-0 pt-sm-0">
                    <h3 class="title mb-1">Take a Selfie</h3>
                    <?php
                    if(!empty($loginFace))
                    {
                        ?>
                        <a href="<?=base_url('account')?>" class="skip-text">Back</a>
                      <?php
                    }
                    else
                    {
                        ?>
                        <a href="javascript:;" class="skip-text skipLogin">Skip</a>
                        <?php
                    }
                    ?>
                    
                    <p class="text">To ensure you receive your content, we require a front facing selfie</p>
                </div>

                <div id="alert"></div>

                <div class="face-thumb text-center py-2">
                    <img src="<?php echo base_url();?>files/assets/images/thumb/imgpsh_fullsize_anim(1).gif" alt="thumb">
                </div>
                <ul class="info-listing">
                <li class="d-flex items-start">
                        <div class="serial mt-1.5">1</div>
                        <div class="content">
                            <h5 class="text-base">Clear Photo</h5>
                            <p>Make sure your lighting is correct and try not to blurred</p>
                        </div>
                    </li>
                    <li class="d-flex items-start">
                        <div class="serial mt-1.5">2</div>
                        <div class="content">
                            <h5 class="text-base">Visible Face</h5>
                            <p>Take off your mask, glasses and other things that can cover your face</p>
                        </div>
                    </li>
                    <li class="d-flex items-start">
                        <div class="serial mt-1.5">3</div>
                        <div class="content">
                            <h5 class="text-base">Maximum 4 Selfies</h5>
                            <p>Add a maximum of 4 selfies for each account</p>
                        </div>
                    </li>

                    <input type="file" class="d-none input-file-upload" capture="environment" accept="image/*"  id="browse">

                    <a href="javascript:;" id="OpenImgUpload" class="height-58 cmn--btn w-100 text-center btn--lg btn--lg-face mb-2 mobile-show btn-effect">Capture</a>

                    <?php
                    if(!empty($loginFace))
                    { ?>

                         <a href="<?php echo base_url(); ?>webcam/<?php echo $id; ?>?loginFace=true" class="height-58 cmn--btn w-100 text-center btn--lg btn--lg-face mb-2 mobile-hide btn-effect">Capture</a>

                        <a href="<?php echo base_url(); ?>register-image/<?php echo $id; ?>?loginFace=true" class="height-58 cmn--btn btn--outline-light w-100 text-center btn--lg btn--lg-face mt-1">Import from device</a>
                   

                    <?php }
                    else
                    { ?>

                        <a href="<?php echo base_url(); ?>webcam/<?php echo $id; ?><?=!empty($_GET['addface'])?'?addface=true':''?>" class="height-58 cmn--btn w-100 text-center btn--lg btn--lg-face mb-2 mobile-hide btn-effect">Capture</a>

                        <a href="<?php echo base_url(); ?>register-image/<?php echo $id; ?><?=!empty($_GET['addface'])?'?addface=true':''?>" class="height-58 cmn--btn btn--outline-light w-100 text-center btn--lg btn--lg-face mt-1">Import from device</a>
                   
                    <?php }

                    ?>
                    
                </ul>
            </div>
        </div>
    </div>
</div>


<div class="face-section login-section upload-file-loader" style="margin-top: -100px; 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">
        <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>


<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    $('body').delegate('.skipLogin', 'click', function() {
            skipLogin();       
    });    


    function skipLogin()
    {
         $.ajax({
            url: "<?php echo base_url(); ?>AuthController/reglogin",
            type: 'POST',
            data: {
                guest_id: '<?php echo $id; ?>',
                face_url: ''
            },
            success: function(msg) {
                if (msg == "success")
                {
                    document.location.href = "<?php echo base_url('login'); ?>";
                }
            }
        });
    }


   $('body').delegate('#OpenImgUpload','click',function(e) {
        SiteDataStore('Capture', 'Capture');
       $("#alert").html('');
       $('#browse').trigger('click'); 
   });


         var imagSrcData;

        function encodeLogoFileURL() {



              const resize_width = 600;

              const item = document.querySelector('#browse').files[0];

              const reader = new FileReader();

              reader.readAsDataURL(item);
              reader.name = item.name;
              reader.size = item.size;
              reader.onload = function(event) {
                const img = new Image();
                img.src = event.target.result;
                img.name = event.target.name;
                img.size = event.target.size;
                img.onload = function(el) {
                  const elem = document.createElement('canvas');

                  const scaleResize = resize_width / el.target.width;
                  elem.width = resize_width;
                  elem.height = el.target.height * scaleResize;

                  const ctx = elem.getContext('2d');
                  ctx.drawImage(el.target, 0, 0, elem.width, elem.height);

                  imagSrcData = ctx.canvas.toDataURL('image/jpeg', 1);

                 
                        $.ajax({
                            url : '<?=base_url()?>AuthController/SaveImageCompress',
                            type : 'POST',
                            data : {
                                photo : imagSrcData,
                            },
                            dataType: 'json',
                            success : function(msg){
                                upload_func(msg.success);
                            }
                        });
                }
              }

        }

        var imagedata = document.getElementById('browse');
        imagedata.addEventListener("change", function() {
            $("#alert").html('');
            encodeLogoFileURL();

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

            // setTimeout(function(){
            //     upload_func();
            // }, 3000);
                    
        })



        function upload_func(imagSrcDataUpload) {

            SiteDataStore('Import Device', 'Import Device Submit');

            <?php
            if(!empty($_GET['addface']) || !empty($loginFace))
            { ?>
                $.ajax({
                    url: 'https://makeabl.net/api/add_faces',
                    type: 'POST',
                    data: {
                        id: '<?php echo $id; ?>',
                        photo: imagSrcDataUpload
                    },
                    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($loginFace))
                            {
                                ?>
                                document.location.href = "<?php echo base_url('sgallery'); ?>";
                                <?php
                            }
                            else
                            {
                                ?>
                                // document.location.href = "<?php echo base_url('addface-image/'.$id); ?>";
                                skipLogin();
                                <?php
                            }
                            ?>
                            

                        } else {
                            shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                            shtml += '' + msg.message;
                            shtml += '</div>';
                            $(".upload-file-loader").hide();
                            $(".upload-file-image").show();                    
                        }

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

            <?php }
            else
            { ?>


                 $.ajax({
                    url: 'https://makeabl.net/api/faceregister',
                    type: 'POST',
                    data: {
                        id: '<?php echo $id; ?>',
                        photo: imagSrcDataUpload
                    },
                    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); ?>";
                            skipLogin();
                            
                        } 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>