@extends('site.layouts.app')

@section('title','Edit-Profile')
    

@section('content')


<section class="conten1">
    <div class="container">
      <div class=" d-flex justify-content-center py-5 mt-2 mb-4">
  
        <div class="col-lg-6 content-right">
          <div class="right-inner ">
            <h5 class="mb-4 pb-2 text-center position-relative" style="font-size: 18px;">Edit Profile</h5>
            <i class="fa fa-user"></i>
            <div class="content-form border-0">
              <form class="" id="editProfile" method="POST" action="{{ route('store.profile')}}">
                @csrf
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" class="form-control mb-1" placeholder="" required="" value="{{ $UserData->name}}">
                    @error('name')
                    <span class="text-danger"> {{ $message }} </span>
                    @enderror
                </div>
             
                <div class="form-group">
                    <label for="email">Email ID</label>
                    <input type="email" id="email" name="email" class="form-control mb-1" placeholder="" required="" value="{{ $UserData->email}}" disabled>
                </div>
             
  
                <div class="form-group">
                    <label for="mobile_number">Phone Number</label>
                    <input type="number" id="mobile_number" name="mobile_number" class="form-control mb-1" placeholder=""  required
                    minlength="10" maxlength="15" value="{{ $UserData->mobile_number}}">
                    @error('mobile_number')
                    <span class="text-danger"> {{ $message }} </span>
                    @enderror
                </div>
  
             
                <label for="password">New Password</label>
                <input type="password" id="password" name="password" class="form-control mb-4" placeholder="">
                 <br>
            
                <input type="submit" value="Submit">
  
  
              </form>
            </div>
          </div>
  
        </div>
  
      </div>
</section>

<script type="text/javascript">
  $(document).ready(function (){
    
      $('#editProfile').validate({
          rules: {
              name: {
                  minlength: 3,
              }, 
              mobile_number: {
                  digits: true,
                  minlength: 10,
                  maxlength: 15, 
              },
         
          },
          messages :{
            name: {
                 
                  minlength: 'Name should be at least 3 characters',
              },
              mobile_number: {
                  digits: 'Phone number should contain only digits',
                  minlength: 'Phone number should be exactly 10 digits',
                  maxlength: 'Phone number should be exactly 15 digits',
            },

      

          },
          errorElement : 'span', 
          errorPlacement: function (error,element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight : function(element, errorClass, validClass){
              $(element).addClass('is-invalid');
          },
          unhighlight : function(element, errorClass, validClass){
              $(element).removeClass('is-invalid');
          },
      });
  });
  
</script>

@endsection