<link href="<?php echo base_url();?>assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/style.css">
<!-- ============================================================== -->
<!-- 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-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h3 style="color: #40dcfd; text-transform: lowercase;">Video / <?php echo $locationName;?></h3>
                    </div>
                </div>
            </div>
            <!-- end page title -->
        </div>
        
        <div class="container"> 
            <div class="row">
                <div class="col-md-12">
                    <div id="video_image_div">
                        <video width="100%" height="100%" controls id="overlay_video">
                            <source src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $detail['attachment'];?>" type="video/mp4">
                        </video>
                        <img id="video-overlay" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $detail['comp_attachment'];?>" style="visibility: hidden;">
                        <img id="video-bgfeatured" src="<?php echo base_url();?>uploads/default-overlay.png">
                        <?php
                            if(count($activate_status) > 0 || count($payg) > 0 || count($preactivate_status) > 0){
                        ?>
                            <img id="video-watermark" src="<?php echo base_url();?>uploads/default-overlay.png" style="visibility: hidden;">
                        <?php 
                            }else{
                        ?>
                            <img id="video-watermark" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $detail['watermarkfile'];?>" style="visibility: hidden;">
                        <?php
                            }
                        ?>
                    </div>

                    <div id="slide-wrapper">
                        <img id="slideLeft" class="arrow" src="<?php echo base_url();?>assets/img/arrow-left.png">

                        <div id="slider">
                            <?php 
                                if(count($gallery_list) > 0){
                            ?>
                                    <div style="text-align: center">
                                        <img class="thumbnail active" src="<?php echo base_url();?>uploads/c_empty.png">
                                        <h6>None</h6>
                                    </div>
                            <?php
                                    foreach($gallery_list as $key => $val){
                            ?>
                                        <img class="thumbnail <?php if($detail['id'] == $val['id']){?>active<?php }?>" data="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['bg_comp_url'];?>?<?php echo $val['id'];?>" src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['orig_comp_detail_url'];?>">
                            <?php
                                    }
                                }
                            ?>                            
                        </div>

                        <img id="slideRight" class="arrow" src="<?php echo base_url();?>assets/img/arrow-right.png">
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center mt-4">
                            <?php
                                if(count($activate_status) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(1);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php 
                                }else if(count($preactivate_status) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(2);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php 
                                }else if(count($payg) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(0);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php
                                }else{
                            ?>
                                <button type="button" disabled class="btn btn-primary mr-3" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php 
                                }
                            ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 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 type="text/javascript">
        var width = '<?php echo $detail["width"];?>';
        var height = '<?php echo $detail["height"];?>';
        var rotate = '<?php echo $detail["rotate"];?>';
        var rate = '<?php echo $detail["rate"];?>';
        
        var video_id = '<?php echo $video_id;?>';
        var gallery_id = 0;
        var package_history_id = '<?php if($detail["package_history_id"] != ""){echo $detail["package_history_id"];}else{echo 0;}?>';
        var prepackage_history_id = '<?php if($detail["prepackage_history_id"] != ""){echo $detail["prepackage_history_id"];}else{echo 0;}?>';
        
		let thumbnails = document.getElementsByClassName('thumbnail');
		
		let activeImages = document.getElementsByClassName('active');

        for (var i=0; i < thumbnails.length; i++){
            if(i == 0){
                thumbnails[i].addEventListener('click', function(){
                
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }	
                    
                    this.classList.add('active');
                    $("#video-bgfeatured").attr('src', '<?php echo base_url();?>uploads/default-overlay.png');
                    $("#overlay_video").css('visibility', 'visible');
    				$("#video-watermark").css('visibility', 'hidden');
                })
            }else{
                thumbnails[i].addEventListener('click', function(){
                
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }
                    
                    var bg_comp_url = this.getAttribute("data");
                    gallery_id = bg_comp_url.split('?')[1];
                    
    				this.classList.add('active');
    				$("#video-bgfeatured").attr('src', bg_comp_url);
    				$("#video-overlay").css('visibility', 'visible');
    				$("#overlay_video").css('visibility', 'hidden');
    				$("#video-watermark").css('visibility', 'visible');
                    
                    //Get screen width, height
                    var Img = document.querySelector("#video-overlay");
                    var currWidth = Img.clientWidth;
                    var currHeight = Img.clientHeight;
                    
                    //Get image width, height
                    var bgImg = document.querySelector("#video-bgfeatured");
                    var currbgWidth = bgImg.clientWidth;
                    var currbgHeight = bgImg.clientHeight;
                    var is_portrait = true; 
                    
                    var img_width;
                    var img_height;
                    var img_position_x;
                    var img_position_y;
                    
                    var img_rate = currbgWidth / currbgHeight;
                    
                    if((currbgWidth / currbgHeight) > (4 / 3))
                        is_portrait = false;
                    else
                        is_portrait = true;
                        
                    if(is_portrait = false){
                        img_height = currWidth * rate * img_rate;
                        img_width = currWidth * rate; 
                        img_position_x = currWidth * width - currWidth * rate / 2;
                        img_position_y = currHeight * height;
                    }else{
                        img_width = currHeight * rate * img_rate;
                        img_height = currHeight * rate; 
                        img_position_x = currWidth * width - currHeight * rate * img_rate / 2;
                        img_position_y = currHeight * height - 74;
                    }
                    
                    document.getElementById('video-bgfeatured').style.position = "relative";
                    document.getElementById('video-bgfeatured').style.left = img_position_x +'px';
                    document.getElementById('video-bgfeatured').style.bottom = img_position_y +'px';
                    document.getElementById('video-bgfeatured').style.width = img_width +'px';
                    document.getElementById('video-bgfeatured').style.height = img_height +'px';
                    
                    document.getElementById('video-bgfeatured').style.webkitTransform = 'rotate('+this.getAttribute("rotate")+'deg)'; 
                    document.getElementById('video-bgfeatured').style.mozTransform    = 'rotate('+this.getAttribute("rotate")+'deg)'; 
                    document.getElementById('video-bgfeatured').style.msTransform     = 'rotate('+this.getAttribute("rotate")+'deg)'; 
                    document.getElementById('video-bgfeatured').style.oTransform      = 'rotate('+this.getAttribute("rotate")+'deg)'; 
                    document.getElementById('video-bgfeatured').style.transform       = 'rotate('+this.getAttribute("rotate")+'deg)'; 
    				
                })
            }
        }

		let buttonRight = document.getElementById('slideRight');
		let buttonLeft = document.getElementById('slideLeft');

		buttonLeft.addEventListener('click', function(){
			document.getElementById('slider').scrollLeft -= 180
		})

		buttonRight.addEventListener('click', function(){
			document.getElementById('slider').scrollLeft += 180
		})
    
        var timer;
        
        function process_func(type){
            if(video_id == 0){
                Swal.fire({ title: "Failed!", text: "Please select at least one gallery", confirmButtonColor: "#556ee6" });
            }else{
                var t;
                Swal.fire({
                    title: "Processing...",
                    html: '<p class="mt-2">Please wait...</p><strong></strong',
                    timer: 1800000,
                    onBeforeOpen: function () {
                        Swal.showLoading(),
                            (t = setInterval(function () {
                                Swal.getContent().querySelector("strong").textContent = Math.round((1800000 - Swal.getTimerLeft())/1000);
                            }, 1000));
                    },
                    onClose: function () {
                        clearInterval(t);
                    },
                });
                
                if(type == 1){
                    $.ajax({
                        method: "POST",
                        url: "https://mymakeabl.com/api/zoomvideo_process",
                        data: {
                            background_id: video_id,
                            gallery_id: gallery_id,
                            package_history_id: package_history_id,
                            process_type: 1
                        }
                    })
                    .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 == 2){
                    $.ajax({
                        method: "POST",
                        url: "https://mymakeabl.com/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://mymakeabl.com/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" });
                            });
                        }
                    });
                }
            }
        }
	</script>