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

$adid = addslashes($_GET['adid']);

// check if advert beleongs to members
if (advert_check($adid, $memberid) === false) {
	header('Location: index.html');
	exit();
}



$example_list = array('e.g. Free Delivery', 'e.g. Special Occasions', 'e.g. Curry', 'e.g. Sea Food', 'e.g. Deserts');

if (isset($_POST['submit'])) {

	//-- singular
	if ($_POST['category'] && $_POST['description'])  {

		// echo "<pre>";
		// print_r($_POST['category']);
		// print_r($_POST['description']);
		// die('here');

		$categories = [];
		$descriptions = [];

		foreach ($_POST['category'] as $key => $value) {
			$categories[$key] = addslashes(trim($value));
		}

		foreach ($_POST['description'] as $key => $value) {
			$descriptions[$key] = addslashes(trim($value));
		}

		
		// $categories = addslashes($categories);
		// $categories = addslashes($_POST['category']);
		// $categories = array_filter($categories);
		// $descriptions = array_filter($descriptions);

		// echo "<pre>";
		// print_r($categories);
		// echo '<br>';
		// print_r($descriptions);
		// die();

	} else {
		$categories = '';
		$descriptions = '';
	}
	

	// compiling category singular
	// if ($categories != '') {
	// 	$category = '';
	// 	foreach ($categories as $key => $cat) {
	// 		if (strpos($cat, 'e.g') !== false) {
	// 		} else {
	// 			if ($cat == $example_list[$key]) {
	// 				$category .= '';
	// 			} else if (str_word_count($cat) > 5) {
	// 				$errors[] = 'Please enter less than 5 words.';
	// 			} else if (strpos($cat, ' ' . $add_row['town_name']) !== false) {
	// 				$errors[] = 'Please do not use your town name in your tags.';
	// 			}

	// 			$category .= $cat;

	// 			if ($key != (count($categories) - 1)) {
	// 				$category .= ' || ';
	// 			}
	// 		}
	// 	}
	// }


	// echo "cat : ".$category."<br>";
	// echo "cat_plural: ".$category_plural."<br>";
	// die();

	//-- singular
	// $descriptions = ($_POST['description']);
	// $descriptions = array_filter($descriptions);

	// print_r($categories);
	// die();
	// compiling category
	// if ($descriptions != '') {
	// 	$description = '';
	// 	foreach ($descriptions as $key => $desc) {
	// 		if (strpos($desc, 'e.g') !== false) {
	// 		} else {
	// 			if ($desc == $example_list[$key]) {
	// 				$description .= '';
	// 			} else {
	// 				$description .= $desc;
	// 				$description_plural .= $desc . ' ';
	// 			}
	// 			if ($key != (count($descriptions) - 1)) {
	// 				$description .= " || ";
	// 			}
	// 		}
	// 	}
	// }

	// echo $adid;
	// echo '<pre>';
	// print_r($categories);
	// print_r($descriptions);
	// die();

	// $product_plural = singplural($product_plural);
	// advert_id, cat_name, cat_description
	// $connect->query("UPDATE ads_categories SET  cat_name='{$category}', cat_description='{$description}' WHERE `advert_id` = '$adid'");

	// remove previous record from 'ads_categories' table
	// $connect->query("DELETE FROM `ads_categories` WHERE `advert_id`='$adid'");

	// insert new record in 'ads_categories' table
	// foreach ($categories as $key => $value) {
	// 	$connect->query("INSERT INTO ads_categories SET `advert_id` = '$adid',  cat_name='{$value}', cat_description='{$descriptions[$key]}'");
	// }

	$cat1 = $categories[0]?? '';
	$catdesc1 = $descriptions[0]?? '';
	$cat2 = $categories[1]?? '';
	$catdesc2 = $descriptions[1]?? '';
	$cat3 = $categories[2]?? '';
	$catdesc3 = $descriptions[2]?? '';

	/** category_plural */
	$sp = new Inflect(); //plural or singlur convertion class
	$all_cat = $cat1." ".$cat2." ".$cat3;
    $all_cat = trim($all_cat);

	$category_plural = '';

	if(strlen($all_cat)){

		$all_cat = explode(" ", $all_cat);

		foreach ($all_cat as $key => $value) {
			$category_plural .= $sp->singularize($value)." ";
			$category_plural .= $sp->pluralize($value)." ";
		}

		$category_plural = addslashes(trim($category_plural));
	}

	$connect->query("UPDATE ads SET cat1='{$cat1}', catdesc1='{$catdesc1}', cat2='{$cat2}', catdesc2='{$catdesc2}', cat3='{$cat3}', catdesc3='{$catdesc3}', `category_plural`= '{$category_plural}'  WHERE `adid` = '$adid' AND `memberid` = '{$memberid}'");

	// $connect->query("UPDATE ads_categories SET products='{$product}', products_plural='{$product_plural}', category='{$category}',category_plural='{$category_plural}',seo_title='' WHERE `adid` = '$adid' AND `memberid` = '{$memberid}'");
	$success = TRUE;
?><script>
		location.href = 'postbusiness5.php?adid=<?= $adid ?>'
	</script><?php
			}
			$add_que_sql = $connect->query("SELECT * FROM ads WHERE adid ='{$adid}'");

			$row_listing = $add_que_sql->fetch_array(MYSQLI_ASSOC);

			$cat_row = 0;

			if($row_listing['cat1']){
				$cat_row++;
			}
			if($row_listing['cat2']){
				$cat_row++;
			}
			if($row_listing['cat3']){
				$cat_row++;
			}


			if($cat_row > 0){

				$cat_id = 1;
				$cat_id_limit = 10;
				$example_list_count = 0;
				
				
				for($i=1; $i<=$cat_row; $i++){
					$cat_name = 'cat'.$i;
					$cat_description = 'catdesc'.$i;

					$category = $row_listing[$cat_name];
					$description = $row_listing[$cat_description];

					$ajaxHtml = "onkeyup=\"showUser(this.value,'" . $cat_id . "',event);\"";
					$dropHtml = "onkeydown=\"return displayunicode(event," . $cat_id . ");\"";


					$categoryHtml .= '<div class="form-product-group form-box-inline">
								<a href="#" class="remove-input2"><i class="bx bxs-trash"></i></a>
								<div class="form-box">
									<span class="form-description">Enter a business category or a service you provide</span>
									<input name="category[]" class="categoryInp" value="'.$category.'" type="text">
								</div>
								<div class="form-box">
									<span class="form-description">Describe how you offer this service</span>
									<textarea name="description[]">'.$description.'</textarea>
								</div>
							</div>';
					
					$cat_id++;
					$cat_id_limit--;
					$example_list_count++;
					
				}
			}
			else {
				$cat_row ++;
				$categoryHtml .= '<div class="form-product-group">
				<a href="#" class="remove-input2"><i class="bx bxs-trash"></i></a>
				<div class="form-box">
					<span class="form-description">Enter a business category or a service you provide</span>
					<input name="category[]" class="categoryInp" value="" type="text">
				</div>
				<div class="form-box">
					<span class="form-description">Describe how you offer this service</span>
					<textarea name="description[]"></textarea>
				</div>
			</div>';
			}

			
				?>
<!DOCTYPE html>
<html lang="en">

<head>
	<title>YellowLeaf - Homepage</title>
	<meta http-equiv="Content-Type" content="text/html; 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 input {
			border-radius: 4px;
			padding: 0 16px;
		}
		.form-group textarea {
			border-radius: 4px;
			padding: 12px 16px;
		}
		.form-group {
			display: block;
		}
		.form-box-inline {
			position: relative;
		}
		.remove-input {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 16px;
			color: var(--red);
			font-size: 20px;
			text-decoration: none;
		}
		hr {
			border: none;
			height: 1px;
			margin: 20px 0;
			background-color: #bbb;
		}
		.remove-input2 {
			position: absolute;
			top: 10px;
			right: 16px;
			color: var(--red);
			font-size: 20px;
			text-decoration: none;
			z-index: 10;
		}
		.form-box {
			position: relative;
		}
		.form-product-group {
			padding: 16px;
			border: 1px solid var(--gray-200);
			border-radius: 6px;
			position: relative;
			margin-top: 16px;
		}
		.form-product-group .form-box:last-child {
			margin-bottom: 0;
		}

		.disabled{
			pointer-events: none;
		}
		.color-red{
			color: red;
		}
		.inList:after{
			content: '✓';
			color: green;
			padding: 10px;
			position: absolute;
			right: 10px;
			font-size: large;
			font-weight: bold;
		}
		.notInList:after{
			content: 'INVALID';
			color: red;
			padding: 10px;
			position: absolute;
			right: 10px;
			font-size: medium;
			font-weight: bold;
		}
		.inavlid-message{
			color: red;
			font-size: small;
		}
	</style>
</head>
<body>

	<? include 'member_menu.php'; ?>

	<!-- NAVBAR -->
	<section id="content">
		<!-- NAVBAR -->
		<nav>
			<i class='bx bx-menu toggle-sidebar'></i>
			<a href="/members/logout.html" 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">
						<? include 'advert-tab.php'; ?>
						<form class="submit-advert-form" action="" method="POST" enctype="multipart/form-data">
							<?= $postbusiness_error ?>

							
							<div class="form-box mb-10">
								<div class="form-description">Please enter a minimum of 3 products or services your business sells or offers to your customers.</div>
								<div class="form-group" id="form-group">
									<!-- <div style="padding: 5px;background: #e6e6e6;border-radius: 5px;border: 1px solid #9b9b9b;">
										<a href="#" class="remove-input2"><i class="bx bxs-trash"></i></a>
										<div class="form-box form-box-inline">
											<input name="category[]" value="" type="text">
										</div>
										<div class="form-box form-box-inline">
											<textarea name="description[]"></textarea>
										</div>	
										</div>
									
									</div> -->
									<?= $categoryHtml ?>
								</div>
							<!-- <div class="submit-advert-form-group">
								<label for="name">Products & Services:</label>
								<p class="submit-advert-label-description ">Please enter a minimum of 3 products or services your business sells or offers to your customers.</p>

								

							</div> -->

							<button class="button button-outline-yellow" type="button" id="add-input" style="margin-top: 20px">Add another product or service &gt;&gt;</button>
							<hr>
							<button type="submit" name="submit" id="submit" onclick="return checkValid()" class="button button-yellow">Next</button>
						</form>
					</div>
				</div>
			</div>
		</main>
		<!-- MAIN -->
	</section>
	<!-- NAVBAR -->

		<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>
			var count_cat = <?= $cat_row ?>;
			const check_valid_cat = [];

			$( document ).ready(function() {
				if(count_cat > 2){
					$('#add-input').hide();
				}
			});

			$('#add-input').click(function() {
				// $('#form-group').append('<div class="form-box form-box-inline"> <input name="product[]" type="text"> <a href="#" class="remove-input"><i class="bx bxs-trash"></i></a> </div>')
				
				$('#form-group').append(`<div class="form-product-group form-box-inline">
					<a href="#" class="remove-input2"><i class="bx bxs-trash"></i></a>
					<div class="form-box">
						<span class="form-description">Enter a business category or a service you provide</span>
						<input name="category[]" class="categoryInp" value="" type="text">
					</div>
					<div class="form-box">
						<span class="form-description">Describe how you offer this service</span>
						<textarea name="description[]"></textarea>
					</div>
				</div>`)

				// $('#form-group').append('<div class="form-box form-box-inline"> <textarea name="description[]" rows="4"></textarea> <a href="#" class="remove-input2"><i class="bx bxs-trash"></i></a>  </div>')

				autocomplete($('input[name="category[]"]'))

				count_cat ++;
				if(count_cat > 2){
					$('#add-input').hide();
				}		
			})
			$(document).on('click', '.remove-input2', function(e) {
				e.preventDefault();
				$(this).closest('.form-box-inline').remove();

				count_cat--;
				$('#add-input').show();
			})

			$(".categoryInp").on("input focus", () => {
				//    get_Search_Suggest();
				Save_Search_Input();
			})

			// save search on google_suggest table
			function Save_Search_Input() {
				let search_val = $(".categoryInp").val();

				$.ajax({
					type: "GET",
					url: "/include-functions/save-search-inp.php?keyword=" + search_val,
					success: function (response) {
						console.log(response);
					}
				});
			}

			function autocomplete(inps) {
				inps.each(function(i, inpEl) {
					var inp = $(inpEl)

					inpEl.oninput = function() {
						$.ajax({
							url: '/ajax/ajax_search_cat.php?hint='+inp.val(),
							success: function (result) {
								$tick = $(".tick");

								removeAutocomplete();
								selected = -1;

								var resp = JSON.parse(result);
								

								check_valid_cat[i] = 0;

								if(inp.val().length > 0){
									if(!resp.data){
										inp.next(".inList").remove();
										inp.next(".notInList").remove();
										span = $(document.createElement('span'));
										span.addClass('notInList');
										inp.after(span);
									} else{
										inp.next(".inList").remove();
										inp.next(".notInList").remove();
										inp.next(".inavlid-message").remove();
										span = $(document.createElement('span'));
										span.addClass('inList');
										inp.after(span);
										check_valid_cat[i] = 1;
									}
								} else{
									inp.next(".inList").remove();
									inp.next(".notInList").remove();
									inp.next(".inavlid-message").remove();
								}
								
								if(!resp.data) return

								var ul = $(document.createElement('ul'));
								ul.addClass('autocomplete');


								var li = $(document.createElement('li'));
								li = $(document.createElement('li'));
								li.text("Please select a category from the list below:");
								li.addClass('disabled');
								ul.append(li);

								resp.data.forEach(function (item) {
									var li = $(document.createElement('li'));
								
									li.html(item.keyword);

									li.click(function () {
										inp.val($.trim($(this).text()));
										removeAutocomplete();
										
										span = $(document.createElement('span'));
										span.addClass('inList');
										inp.after(span);

										check_valid_cat[i] = 1;
									})

									ul.append(li);
								})

								inp.after(ul);
							}
						})
					}

					inpEl.onkeydown = function (e) {
						var items = inp.parent().find('.autocomplete li');
						switch (e.key) {
							case 'ArrowDown':
								selected++;
								setActive(items);
								break;
							case 'ArrowUp':
								selected--;
								setActive(items);
								break;
							case 'Enter':
								if (selected < 0) return;
								e.preventDefault();
								items.eq(selected).click();
								break;
						}
					}

					function setActive(items) {
						items.removeClass('selected');

						if (selected >= items.length) selected = 0;
						if (selected < 0) selected = items.length - 1;

						items.eq(selected).addClass('selected');
					}
				})
				
			}
			autocomplete($('input[name="category[]"]'))

			$(document).click(function (e) {
				if (!$(e.target).is('.autocomplete, .autocomplete li')) {
					removeAutocomplete();
				}
			})

			function removeAutocomplete() {
				$('.autocomplete').remove();
			}
		</script>

		<script>
			function checkValid() {

				let input_categoires = $('input[name="category[]"]');
				let input_descriptions = $('textarea[name="description[]"]');

				const cat_inp_array = [];
				const des_inp_array = [];
				let ch = 1;
				
				input_categoires.each(function(i, inpSingle) {
					
					cat_inp_array[i] = $(inpSingle).val();

					if(cat_inp_array[i] === '' || check_valid_cat[i]===0){
						
						ch = 0;
						
						let inpSin = $(inpSingle);

						p = $(document.createElement('p'));
						p.addClass('inavlid-message');
						p.text('You must type and select from the drop-down menu');
						

						if(inpSin.next().attr('class') == "notInList"){
							let next = inpSin.next();

							if(next.next('.inavlid-message').length == 0){
								next.after(p);	
							}
						} else{
							if(inpSin.next('.inavlid-message').length == 0){
								inpSin.after(p);	
							}
						}

						

					}
				});

				input_descriptions.each(function(i, inpSingle) {

					des_inp_array[i] = $(inpSingle).val();

					if(des_inp_array[i] === ''){

						ch = 0;

						let inpSin = $(inpSingle);
						
						inpSin.next(".inavlid-message").remove();

						p = $(document.createElement('p'));
						p.addClass('inavlid-message');

						if(cat_inp_array[i] === ''){
							p.html("The phrase 'UPDATE THIS' must be included in the description.");
						} else{
							p.html("The phrase '<b>"+cat_inp_array[i]+"</b>' must be included in the description.");
						}
						

						if(inpSin.next('.inavlid-message').length == 0){
							inpSin.after(p);	
						}

					} else{
						/** category match in description */

						let cat_string = cat_inp_array[i];
						let des_string = des_inp_array[i];

						let cat_new_string = cat_string.slice(0, -3);

						let regex = new RegExp(cat_new_string, "gi");

						let matches = des_string.match(regex);

						if(matches){
							let inpSin = $(inpSingle);
							inpSin.next(".inavlid-message").remove();
							
						} else{
							ch = 0;

							let inpSin = $(inpSingle);

							p = $(document.createElement('p'));
							p.addClass('inavlid-message');
							// p.html("The phrase 'UPDATE THIS' must be included in the description.");
							if(cat_inp_array[i] === ''){
								p.html("The phrase 'UPDATE THIS' must be included in the description.");
							} else{
								p.html("The phrase '<b>"+cat_inp_array[i]+"</b>' must be included in the description.");
							}

							if(inpSin.next('.inavlid-message').length == 0){
								inpSin.after(p);	
							}
						}
					}
				});


				/** check all input ok */
				if(ch){
					return true;
				} else{
					return false;
				}
				
				
			};
		</script>
		
</body>
</html>