@extends('backend.layouts.app')

@section('content')

<div class="col-lg-6 mx-auto">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0 h6">{{translate('Staff Information')}}</h5>
        </div>

        <form onsubmit="return tosubmit(event)" action="{{ route('staffs.update', $staff->id) }}" method="POST">
            <input name="_method" type="hidden" value="PATCH">
        	@csrf
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-sm-3 col-from-label labelstyle" for="name">{{translate('Name')}}</label>
                    <div class="col-sm-9">
                        <input type="text" placeholder="{{translate('Name')}}" id="name" name="name" value="{{ $staff->user->name }}" class="form-control" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-from-label labelstyle" for="email">{{translate('Email')}}</label>
                    <div class="col-sm-9">
                        <input type="email" placeholder="{{translate('Email')}}" id="email" name="email" value="{{ $staff->user->email }}" class="form-control" required>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-3 col-from-label labelstyle" for="mobile">{{translate('Phone')}}</label>
                    <div class="col-sm-9">
                        <input type="text" placeholder="{{translate('Phone')}}" value="{{ $staff->user->phone }}" id="mobile" name="phone" class="form-control phonecheck" required>
                        <span class="invalid-feedback showphoneerror" role="alert">
                        <strong>Phone Number Not Valid.</strong>
                    </span>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-3 col-from-label labelstyle" for="password">{{translate('Password')}}</label>
                    <div class="col-sm-9">
                        <input type="password" placeholder="{{translate('Password')}}" id="password" name="password" value="{{ $staff->user->password }}" class="form-control passValue">
                        <span class="invalid-feedback passValueerror" role="alert">
                            <strong>Password should be 6-15 in length with 1 upercase , 1 lowercase and 1 special character.</strong>
                        </span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-from-label labelstyle" for="name">{{translate('Role')}}</label>
                    <div class="col-sm-9">
                        <select name="role_id" required class="form-control aiz-selectpicker">
                            @foreach($roles as $role)
                                <option value="{{$role->id}}" @php if($staff->role_id == $role->id) echo "selected"; @endphp >{{$role->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group mb-0 text-right">
                    <button type="submit" class="btn btn-sm btn-primary">{{translate('Update')}}</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection


@section('script')
<script>
    $(document).on('keyup','.phonecheck',function(){
              console.log("_11111___");
              var phoneno = /^[\+]?[0-9]{3}?[-\s\]?[0-9]{3}[-\s\]?[0-9]{4,6}$/im;

              if($(this).val().match(phoneno))
                    {
                        $(".showphoneerror").hide();
                    }
                  else
                    {
                        $('#phone').css('border-color','red');
                         $(".showphoneerror").show();
                        return false;
                    }
             });

      function tosubmit(){
               var pattern = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;
               var passValue = $(".passValue").val();
               var phoneno = /^[\+]?[0-9]{3}?[-\s\]?[0-9]{3}[-\s\]?[0-9]{4,6}$/im;
              if($(".phonecheck").val().match(phoneno))
                    {
                        $(".showphoneerror").hide();
                        // return true;
                    }
                  else
                    {
                        $(".showphoneerror").show();
                        return false;
                    }

                        if(pattern.test(passValue)){
                            $(".passValueerror").hide();

                        }else{
                            $(".passValueerror").show();
                            return false;
                        }
       }
         </script>
@endsection