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

<head>
	<style>
		body {
			font-size: 1.25rem !important;
			margin-left: calc(100vw / 3) !important;
			/* width: 30vw !important; */
			width: fit-content !important;
		}
		@media screen and (max-width: 600px) {
			body {
				margin-left: 0 !important;
				width: 100% !important;
			}
		}
		label {
			margin-bottom: 0rem !important;
		}
		.form-control {
			font-size: 1.25rem !important;
		}

		.highlight {
			background-color: #66b3ff;
		}
	</style>
	<style>
		#myImg {
			cursor: pointer;
			transition: 0.3s;
		}

		#myImg:hover {opacity: 0.7;}

		#myImg2 {
			border-radius: 5px;
			cursor: pointer;
			transition: 0.3s;
		}

		#myImg2:hover {opacity: 0.7;}

		/* The Modal (background) */
		.modal {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 1; /* Sit on top */
			padding-top: 100px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
		}

		/* Modal Content (image) */
		.modal-content {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
		}

		/* Caption of Modal Image */
		#caption {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
			text-align: center;
			color: #ccc;
			padding: 10px 0;
			height: 150px;
		}

		/* Add Animation */
		.modal-content, #caption {  
			-webkit-animation-name: zoom;
			-webkit-animation-duration: 0.6s;
			animation-name: zoom;
			animation-duration: 0.6s;
		}

		@-webkit-keyframes zoom {
			from {-webkit-transform:scale(0)} 
			to {-webkit-transform:scale(1)}
		}

		@keyframes zoom {
			from {transform:scale(0)} 
			to {transform:scale(1)}
		}

		/* The Close Button */
		.close {
			position: absolute;
			top: 15px;
			right: 35px;
			color: #f1f1f1;
			font-size: 40px;
			font-weight: bold;
			transition: 0.3s;
		}

		.close:hover, .close:focus {
			color: #bbb;
			text-decoration: none;
			cursor: pointer;
		}

		/* 100% Image Width on Smaller Screens */
		@media only screen and (max-width: 700px){
			.modal-content {
				width: 100%;
			}
		}
	</style>
	<style>
		/* Adapted from https://stackoverflow.com/a/16243163 */

		.donate-now label, .donate-now input {
			margin-top:5px;
			text-align: center;
			align-items: center;
			justify-content: center;
			display: flex;
			height: 40px;
			width:180px;
			border: 1px solid #CCC;
			border-radius: 5px;
			cursor: pointer;
			color:#000;
			background-color: #fff;
		}

		.donate-now input[type="radio"] {
			display: none;
		}

		.donate-now label:hover {
			background: #fff;
		}

		.donate-now input[type="radio"]:checked + label {
			background-color: #44759d;
			color:#fff;
			border: 2px solid #44759d;
		}

		.donate-now input[type="radio"]:checked + label span {
			display: show;
		}

		.donate-now input[type="radio"]:not(:checked) + label span {
			display: none;
		}
	</style>
	<style>
		/* ✅ PERFECT CENTERING */
		.product-td {
			text-align: center !important;
			vertical-align: middle;
			padding: 20px;
		}

		/* ✅ FORCE SAME IMAGE SIZE */

		.product-wrap {
			margin: 0 auto;
			text-align: center;
			display: inline-block;
		}

		.product-wrap img {
			width: 190px;
			height: 240px;
			object-fit: fill;
			display: block;
			margin: 0 auto 10px;
		}
		/* ✅ CLEAN LABEL */
		.product-wrap label {
			display: block;
			margin-top: 5px;
			font-weight: 600;
			width: 100%;
		}

		/* ✅ RADIO BUTTON */
		.donate-now {
			margin-top: 8px;
		}

		.overlay-expired {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(200, 200, 200, 0.85); /* greyed out */
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.overlay-message {
			background: #ffffff;
			padding: 25px 30px;
			border-radius: 8px;
			font-size: 1.1rem;
			font-weight: 600;
			color: #333;
			text-align: center;
			max-width: 80%;
			box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		}
	</style>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<meta name="viewport" content="user-scalable=yes, initial-scale=0.7, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
	<link rel="icon" href="img/favicon.png" type="image/x-icon" />
	<link rel="apple-touch-icon" href="img/favicon.png">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>Scheduling System</title>

	<!-- Google font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">

	<!-- Custom stlylesheet -->
	<link type="text/css" rel="stylesheet" href="<?php echo Util::asset('css/style.css'); ?>" />
	<link type="text/css" rel="stylesheet" href="<?php echo Util::asset('css/style1.css'); ?>" />
	<!-- <link type="text/css" rel="stylesheet" href="<?php echo Util::asset('css/fontawesome-free/css/all.min.css'); ?>">
	<link rel="stylesheet" type="text/css" href="<?php echo Util::asset('css/datatables.min.css'); ?>"/> -->
	
	<!-- Plugin JavaScript -->
	<script type="text/javascript" src="<?php echo Util::asset('js/jquery-2.1.1.min.js'); ?>"></script>
	<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> -->
	<!-- <script type="text/javascript" src="<?php echo Util::asset('js/datatables.min.js'); ?>"></script> -->
	<script type="text/javascript" src="<?php echo Util::asset('js/sbg-util.js'); ?>"></script>
	<script type="text/javascript" src="<?php echo Util::asset('js/sbg-upload.js'); ?>"></script>
</head>

<body style="margin: 0px !important;">
	<div id="main">
		<div id="wrapper">
			<div id="content-wrapper">
				<div class="container-fluid">
					<table class='table' id='dataTable' cellspacing='0'>
						<tr>
							<td align="center" style="padding-top: 10px;">
								<!-- <img src="img/sbg.png" width="200px"  /> -->
								<?php echo $logo; ?>
							</td>
						</tr>
					</table>
					<div class="position-relative" id="gift-container">
						<div id="overlay-expired" class="overlay-expired d-none">
							<div class="overlay-message">
								We did not receive a response from you within the required timeframe.<br>
								The gift has been reallocated to another customer.
							</div>
						</div>
						<div class="card mb-3" id="div-main" style="margin-top: 10px;">
							<div class="card-header" data-aos="slide-up" style="text-align: center;background-color:#44759d;color:white;padding-top:0.5rem;padding-bottom:0.5rem;">
								<h4 id="txtGiftName"><?php echo $this->giftname ?><br/>Delivery Schedule</h4>
							</div>
							<form id="form_add" name="form_add">
							<div class="card-body" style="padding-top: 0.5rem;padding-bottom: 0.5rem;height: 65vh;overflow: auto;">
								<div class="form-group row">
									<div class="col-lg-12" style="padding-top: 10px;">
										<label style="font-weight: bold;">Company Name:</label>
										<input id="txtCustSchedCoyID" style="display:none;" name="txtCustSchedCoyID" class="form-control" type="text" value="<?php echo $this->coy_id; ?>" disabled>
										<input id="txtCustSchedGiftID" style="display:none;" name="txtCustSchedGiftID" class="form-control" type="text" value="<?php echo $this->giftid; ?>" disabled>
										<input id="txtCustSchedId" style="display:none;" name="txtCustSchedId" class="form-control" type="text" value="<?php echo $this->custschedid; ?>" disabled>
										<input id="txtCustSchedDelivery" style="display:none;" name="txtCustSchedDelivery" class="form-control" type="text" value="<?php echo $this->delivery; ?>" disabled>
										<input id="txtCustSchedDeliveryCutOff" style="display:none;" name="txtCustSchedDeliveryCutOff" class="form-control" type="text" value="<?php echo $this->delivery_cutoff; ?>" disabled>
										<input id="txtPositionTitle" name="txtPositionTitle" class="form-control" type="text" value="<?php echo $this->position; ?>" disabled>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-lg-12" style="display: flex;padding: 0;">
										<div class="col-lg-6" style="padding-top: 10px;">
											<label style="font-weight: bold;">Contact Name:</label>
											<input id="txtName" name="txtName" class="form-control" type="text" value="<?php echo $this->name; ?>" disabled>
										</div>
										<div class="col-lg-6" style="padding-top: 10px;">
											<label style="font-weight: bold;">Contact Phone:</label>
											<input id="txtMobileNo" name="txtMobileNo" class="form-control" type="text" value="<?php echo $this->phone; ?>" disabled>
										</div>
									</div>
								</div>
								<div class="form-group row" style="margin-bottom: 0;">
									<div class="col-lg-12" style="text-align:center;">
										<label id="lblGiftOption" style="font-weight: bold;"></label>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-lg-12">									
										<table style="width:100%; border-collapse:collapse; table-layout:fixed;" cellspacing="0">
											<tbody id="divGiftItem">
												<?php echo $this->htmlItem; ?>
											</tbody>
										</table>
									</div>
								</div>
								<div class="form-group row" style="margin-bottom: 0;">
									<div class="col-lg-4">
										<label style="font-weight: bold;">Delivery Schedule:</label>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-lg-12" id="calendar">
									<?php echo $this->htmlDelivery; ?>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-lg-12">
										<label>Comment: </label> &nbsp;
										<textarea class="form-control" rows="3" ID="txtComment"><?php echo $this->remarks; ?></textarea>
									</div>
								</div>
							</div>
							<div class="card-footer" style="text-align: center;">
								<div class="row">
									<div class="col-lg-12">
										<button type="reset" class="btn btn-primary btn-lg mr-2" id='btnNew' onclick="addRecord(0);">Submit</button>
										<button type="reset" class="btn btn-secondary btn-lg" id='btnCancel' onclick="clearEntry();">Clear</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					</form>
					<!-- <div style="text-align: center;width: 100%;">
						<h5>More options below &#8595;</h5>
					</div> -->
					<div style="text-align: center;width: 100%;">
						<h6>Copyright &copy; <?php echo date_create('now')->format('Y') . " " . $coy_name; ?> &#8226; All rights reserved</h6>
					</div>				
				</div>
			</div>
		</div>
	
		<div class="modal" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Comment</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<i aria-hidden="true" class="ki ki-close"></i>
						</button>
					</div>
					<div class="modal-body">
						<textarea class="form-control" rows="5"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary">Save</button>
						<button type="button" class="btn btn-secondary" onclick="$('#commentModal').hide();">Close</button>
					</div>
				</div>
			</div>
		</div>

		
	</div>
	
	<div id="myModal" class="modal" aria-hidden="false" aria-modal="true" onclick="$('#myModal').hide();">
		<!-- <span class="close" data-dismiss="modal" aria-label="Close">&times;</span> -->
		<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#myModal').hide();" style="color:white;">
			&times;
		</button>
		<img id="modal-img" class="modal-content" onclick="$('#myModal').hide();">
	</div>

	<script type="text/javascript">
		// Get the modal
		var modal = document.getElementById("myModal");

		// Get the image and insert it inside the modal
		var modalImg = document.getElementById("modal-img");

		document.addEventListener("click", (e) => {
			const elem = e.target;
			if (elem.id==="myImg") {
				modal.style.display = "block";
				modalImg.src = elem.dataset.biggerSrc || elem.src;
			}
		})

		// // Get the <span> element that closes the modal
		// var span = document.getElementsByClassName("close");

		// // When the user clicks on <span> (x), close the modal
		// span.onclick = function() { 
		// 	modal.style.display = "none";
		// }

		$('#main').click(function (event) {
			if(!$(event.target).closest('#myModal').length && !$(event.target).is('#myModal')) {
				$("#myModal").hide();
			}     
		});

		var add_url = "<?php echo Util::convertLink("SubmitSchedule") ; ?>" ;
		<?php include (PATH_CODE . "js/corporate_gift/submitschedule.js") ; ?>
	</script>
</body>
</html>