<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title><?php echo $title; ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="<?php echo base_url(); ?>assets/img/ic_launcher_round.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/libs/toastr/build/toastr.min.css">
    <link href="<?php echo base_url(); ?>assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
    <!-- Lightbox css -->
    <link href="<?php echo base_url(); ?>assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
    <!-- Bootstrap Css -->
    <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
    <!-- DataTables -->
    <link href="<?php echo base_url(); ?>assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- Responsive datatable examples -->
    <link href="<?php echo base_url(); ?>assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <script src="./assets/icon/feather.min.js"></script>
    <!-- Icons Css -->
    <link href="<?php echo base_url(); ?>assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/css/gallery/gallery.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/libs/dropzone/min/dropzone.min.css" rel="stylesheet">
    <!-- App Css-->
    <link href="<?php echo base_url(); ?>assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    <style>
        body {
            background-color: #fff;
            margin: 0px;
            height: 100vh;
        }

        .form-control {
            border-radius: 1.25rem;
        }

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

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

        .form-input input {
            display: none;
        }

        .form-input label {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #ED7D58;
            color: #fff;
            font-size: 15px;
            font-family: "Open Sans", sans-serif;
            text-transform: Uppercase;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
        }
        .login_btn {
            display: block;
            width: 100%;
             height: 50px; 
            line-height: 50px;
            text-align: center;
            background: #ED7D58;
            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>
</head>

<body data-sidebar="dark" data-sidebar-size="small">
    <!-- Begin page -->
    <div id="layout-wrapper">
        <header id="page-topbar">
            <div class="navbar-header">
                <div class="d-flex">
                    <!-- LOGO -->
                    <div class="navbar-brand-box">
                        <a href="<?php echo base_url('sgallery'); ?>" class="logo logo-light">
                            <span class="logo-sm">
                                <img src="<?php echo base_url(); ?>assets/images/favicon.png" alt="" height="22">
                            </span>
                            <span class="logo-lg">
                                <img src="http://d38x82mkkml5o1.cloudfront.net/Country/Hong_Kong/Hong_Kong_Wheel/image/HKOW_sitelogo.png" alt="" style="width: 70%; height: 30%;">
                            </span>
                        </a>
                    </div>
                    <button type="button" class="btn btn-sm px-3 font-size-16 header-item waves-effect" id="vertical-menu-btn">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                </div>
                <div class="d-flex" style="padding-right: 0px;">
                    <div class="dropdown d-inline-block">
                        <div class="btn header-item waves-effect d-flex align-items-center" onclick="qrdetail('<?php echo $guest_detail['qr_url'] ?>')">
                            <!-- <?php
                                    if ($guest_detail['photo_url'] == "" && $guest_detail['qr_url'] != "") {
                                    ?>
                        <img class="rounded-circle header-profile-user" src="<?php echo $guest_detail['qr_url']; ?>" alt="<?php echo $guest_detail['email']; ?>" style="border: solid 1px #40dcfd;">
                        <?php
                                    } else if ($guest_detail['photo_url'] != "" && $guest_detail['qr_url'] == "") {
                        ?>
                        <img class="rounded-circle header-profile-user" src="https://hkow.makeabl.io/uploads/qrcode/20_20211025073638.png" alt="<?php echo $guest_detail['email']; ?>" style="border: solid 1px #40dcfd;">
                        <?php
                                    } else {
                        ?>
                        <img class="rounded-circle header-profile-user" src="https://hkow.makeabl.io/uploads/qrcode/20_20211025073638.png" alt="<?php echo $guest_detail['email']; ?>" style="border: solid 1px #40dcfd;">
                        <?php
                                    }
                        ?> -->
                            <!-- <span class="d-none d-xl-inline-block ml-1 text-dark"><?php echo $guest_detail['email']; ?></span> -->
                        </div>
                    </div>
                    <!-- <div class="dropdown d-inline-block">
                     <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-notifications-dropdown"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="bx bx-bell bx-tada"></i>
                         <span class="badge badge-danger badge-pill"><?php echo $new_notification_count; ?></span>
                     </button>
                     <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0"
                         aria-labelledby="page-header-notifications-dropdown">
                         <div class="p-3">
                             <div class="row align-items-center">
                                 <div class="col">
                                     <h6 class="m-0"> Notifications </h6>
                                 </div>
                             </div>
                         </div>
                         <div data-simplebar style="max-height: 230px;">
                             <?php
                                if (count($notification_list) > 0) {
                                    foreach ($notification_list as $key => $val) {
                                        if ($val['isShow'] == 0) {
                                ?>
                                             <a href="<?php echo base_url(); ?>notification" class="text-reset notification-item">
                                                 <div class="media">
                                                     <div class="avatar-xs mr-3">
                                                         <span class="avatar-title bg-primary rounded-circle font-size-16">
                                                             <i class="<?php echo $val['class_info']; ?>"></i>
                                                         </span>
                                                     </div>
                                                     <div class="media-body">
                                                         <h6 class="mt-0 mb-1"><?php echo $val['notification']; ?></h6>
                                                         <div class="font-size-12 text-muted">
                                                             <p class="mb-0"><i class="mdi mdi-clock-outline"></i> <?php echo $val['created_at']; ?></p>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </a>
                             <?php
                                        } else {
                                ?>
                             
                             <?php
                                        }
                                    }
                                }
                                ?>
                         </div>
                         <div class="p-2 border-top">
                             <a class="btn btn-sm btn-link font-size-14 btn-block text-center" href="<?php echo base_url(); ?>notification" style="color: #365e7d;">
                                 <i class="mdi mdi-arrow-right-circle mr-1"></i> View All
                             </a>
                         </div>
                     </div>
                     </div> -->
                </div>
            </div>
        </header>
        <div class="qrviewModals" role="dialog" aria-labelledby="exampleModalLabel" style="position:absolute; z-index:100000000;display:none;top:0;">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Details</h5>
                        <button type="button" class="close" data-dismiss="modal" onclick="closeqr()" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src="" id="qrImgs" style="width: 100%;">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeqr()" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .icon_img {
                border: 0;
                max-width: 100%;
            }
        </style>
        <!-- ========== Left Sidebar Start ========== -->
        <div class="vertical-menu" style="position:absolute; left:0px;">
            <div data-simplebar class="h-100">
                <!--- Sidemenu -->
                <div id="sidebar-menu">
                    <!-- Left Menu Start -->
                    <ul class="metismenu list-unstyled" id="side-menu">
                        <?php
                        if ($is_single_gallery == 1) {
                        ?>
                            <li>
                                <a href="<?php echo base_url('sgallery'); ?>" class="waves-effect">
                                    <div class="slidebar_icon">
                                        <div>
                                            <i data-feather="image"></i>
                                            <span>Album</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        <?php
                        } else {
                        ?>
                            <li>
                                <a href="<?php echo base_url('sgallery'); ?>" class="waves-effect">
                                    <div class="slidebar_icon">
                                        <div>
                                            <i data-feather="image"></i>
                                            <span>Album</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        <?php
                        }
                        ?>
                        <li>
                            <a href="<?php echo base_url('account'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="user"></i>
                                        <span>Account</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('purchase'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="smartphone"></i>
                                        <span>digital package</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('addface'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="face"></i>
                                        <span>Add Face</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('myqr'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <img src="http://hkow.makeabl.io/assets/img/qr.svg" alt="qr" class="h-hide">
                                        <img src="http://hkow.makeabl.io/assets/img/qr-white.svg" alt="qr" class="h-show">
                                        <span>my qr</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('merchandise'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="package"></i>
                                        <span>shop</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('cart'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="shopping-cart"></i>
                                        <span>cart</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('faqs'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="info"></i>
                                        <span>faq</span>
                                    </div>
                                </div>
                                <!-- <div style="padding: 0px 35px;">
                              <img src="<?php echo base_url(); ?>assets/images/icon/help.png" class="icon_img">
                              </div>
                              <div>
                              <span>Help</span>
                              </div> -->
                            </a>
                        </li>
                        <li>
                            <a href="<?php echo base_url('logout'); ?>" class="waves-effect">
                                <div class="slidebar_icon">
                                    <div>
                                        <i data-feather="log-out"></i>
                                        <span>logout</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Sidebar -->
            </div>
        </div>
        <!-- Left Sidebar End -->
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    <!-- start page title -->
                    <div class="msg" style="color: red"></div>
                    <div class="row justify-content-center">
                        <div class="col-md-12">
                            <div class="page-title-box d-flex align-items-center justify-content-between">
                                <h3>My QR Code</h3>
                            </div>
                        </div>
                        <!-- end row -->
                    </div>
                    <div class="row justify-content-center">

                        <div class="col-md-6 col-sm-12">
                            <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 login_btn waves-effect waves-light" id="save_btn" onclick="return upload_func()" style="width: 100%;">Upload</button>
                                    <button type="button" class="btn login_btn 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>
                                <footer style="background:white; margin: bottom 1px; position:relative" class="footer">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm-12 text-right">
                                                <script>
                                                    document.write(new Date().getFullYear())
                                                </script> © makeabl
                                            </div>
                                        </div>
                                    </div>
                                </footer>


                            </div>
                        </div>
                    </div>
                    <!-- container-fluid -->
                </div>



                <!-- End Page-content -->
                <div class="modal fade viewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Details</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p class="mb-2">Order ID: <span class="text-primary" id="order_id"></span></p>
                                <p class="mb-4">Shipping Method: <span class="text-primary" id="shipping_method"></span></p>
                                <div class="table-responsive">
                                    <table class="table table-centered table-nowrap">
                                        <thead>
                                            <tr>
                                                <th scope="col">Merchandise</th>
                                                <th scope="col">Title</th>
                                                <th scope="col">Size</th>
                                                <th scope="col">Price</th>
                                            </tr>
                                        </thead>
                                        <tbody id="detail_tbody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade qrviewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Details</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <img src="" id="qrImg" style="width: 100%;">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade openQRModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Scan QR</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="msg"></div>
                                <div class="row">
                                    <div id="qr-reader" class="col-md-12"></div>
                                    <div id="qr-reader-results"></div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end main content-->
        </div>
        <!-- END layout-wrapper -->
        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>
        <!-- JAVASCRIPT -->
        <script src="<?php echo base_url(); ?>assets/libs/jquery/jquery.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/libs/simplebar/simplebar.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/libs/node-waves/waves.min.js"></script>
        <!-- toastr plugin -->
        <script src="<?php echo base_url(); ?>assets/libs/toastr/build/toastr.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/webcam.min.js"></script>
        <!-- toastr init -->
        <script src="<?php echo base_url(); ?>assets/js/pages/toastr.init.js"></script>
        <!-- Sweet Alerts js -->
        <script src="<?php echo base_url(); ?>assets/libs/sweetalert2/sweetalert2.min.js"></script>
        <!-- Sweet alert init js-->
        <script src="<?php echo base_url(); ?>assets/js/pages/sweet-alerts.init.js"></script>
        <script src="<?php echo base_url(); ?>assets/js/app.js"></script>
        <script src="<?php echo base_url(); ?>assets/js/html5-qrcode.min.js"></script>
        <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();
                var shtml = '';
                if (<?php echo $actual_faces_added['cnt']; ?> >= <?php echo $site_row['max_number_of_faces']; ?>) {
                    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! You are already added maximum number of photo !</strong> ';
                    shtml += '</div>';
                    $("#alert").html(shtml);
                    $("#loading_btn").hide();
                    $("#save_btn").show();
                    return false;
                }

                $.ajax({
                    url: 'https://makeabl.net/api/add_faces',
                    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>';
                            $("#loading_btn").hide();
                            setTimeout(refresh_func(), 3000);

                            // $.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>';
                            $("#loading_btn").hide();
                            $("#save_btn").show();
                        }

                        $("#alert").html(shtml);
                    }
                });
            }
            	function refresh_func() {
		location.reload();
	}
        </script>
</body>
<style>
    .qrviewModals {
        left: 40%;
    }

    @media only screen and (max-width: 600px) {
        .qrviewModals {
            left: 10%;
        }
    }
</style>
<script>
    feather.replace()
</script>

</html>