
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title>Registration Form</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">



    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


    <!-- Custom styles for this template -->
    <link href="/css/form-validation.css" rel="stylesheet">
  </head>
  <body >
<!-- Navbar -->
<div class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
      <a class="navbar-brand" href="#">
      <img src="/css/logo.png" alt=""  height="20">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
              <li class="nav-item" id="nav-logo">
              <a class="nav-link active" aria-current="page" href="#Heading Box"></a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="#">Check for Organ Availability</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="/logind">Login for Donor</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="/register">Sign-up for Donor</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/loginad">Admin Login</a>
              </li>
          </ul>
      </div>
  </div>
</div>
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="/css/reg.png" alt="" width="72" height="57">
      <h2>Registration Form</h2>
      <p class="lead">This registration is a binding, legal document of gift. You affirm the information provided is accurate. You agree upon death to donate all eligible organs and tissue for transplant. </p>

      <p class="lead" >You can update or remove your registration or specify more detailed donation preferences at any time by logging in to your account.</p>
          </div>

    <div class="row g-3">
      <div class="col">
        <form action="/auth/register" method="POST">
        <h4 class="mb-3">Donor Details</h4>
        <div class="needs-validation" novalidate>
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="firstName" class="form-label">First name</label>
              <input type="text" name="firstname" class="form-control" id="firstName" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid first name is required.
              </div>
            </div>

            <div class="col-sm-6">
              <label for="lastName" class="form-label">Last name</label>
              <input type="text" name="lastname" class="form-control" id="lastName" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid last name is required.
              </div>
            </div>
            <div class="col-12">
              <label for="address" class="form-label">Address</label>
              <input type="text" name="address" class="form-control" id="address" placeholder="Surathkal" required>
              <div class="invalid-feedback">

              </div>
            </div>
              <div class="col-6">
                <label for="address" class="form-label">State</label>
                <input type="text" name="state" class="form-control" id="address" placeholder="Delhi" required>
                <div class="invalid-feedback">
                  </div>
                  </div>
                <div class="col-6">
                    <label for="address" class="form-label">City</label>
                    <input type="text" name="city" class="form-control" id="address" placeholder="Mangalore" required>
                    <div class="invalid-feedback">
                      </div>
                </div>
              <div class="col-12">
                    <label for="address" class="form-label">Contact Number</label>
                    <input type="text" name="contact" class="form-control" id="address" placeholder="+91XXXXXXXXX" required>
                    <div class="invalid-feedback">
                      </div>
              </div>

                <div class="col-12">
                    <label for="address" class="form-label">Date of Birth</label>
                    <input type="date" name="dob" class="form-control" id="address"  required>
                    <div class="invalid-feedback">
                    </div>
                </div>
                <div class="my-3"> Gender
                  <div class="form-check">
                    <input id="credit" name="gender"  type="radio" class="form-check-input" value="Male" checked required>
                    <label class="form-check-label" for="credit">Male</label>
                  </div>
                  <div class="form-check">
                    <input id="debit" name="gender" type="radio" class="form-check-input" value="Female" required>
                    <label class="form-check-label" for="debit">Female</label>
                  </div>
                  <div class="form-check">
                    <input id="paypal" name="gender" type="radio" class="form-check-input" value="Other" required>
                    <label class="form-check-label" for="paypal">Other</label>
                  </div>
                </div>
                <div class="col-12">
                        <label for="address" class="form-label">Name of Next Kin</label>
                        <input type="text" name="nameofkin" class="form-control" id="address" placeholder="Name" required>
                        <div class="invalid-feedback">
                        </div>
                </div>
                <div class="col-12">
                        <label for="address" class="form-label">Contact Number of Next Kin</label>
                        <input type="text" name="kincontact" class="form-control" id="address" placeholder="+91XXXXXXXXX" required>
                        <div class="invalid-feedback">
                            </div>
                </div>
                <div class="col-12">
                        <label for="address" class="form-label">Personal Doctor</label>
                        <input type="text" name="doctor" class="form-control" id="address" placeholder="Dr.XXX" required>
                        <div class="invalid-feedback">
                            </div>
                </div>
                <div class="col-12">
                        <label for="address" class="form-label">Hospital</label>
                        <input name="hospital" type="text" class="form-control" id="address" placeholder="KMC Manipal" required>
                        <div class="invalid-feedback">
                        </div>
                </div>
                <div class="col-12">
                <label for="address" class="form-label">Diseases</label>
                <input type="text" name="disease" class="form-control" id="address" placeholder="Malaria,Tb etc." required>
                        <div class="invalid-feedback">
                        </div>
                </div>
                <div class="col-12">
                  <label for="email" class="label">Email</label>
                  <input type="email" name="email" id="email" class="form-control" placeholder="Email" required >
                          <div class="invalid-feedback">
                          </div>
                  </div>
                <div class="col-12">
                <label for="username" class="form-label">Username</label>
                    <div class="input-group has-validation">
                        <span class="input-group-text">@</span>
                        <input type="text" name="username" class="form-control" id="username" placeholder="Username" required>
                            <div class="invalid-feedback">
                            Your username is required.
                            </div>
                    </div>
                </div>
                <div class="col-12">
                  <label for="inputPassword" class="label">Password</label>
                  <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
                          <div class="invalid-feedback">
                          </div>
                  </div>
                  <div class="col-12">
                    <label for="inputPassword"  class="label">Confirm Password</label>
                    <input type="password" name="confirmpassword" id="inputPassword" class="form-control" placeholder="Confirm Password" required>
                            <div class="invalid-feedback">
                            </div>
                    </div>

                
                </br></br>
                <div class="col-12">
                  <div class="checkbox mb-3">
                    <label>
                      <h6>Already registered? <a href="/logind">Login</a></h6>
                    </label>
                  </div>
            </div>

          <hr class="my-4">

          <button class="col-3 w-100 btn btn-primary btn-lg" type="submit">Sign-up</button>

          </div>
          <% if(message){ %>
            <h4 class="err"><%= message %></h4>
            <% } %>

        </form>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-muted text-center text-small">
    <p class="mb-1">&copy; 2020â€“2021</p>

  </footer>
</div>


    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

      <script>
          // Example starter JavaScript for disabling form submissions if there are invalid fields
            (function () {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
                })
            })()
      </script>
  </body>
</html>