@extends('layouts.admin')

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js" integrity="sha256-yazfaIh2SXu8rPenyD2f36pKgrkv5XT+DQCDpZ/eDao=" crossorigin="anonymous"></script>
    <script>

      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $("#create").validate({
        rules: {
          name: "required",
          email: {
            required: true,
            email: true,
            remote : {
               url:  "{{url('admin/checkuserexist')}}",
               type: "post"
            }            
          },
          phone: {
            required: true,
            phonevalidation: true
          },
          password : "required",
          password_confirmation : "required"
        },
        messages: {
          name: "Please enter name",
          email: {
            required: "Please enter an email",
            email: "Please enter a valid email",
            remote : "The email address is already associated with another account"
          },
          phone: {
            required: "Please enter a phone#",
            phonevalidation: "Please enter a valid phone#"
          },
          password : "Please enter a password",
          password_confirmation : "Please confirm your password"            
        },
      });

      jQuery.validator.addMethod("phonevalidation", function (phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length > 9 && phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
      });

      jQuery.validator.addMethod("alpha", function(value, element) {
          return this.optional(element) || value == value.match(/^[a-zA-Z ]*$/);
       });

    </script>
  
@endpush

@section('content')

        <div class="table-responsive">
            <form name="create" id="create" method="post" action="{{url('admin/manager/store')}}">
            <table class="table  table-bordered table-striped m-b-0">

                <tbody>
                <tr>
                    <td>Name</td>
                    <td><input type="text" class="form-control" name="name" placeholder="Name"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input type="email" class="form-control" name="email" placeholder="abc@gmail.com"></td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td><input type="text" class="form-control" name="phone" placeholder="Phone#"></td>
                </tr>                
                <tr>
                    <td>Password</td>
                    <td><input type="password" class="form-control" name="password"></td>
                </tr> 
                <tr>
                    <td>Confirm Password</td>
                    <td><input type="password" class="form-control" name="password_confirmation"></td>
                </tr>                 
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                </tbody>

            </table>

            <div class="col text-center">
                <button class="btn btn-default" type="button" onclick="javascript:history.back()">Cancel</button>
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>

            </form>
        </div>
    
@endsection