    <link href="<?php echo base_url();?>assets/css/custom.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url();?>assets/css/custom-style.css" rel="stylesheet" type="text/css" />
    <style>
        .pr-img-area img {
            width: auto; 
        }
        .tab-content img {
            width: auto; 
        }
    </style>
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-md-8">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h3 style="color: #40dcfd; text-transform: lowercase;">my gallery</h3>
                        </div>
                    </div>
               </div>
               <!-- end page title -->

                <div class="row">
                    <div class="col-lg-12">
                        
                        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title mt-0" id="myModalLabel">New Gallery</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="center mb-4" id="gallery_image_div">
                                            <div class="form-input">
                                                <label for="imagedata">Select Photo</label>
                                                <input type="file" id="imagedata" accept="image/*" onchange="showPreview(event);">
                                                <div class="preview" style="width: 100%; height: 410px; overflow: hidden">
                                                    <img id="imagedata-preview">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="center mb-4 text-center" id="gallery_desc_div" style="display:none;">
                                            <div class="form-input">
                                                <p style="font-size: 16px;">You can't upload gallery on the site.</p>
                                            </div>
                                        </div>
                                        
                                        <div id="error_alert"></div>

                                        <div class="col-md-12 text-right">
                                            <button type="button" class="btn btn-primary waves-effect waves-light" id="save_btn" onclick="upload_func();">Save changes</button>
                                            <button type="button" class="btn btn-primary waves-effect waves-light" id="loading_btn" style="display: none;">
                                                <i class="bx bx-loader bx-spin font-size-16 align-middle mr-2"></i> Uploading
                                            </button>
                                            <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                                        </div>
                                        
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div>

                        <div class="form-group row">
                            <div id ="filter" class="col-md-1">
                                <div class="row">
                                    <div class="col-md-3" id="srch_upload_type" style="display: none;">
                                        <select class="form-control" onchange="srch_upload_type($(this).val())">
                                            <option value="">Content</option>
                                            <option value="0">My Upload</option>
                                            <option value="1">Staff Upload</option>
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-3" id="srch_favorite" style="display: none;">
                                        <select class="form-control" onchange="srch_favorite($(this).val())">
                                            <option value="">All</option>
                                            <option value="1">Favorite</option>
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-3" id="srch_type" style="display: none;">
                                        <select class="form-control" onchange="srch_type($(this).val())">
                                            <option value="">All</option>
                                            <option value="0">Image</option>
                                            <option value="1">Video</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-11 text-right">
                                <button type="button" class="btn btn-primary waves-effect waves-light" style="border-radius: 50px;" onclick="openQRModal()">
                                    Scan QR
                                    <i class="fa fa-qrcode"></i>
                                </button>
                                <button class="btn btn-primary" onclick="go_purchase();" style="border-radius: 50px;">Purchase Pass</button>
                                <button type="button" class="btn btn-primary waves-effect waves-light" style="border-radius: 50px;" onclick="openModal()">
                                    Upload Content
                                    <i class="fa fa-image"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-body">

                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#photo" role="tab" title="Photo">
                                            <img src="<?php echo base_url();?>assets/images/icon/photo.png" style="width: 40px;" onclick="photo_func(1);">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#video" role="tab" title="Video">
                                            <img src="<?php echo base_url();?>assets/images/icon/video.png" style="width: 40px;" onclick="photo_func(2);">
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#album" role="tab" title="Album">
                                            <img src="<?php echo base_url();?>assets/images/icon/album.png" style="width: 40px;" onclick="photo_func(3);">
                                        </a>
                                    </li>                                    
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content p-3 text-muted">
                                    <div class="tab-pane active" id="photo" role="tabpanel">
                                        <div class="row">
                                            <?php 
                                                if(count($gallery_list) > 0){
                                                    foreach($gallery_list as $key => $val){
                                            ?>
                                                        <div class="col-sm-3 col-xs-3">
                                                            <div class="shop-inner">
                                                                <div class="product-grid-area">
                                                                    <ul class="products-grid">
                                                                        <li class="item">
                                                                            <div class="product-item">
                                                                                <div class="item-inner">
                                                                                    <div class="product-thumbnail"> 
                                                                                        <?php 
                                                                                            //Convert date and time to second;
                                                                                            $curtimestamp = strtotime(date('Y-m-d H:i:s'));
		                                                                                    $createdtimestamp = strtotime($val['created_at']);
		                                                                                    
		                                                                                    //Get difference between current date and created date
		                                                                                    $difftimestamp = $curtimestamp - $createdtimestamp;
		                                                                                    
		                                                                                    //Convert second to day 
		                                                                                    $diffday = date('d', $difftimestamp);
                                                                                            
                                                                                            if($diffday < 3)
                                                                                                echo '<div class="icon-new-label new-right">New</div>';
                                                                                        ?>
                                                                                        <div class="pr-img-area">
                                                                                            <a href="<?php echo base_url();?>gallery-detail/<?php echo $val['id'];?>/<?php echo $val['site_id'];?>">
                                                                                                <figure>
                                                                                                    <img class="first-img" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['orig_comp_file_url'];?>" alt="">
                                                                                                </figure>
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                            <?php
                                                    }
                                                }else{
                                            ?>
                                                    <div class="col-md-12">
                                                        <span>No Gallery Data</span>
                                                    </div>
                                            <?php
                                                }
                                            ?>
                                        </div>
                                        <!-- Pagination -->
                                        <div class="row">
                                            <div class="col-md-12 mt-1 d-none d-md-block">
                                                <span><?php echo $gallery_count;?></span> Photos
                                            </div>
                                        </div>
                                        <!-- Pagination -->
                                    </div>
                                    
                                    <div class="tab-pane" id="video" role="tabpanel">
                                        <div class="row">
                                            <?php 
                                                if(count($video_list) > 0){
                                                    foreach($video_list as $key => $val){
                                            ?>
                                                        <div class="col-sm-3 col-xs-3">
                                                            <div class="shop-inner">
                                                                <div class="product-grid-area">
                                                                    <ul class="products-grid">
                                                                        <li class="item">
                                                                            <div class="product-item">
                                                                                <div class="item-inner">
                                                                                    <div class="product-thumbnail">
                                                                                        
                                                                                        <?php 
                                                                                            //Convert date and time to second;
                                                                                            $curtimestamp = strtotime(date('Y-m-d H:i:s'));
		                                                                                    $createdtimestamp = strtotime($val['created_at']);
		                                                                                    
		                                                                                    //Get difference between current date and created date
		                                                                                    $difftimestamp = $curtimestamp - $createdtimestamp;
		                                                                                    
		                                                                                    //Convert second to day 
		                                                                                    $diffday = date('d', $difftimestamp);
                                                                                            
                                                                                            if($diffday < 3)
                                                                                                echo '<div class="icon-new-label new-right">New</div>';
                                                                                        ?>

                                                                                        <div class="pr-img-area">
                                                                                            <a href="<?php echo base_url();?>video-detail/<?php echo $val['id'];?>/<?php echo $val['site_id'];?>">
                                                                                                <figure>
                                                                                                    <div class="parent">
                                                                                                        <img class="first-img image1" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['comp_attachment'];?>" alt="">
                                                                                                        <img class="first-img image2" src="<?php echo base_url();?>uploads/video-overlay.png" alt="">
                                                                                                    </div>
                                                                                                </figure>
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                            <?php
                                                    }
                                                }else{
                                            ?>
                                                    <div class="col-md-12">
                                                        <span>No Video Data</span>
                                                    </div>
                                            <?php
                                                }
                                            ?>
                                        </div>
                                        <!-- Pagination -->
                                        <div class="row">
                                            <div class="col-md-12 mt-1 d-none d-md-block">
                                                <span><?php echo $video_count;?></span> Videos
                                            </div>
                                        </div>
                                        <!-- Pagination -->
                                    </div>  
                                    
                                    <div class="tab-pane" id="album" role="tabpanel">
                                        <div class="row" id="album_div">
                                            <?php 
                                                if(count($album_list) > 0){
                                                    foreach($album_list as $key => $val){
                                            ?>
                                                        <div class="col-sm-3 col-xs-3" style="display: flex; align-items: center; justify-content: center;">
                                                            <div class="shop-inner">
                                                                <div class="product-grid-area">
                                                                    <ul class="products-grid">
                                                                        <li class="item">
                                                                            <div class="product-item">
                                                                                <div class="item-inner">
                                                                                    <div class="product-thumbnail">
                                                                                        <div class="pr-img-area">
                                                                                            <?php 
                                                                                                $file_url = explode('.', $val['process_file_url']);
                                                                                                if($file_url[1] == "mp4"){
                                                                                            ?>
                                                                                            <figure>
                                                                                                <div class="parent">
                                                                                                    <img class="first-img image1" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['process_comp_file_url'];?>" alt="">
                                                                                                    <img class="first-img image2" src="<?php echo base_url();?>uploads/video-overlay.png" alt="" onclick="show_func('<?php echo $val["id"];?>')" style="cursor: pointer;">
                                                                                                </div>
                                                                                            </figure>
                                                                                            <?php
                                                                                                }else{
                                                                                            ?>
                                                                                            <figure>
                                                                                                <img class="first-img" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['process_comp_file_url'];?>" alt="" onclick="show_func('<?php echo $val["id"];?>')" style="cursor: pointer;">
                                                                                            </figure>
                                                                                            <?php
                                                                                                }
                                                                                            ?>
                                                                                        </div>
                                                                                        
                                                                                        <div class="br-button" style="margin-top: -50px;">
                                                                                            <div class="mt-button add_to_wishlist"> 
                                                                                                <?php if($val['favourite_id'] == 0){?>
                                                                                                    <a href="javascript:;" onclick="favorite_func('<?php echo $val["id"];?>', '1');" title="Favourite">
                                                                                                        <i class="bx bx-heart" style="font-size: 20px; color: #fff;"></i>
                                                                                                    </a> 
                                                                                                <?php }else{?>
                                                                                                    <a href="javascript:;" onclick="favorite_func('<?php echo $val["id"];?>', '0');" title="Unfavourite">
                                                                                                        <i class="mdi mdi-heart text-danger" style="font-size: 20px;"></i>
                                                                                                    </a> 
                                                                                                <?php }?>
                                                                                            </div>
                                                                                            <div class="mt-button add_to_compare">
                                                                                                <a href="http://www.facebook.com/share.php?u=http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['process_file_url'];?>" title="Share"> 
                                                                                                    <i class="bx bx-share" style="font-size: 20px; color: #fff;"></i> 
                                                                                                </a> 
                                                                                            </div>
                                                                                            <div class="mt-button quick-view"> 
                                                                                                <a href="<?php echo base_url();?>gallery/download/<?php echo $val['id'];?>" title="Download"> 
                                                                                                    <i class="bx bx-download" style="font-size: 20px; color: #fff;"></i> 
                                                                                                </a> 
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                            <?php
                                                    }
                                                }else{
                                            ?>
                                                    <div class="col-md-12">
                                                        <span>No Album Data</span>
                                                    </div>
                                            <?php
                                                }
                                            ?>
                                        </div>
                                        <!-- Pagination -->
                                        <div class="row">
                                            <div class="col-md-12 mt-1 d-none d-md-block">
                                                <span id="album_count"><?php echo $album_count;?></span> Photos
                                            </div>
                                        </div>
                                        <!-- Pagination -->
                                    </div>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
        
        <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 class="modal fade bs-example-modal-center" id="show_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mt-0">View</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 class="row">
                            <div class="col-md-12" id="show_modal_div"></div>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <script>
            /*
                All function calls is to do with Ajax(search function, favourite function...)
            */

            var imagSrcData;
            if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
            || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)))
            {
                document.getElementById('filter').style.display = 'none';
            }
            
            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)
                }
            }
            
            function upload_func(){
                
                var html = '';
                
                var site_id = <?php echo $site_id;?>;
                $("#save_btn").hide();
                $("#loading_btn").show();
                
                $.ajax({
                    url : 'https://mymakeabl.com/api/guest_upload_image',
                    type : 'POST',
                    data : {
                        image : imagSrcData,
                        site_id : site_id,
                        guest_id : <?php echo $userdata['id'];?>
                    },
                    success : function(msg){
                        if(msg.result == "success"){
                            location.reload();
                        }else{
                            
                            shtml += '<div class="col-md-12">';
                            shtml += '    <div class="form-group row mb-4">';
                            shtml += '        <div class="alert alert-info fade in alert-dismissible show" style="width: 100%;">';
                            shtml += '            Failed! '+msg.result;
                            shtml += '        </div>';
                            shtml += '    </div>';
                            shtml += '</div>';
                            
                            $("#error_alert").show();
                            $("#save_btn").show();
                            $("#loading_btn").hide();
                        }
                    }
                });
            }

            function openModal(){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/get_site_info",
                    data: {
                        edit_site_id: '<?php echo $site_id?>'
                    }
                })
                .done(function(msg) {
                    var json_obj = JSON.parse(msg);
                    
                    if(json_obj[0].enable_upload_status == 1){
                        $("#gallery_desc_div").show();
                        $("#gallery_image_div").hide();
                        $("#save_btn").hide();
                    }else{
                        $("#gallery_desc_div").hide();
                        $("#gallery_image_div").show();
                        $("#save_btn").show();
                    }

                    $('#myModal').modal('show');
                });
            }
            
            /////////////// Favourite function ////////////////////

            function favorite_func(edit_id, state){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/favorite_func",
                    data: {
                        edit_id: edit_id,
                        favorite_state: state,
                    }
                })
                .done(function(msg) {
                    draw_func(msg);
                });            
            }
            
            /////////////// Upload Type Search Function ////////////////////
            
            function srch_upload_type(upload_type_id){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/srch_album_func",
                    data: {
                        upload_type_id: upload_type_id
                    }
                })
                .done(function(msg) {
                    draw_func(msg);
                });
            }
            
            /////////////// Favourite Search Function ////////////////////
            
            function srch_favorite(favorite_id){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/srch_album_func",
                    data: {
                        favorite_id: favorite_id
                    }
                })
                .done(function(msg) {
                    draw_func(msg);
                });
            }
            
            /////////////// Gallery Type Search Function ////////////////////
            
            function srch_type(type_id){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/srch_album_func",
                    data: {
                        type_id: type_id
                    }
                })
                .done(function(msg) {
                    draw_func(msg);
                });
            }

            function draw_func(msg){
                var json_obj = JSON.parse(msg);

                var shtml = '';

                if(json_obj.length > 0){
                    for(var i = 0; i < json_obj.length; i++){

                        shtml += ' <div class="col-sm-3 col-xs-3">';
                        shtml += '      <div class="shop-inner">';
                        shtml += '          <div class="product-grid-area">';
                        shtml += '              <ul class="products-grid">';
                        shtml += '                  <li class="item">';
                        shtml += '                      <div class="product-item">';
                        shtml += '                          <div class="item-inner">';
                        shtml += '                              <div class="product-thumbnail">';
                        
                                                                    // var oneDay = 24 * 60 * 60 * 1000;
                                                                    
                                                                    // var today = new Date();
                                                                    // var dd = String(today.getDate()).padStart(2, '0');
                                                                    // var mm = String(today.getMonth() + 1).padStart(2, '0');
                                                                    // var yyyy = today.getFullYear();
                                                                    
                                                                    // const firstDate = yyyy+'-'+mm+'-'+dd;
                                                                    // const secondDate = (json_obj[i].created_at).split('-');
                                                                    
                                                                    // const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
                                                                    
                                                                    // if(diffDays < 3)
                                                                    //     shtml += '<div class="icon-new-label new-right">New</div>';

                        shtml += '                                  <div class="pr-img-area">';
                                                                        var url = json_obj[i].process_file_url;
                                                                        var file_url = url.split('.');
                                                                        if(file_url[1] == "mp4"){
                        shtml += '                                          <figure>';
                        shtml += '                                              <div class="parent">';
                        shtml += '                                                  <img class="first-img image1" src="http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj[i].process_comp_file_url+'" alt="">';
                        shtml += '                                                  <img class="first-img image2" src="<?php echo base_url();?>uploads/video-overlay.png" alt="" onclick="show_func('+json_obj[i].id+')" style="cursor: pointer;">';
                        shtml += '                                              </div>';
                        shtml += '                                          </figure>';
                                                                        }else{
                        shtml += '                                          <figure> ';
                        shtml += '                                              <img class="first-img" src="http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj[i].process_comp_file_url+'" alt="" onclick="show_func('+json_obj[i].id+')" style="cursor: pointer;">';
                        shtml += '                                          </figure>';
                                                                        }
                        shtml += '                                  </div>';
    
                        shtml += '                                  <div class="br-button" style="margin-top: -50px;">';
                        shtml += '                                      <div class="mt-button add_to_wishlist">';
                                                                            if(json_obj[i].favourite_id == 0){
                                                                                shtml += '<a href="javascript:;" onclick="favorite_func('+json_obj[i].id+', 1)">';
                                                                                shtml +=    '<i class="bx bx-heart" style="font-size: 20px; color: #fff;"></i>';
                                                                                shtml += '</a>';
                                                                            }else{
                                                                                shtml += '<a href="javascript:;" onclick="favorite_func('+json_obj[i].id+', 0)">';
                                                                                shtml +=    '<i class="mdi mdi-heart text-danger" style="font-size: 20px;"></i>';
                                                                                shtml += '</a>'; 
                                                                            }
                        shtml += '                                      </div>';
                        shtml += '                                      <div class="mt-button add_to_compare">'; 
                        shtml += '                                          <a href="http://www.facebook.com/share.php?u=http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj[i].process_file_url+'" title="Share">'; 
                        shtml += '                                              <i class="bx bx-share" style="font-size: 20px; color: #fff;"></i>';
                        shtml += '                                          </a>'; 
                        shtml += '                                      </div>';
                        shtml += '                                      <div class="mt-button quick-view">'; 
                        shtml += '                                          <a href="<?php echo base_url();?>gallery/download/'+json_obj[i].id+'" title="Download">'; 
                        shtml += '                                              <i class="bx bx-download" style="font-size: 20px; color: #fff;"></i>'; 
                        shtml += '                                          </a>';
                        shtml += '                                      </div>';
                        shtml += '                                  </div>';
                        shtml += '                              </div>';
                        shtml += '                          </div>';
                        shtml += '                      </div>';
                        shtml += '                  </li>';
                        shtml += '              </ul>';
                        shtml += '          </div>';
                        shtml += '      </div>';
                        shtml += ' </div>';
                    }
                }else{
                    shtml += '<div class="col-md-12">';
                    shtml +=    '<span>No Album Data</span>';
                    shtml += '</div>';
                }

                $("#album_div").html(shtml);
                $("#album_count").html(json_obj.length);
            }
            
            /////////////// Preview Function when uploaded new Gallery ////////////////////

            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";
                }
                
                encodeLogoFileURL();
            } 
            
            function photo_func(type_id){
                if(type_id == 1){
                    $("#srch_upload_type").hide();
                    $("#srch_favorite").hide();
                    $("#srch_type").hide();
                }else if(type_id == 2){
                    $("#srch_upload_type").hide();
                    $("#srch_favorite").hide();
                    $("#srch_type").hide();
                }else if(type_id == 3){
                    $("#srch_upload_type").show();
                    $("#srch_favorite").show();
                    $("#srch_type").show();
                }
            }
            
            /////////////// Album Detail Show Function ////////////////////
            
            function show_func(edit_id){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/get_album_info",
                    data: {
                        edit_id: edit_id
                    }
                })
                .done(function(msg) {
                    var json_obj = JSON.parse(msg);
                    
                    var shtml = '';
                    
                    if(json_obj.isImage == 1){
                        shtml += '<video width="100%" controls>';
                        shtml +=    '<source src="http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj.process_file_url+'" type="video/mp4">';
                        shtml += '</video>';
                    }else if(json_obj.isImage == 0){
                        shtml += '<img src="http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj.process_comp_file_url+'" style="width: 100%;">';
                    }
    
                    $("#show_modal_div").html(shtml);
                    $("#show_modal").modal('show');
                });
            }
            
            function openQRModal(){
                $(".openQRModal").modal('show');
            }
            
            function go_purchase(){
                document.location.href = '<?php echo base_url();?>purchase';
            }

             function docReady(fn) {
                // see if DOM is already available
                if (document.readyState === "complete"
                    || document.readyState === "interactive") {
                    // call on next available tick
                    setTimeout(fn, 1);
                } else {
                    document.addEventListener("DOMContentLoaded", fn);
                }
            }
        
             docReady(function () {
                var resultContainer = document.getElementById('qr-reader-results');
                var lastResult, countResults = 0;
                function onScanSuccess(decodedText, decodedResult) {
                    if(decodedText.startsWith("http")){
                        $(".openQRModal").modal('hide');
                        console.log("---------------------");
                         $.ajax({
                            method: "POST",
                            url: "https://mymakeabl.com/api/collect_kiosk_image",
                            data: {
                                image_url:decodedText,
                                guest_id:"<?php echo $guest_detail['id'];?>"
                            }
                        })
                        .done(function(res) {
                            if(res["result"]="success"){
                                $('#msg').html("Success");
                            //   $(".openQRModal").modal('hide');
            						window.location.reload();
                            }
                            else {
                                $('#msg').html("Failed please try again.");
                                setTimeout(function(){
                                    $(".openQRModal").modal('hide');
            						window.location.reload();
            					}, 3000);
                            }
                        });
                    }
                    else if (decodedText !== lastResult) {
                        ++countResults;
                        lastResult = decodedText;
                     
                        $.ajax({
                            method: "POST",
                            url: "<?php echo base_url();?>AccountController/buy_prepackage_qr",
                            data: {
                                token: JSON.parse(decodedText).token
                            }
                        })
                        .done(function(res) {
                            var json_obj = JSON.parse(res);
                            $('#msg').html(json_obj.msg);
                            setTimeout(function(){
                                $(".openQRModal").modal('hide');
        						window.location.reload();
        					}, 3000);
                        });
                    }
                    
                    
                }
        
                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", { fps: 10, qrbox: 250 });
                html5QrcodeScanner.render(onScanSuccess);
            });
        </script>
        <script src="<?php echo base_url();?>assets/js/html5-qrcode.min.js"></script>
        <script src="<?php echo base_url();?>assets/js/webcam.min.js"></script>