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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ortdox church</title>
	<link rel = "icon" href ="Church_logo.png" type = "image/x-icon">
    <link rel="stylesheet" href="donation.css">
    <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		$(document).ready(function(){
			/* by default hide all radio_content div elements except first element */
			$(".content .radio_content").hide();
			$(".content .radio_content:first-child").show();

			/* when any radio element is clicked, Get the attribute value of that clicked radio element and show the radio_content div element which matches the attribute value and hide the remaining tab content div elements */
			$(".radio_wrap").click(function(){
			  var current_raido = $(this).attr("data-radio");
			  $(".content .radio_content").hide();
			  $("."+current_raido).show();
			})
		});
	</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
</head>

<body>

    <div class="wrapper">
		<?php include 'sidebar.php'; ?>
        <div class="main_content">
			<div ng-app="myapp" ng-controller="usercontroller">
				<div class="info">
                <h3 id="h3">Donation Form</h3>
                    <h4>Account</h4>
                    <div class="input-group">
                        <div class="input-box">
                            <input type="text" placeholder="Full Name" required class="name" name="user_name" ng-model="vards">
                            <i class="fa fa-user icon"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-box">
                            <input type="email" placeholder="Email Address" required class="name" name="user_mail" ng-model="epasts">
                            <i class="fa fa-envelope icon"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-box">
                            <input type="phone" placeholder="Phone Number" required class="name" name="user_phone" ng-model="tel">
                            <i class="fa fa-phone icon"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-box">
						
                            <h4>Donation Type</h4>
							<label class="radio_wrap" data-radio="radio_1">
								<input type="radio" id="pt1" name="dontype" checked class="radio" ng-model="Donation_type1" value="Sorok zdravii">
								<label for="dontype">Sorokoust o zdravii 1€ </label><br></br>
							</label>
							<label class="radio_wrap" data-radio="radio_1">
								<input type="radio" id="pt2" name="dontype" checked class="radio" ng-model="Donation_type1" value="Sorok upokoenii">
								<label for="dontype">Sorokoust o upokoenii 1€ </label><br></br>
							</label>
							<label class="radio_wrap" data-radio="radio_3">
								<input type="radio" id="pt3" name="dontype" checked class="radio" ng-model="Donation_type1" value="Liturg zdravii">
								<label for="dontype">Liturgija o zdravii 2€ </label><br></br>
							</label>
							<label class="radio_wrap" data-radio="radio_3">
								<input type="radio" id="pt4" name="dontype" checked class="radio" ng-model="Donation_type1" value="Liturg upokoenii">
								<label for="dontype">Liturgija o upokoenii 2€ </label><br></br>
							</label>
                        </div>
                    </div>
						<h4> Names for prayer </h4>
						<div class="input-group">
							<div class="input-box">
								<input type="text" placeholder="Full Names" required class="name" name="names" ng-model="Username1" >
								<i class="fa fa-user icon"></i>
						</div>
					</div>

                    <div class="input-group">
                        <div class="input-box">
                            <h4>Payment Details</h4>
                            <input type="radio" id="p1" name="pay" checked class="radio">
                            <label for="p2"><span><i class="fa fab fa-cc-paypal"></i> Paypal</span></label>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-box">
                            <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="Comfirm"/>   
                        </div>
                    </div>
					<div class="content">
						<div class="input-group">
							<div class="radio_content radio_1">
								<p>		
									<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
										<input type="hidden" name="cmd" value="_s-xclick">
										<input type="hidden" name="hosted_button_id" value="J5UPSHFXFQTQN">
										<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
										<img alt="" border="0" src="https://www.paypalobjects.com/ru_RU/i/scr/pixel.gif" width="1" height="1">
									</form>
								</p>
							</div>
							<div class="radio_content radio_3">
								<p>	
									<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
										<input type="hidden" name="cmd" value="_s-xclick">
										<input type="hidden" name="hosted_button_id" value="KFKK75439FNZQ">
										<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
										<img alt="" border="0" src="https://www.paypalobjects.com/ru_RU/i/scr/pixel.gif" width="1" height="1">
									</form>
								</p>
							</div>

						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
</body>

</html>

<script>
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){  
      $scope.insertData = function(){  
           $http.post(  
                "Insert.php",  
                {'vards':$scope.vards, 'epasts':$scope.epasts, 'tel':$scope.tel, 'Donation_type1':$scope.Donation_type1, 'Username1':$scope.Username1, }  
           ).success(function(data){  
                alert(data);  
                $scope.vards = null;  
                $scope.epasts = null;
				$scope.tel = null; 
				$scope.epasts = null; 
				$scope.Donation_type1 = null; 
				$scope.Username1 = null; 
           });  
      }  
 });  
</script>