@extends('layouts.master')
@section('title')  Add User @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/summernote/summernote.min.css')}}">
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title')@endslot
@endcomponent
<style>
.error{
    font-weight: 500;
}
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  margin-right: 10px;
  z-index: 2;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
            .success-msg,.error-msg {
                    margin: 10px 0;
                    padding: 10px;
                    border-radius: 3px 3px 3px 3px;
                  }
                  .error-msg {
                    color: #D8000C;
                    background-color: #FFBABA;
                  }
                  .success-msg {
                    color: #270;
                    background-color: #DFF2BF;
                  }
</style>
            @if (Session::get('error'))
            <div class="error-msg alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <i class="fa fa-times-circle"></i>
                {{ Session::get('error') }}
            </div>
            @endif

            <!-- For Success Messages -->
            @if (Session::get('success'))
            <div class="success-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            {{ Session::get('success') }}
            </div>
            @endif
<div class="row">
    <div class="col-12">
        <div class="card mb-2">
          <div class="card-body">
   <h4 class="card-title mb-4">Create New Admin/Organization </h4>
   <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('admin_users.store')}}" novalidate>
    @csrf
     <div class="form-group row mb-4">
       <label for="projectname" class="col-form-label col-lg-2">Name <span style="color:red;">*</span></label>
       <div class="col-lg-10">
         <input id="name" name="name" type="text" class="form-control" placeholder="Enter Organization Name..." value="{{old('name')}}" required>
        @if($errors->has('name'))
        <div class="error">{{ $errors->first('name') }}</div>
        @endif
       </div>
     </div>
        <div class="form-group row mb-4">
       <label for="projectname" class="col-form-label col-lg-2">Mobile number <span style="color:red;">*</span></label>
       <div class="col-lg-10">
         <input type="number" class="form-control" name="mobile_number" id="mobile_number" placeholder="Enter Mobile Nuber" value="{{ old('mobile_number') }}" required>
           @if($errors->has('mobile_number'))
        <div class="error">{{ $errors->first('mobile_number') }}</div>
        @endif
       </div>
     </div>

     <div class="form-group row mb-4">
       <label for="projectname" class="col-form-label col-lg-2">Email <span style="color:red;">*</span></label>
       <div class="col-lg-10">
         <input type="text"  class="form-control" name="email" id="email" placeholder="Enter email address" value="{{ old('email') }}" required>

        @if($errors->has('email'))
        <div class="error">{{ $errors->first('email') }}</div>
        @endif
        @if(Session::get('email_error'))
         <div class="error">{{ Session::get('email_error') }}</div>
        @endif


            <span id="email_error" style="width: 100%;margin-top: 0.25rem; font-size: 80%;  color: #f46a6a;"></span>
       </div>
     </div>
           <div class="form-group row mb-4">
           <label for="projectname" class="col-form-label col-lg-2">EIN Number <span style="color:red;">*</span></label>
           <div class="col-lg-10">
             <input id="ein_number" name="ein_number" type="text" class="form-control" placeholder="Enter Organization EIN Number..." required value="{{old('ein_number')}}">
               @if($errors->has('ein_number'))
                <div class="error">{{ $errors->first('ein_number') }}</div>
                @endif
           </div>
         </div>
            <div class="form-group row mb-4">
           <label for="projectname" class="col-form-label col-lg-2">Password <span style="color:red;">*</span></label>
           <div class="col-lg-10">
             <input id="password" type="password" class="form-control" name="password" placeholder="Enter Password" required >
              <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                @if($errors->has('password'))
                <div class="error">{{ $errors->first('password') }}</div>
                @endif
           </div>
         </div>
       <div class="form-group row mb-4">
           <label for="projectname" class="col-form-label col-lg-2">Confirm Password <span style="color:red;">*</span></label>
           <div class="col-lg-10">
             <input id="confirmpassword" type="password" class="form-control" placeholder="Enter Confirm Password" name="confirmpassword" required >
              <span toggle="#confirmpassword" class="fa fa-fw fa-eye field-icon toggle-password1"></span>
               @if($errors->has('confirmpassword'))
                <div class="error">{{ $errors->first('confirmpassword') }}</div>
                @endif
              <span id="id_passwordErr1" class="id_passwordErr1"  style="width: 100%;margin-top: 0.25rem; font-size: 80%;  color: #f46a6a;"></span>
           </div>
         </div>

       <div class="row justify-content-end">
     <div class="col-lg-10">
       <button type="submit" class="btn btn-primary create_admin"> Create Admin </button>
       <a href="../admin-users" class="btn btn-danger"> Back </a>
     </div>
   </div>
   </form>


 </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
        $(function(){
            jQuery.validator.addMethod("validate_email", function(value, element) {
                if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
                    return true;
                } else {
                    return false;
                }
            }, "Please enter a valid Email.");

            $("form[name='frm1']").validate({
            rules: {
              name: "required",
              mobile_number: {
                required:true,
                minlength:10,
                maxlength:10
            },
              ein_number:"required",
              email: {
                required: true,
                validate_email: true,
               // 0:0t0r0ue,
                remote: {
                    url: "{{ route('checkuseremail') }}",
                    type: "post",
                    data: {
                     email : function () {
                        return $("input[name='email']").val();
                         },
                         "status":"1",
                         "_token": "{{ csrf_token() }}",
                         },
                         dataFilter: function(data) {
                           if($.trim(data) == 1){
                               return "\"" + "That Email address is taken" + "\"";
                           }else{
                               return 'true';
                           }
                       }
                   }
              },
              password: {
                required: true,
                minlength: 5
              },
               confirmpassword: {
                    required:true,
                    minlength: 5,
                    equalTo: "#password"
                }
            },
            // Specify validation error messages
            messages: {
              name: "Please provide a organization name",
              mobile_number: {
                required:"Please provide a mobile number",
                minlength:"Mobile number must be 10 digit",
                maxlength:"Mobile number must be 10 digit"
            },
              ein_number:"Please provide a organization EIN number",
              password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
              },
              confirmpassword:{
                required:"Please provide a confirm password",
                minlength: "Your password must be at least 5 characters long"
              },
              email: {
                required: "Please provide a email address",
                validate_email:"Please provide a valid email address"
                }
            },
            submitHandler: function(form) {
              form.submit();
            }
          });

             // setTimeout(function() {
             //     $("#password").val("");
             //     $("#confirmpassword").val("");
             //     $("#email").val("");
             //    }, 2000);


            $(".toggle-password").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                 console.log(input)

                 if (input.attr("type") == "password") {
                  input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
                });
            $(".toggle-password1").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                console.log(input)

                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
                });

                 $("#name").keypress(function(e) {

                    if (e.which === 32 && !this.value.length) {
                        e.preventDefault();
                    }
                  });
                 $("#email").keypress(function(e) {

                    if (e.which === 32 && !this.value.length) {
                        e.preventDefault();
                     }
                });
                $("#password").keypress(function(e) {

                 if (e.which === 32 && !this.value.length) {
                        e.preventDefault();
                    }
                });
                $("#confirmpassword").keypress(function(e) {

                    if (e.which === 32 && !this.value.length) {
                        e.preventDefault();
                    }
                });
                $("#ein_number").keypress(function(e) {

                    if (e.which === 32 && !this.value.length) {
                        e.preventDefault();
                    }
                });

        });


</script>

@endsection