@extends('frontend::layouts.master')
@section('content')
  <!-- ******************************** Content Part ******************************** -->
  <section class="white-contact-bg">
    <div class="container">
      <form id="profileupdateform" name="profileupdateform" method="post" >
      @csrf
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="profile-bg">
            <div class="row">
              <div class="col-md-12">
               <img src="img/profile.png" class="img-responsive img-center" />
                <h3>Profile</h3>
               </div>

              <div class="col-md-12">
               <input type="text" class="form-profile" name="name" placeholder="Name" value="{{Auth::user()->name}}" required>
              </div>
       
              <div class="col-md-12">
               <input type="text" class="form-profile" placeholder="Email" readonly value="{{Auth::user()->email}}">
              </div>

              <div class="col-md-12">
                <input type="password" name="password" class="form-profile" placeholder="Change Password">
               </div>
               <div class="col-sm-12 text-center">
                 <div class="frm-div">
                @if(session('success'))
                 <div class="alert alert-success" role="alert" style="">
                  {{ session('success') }} <a href="/"><span>Click Here to Home Page</span></a>
                </div> 
                @elseif(session('error'))
                <div class="alert alert-danger" role="alert" style="">
                  {{ session('error') }}
                </div> 

                @endif
                </div>
                <a class="signup-btn" href="javascript:$('#profileupdateform').submit();">UPDATE</a>
              </div>
             </div>

            </div>
        </div>
      </div>
    </form>

</div>
  </section>
@endsection

@section('scripts')
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--   <script src="js/libs/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script> -->
  <script>
    $(".heart-save").click(function(){
      $(this).toggleClass("heart-save-active");
      });

    $("#profileupdateform").validate({
         rules: {
          name: {
             required: true
          },
      },
         errorClass: 'input-validation-error',
         errorPlacement: function(){
            return true;  // suppresses error message text
        }
     });

    </script>
    @endsection