<style>
	ul.treeview-menu li a{
		cursor:  pointer;
	}
	.innerDiv{
		margin-top: 10px;
		border-radius: 5px; 
		min-height: 230px; 
		text-align: center;
		overflow: hidden;
	}
	.innerDiv form{
		margin-bottom: 10px;
	}
	.p2{
		background: #FCB7A8;
	}
	.p3{
		background: #F1D192;
	}
	.p4{
		background: #63E3C3;
	}
	.p5{
		background: #BFB89E;
	}
	.p6{
		background: #EA96DD;
	}
	.p7{
		background: #A6F094;
	}
	.button{
		width: 140px;
		padding: 10px;
		margin-top: 10px;
		border-radius: 5px;
		color: #fff;
		font-weight: bold;
		font-size: 20px;
		text-transform: uppercase;
		transition: width 2s, height 4s;
	}
	.button:hover{
		color:#fff;
		opacity: 0.8;
		background: #3c8dbc;
		padding: 10px 20px;
	}
	.upgrade2{
		background: #F56546;
	}
	.upgrade3{
		background: #CAAF4E;
	}
	.upgrade4{
		background: #0CB88D;
	}
	.upgrade5{
		background: #756D4C;
	}
	.upgrade6{
		background: #E740CD;
	}
	.upgrade7{
		background: #438F31;
	}



</style>



<section class="container2 ">
  <h1 style="padding: 20px; margin: 10px 0; background: #ddd; border-radius: 5px;">
	Package Upgrade
  </h1>
</section>

<section class="container2 ">

	<div class="row">

		
		<?php if(!empty($allPackages)): ?>

			<?php if(isset($selected_package) && ($selected_package == -1) ): ?>

				<?php foreach ($allPackages as $key => $pkg) : ?>

					<?php if(isset($userHasPackage[$key]) && ($userHasPackage[$key] != 1) ): ?>

							<div class="col-md-4 col-sm-6 col-xs-12">
								<div class="innerDiv p<?php echo $key; ?>">
									<h2><?php echo $pkg['name']; ?></h2>
									<span>You can upgrade your package to <?php echo $pkg['name']; ?><br>package by click on Upgrade Button
										<br><br><b><?php echo $pkg['price'].' '.UNIT; ?></b> WILL BE DEDUCTED FROM YOUR BANK ACCOUNT.</span>
									<form name="package55<?php echo $key; ?>" action="" method="post">
										<input type="hidden" name="package_id" value="<?php echo $key; ?>">
										<input type="button" name="upgrade<?php echo $key; ?>" value="Upgrade" class="button upgrade<?php echo $key; ?>" onclick="if (confirm('Are you sure you want to upgrade ?')) { document.package55<?php echo $key; ?>.submit(); } else {event.returnValue = false; return false;}">
									</form>
								</div>
							</div>

					<?php endif; ?>

				<?php endforeach; ?>

			<?php else: ?>

				<?php if(isset($userHasPackage[$selected_package]) && ($userHasPackage[$selected_package] != 1) ): ?>

					<div class="col-md-4 col-sm-2 col-xs-12"></div>
					<div class="col-md-4 col-sm-8 col-xs-12">
						<div class="innerDiv p<?php echo $selected_package; ?>">
							<h2><?php echo $allPackages[$selected_package]['name']; ?></h2>
							<span>You can upgrade your package to <?php echo $allPackages[$selected_package]['name']; ?><br>package by click on Upgrade Button
								<br><br><b><?php echo $allPackages[$selected_package]['price'].' '.UNIT; ?></b> WILL BE DEDUCTED FROM YOUR BANK ACCOUNT.</span>
							<form name="package55<?php echo $selected_package; ?>" action="" method="post">
								<input type="hidden" name="package_id" value="<?php echo $selected_package; ?>">
								<input type="button" name="upgrade<?php echo $selected_package; ?>" value="Upgrade" class="button upgrade<?php echo $selected_package; ?>" onclick="alert('Please contact  Niki, customer service manager to  upgrade your package Or after 15 days it will be automatically upgraded.');">
							</form>
						</div>
					</div>
					<div class="col-md-4 col-sm-2 col-xs-12"></div>

				<?php endif; ?>
			<?php endif; ?>

		<?php endif; ?>

	</div>
</section>
