<div  class="panel panel-primary">
  <div class="panel-heading"style="font-size:1.2em;">تسجيل مستخدم جديد</div>
  <div class="panel-body"style="background-color:#00324d;color:#cce5ff;">
<form method="post" id="new" class="form-horizontal" style="float:center;">
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
  <label for="realName" class="control-label"style="float:right;">الاسم الحقيقي</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
  <input type="text" class="form-control" style="float:right;" id="realName" name="realName" placeholder="الاسم الذي سيظهر علي العقود و السندات">
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
  <label for="user_name" class="control-label"style="float:left;">اسم المستخدم</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
  <input type="text" style="float:right;" class="form-control" id="user_name" name="user_name" placeholder="اسم دخول الموقع">
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="pass" class="control-label"style="float:right;">كلمة السر</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="password" class="form-control" style="float:right;" id="pass" name="pass" placeholder="كلمة السر حروف و أرقام أكبر من 8 حروف">
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="pass2" class="control-label"style="float:left;">أعد كتابة كلمة السر</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="password" style="float:right;" class="form-control" id="pass2" name="pass2" placeholder="">
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="email" class="control-label "style="float:right;">الايميل</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="email" class="form-control" style="float:right;" id="email" name="email" placeholder="somebody@domain.com">
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="phone" class="control-label"style="float:left;">رقم الجوال</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="number" style="float:right;" class="form-control" id="phone1" name="phone1" placeholder="رقم الجوال">
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="phone2" class="control-label"style="float:right;">رقم جوال2</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="number" class="form-control" style="float:right;" id="phone2" name="phone2" placeholder="رقم جوال2">
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="address" class="control-label"style="float:right;">العنوان</label>
</div>
<div class="col-xs-12 col-md-10"style="float:right;">
<input type="text" class="form-control" style="float:right;" id="address" name="address" placeholder="العنوان">
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="birth" class="control-label "style="float:right;">تاريخ الميلاد</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
    <script>
      $(function() {
        var calendar = $.calendars.instance('ummalqura');
        $('#expire').calendarsPicker({calendar: calendar});
        var calendar2 = $.calendars.instance('');
        $('#start').calendarsPicker({calendar: calendar2});
        $('#birth').calendarsPicker({calendar: calendar2});
        });
    </script>
<input type="text" class="form-control" style="float:right;" id="birth" name="birth" readonly/>
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="start" class="control-label"style="float:left;">تاريخ بداية العمل</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="text" style="float:right;" class="form-control" id="start"  name="start" readonly />
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-12 col-md-2"style="float:right;">
<label for="idcard" class="control-label"style="float:right;">رقم الهوية</label>
</div>
<div class="col-xs-12 col-md-3"style="float:right;">
<input type="number" class="form-control" style="float:right;" id="idcard" name="idcard" placeholder=" رقم الهوية">
</div>
<div class="col-xs-12 col-md-2"style="float:right;">
<input type="text" class="form-control" style="float:right;" id="gotFrom" name="gotFrom" placeholder="مصدر الهوية">
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="expire" class="control-label"style="float:left;">تاريخ نهاية الهوية</label>
</div>
<div class="col-xs-12 col-md-3"style="float:right;">
<input type="text" style="float:right;" class="form-control" id="expire" name="expire" readonly />
</div>
</div>
<div class="row" style="padding:4px;">
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="nation" class="control-label"style="float:right;">الجنسية</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="text" class="form-control" style="float:right;" id="nation" name="nation" placeholder="الجنسية">
</div>
<div class="col-xs-6 col-md-2"style="float:right;">
<label for="job" class="control-label"style="float:left;">الوظيفة</label>
</div>
<div class="col-xs-12 col-md-4"style="float:right;">
<input type="text" style="float:right;" class="form-control" id="job" name="job" placeholder="الوظيفة">
</div>
</div>
  <p><br/></p>
  <div class="form-group">
    <div class="col-xs-12 col-md-12">
      <input style="float:right ;font-weight:bold;" type="button" id="signup_button" name="signup_button" class="btn btn-success" value=" حفظ ">
    </div>
  </div>
</form>

</div>
</div>
<!-- panel body style -->
<script>
$(document).ready(function(){
  $("#signup_button").click(function(event){
  event.preventDefault();
  convertDates('ummalqura','expire','expire');
  $.ajax({
    url     : "actions/register.php",
    method  : "POST",
    data    :$("#new").serialize(),
    success : function(data){
    $("#signup_msg").html(data);
    $("#signup_msg").delay(3000).slideUp(function(){  $("#signup_msg").html(''); });
  },
    error   :function(result){
      alert(result.statusText);
      }
  })
})//end of signup_button ajax code
function convertDates(name,ss,dest) {
  				var date = $('#' + ss).val().split('/');
  				var year = parseInt(date[0], 10);
  			if(name == 'ummalqura'){
  			if (year > 1800){ return false ;}
  				} else if (name == 'gregorian') {
  			if (year < 1800){ return false ;}
  							}
  				var month = parseInt(date[1], 10);
  				var day = parseInt(date[2], 10);
  				try {var jd = $.calendars.instance(name).newDate(year,month,day).toJD();}
  				catch (e) {alert(e);		return;	}
  				name == 'ummalqura'?showDate('gregorian', jd,dest):showDate('ummalqura', jd,dest);
  									      }
function showDate(name, jd,dest) {
  			try {
  			  $('#' + dest).val('');
  			  var date = $.calendars.instance(name).fromJD(jd);
  			  $('#' + dest).val(date.formatYear()+'/'+date.month()+'/'+date.day());
  			}
  			catch (e) { alert(e); return null; }
  			}



})//end off page code
</script>
