@extends('layouts.app')

@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>

      $("#create").validate({
        rules: {
          clientname: {
            required : true,
            alpha : true
          },
          contactname: {
            required : true,
            alpha : true
          },          
          email: {
            required: true,
            email: true
          },
          phone :{
            required: true,
            phonevalidation: true
          },
          jobname: {
            required : true,
            alpha : true
          },
          trustee: {
            required : true,
            alpha : true
          },           
          firstname: {
            required : true,
            alpha : true
          },
          lastname: {
            required : true,
            alpha : true
          },                    
          contactname: {
            required : true,
            alpha : true
          },          
          apin: {
            required : true,
            number : true,
            maxlength:11,
            minlength:11
          }          
        },
        messages: {
          clientname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          contactname: {
            required : "Please enter contact name",
            alpha : "Please enter a valid name"
          },
          email: {
            required: "Please enter an email address",
            minlength: "Please enter a valid email address"
          },   
          phone: {
            required: "Please enter a phone#",
            phonevalidation: "Please enter a valid phone#"
          },
          apin: {
            required : "Please enter an ABN",
            number : "Please enter a valid number",
            maxlength : "Please enter a number with 11 digit",
            minlength : "Please enter a number with 11 digit"
          },
          jobname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          trustee: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },                
          contactname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          firstname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          lastname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          }                           
        },
      });

      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(/^(?=[0-9()+\s-]*$)(?!.*[<>'";`%])/);
      });

      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('client/store')}}">
            <table class="table  table-bordered table-striped m-b-0">

                <tbody>
                <tr>
                    <td>Client Name</td>
                    <td><input type="text" class="form-control" name="clientname" placeholder="Name"></td>
                </tr>
                <tr>
                    <td>Contact Name</td>
                    <td><input type="text" class="form-control" name="contactname" placeholder="Contact Name"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input type="email" class="form-control" name="email" placeholder="abc@gmail.com"></td>
                </tr>
                <tr>
                    <td>Business Phone</td>
                    <td><input type="text" class="form-control" name="phone" placeholder="Phone#"></td>
                </tr>


                <tr>
                    <td>Fund Name</td>
                    <td><input type="text" class="form-control" name="jobname" placeholder="Job Name"></td>
                </tr>
                <tr>
                    <td>Trustee Name</td>
                    <td><input type="text" class="form-control" name="trustee" placeholder="Trustee"></td>
                </tr>
                <tr>
                    <td>ABN</td>
                    <td><input type="text" class="form-control" name="apin" placeholder="ABN"></td>
                </tr>


                <tr>
                    <td>First Name</td>
                    <td><input type="text" class="form-control" name="firstname" placeholder="First Name"></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td><input type="text" class="form-control" name="lastname" placeholder="Last Name"></td>
                </tr>

                <tr>
                    <td>Year</td>
                    <td>
                        <select name="jobyear" class="form-control">