@extends('layouts.app')
@section('title')New User @endsection
@section('content')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="box box-default color-palette-box">
        <div class="box-header with-border">
        <div class="row">
         <div class="col-md-12">
          <div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">New User</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="box-group" >
                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                <form role="form" id="frm1" method="get" action="{{url('store_user')}}">       
            <!-- Start -->
                <div class="panel box box-primary">
                    <div class="box-body">
                <!-- text input -->
                <div class="form-group">
                  <label>Fore Name*</label>
                  <input type="text" id="forename" name="forename" required="" class="form-control" placeholder="Fore Name">
                </div>
                <div class="form-group">
                  <label>Last Name*</label>
                  <input type="text" id="lastname" name="lastname" required="" class="form-control" placeholder="Last Name">
                </div>
                <div class="form-group">
                  <label>Contact Number*</label>
                  <input type="text" id="contact_no" name="contact_no" required="" class="form-control" placeholder="Contact Number">
                </div>
                <div class="form-group">
                  <label>Email*</label>
                  <input type="email" id="email"  name="email"  class="form-control" placeholder="Email">
                  <label id="erroremail" style="color:red;"></label>
                </div>
                <div class="form-group">
                  <label>Role*</label>
                  <select  id="role"  name="role"  class="form-control" >
                  <option value="3">Surveyer</option>
                  <option value="4">Installer</option>
                  <option value="2">Admin</option>
                  <option value="1">Owner</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>Address*</label>
                  <textarea class="form-control" name="address" required="" rows="3" placeholder="Enter Adress"></textarea>
                </div>
                    </div>
                </div> <!-- /.box-header -->
                <!-- End -->

              </div>
                  <!-- <a type="button" class="btn btn-success" onclick="emailvalidate()">Submit</a> -->
              <input type="submit" id="submit" class="btn btn-success" >
              </form>
              <br>
              <br>
              <div class="input-group-btn">
                  <a type="button" class="btn btn-primary" onclick="formReset()">Clear</a> 
                   <a type="button" style="margin:10px;" class="btn btn-danger" href="{{route('home')}}">Close</a>
                </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer with-border">
            
            </div>
          </div>
          <!-- /.box -->
        </div>
      </div>
      <!-- /.row -->
    </div>
</div>

<script>
$("#submit").attr("disabled",true);
function formReset()
  {
      document.getElementById("frm1").reset();
  }

  $("#email").change(function(){
    $("#erroremail").html("");
            $("#submit").attr("disabled",false);
        var emails = ;
    email=$("#email").val();
    console.log(email)
    emails.forEach(emailvalidate);
    });

  function emailvalidate(item,index)
  {
      if(item.email == email)
    {     
    console.log(email)
      console.log(item.email)
         $("#erroremail").html("Email Already Exist");
        $("#submit").attr("disabled",true);
    }   
      }


///


// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}


// Install input filters.
setInputFilter(document.getElementById("contact_no"), function(value) {
  return /^\d*$/.test(value); });
setInputFilter(document.getElementById("phone_number"), function(value) {
  return /^\d*$/.test(value); });
setInputFilter(document.getElementById("forename"), function(value) {
  return /^[a-z]*$/i.test(value); });
setInputFilter(document.getElementById("lastname"), function(value) {
  return /^[a-z]*$/i.test(value); });
</script>

@endsection