<?php
$path  = $_SERVER['DOCUMENT_ROOT'];
include_once $path . '/connect_db.php';
include 'accesscontrol.php';

$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();

			$photos = array(1 => $row['photo_1'], $row['photo_2'], $row['photo_3'], $row['photo_4']);
			$pic1 = $photos['1'];
			$pic2 = $photos['2'];
			$pic3 = $photos['3'];
			$pic4 = $photos['4'];

			// checking fields are blank
			if ($pic1 == '0' || $pic1 == '') {
				$pic_content .= '<input type="hidden" name="pic" value="1"><input type="hidden" name="pic_logo" value="1">';
			} elseif ($pic2 == '0' || $pic2 == '') {
				$pic_content .= '<input type="hidden" name="pic" value="2">';
			} elseif ($pic3 == '0' || $pic3 == '') {
				$pic_content .= '<input type="hidden" name="pic" value="3">';
			} elseif ($pic4 == '0' || $pic4 == '') {
				$pic_content .= '<input type="hidden" name="pic" value="4">';
			}

			// photo contents
			$total_rows = 0;
			$i = -1;
			$pic_content .= '<table width="100%">';
			foreach ($photos as $photo_key => $photo) {
				if ($photo != '' && $photo != '0') {
					$i++;
					if ($i / 4 == intval($i / 4)) {
						$pic_content .= '<tr>';
					}
					$pic_content .= '<td valign="bottom">
						<a target="_blank" href="uploads/' . $photo_key . '/' . $photo . '"><img border="0" width="100" src="uploads/' . $photo_key . '/' . $photo . '"></a><br>
						<div style="text-align:left;margin-right:20px;">
						Photo ID: ' . $photo . '<br>
						<a style="color:red" href="' . $pagename . '?del=yes&pid=' . $photo_key . '&pname=' . $photo . '&adid=' . $row['adid'] . '">Delete</a>
						</div></td>';
					if (($i + 1) / 4 == intval(($i + 1) / 4)) {
						$pic_content .= '<tr>';
					}
					$total_rows++;
				}
			}
			$pic_content .= '</table>';
			// 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;
		}
		.image-uploaded img {
			width: 100%;
		}
		.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);
		}
		.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">

						</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

		$('#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) {
					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 href="?del=yes&pid='+pid+'&pname='+filename+'&adid='+getUrlParameter('adid')+'" class="remove-image"><i class="bx bxs-trash"></i></a></div>')
					$('.image-upload-form').submit()
				}
				reader.readAsDataURL(file)
			}
		})

		$('.image-upload-form').submit(function(e) {
			e.preventDefault()
			$.ajax({
				type: 'POST',
				data: new FormData(this)
			})
		})

		$(document).on('click', '.remove-image', function(e) {
			e.preventDefault()
			$.ajax({
				url: $(this).attr('href')
			})
			$(this).parent().remove()
		})
	</script>
</body>

</html>