@extends('layouts.admin')
@section('title')
Change Password
@endsection
@section('content')
<div class="bg-white shadow-md rounded-md p-10 mb-10">
    <section class="bg-white">
    <div class="px-4 mx-auto max-w-screen-md">
        {{-- <p class="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a feature? Need details about our Business plan? Let us know.</p>
        <div class="mb-6 text-gray-400">
            Fields marked with <span class="text-danger">*</span> are mandatory.
        </div> --}}
        @include('errors.error')
        <form action="{{ route('admin.change.password.update') }}" method="POST" class="space-y-8">
                @csrf
            <div>
                <label for="old_password" class="mb-2 font-medium text-gray-900">Old Password</label>
                <input type="password" name="old_password" id="old_password" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your password" required>
                {{-- @error('old_password')
                <span class="text-red-500 text-sm" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror --}}
{{-- <span toggle="#password" class="fa fa-fw fa-eye password-eye toggle-old-password cursor-pointer text-gray-400"></span> --}}
            </div>
            <div>
                <label for="password" class="mb-2 font-medium text-gray-900">New Password</label>
                <input type="password" name="password" id="password" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your password" required>
                <span toggle="#password" class="fa fa-fw fa-eye-slash password-eye toggle-password cursor-pointer text-gray-400"></span>
                {{-- @error('password')
                <span class="text-red-500 text-sm" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror --}}
            </div>
            <div>
                <label for="password_confirmation" class="mb-2 font-medium text-gray-900">Confirm Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your password" required>
                {{-- <span toggle="#password" class="fa fa-fw fa-eye password-eye toggle-password cursor-pointer text-gray-400"></span> --}}
                {{-- @error('password_confirmation')
                <span class="text-red-500 text-sm" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror --}}
            </div>
            <button type="submit" class="py-2 px-5 w-full font-medium text-center text-white rounded-lg bg-blue-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 ">Change Password</button>
            <div class="text-right">
                    @if (Route::has('password.request'))
                    <a class="mb-2 font-medium text-blue-500" href="{{ route('password.request') }}">
                        {{ __('Forgot Your Password?') }}
                    </a>
                @endif
</div>
        </form>
    </div>
</section>
</div>
@endsection
@push('custom-scripts')
    <script type="module">
        $(".toggle-password").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
  input.attr("type", "text");
} else {
  input.attr("type", "password");
}
});
    </script>
@endpush