<?php include "common.php" ?>

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

<style type="text/css">
    .cmn--btn:hover, .cmn--btn.active {
      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="login-section register-section upload-file-image">
    <div class="login-thumb">
        <!-- <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"></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-dashed padding--y border-none md:shadow-2xl">
                <div id="alert"></div>
                <label class="upload-file-wrapper text-center padding-b-15">
                    <div class="upload-file-thumb mb-4 pb-1">
                        <img src="<?php echo base_url();?>files/assets/images/thumb/upload-file.png" alt="thumb">
                    </div>
                    <div class="content">
                        <h6 class="title mb-2 d-none d-lg-block">Drag & drop files or <label for="browse">Browse</label></h6>
                        <h6 class="title mb-2 d-lg-none">Import your selfie <label for="browse">Here</label></h6>
                        <p class="fs--13px mb-0">Supported formates: JPEG, PNG</p>
                    </div>
                    <input type="file" class="d-none input-file-upload" onchange="showPreview(event);" accept="image/*" id="browse">
                </label>
                <img style="max-width: 100%; max-height: 200px; margin: auto; margin-top: 10px; display: none;" id="imagedata-preview">
                <ul class="info-listing pt-35">

                    <button type="button" class="height-58 mb-sm-1 mb-2 cmn--btn w-100 text-center btn--lg btn--lg-face btn-effect" style="color: #000; border: none !important;" id="save_btn" onclick="return upload_func()" style="width: 100%;">Upload</button>

                    <?php 
                    if(!empty($_GET['loginFace']))
                    {
                        ?>
                        <a href="<?php echo base_url(); ?>addface/<?php echo $id; ?>" class="height-58 d-lg-block cmn--btn active w-100 text-center btn--lg btn--lg-face mb-2">Cancel</a>
                        <?php
                    }
                    else
                    {
                        ?>
                        <a href="<?php echo base_url(); ?>face-recognition/<?php echo $id; ?>" class="height-58 d-lg-block cmn--btn active w-100 text-center btn--lg btn--lg-face mb-2">Cancel</a>
                        <?php
                    }
                    ?>
                    
                </ul>
            </div>
        </div>
    </div>
</div>



<div class="face-section login-section upload-file-loader" style="margin-top: 0px; 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">
        <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>
        function showPreview(event) {
            $("#alert").html('');
            if (event.target.files.length > 0) {
                var src = URL.createObjectURL(event.target.files[0]);
                var preview = document.getElementById("imagedata-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }

        var imagSrcData;

        function encodeLogoFileURL() {
            fileSelect = document.getElementById('browse').files;
            if (fileSelect.length > 0) {
                var fileSelect = fileSelect[0];
                var fileReader = new FileReader();

                fileReader.onload = function(FileLoadEvent) {
                    imagSrcData = FileLoadEvent.target.result;
                }

                fileReader.readAsDataURL(fileSelect)
            }
        }

        var imagedata = document.getElementById('browse');
        imagedata.addEventListener("change", function() {
            encodeLogoFileURL();
        })

        function upload_func() 
        {

            $("#alert").html('');
            var image = document.getElementById('browse');
            if (image.value == "") {
                var shtml = '';

                shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                shtml += 'Please select a selfie to upload.';
                shtml += '</div>';
                $("#alert").html(shtml);
                image.focus();
                return false;
            }
            else
            {
                $(".upload-file-image").hide();
                $(".upload-file-loader").show();

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

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

        }


        function upload_func_direct(imagSrcDataData)
        {

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


                $.ajax({
                    url: 'https://makeabl.net/api/add_faces',
                    type: 'POST',
                    data: {
                        id: '<?php echo $id; ?>',
                        photo: imagSrcDataData
                    },
                    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-loader").hide();
                            $(".upload-file-image").show();                    
                        }

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


            <?php }
            else
            { ?>


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

       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>