@extends('layouts.basic')
@section('content')
<div class="profile-wrap">
  <div class="hatchery-form">
    <form data-parsley-validate="" class="booking-form" id="psu-profile" method="POST" action="{{route('profile.update')}}">
        @csrf
      <div class="form-section" id="user-contact">
        <div class="form-image-container">
            <div class="psu-form-image">
                <img src="{{asset('img/fs-hatchery-logo.png')}}" alt="">
            </div>
        </div>
        <div class="psu-form-heading">
          <h2>Update Profile</h2>
        </div>

        <div class="form-group">
          <div class="form-row">
              <div class="col-md-6 col-12">
                <div class="form-group-input-wrap">
                    <input
                      required
                      name="first_name" value="{{auth()->user()->first_name}}"
                      data-parsley-required-message="First name is required"
                      data-parsley-trigger="change"
                      data-parsley-minlength="3"
                      data-parsley-minlength-message="Last name must be atleast 3 letters"
                      type="text"
                      class="form-control form-input input-lg"
                      placeholder="First Name"
                      id="psu-input-firstname">
                </div>
              </div>

              <div class="col-md-6 col-12">
                <div class="form-group-input-wrap">
                    <input
                      required
                      name="last_name" value="{{auth()->user()->last_name}}"
                      data-parsley-required-message="Last name is required"
                      data-parsley-trigger="change"
                      data-parsley-minlength="3"
                      data-parsley-minlength-message="Last name must be atleast 3 letters"
                      type="text"
                      class="form-control form-input input-lg"
                      placeholder="Last Name"
                      id="psu-input-lastname">
                </div>
              </div>
          </div>
          <div class="form-group-input-wrap">
              <input
                  value="{{auth()->user()->email}}"
                  data-parsley-required-message="Email address is required"
                  data-parsley-trigger="change"
                  data-parsley-type-message="Must be a valid email address"
                  type="email"
                  class="form-control form-input input-lg"
                  placeholder="Email"
                  id="psu-email" readonly>
          </div>
        </div>

        <div class="form-group pb-1">
          <div class="form-group-input-wrap">
              <input
                required value="{{auth()->user()->address}}"
                type="text"
                name="address"
                data-parsley-minlength="10"
                data-parsley-minlength-message="Address should be at least 6 characters long"
                data-parsley-required-message="Address is required"
                data-parsley-trigger="focusout"
                class="form-control form-input input-lg"
                placeholder="Address"
                id="psu-address"
              >
          </div>
        </div>
        <button type="submit" class="psu-form-btn" id="psu-profile-btn">Update Profile</button>
      </div>
    </form>
    <!--change password form-->

      <form data-parsley-validate="" class="booking-form mt-3" id="psu-change-password" method="POST" action="{{route('profile.changepassword')}}">
          @csrf
      <div class="form-section form-section-signup" id="user-contact">
        <div class="psu-form-heading">
          <h2>Change Password</h2>
        </div>


        <div class="form-group">
          <div class="form-group-input-wrap">
              <input
              required
              name="old_password"
              data-parsley-required-message="Old Password is required"
              data-parsley-trigger="change"
              type="password"
              class="form-control form-input input-lg"
              placeholder="Old Password"
              id="psu-password">
          </div>
          <div class="form-group-input-wrap">
              <input
              required
              type="password" name="password"
              data-parsley-minlength="8"
              data-parsley-minlength-message="Password should be at least 8 characters"
              data-parsley-required-message="Password is required"
              data-parsley-trigger="focusout"
              class="form-control form-input input-lg"
              placeholder="New Password"
              id="psu-password-new"
              >
          </div>
        </div>
        <div class="form-group">
          <div class="form-group-input-wrap">
              <input
              required
              type="password" name="password_confirmation"
              data-parsley-required-message="Password is required"
              data-parsley-trigger="focusout"
              data-parsley-equalto-message="Passwords do not match"
              data-parsley-equalto="#psu-password-new"
              class="form-control form-input input-lg"
              placeholder="Confirm Password"
              id="psu-confirmpassword"
              >
          </div>
        </div>

        <button type="submit" class="psu-form-btn mt-3" id="psu-change-password-btn">Update Password</button>
      </div>
    </form>
  </div>
</div>
@endsection