@extends('Admin.layout.app')
@section('content')

<section id="search" class="my-3">
    <div class="container-fluid">
        <div class="card shadow border mb-4">
            <div class="card-header pink-text">Change Password</div>
            <div class="card-body">
                @if(session()->has('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session()->get('error') }}
                </div>
                @endif

                <!-- Form Start -->
                <form action="{{ route('updatepassword') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Old Password -->
                    <div class="form-floating mb-2">
                        <input autocomplete="off" placeholder="Old Password" class="form-control" type="password" name="old_password" id="old_password" minlength="8">
                        <label for="email">Old Password</label>
                        @error('old_password')
                        <span class="text-danger p-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- New Password -->
                    <div class="form-floating mb-2">
                        <input autocomplete="off" placeholder="New Password" class="form-control" type="password" name="user_password" id="user_password" onkeyup='check();' minlength="8">
                        <label for="user_password">New Password</label>
                        @error('user_password')
                        <span class="text-danger p-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Confirm Password -->
                    <div class="form-floating mb-2">
                        <input class="form-control"placeholder="Confirm New Password" type="password" name="user_password_confirmation" id="user_password_confirmation" onkeyup='check();' minlength="8">
                        <label for="user_password_confirmation">Confirm New Password</label>
                        @error('user_password_confirmation')
                        <span class="text-danger p-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                
                        <button type="submit" class="btn pink-bg text-white">Update</button>
                   
                </form>
                <!-- End of Form -->

            </div>
        </div>
    </div>
</section>

@endsection

<script>
var check = function() {
  if (document.getElementById('user_password').value ==
    document.getElementById('user_password_confirmation').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'Passwords are matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'Passwords do not match';
  }
}
</script>