<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" />
<link href="<?php echo base_url();?>assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
<style>
    .alert.alert-success.fade{
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb; 
    }
    .video_player {
        text-align: center;
        margin: 0 auto;
    }
    
    .video_player video {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        border-radius: 20px;
    }
    
    @media only screen and (min-width: 992px) {
        #overlay{	
          width: 100%;
        }
    }
    
   #overlay{	
      position: fixed;
      top: 0;
      z-index: 100;
      width: 90%;
      height:100%;
      display: none;
      background: rgba(0,0,0,0.6);
    }
    .cv-spinner {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;  
    }
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px #ddd solid;
      border-top: 4px #2e93e6 solid;
      border-radius: 50%;
      animation: sp-anime 0.8s infinite linear;
    }
    @keyframes sp-anime {
      100% { 
        transform: rotate(360deg); 
      }
    }
    .is-hide{
      display:none;
    }
    #Note_style{
        text-align: center;
        padding: 15px 0 0 0;
        margin: 0;
        color: #d31145;
        font-weight: bold;
    }
    
    
</style>
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
     <div class="alert alert-success fade in alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true" style="font-size:20px">×</span>
        </button>
        You have no images in your album to use
    </div>
    <div id="alert"></div>
    
    <div class="main-content">
        <div id="overlay">
          <div class="cv-spinner">
            <span class="spinner"></span>
          </div>
        </div>
        <div class="page-content">
            <div class="video_player">
                <video controls autoplay>
                    <source src="assets/img/HKOW_Zoom5_Guest1_1080.mov" type="video/mp4">
                </video>
            </div>
            
            <input type="hidden" name="album_count" class="album_count" value="<?php echo $album_count; ?>">
             <?php
                $paidUCount;
                foreach($paidusercount as $paidkey => $paidval){
                   $paidUCount = $paidval['paidUserCount'];
                }
                
                if($paidUCount == 0) {
                ?>
                    <p id="Note_style">Note : Please refresh your Album page after a few minutes to receive the download.</p>
                    <div class="video_gallery_btn text-center mt-4">
                        <a class="btn btn-primary waves-effect waves-light custom_btn" onclick="not_create_zoom_video()">Create my Zoom Video</a>
                    </div>          
                <?php
                }else{
                ?>
                    <p id="Note_style">Note : Please refresh your Album page after a few minutes to receive the download.</p>
                    <div class="video_gallery_btn text-center mt-4">
                        <button class="btn btn-primary waves-effect waves-light custom_btn" onclick="create_zoom_video('<?php echo $site_id;?>','<?php echo $paidUCount; ?>');">Create my Zoom Video</button>
                    </div>
                <?php
                }
            ?>
        </div>
        
    </div>
    
    
    <!--  Modal content for the above example -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <?php 
                    // echo form_open('cart', array('method'=>'post', 'id'=>'add_cart_form'));
                ?>
                    <div class="modal-header">
                        <h5 class="modal-title mt-0" id="myLargeModalLabel">Album</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="alertmsg"></div>
                        <div class="container-fluid">
                            <div class="row" id="album"></div> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary m-0" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary m-0 ml-2" name="add_cart_btn" value="ok" onclick="return add_zoom_func('<?php echo $site_id;?>','<?php echo $user_id;?>');">Continue</button>
                    </div>
                    <input type="hidden" name="size_id" id="size_id">
                    <input type="hidden" name="site_id" value="<?php echo $site_id; ?>">
                    <input type="hidden" name="merchandise_id" value="<?php echo $id; ?>">
                <!--</form>-->
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
     
     <!-- 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>
       
        function not_create_zoom_video()
        {
            shtml = '';
            shtml += '<div class="alert alert-success fade in alert-dismissible show" role="alert">';
            shtml += '  You have no images in your album to use';
            shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
            shtml += '      <span aria-hidden="true">×</span>';
            shtml += '  </button>';
            shtml += '</div>';
                
                $("#alert").html(shtml);
                
                return false;
        }
        
        function add_zoom_func(site_id,id)
        {
            var shtml = '';
            var photo_num = 1;   
            var type = 1;            
            var checked_items = document.querySelectorAll("input[name='album_chk_id[]']:checked").length;
            var bid = 86;
            //var bid = $("#background_id").val();
            var checked_items_id = 0;
            $(':checkbox:checked').each(function(i){
              checked_items_id = $(this).val();
            });
            
            var gallery_id = $(".gallery_id_"+checked_items_id).val();
            var package_history_id = $(".package_history_id"+checked_items_id).val();
            $(".custom_btn").attr('disabled','disabled');
            $(".bs-example-modal-lg").modal('hide');
             $("#overlay").css("display", "block");
            
            if(photo_num == checked_items){
                if(type == 1){
                    setTimeout(function () {
                        window.location = "/sgallery";
                    }, 4000);
                    $.ajax({
                        async: true,
                        method: "POST",
                        url: "https://makeabl.net/api/zoomvideo_process",
                        data: {
                            background_id: bid,
                            gallery_id: gallery_id,
                            package_history_id: package_history_id,
                            process_type: 1
                        }
                    })
                    .done(function(msg) {
                         $("#overlay").css("display", "none");
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepv",
                                data: {
                                    video_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                      Swal.fire(
                                              'Well Done!',
                                              'Your zoom video will appear in your album After some time.Be sure to check back shortly!',
                                              'success'
                                            )
                                    // setTimeout(function () {
                                        // window.location = "/sgallery";
                                    // }, 4000);
                                    
                                    
                            });
                        }else
                        {
                            $("#overlay").css("display", "none");
                            Swal.fire({
                                  icon: 'error',
                                  title: 'Oh Snap!',
                                  text: 'We seem to be encountering an error.Please try again.',
                                })
                            
                            //  setTimeout(function () {
                                // window.location = "/sgallery";
                            // }, 4000);
                        }
                    });
                }else if(type == 2){
                    $.ajax({
                        method: "POST",
                        url: "https://makeabl.net/api/zoomvideo_process",
                        data: {
                            background_id: video_id,
                            gallery_id: gallery_id,
                            package_history_id: prepackage_history_id,
                            process_type: 2
                        }
                    })
                    .done(function(msg) {
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepv",
                                data: {
                                    video_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                    Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                            });
                        }
                    });
                }else if(type == 0){
                    $.ajax({
                        method: "POST",
                        url: "https://makeabl.net/api/zoomvideo_process",
                        data: {
                            background_id: video_id,
                            gallery_id: gallery_id,
                            package_history_id: 0,
                            process_type: 0
                        }
                    })
                    .done(function(msg) {
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepv",
                                data: {
                                    video_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                    Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                            });
                        }
                    });
                }
            }else{
                console.log('here');
                shtml += '<div class="alert alert-info fade show" role="alert">';
                shtml += '  please confirm selected items. you can only select '+photo_num+' items';
                shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                shtml += '      <span aria-hidden="true">×</span>';
                shtml += '  </button>';
                shtml += '</div>';
                
                $("#alertmsg").html(shtml);
                
                return false;
            }
        }
        
        function create_zoom_video(site_id, paidUCount)
        {
            var album_count = $('.album_count').val();
            if(album_count > 0)
            {
                 $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/sel_album_func",
                    data: {
                        site_id: site_id
                    }
                })
                .done(function(msg) {
                    var json_obj = JSON.parse(msg);
                    var shtml = '';
                    if(json_obj.length > 0){
                        for (let i = 0; i < json_obj.length; i++) {
                            shtml += ' <div class="col-md-4 mt-3" style="padding-left: 2px; padding-right: 2px;">';
                            shtml += ' <label class="label">';
                            if(paidUCount==0) {
                                shtml += '     <img src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].process_comp_file_url+'">';
                            } else {
                                shtml += '     <img src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].staff_comp_file_url+'">';
                            }
                            
                            shtml += '     <div class="form-group">';
                            shtml += '         <div class="mt-2" style="    position: relative; top: -32px; left: auto; right: 10px; float: right;">';
                            shtml += '             <input type="checkbox" name="album_chk_id[]" value="'+json_obj[i].id+'" style="width: 20px; height: 20px;"> ' ;
                            shtml += '             <input type="hidden" name="background_id" class="background_id" value="'+json_obj[i].bid+'" style="width: 20px; height: 20px;"> ' ;
                            shtml += '             <input type="hidden" name="gallery_id" class="gallery_id_'+json_obj[i].id+'" value="'+json_obj[i].gallery_id+'" style="width: 20px; height: 20px;"> ' ;
                            shtml += '             <input type="hidden" name="package_history_id" class="package_history_id'+json_obj[i].id+'" value="'+json_obj[i].package_history_id+'" style="width: 20px; height: 20px;"> ' ;
                            shtml += '         </div>';
                            shtml += '     </div>';
                            shtml += '   </label>';
                            shtml += ' </div> ';
                        }                     
                    }
			
                    $("#album").html(shtml);
                });
                
                $("#size_id").val($('input[name="size"]:checked').val());
                $(".bs-example-modal-lg").modal('show');
                
            }else
            {
                $('.alert.alert-success.fade').addClass('show');
                setTimeout(function() { 
                    $('.alert.alert-success.fade').removeClass('show');
                }, 4000);
            }
        }
    </script>
    