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

      $("#edit").validate({
        rules: {
          clientname: {
            required : true,
            alpha : true
          },
          trustee: {
            required : true,
            alpha : true
          },          
          email: {
            required: true,
            email: true
          },
          phone :{
            required: true,
            phonevalidation: true
          }
        },
        messages: {
          clientname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          trustee: {
            required : "Please enter trustee 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#"
          }                 
        },
      });

      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="edit" id="edit" method="post" action="{{url('client/'.$client->id.'/update')}}">
            <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" value="{{$client->name}}" placeholder="Name"></td>
                </tr>
                <tr>
                    <td>Contact Name</td>
                    <td><input type="text" class="form-control" name="trustee" value="{{$client->trustee}}" placeholder="Trustee"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input type="email" class="form-control" name="email" value="{{$client->email}}" placeholder="abc@gmail.com"></td>
                </tr>
                <tr>
                    <td>Business Phone</td>
                    <td><input type="text" class="form-control" name="phone" value="{{$client->phone}}" placeholder="Phone#"></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