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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Twitter -->
    <meta name="twitter:site" content="@whispersapp">
    <meta name="twitter:creator" content="@whispersapp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Whispers App | Whispering Your Feelings to Them">
    <meta name="twitter:description" content="Let those you love, those who helped you, and those important to you, hear your heart's whispers... in a unique, effective and cost efficient way">
    <meta name="twitter:image" content="/img/ogimage.jpg">

    <!-- Facebook -->
    <meta property="og:image" content="/img/ogimage.jpg"/>
    <meta property="og:url" content="http://whispersapp.com">
    <meta property="og:title" content="Gorgeous Hair and Beauty College">
    <meta property="og:description" content="Let those you love, those who helped you, and those important to you, hear your heart's whispers... in a unique, effective and cost efficient way">

 

    <!-- Meta -->
    <meta name="description" content="Let those you love, those who helped you, and those important to you, hear your heart's whispers... in a unique, effective and cost efficient way">
    <meta name="author" content="Techmetic Solutions">

    <title>Gorgeous Hair and Beauty College</title>

    <!-- vendor css -->
    <!-- favicon icon -->
<link href="/img/fav.png" rel="shortcut icon" type="image/jpg">
<link href="/img/fav.png" rel="icon">
<link href="/img/fav.png" rel="icon" sizes="72x72">
<link href="/img/fav.png" rel="icon" sizes="114x114">
<link href="/img/fav.png" rel="icon" sizes="144x144">
    <link href="../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/highlightjs/styles/github.css" rel="stylesheet">
    <link href="../lib/select2/css/select2.min.css" rel="stylesheet">
    <link href="../lib/timepicker/jquery.timepicker.css" rel="stylesheet">
    <link href="../lib/spectrum-colorpicker/spectrum.css" rel="stylesheet">
    <link href="../lib/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
    <link href="../lib/ion-rangeslider/css/ion.rangeSlider.css" rel="stylesheet">
    <link href="../lib/ion-rangeslider/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/rickshaw/rickshaw.min.css" rel="stylesheet">

    <!-- Bracket CSS -->
    <link rel="stylesheet" href="../css/bracket.css">
  </head>

  <body>

  




  <!-- ########## START: MAIN PANEL ########## -->
   <!-- ########## START: MAIN PANEL ########## -->
    <div class="br-mainpanel pd-x-20 pd-sm-x-30" style="margin-left: 1px; margin-top: 1px; background-image: url(../img/bg2.jpg); background-size:100% 100%;">
      




      <div class="br-pagetitle">
        
        
      </div><!-- d-flex -->



      <div class="br-pagebody pd-x-20 pd-sm-x-30" style="padding-top: 1px; margin-top: 2px;">



     
       

     

          

            <div class="pd-y-20 bg-gray-700 mg-t-10" style="background-image: url(../img/bg.jpg); background-size:100% 100%;">
              <div class="modal d-block pos-static">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content bd-0 bg-transparent rounded overflow-hidden">
                    <div class="modal-body pd-0">
                      <div class="row no-gutters">
                         <div class="col-lg-12 bg-white" style="margin: auto;">
                            <div class="pd-y-30 pd-xl-x-30">
                              
                              <div class="pd-x-30 pd-y-10">
                                <div class="mg-t-30 mg-b-20 tx-12">Done for now? <a href="/dashboard">Go back home</a></div>
                                 
                                <h3 class="tx-teal  mg-b-5">GHBC Management System</h3>
                               
                                <p>Add An Alumnus</p>

                              
                                


                                <br>
                                 
                                <% include ./partials/messages %>
                                <form action="./alumniCreate" method="POST">
                                  <div class="form-group">
                                  <label for="fullName">Name</label>
                  <input class="form-control" id="fullName" type="text" name="name" placeholder="Full Name">
                                </div><!-- form-group -->


                                <div class="row form-group">
                                <div class="col-lg-6">
             <label for="admNo">Admission Number</label>
                  <input class="form-control" id="admNo" type="text" name="admissionNumber" placeholder="e.g. 3456">
              </div><!-- col-4 -->


              <div class="col-lg-6">
              <label class="form-control-label" for="dateOfAdmission">Date of Admission</label>
                <input class="form-control" type="date" id="dateOfAdmission" name="dateOfAdmission">
              </div><!-- col-4 -->
            </div>


                   <div class="row form-group">
                                <div class="col-lg-6">
             <label for="feeBalance">Fee Balance(Ksh)</label>
                  <input class="form-control" id="feeBalance" type="number" name="admissionNfeeBalance" placeholder="e.g. 3456">
              </div><!-- col-4 -->


              <div class="col-lg-6">
              <label class="form-control-label" for="dateOfCompletion">Date of Completion</label>
                <input class="form-control" type="date" id="dateOfCompletion" name="dateOfCompletion">
              </div><!-- col-4 -->
            </div>

            <div class="col-lg-12">
              <label class="form-control-label" for="dateOfCompletion">Date of Completion</label>
                <input class="form-control" type="date" id="dateOfCompletion" name="dateOfCompletion">
              </div><!-- col-4 -->


                   <div class="row form-group">
                                <div class="col-lg-6">
             <label for="phone">Phone Number</label>
                  <input class="form-control" id="phone" type="phone" name="phone" placeholder="e.g. 0711223344">
              </div><!-- col-4 -->


              <div class="col-lg-6">
              <label for="email">Email Address</label>
                  <input class="form-control" id="email" type="text" name="email" placeholder="e.g. joycedoe@gmail.com">
              </div><!-- col-4 -->
            </div>



                                <div class="row form-group">
                                <div class="col-lg-6">
              <label class="form-control-label">Select Course:</label>
                 <select class="form-control select2" name="course" data-placeholder="Choose one">
                <option label="Choose one"></option>

                <% course.forEach(function(course){ %>
                  <option value="<%= course.name %>"><%= course.name %></option>
              <% })%>
                
                
              </select>
              </div><!-- col-4 -->


              <div class="col-lg-6">
              <label class="form-control-label">Select Campus:</label>
                 <select class="form-control select2" name="campus" data-placeholder="Choose one">
                <option label="Choose one"></option>
               <% campus.forEach(function(campus){ %>
                  <option value="<%= campus.name %>"><%= campus.name %></option>
              <% })%>
               
              </select>
              </div><!-- col-4 -->
            </div>



                                

                                <div class="form-group">
                                  <label for="parentsName">Parent's/Next of Kin Name</label>
                  <input class="form-control" id="parentsName" type="text" name="parentsName" placeholder="e.g. Moses Munene">
                                </div><!-- form-group -->
                                

                                <div class="form-group">
                                  <label for="parentsPhone">Parents/Next of Kin Phone Number</label>
                  <input class="form-control" id="parentsPhone" type="phone_number" name="parentsPhone" placeholder="e.g 0711223344">
                                </div><!-- form-group -->
                                


                             
                               

                                <button class="btn btn-primary pd-y-12 btn-block">Save Alumnus</button>

                              </form>
                               

                               


                                <div class="mg-t-30 mg-b-20 tx-12">Done for now? <a href="/dashboard">Go back home</a></div>
                               

                                


                              </div>
                            </div><!-- pd-20 -->
                          </div><!-- col-6 -->
                        
                       
                        </div><!-- row -->

                      </div><!-- modal-body -->
                    </div><!-- modal-content -->
                  </div><!-- modal-dialog -->
                </div><!-- modal -->
              </div><!-- pd-y-50 -->
            
         


        
       

   

      </div><!-- br-pagebody -->

<%- include('partials/footer'); -%>