<?php
$path  = $_SERVER['DOCUMENT_ROOT'];
include_once $path . '/connect_db.php';
include 'accesscontrol.php';
header('Content-Type: text/html; charset=utf-8');

$adid = addslashes($_GET['adid']);
$pid = addslashes($_GET['pid']);
$pname = addslashes($_GET['pname']);
$del = addslashes($_GET['del']);
// check if advert beleongs to members
if (advert_check($adid, $memberid) === false) {
	header('Location: index.html');
	exit();
}
/////// finish
if (isset($_POST['finish'])) {

?><script>
		location.href = '/members/'
	</script><?
			}


			/////// delete image
			if (!empty($del) && $del == 'yes') {
				$filename = preg_replace('#([0-9]+)_#', $adid . '_', $pname);
				$file = 'uploads/' . $pid . '/' . $filename; // name and directory of file
				@unlink($file); // deleting file
				$q6 = "UPDATE ads SET photo_{$pid}='0' WHERE photo_{$pid}='{$filename}' AND memberid='{$memberid}' AND adid='{$adid}'";
				$r6 = $connect->query($q6) or die($connect->error);
			}

			// uploading image
			if (isset($_POST['submit'])) {
				$photo_num = addslashes($_POST['pic']);

				$fieldname = 'image_upload_box';
				$width = 600;
				$image_temp = $_FILES[$fieldname]["tmp_name"];
				list($image_width, $image_height) = getimagesize($image_temp); // upload dimensions
				$errors = array();

				// IMAGE UPLOAD -- file needs to be jpg,gif,bmp,x-png and 4 MB max
				if ($image_width < $width) {
					$errors[] = '<div class="error_list">- Your image dimensions must be greater than 600 pixels.</div>';
				}

				if ($image_width > 4000 || $image_height > 4000) {
					$errors[] = '<div class="error_list">- Your image dimensions must be less than 4000 pixels in width and height.</div>';
				}

				if ($_FILES[$fieldname]["size"] > 10485760) {
					$errors[] = '<div class="error_list">- Image file size must be less than 10 MB.</div>';
				}

				if ($_FILES[$fieldname]["type"] != "image/jpeg" && $_FILES[$fieldname]["type"] != "image/jpg" && $_FILES[$fieldname]["type"] != "image/pjpeg" && $_FILES[$fieldname]["type"] != "image/gif" && $_FILES[$fieldname]["type"] != "image/png") {
					$errors[] = '<div class="error_list">- Your photo must be either a JPG, PNG or GIF file format. Other file types are not allowed.</div>';
				}

				if (empty($errors)) {
					include "img_upload.class.php";

					$allowed_ext = array('jpeg', 'jpg', 'png', 'gif');
					$image_ext   = strtolower(end(explode('.', $_FILES[$fieldname]['name'])));

					$destination = 'uploads/' . $photo_num . '/';
					$image_file = $adid . '_' . $photo_num . '.' . $image_ext;

					$image = new UploadImage();
					$image->load($image_temp);
					$image->resizeToWidth($width);
					$image->watermark('img/watermark.png');
					$image->save($destination . $image_file);
					if (addslashes($_POST['pic_logo'] == '1')) {
						$image->resizeToWidthMaxHeight(300, 150);
						$image->save('uploads/logo/' . $adid . '.' . $image_ext);
						$db_pic_photo = ", image='" . $adid . "." . $image_ext . "'";
					}
					$query = "UPDATE ads SET photo_{$photo_num}='{$image_file}' {$db_pic_photo} WHERE adid ='{$adid}' AND memberid='{$memberid}'";
					$result = $connect->query($query) or die($connect->error); // run query
				} else {
					$errors_found = TRUE;
				}
			}

			/////// FETCHING PHOTOS
			$query = $connect->query("SELECT * FROM ads WHERE memberid = '$memberid' and adid = '$adid'");
			$row = $query->fetch_array();

			$photo1 = $row["photo_1"];
			$photo2 = $row["photo_2"];
			$photo3 = $row["photo_3"];
			$photo4 = $row["photo_4"];

			$photos = "";
			if (!empty($photo1) && $photo1 != "0") {
				$path1 = "./uploads/1/$photo1";
				$photos .= "<div><img src='{$path1}' alt=''/><a pid='1' href='?del=yes&pid=1&adid=$adid' class='remove-image'><i class='bx bxs-trash'></i></a></div>";
			}

			if (!empty($photo2) && $photo2 != "0") {
				$path2 = "./uploads/2/$photo2";
				$photos .= "<div><img src='{$path2}' alt=''/><a pid='2' href='?del=yes&pid=2&adid=$adid' class='remove-image'><i class='bx bxs-trash'></i></a></div>";
			}

			if (!empty($photo3) && $photo3 != "0") {
				$path3 = "./uploads/3/$photo3";
				$photos .= "<div><img src='{$path3}' alt=''/><a pid='3' href='?del=yes&pid=3&adid=$adid' class='remove-image'><i class='bx bxs-trash'></i></a></div>";
			}

			if (!empty($photo4) && $photo4 != "0") {
				$path4 = "./uploads/4/$photo4";
				$photos .= "<div><img src='{$path4}' alt=''/><a pid='4' href='?del=yes&pid=4&adid=$adid' class='remove-image'><i class='bx bxs-trash'></i></a></div>";
			}
			// CHECKING if photo limit reached
			$photo_limit = 4;
			if ($total_rows == $photo_limit) {
				$limit = TRUE;
			}

				?>
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>YellowLeaf UK</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
	<link rel="stylesheet" href="/header-footer/global.css">
	<link rel="stylesheet" href="index.css">
	<style>
		.form-group .select,
		.form-group input {
			border-radius: 4px;
			padding: 0 16px;
		}
		.form-group textarea {
			border-radius: 4px;
			padding: 12px 16px;
		}
		.form-note {
			font-weight: 500;
			margin-bottom: 16px;
		}
		hr {
			border: none;
			height: 1px;
			margin: 20px 0;
			background-color: #bbb;
		}
		.image-uploaded {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 20px;
			margin-bottom: 16px;
		}
		.image-uploaded > * {
			position: relative;
			max-height: 150px;
		}
		.image-uploaded img {
			width: 100%;
			height: 100%;
            display: block;
            object-fit: contain;
		}
		.remove-image {
			position: absolute;
			top: 8px;
			right: 8px;
			font-size: 16px;
			color: var(--red);
			width: 26px;
			height: 26px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--gray);
		}
		.image-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .image-progress > * {
            width: 100%;
            height: 16px;
            border-radius: 2px;
            background-color: var(--white);
            border: 1px solid var(--white);
            position: relative;
            overflow: hidden;
        }
        .image-progress > ::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--progress, 10%);
            background-color: var(--yellow);
        }
        .image-progress > ::after {
            content: attr(data-progress);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            color: var(--black);
        }
		.error-box {
			padding: 8px 16px;
			border: 1px solid var(--red);
			border-radius: 4px;
			margin-bottom: 8px;
		}
		.error-title {
			font-size: 18px;
			font-weight: 600;
			color: var(--red);
		}

		@media screen and (max-width: 767px) {
			.image-uploaded {
				grid-template-columns: 1fr 1fr;
			}
		}
	</style>
</head>

<body>

	<?php include 'member_menu.php'; ?>

	<!-- NAVBAR -->
	<section id="content">
		<!-- NAVBAR -->
		<nav>
			<i class='bx bx-menu toggle-sidebar'></i>
			<a href="/members/logout.php" class="logout">
				<i class='bx bx-log-out'></i>
				Logout
			</a>
		</nav>
		<!-- NAVBAR -->

		<!-- MAIN -->
		<main>
			<div class="container">
				<h1 class="title">Submit Advert</h1>
				<!-- <ul class="breadcrumbs">
				<li><a href="#">Home</a></li>
				<li class="divider">/</li>
				<li><a href="#" class="active">Dashboard</a></li>
				</ul> -->
				<div class="main-content">
					<div class="main-box">
						<?php if ($limit == TRUE) { ?>
							<div class="limitDvBx">
								You have reached your picture upload limit! You cannot upload any more
								pictures.</div>
						<?php } ?>
						<?php if ($errors_found == TRUE) {
							echo '<div class="error-box"><div class="error-title">ERROR:</div>';
							foreach ($errors as $error) {
								echo $error;
							}
							echo '</div>';
						} ?>
						<? include 'advert-tab.php'; ?>
						<div class="image-uploaded" id="image-uploaded">
							<?= $photos ?>
						</div>
						<form name="PostAdForm" action="<?= $pagename ?>?adid=<?= $adid ?>" id="image-upload-form" method="POST" enctype="multipart/form-data">
							<input name="adid" type="hidden" value="<?php echo $adid; ?>" />
							<div class="form-box">
								<div class="form-description">You can upto 4 pictures of your business. (Optional)</div>
								<div class="form-group">
									<label for="image-upload-input" class="image-upload-wrapper" title="Click to upload/change image">
										<input name="image_upload_box" id="image-upload-input" type="file" accept="image/*">
										Click to upload/change image
									</label>
								</div>
							</div>
							<!-- <button type="submit" name="submit" class="button button-outline-yellow">Upload Image></button> -->
							<hr>
							<div class="form-note">Note: Please make sure you have fully uploaded your images before completing your advert.</div>
							<button type="submit" name="finish" class="button button-yellow">Finish Your Advert ></button>
						</form>
					</div>
				</div>
			</div>
		</main>
		<!-- MAIN -->
	</section>
	<!-- NAVBAR -->

	<!-- <section>
		<div class="container">
			<div class="advert-wrapper">
				<div class="advert-menu">
					<div class="advert-menu-wrapper">
						<a href="#">Manage Advert</a>
						<a href="postbusiness1.php" class="active">Submit Advert</a>
						<a href="#">My Account</a>
						<a href="/support">Help & Support</a>
						<a href="#">Logout</a>
					</div>
				</div>
				<div class="advert-main">
					<div class="advert-main-title">Submit Advert</div>
					<div class="submit-advert-tab">
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<span>4</span>
						<span>5</span>
						<span class="active">6</span>
					</div>
					<?php if ($limit == TRUE) { ?>
						<div class="limitDvBx">
							You have reached your picture upload limit! You cannot upload any more
							pictures.</div>
					<?php } ?>
					<?php if ($errors_found == TRUE) {
						echo '<div class="errorDvBx"><b>ERROR:</b><br>';
						foreach ($errors as $error) {
							echo $error;
						}
						echo '</div>';
					} ?>
					<form name="PostAdForm" action="<?= $pagename ?>?adid=<?= $adid ?>" method="POST" enctype="multipart/form-data">
						<table width="100%" class="cnTbl">
							<tr>
								<td colspan="2" align="left"><?= $pic_content ?> </td>
							</tr>
							<tr>
								<td valign="top" colspan="2">
									<hr style="background-color: rgb(204, 204, 204);" width="100%" size="1" noshade="noshade" color="#cccccc">
								</td>
							</tr>
							<tr>
								<td align="left" valign="top" class="cnTitle" style="padding-left:25px">
									Photo Upload (optional):<br>
									<div class="cnTitleDesc">
										You can upto 4 pictures of your business.</div>
									<?php
									if ($total_rows == $photo_limit) {
										echo '<span style="color:red;">You cannot upload more than 4 photos.</span>';
									} else {
									?>
										<input class="form-control" name="image_upload_box" type="file" size="40" /><input name="adid" type="hidden" value="<?php echo $adid; ?>" />
										<br>
									<?php } ?>
								</td>
							</tr>
							<tr>
								<td valign="top" colspan="2" style="padding-bottom:0">
									<hr style="background-color: rgb(204, 204, 204);" width="100%" size="1" noshade="noshade" color="#cccccc">
								</td>
							</tr>
						</table>
						<div style="font-size:10pt;color:#555;"><b>Note: Please make sure you have fully uploaded your images before completing your advert.</b></div>

						<button type="submit" name="submit" class="btn btn-yellow">Upload Image></button>
						<b>OR</b>

						<button type="submit" name="finish" class="btn btn-yellow">Finish Your Advert ></button>
					</form>
				</div>
			</div>
		</div>
	</section> -->

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="script.js"></script>
	<script>
		function getUrlParameter(sParam) {
			var sPageURL = window.location.search.substring(1),
				sURLVariables = sPageURL.split('&'),
				sParameterName,
				i;

			for (i = 0; i < sURLVariables.length; i++) {
				sParameterName = sURLVariables[i].split('=');

				if (sParameterName[0] === sParam) {
					return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
				}
			}
			return false;
		};

		var pid = 0
		var images = [];

		let all_images = document.querySelectorAll(".remove-image");


		all_images.forEach((e, i) => {
			let p = parseInt(e.getAttribute("pid"));
			images.push(p)
		});

		$('#image-upload-input').change(function () {
			if($('#image-uploaded > *').length >= 4) {
				alert('You cannot upload more than 4 photos.')
				return
			}
			var file = this.files[0]

			var el = $(this)
			if (file) {
				if(file.size >= 10000000) {
					alert('Image file size must be less than 10 MB.')
					return
				}

				el.parent().find('img, .image-upload-text').remove()
				var reader = new FileReader()
				reader.onload = function (e) {
					if (!images.includes(1)) {
						pid = 1;
						images.push(1);
					}else{
						if (!images.includes(2)) {
							pid = 2;
							images.push(2);
						}else{
							if (!images.includes(3)) {
								pid = 3;
								images.push(3);
							}else{
								if (!images.includes(4)) {
									pid = 4;
									images.push(4);
								}
							}
						}
					}
					// pid++
					var splitFilename = file.name.split('.')
					var filename = getUrlParameter('adid') + '_' + pid + '.' + splitFilename[splitFilename.length - 1]
					$('#image-uploaded').append('<div><img src="'+e.target.result+'" alt=""/><a pid="'+pid+'" href="?del=yes&pid='+pid+'&adid='+getUrlParameter('adid')+'" class="remove-image"><i class="bx bxs-trash"></i></a><div class="image-progress"><span data-progress="10%"></span></div></div>')
					// console.log(filename)
					// console.log(images);
					var imageData = new FormData();
					imageData.append('ads_image', file);
					imageData.append('adid', getUrlParameter('adid'));
					imageData.append('pid', pid);
					$.ajax({
						url: './ajax/ajax_upload_ads_images.php',
						type: 'POST',
						processData: false, // important
						contentType: false, // important
						data: imageData,
						xhr: function(){
                            //upload Progress
                            var xhr = $.ajaxSettings.xhr();
                            if (xhr.upload) {
                                xhr.upload.addEventListener('progress', function(event) {
                                    var percent = 0;
                                    var position = event.loaded || event.position;
                                    var total = event.total;
                                    if (event.lengthComputable) {
                                        percent = Math.ceil(position / total * 100);
                                    }
                                    //update progressbar
                                    $('#image-uploaded .image-progress > *').css('--progress', percent +"%").attr('data-progress', percent +"%")
                                }, true);
                            }
                            return xhr;
                        },
						beforeSend: () => {
							// $("upload_label").html("Uploading...")
							// console.log("sending..")
						},
						success: (data) => {
							console.log(data)
							$('#image-uploaded .image-progress').remove()
							// console.log(data);
							// if (data == "UPLOAD_SUCCESS") {
							// 	alert("Logo Upload success")
							// } else if (data == "UPLOAD_FAILED") {
							// 	alert("Image upload failed, please try again");
							// }
						}
					});
				}
				reader.readAsDataURL(file)
			}
		})

		

		$(document).on('click', '.remove-image', function(e) {
			e.preventDefault()
			// console.log("remove requested")
			let pid = parseInt(this.getAttribute("pid"));
			images.splice(images.indexOf(pid), 1);
			// console.log("index:	", images.indexOf(pid));
			// console.log(pid);
			// console.log(images);

			$.ajax({
				url: './ajax/ajax_upload_ads_images.php',
				type: 'POST',
				data: {
					delete: true,
					adid: getUrlParameter('adid'),
					pid: pid
				},
				beforeSend: () => {
							// $("upload_label").html("Uploading...")
							// console.log("sending..")
				},
				success: (data) => {
					console.log(data);
							// if (data == "UPLOAD_SUCCESS") {
							// 	alert("Logo Upload success")
							// } else if (data == "UPLOAD_FAILED") {
							// 	alert("Image upload failed, please try again");
							// }
				}
			});
			$(this).parent().remove()
		})
	</script>
</body>

</html>