@extends('admin.layouts.contentLayoutMaster')

@section('title','Client Edit')
@section('pagelevelcss')
@stop
@section('content')
<div class="section">
    <div class="card">
        <div class="card-content">
           <div class="row">
            <form class="col s12" action="{{route('client.update', ['id' => \App\Helpers\Helper::encrypt($editdata->id)])}}" method="post" id="edit_client_form">
                {{ csrf_field() }}
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="first_name" value="{{$editdata->first_name}}"/>
                        <label for="name">First name<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="last_name" value="{{$editdata->last_name}}" />
                        <label for="name">Last name<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="email" value="{{$editdata->email}}" readonly />
                        <label for="name">Email</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="phone" value="{{$editdata->phone}}"/>
                        <label for="name">Phone<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" class="datepicker-dob form-control" name="dob" id="dob" value="{{Carbon\Carbon::parse($editdata->dob)->format('m-d-Y')}}"/>
                        <label for="name">Date of birth<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <textarea class="materialize-textarea" id="address" name="address" rows="4" cols="50">{!!$editdata->address!!}</textarea>
                        <label for="name">Address<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="street" value="{{$editdata->street}}"/>
                        <label for="name">Street<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="state" value="{{$editdata->state}}"/>
                        <label for="name">State<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="city" value="{{$editdata->city}}" />
                        <label for="name">City<span class="red-text">*</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" name="zipcode" value="{{$editdata->zipcode}}"/>
                        <label for="name">Zipcode<span class="red-text">*</span></label>
                    </div>
                </div>
                <button class="btn waves-effect waves-light" type="submit">Submit</button>
            </form>
          </div>
        </div>
    </div>
</div>
@endsection
@section('pageleveljs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.datepicker-dob').datetimepicker({
        format: 'MM-DD-YYYY',
    });
    $("#edit_client_form").validate({
        ignore: [],
        rules: {
            first_name: {
               required: true,
            },
            last_name: {
               required: true,
            },
            phone:{
                required: true,
                phoneUS: true,
                maxlength:12
            },
            address:{
                required: true,
            },
            street:{
                required: true,
            },
            state:{
                required: true,
            },
            city:{
                required: true,
            },
            zipcode:{
                required: true,
                number: true
            },
             dob: {
               required: true
            }
        },
        messages: {            
            first_name: {
                required: "First name is required",
            },
            last_name: {
                required: "Last name is required",
            },
            phone: {
                required: "Phone number is required",
                phoneUS: "Please enter a valid phone number",
            },
            address: {
                required: "Address is required",
            },
            street: {
                required: "Street is required",
            },
            state: {
                required: "State is required",
            },
            city: {
                required: "City is required",
            },
            zipcode: {
                required: "Zipcode is required",
            },
            dob: {
              required: "Please select Date of birth"
            }
       },
        errorPlacement: function(error, element) {
          error.insertAfter(element);
        },
        errorElement: 'span',
    });
  });
</script>
@stop