    <style>
        body {
            margin:0px;
            height:100vh;
            background:#333;
        }

        .center {
            height:100%;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .form-input {
            width:100%;
            padding:20px;
            background:#fff;
            border:2px dashed #40dcfd;
        }

        .form-input input {
            display:none;
        }
        
        .form-input label {
            display:block;
            width:100%;
            height:50px;
            line-height:50px;
            text-align:center;
            background:#40dcfd;
            color:#fff;
            font-size:15px;
            font-family:"Open Sans",sans-serif;
            text-transform:Uppercase;
            font-weight:600;
            border-radius:10px;
            cursor:pointer;
        }

        .form-input img {
            width: auto;
            height: 100%;
            text-align: center;
            margin: auto;
        }
    </style>
    <div class="card-body pt-3">

        <h4 class="card-title text-center">Upload Selfie from Photo</h4>
        <p class="card-title-desc" style="margin-bottom: 10px;">To ensure you receive your content, we require a front facing photo of you </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- Front Face Photo </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- No Sun-glasses </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- No Mask </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- No Blur </p>
        
        <div class="center pt-3">
            <div class="form-input">
                <label for="imagedata">Select Photo</label>
                <input type="file" id="imagedata" accept="image/*" onchange="showPreview(event);">
                <div class="preview" style="height: 270px; overflow: hidden;">
                    <img id="imagedata-preview">
                </div>
            </div>
        </div>

        <div id="alert"></div>
        
        <div class="text-center mt-4">
            <button type="button" class="btn btn-primary waves-effect waves-light" id="save_btn" onclick="return upload_func()" style="width: 100%;">Upload</button>
            <button type="button" class="btn btn-primary waves-effect waves-light" id="loading_btn" style="width: 100%; display: none;">
                <i class="bx bx-loader bx-spin font-size-16 align-middle mr-2"></i> Uploading
            </button>
        </div>

        <div class="mt-3 text-center">
            <p>Remember ? <a href="<?php echo base_url('login');?>" class="font-weight-medium text-primary"> Login</a> </p>
            <p>© <script>document.write(new Date().getFullYear());</script> makeabl
        </div>
    </div>
    
    <script>       
        function showPreview(event){
            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('imagedata').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('imagedata');
        imagedata.addEventListener("change", function(){
            encodeLogoFileURL();
        })        

        function upload_func() {
            var image = document.getElementById('imagedata');
            if(image.value == ""){
                alert("Please select your photo");
                image.focus();
                return false;
            }
            
            $("#save_btn").hide();
            $("#loading_btn").show();

            $.ajax({
                url : 'https://mymakeabl.com/api/faceregister',
                type : 'POST',
                data : {
                    id: '<?php echo $id;?>',
                    photo : imagSrcData
                },
                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 += '    <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                        shtml += '        <span aria-hidden="true" style="font-size:20px">×</span>';
                        shtml += '    </button>';
                        shtml += '    <strong>Success!</strong> Successfully registered!';
                        shtml += '</div>';
                        
                        $.ajax({
                            url: "<?php echo base_url();?>AuthController/reglogin",
                            type : 'POST',
                            data : {
                                guest_id: '<?php echo $id;?>',
                                face_url: msg.face_url
                            },
                            success : function(msg){
                                if(msg == "success")
                                    document.location.href = "<?php echo base_url('login');?>";
                            }
                        });
                    }else{
                        shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                        shtml += '   <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                        shtml += '      <span aria-hidden="true" style="font-size:20px">×</span>';
                        shtml += '   </button>';
                        shtml += '   <strong>Failed!</strong> '+msg.result;
                        shtml += '</div>';
                    }

                    $("#alert").html(shtml);
                }
            });
        }
    </script>