<?php include('_inc/_header.php') ?>

<h1>Buchungsdetails</h1>

<div class="row">
	<div class="<?php echo $GLOBALS['offsetClass'] ?>">
		<div class="btn btn-block btn-hero btn-iconed btn-iconed-anthrazit-08-primary btn-iconed-left active">
			Produkt einlagern
			<i aria-hidden="true" class="btn-icon ifc ifc-chain"></i>
			<i aria-hidden="true" class="ml-auto ifc ifc-arrow-right"></i>
		</div>
		
		<div class="text-primary font-weight-bold text-center mt-6 mb-4">
			Wie möchten Sie bezahlen (Abo/Credits)?
		</div>

		<div class="ch-ggs-web-suite-boxed-gray">
			<p>
				Dieses Angebot ist kostenpflichtig. Sie können entweder in Form von Credits bezahlen oder ein Abonnement abschliessen. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Donec vitae sapien ut libero venenatis faucibus.
			</p>
	  		<h4 class="mb-1">Abonnement</h4>
		  	<div class="form-group">
		  		<div class="form-check">
			  		<input type="radio" class="form-check-input" name="abo-radios" id="abo-monthly" value="option1"/>
			  		<label class="d-block form-check-label" for="abo-monthly">
			  			<span class="d-flex">monatlich <span class="ml-auto">CHF <span class="font-weight-bold">6.99</span></span></span>
			  		</label>
				</div>
				<div class="form-check">
			  		<input type="radio" class="form-check-input" name="abo-radios" id="abo-yearly" value="option2"/>
			  		<label class="d-block form-check-label" for="abo-yearly">
			  			<span class="d-flex">jährlich <span class="ml-auto">CHF <span class="font-weight-bold">69.99</span></span></span>
			  		</label>
				</div>
			</div>
			<p class="text-muted small">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
			</p>
			<h4 class="mb-1">Credits</h4>
		  	<div class="form-group">
		  		<div class="form-check">
			  		<input type="radio" class="form-check-input" name="credits-radios" id="credits-5"/>
			  		<label class="d-block form-check-label" for="credits-5">
			  			<span class="d-flex">5 Credits <span class="ml-auto">CHF <span class="font-weight-bold">24.99</span></span></span>
			  		</label>
				</div>
				<div class="form-check">
			  		<input type="radio" class="form-check-input" name="credits-radios" id="credits-20"/>
			  		<label class="d-block form-check-label" for="credits-20">
			  			<span class="d-flex">20 Credits <span class="ml-auto">CHF <span class="font-weight-bold">94.00</span></span></span>
			  		</label>
				</div>
				<div class="form-check">
			  		<input type="radio" class="form-check-input" name="credits-radios" id="credits-50"/>
			  		<label class="d-block form-check-label" for="credits-50">
			  			<span class="d-flex">50 Credits <span class="ml-auto">CHF <span class="font-weight-bold">230.00</span></span></span>
			  		</label>
				</div>
				<div class="form-check">
			  		<input type="radio" class="form-check-input" name="credits-radios" id="credits-200"/>
			  		<label class="d-block form-check-label" for="credits-200">
			  			<span class="d-flex">200 Credits <span class="ml-auto">CHF <span class="font-weight-bold">990.00</span></span></span>
			  		</label>
				</div>
			</div>
			<p class="text-muted small">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
			</p>
		</div>
		<div class="book-progress progress">
		  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="row mt-4">
			<div class="col-md-auto">
				<a href="javascript:history.back()"class="btn btn-back">Zurück</a>
			</div>
			<div class="col-md-auto ml-md-auto">
				<a href="paymentDetail.php"class="btn btn-iconed btn-iconed-primary">weiter <i aria-hidden="true" class="btn-icon ifc ifc-arrow-right"></i></a>
			</div>
		</div>
	</div>
</div>

<?php include('_inc/_footer.php') ?>