<?php 
session_start();
$title = "Event Photos";
$group = "cms";
$menu = "event";
include('header.php');
if(!isset($_GET['id']) || empty($_GET['id']))
{
    echo '<script>window.location="event_list"</script>';
}
$event_title = "";
$sql = "select title from event where id=:id";
$q=$con->select_query($sql,array(':id'=>$_GET['id']));
foreach($q as $r)
{
    $event_title = $r['title'];
}
?>

<script>

function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}
	 	
	return xmlhttp;
}


function loadPhotos(showloading) {
	if(showloading == 1)		
	document.getElementById('load').innerHTML='<img src="img/loading.gif"/>';
	var id = "<?php echo $_GET['id']?>";
	var strURL="../load/load_event_photos.php?dt=" + (+new Date())+"&id="+id;
	//alert(strURL);
	var req = getXMLHTTP();
	
	if (req) {
		
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				// only if "OK"
				if (req.status == 200) {						
					document.getElementById('load').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}		
}

function AddPhoto()
{
	var fileUpload = $("#photo").get(0);
    var files = fileUpload.files;
    var data = new FormData();
    for (var i = 0; i < files.length ; i++) {
        data.append('photo',files[i],files[i].name);
    }
    
	var datastring = $("#photoform").serializeArray();
	$.each(datastring,function(key,input){
        data.append(input.name,input.value);
    });
	
	var l = $( '.ladda-button-demo1' ).ladda();
	l.ladda( 'start');	
	$.ajax({
	            type: "POST",
	            url: "../include/insert_ajax.php",
	            contentType: false,
                processData: false,
	            data: data,
	            dataType: 'json',
	            cache: false,
	            success: function(data) {
	            	l.ladda( 'stop' );
	            	loadPhotos(0);
	            	$('#fupload').fileupload('clear');
	            	if(data.file_error == 1)
	            	{
	            		setTimeout(function() {
	                        toastr.options = {
	                            closeButton: true,
	                            progressBar: true,
	                            positionClass: "toast-top-full-width",
	                            showMethod: 'slideDown',
	                            timeOut: 4000
	                        };
	                        toastr.error('Photo not uploaded. Photo must be jpg, jpeg, png or gif format. ');

	                    }, 1300);
	            	}
	            	else if(data.file_error == 2)
	            	{
	            		setTimeout(function() {
	                        toastr.options = {
	                            closeButton: true,
	                            progressBar: true,
	                            positionClass: "toast-top-full-width",
	                            showMethod: 'slideDown',
	                            timeOut: 4000
	                        };
	                        toastr.error('No Featured Photo Uploaded!');

	                    }, 1300);
	            	}
	            	else if(data.file_error == 3)
	            	{
	            		setTimeout(function() {
	                        toastr.options = {
	                            closeButton: true,
	                            progressBar: true,
	                            positionClass: "toast-top-full-width",
	                            showMethod: 'slideDown',
	                            timeOut: 10000
	                        };
	                        toastr.error('File size too large! Photo size limit is 500kb');

	                    }, 1300);
	            	}
	            },
	            error: function(){
	                  alert('error handling here');
	                  l.ladda( 'stop' );
	            }
	        });
}



function Delete(id)
{
	if(confirm("Delete Photo?"))
	{
    	var datastring = {'id':id,'delete':'event_photos'};
    	$.ajax({
    	            type: "POST",
    	            url: "../include/delete_ajax.php",
    	            data: datastring,
    	            dataType: 'json',
    	            cache: false,
    	            success: function(data) {
    	            	if(data.success == 1)
    	            	{       
    	            		loadPhotos(0); 
    	            	}
    	            },
    	            error: function(){
    	                  alert('error handling here');
    	            }
    	        });
	}
}

$(document).ready(function(){
	loadPhotos(1);
	$('.filter').change(function(){
		loadPhotos(1);
	})
});
</script>
<style>
.photo-wrap {
    width: 160px;
    height: 86px;
}
.img-responsive {
    /* max-width: 200px; */
	width: 160px;
    height: 86px;
    margin-left: 0px!important;
    object-fit: cover!important;
    overflow: hidden!important;
    border: none!important!important;
}
.event-overlay
{
	width: 160px;
    height: 86px;
	background: rgba(0,0,0,0);
	position: absolute;
	text-align: center;
}
.event.photo-wrap .event-overlay .btn
{
	opacity: 0;
	top: 30%;
	position: absolute;
}
.event.photo-wrap:hover .event-overlay
{
	background: rgba(0,0,0,0.4)!important;
}
.event.photo-wrap:hover .event-overlay .btn
{
	opacity: 1;
}
</style>
    <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                     <div class="ibox float-e-margins">
                          <div class="ibox-title">
                                <h5>Photos for <i style="color: #0053a6"><?php echo $event_title?></i></h5>
                                <a href="event_list" class="btn btn-warning btn-sm pull-right" style="margin-top:-10px">Back</a>
                          </div>
                          <div class="ibox-content">
                            <div class="row">
                                <div class="col-md-2">
                                    <form id="photoform">
                                        <input type="hidden" name="insert" value="event_photos"/>
                                        <input type="hidden" name="eventid" value="<?php echo $_GET['id'];?>"/>
                                        <div class="fileupload fileupload-new" id="fupload" data-provides="fileupload">
                                                  <div class="fileupload-new thumbnail" style="width: 160px; height: 80px;">
                                                     <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                                                  </div>
                                                  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                                  <div>
                                                   <span class="btn btn-white btn-file">
                                                   <span class="fileupload-new"><i class="icon-paper-clip"></i> Select image</span>
                                                   <span class="fileupload-exists"><i class="icon-undo"></i> Change</span>
                                                   <input type="file" id="photo" name="photo" class="default" />
                                                   </span>
                                                      <button type="button" class="fileupload-exists ladda-button ladda-button-demo1 btn btn-primary" data-style="zoom-in" onclick="AddPhoto()" data-dismiss="fileupload">Add</button>
                                                  </div>
                                              </div>
                                       </form>
                                </div>
                                <div id="load"></div>
                            </div>
                            
                        </div>
                    </div>
            </div>
        </div>
   </div>
    
    <?php include('footer.php');?>

   
