@extends('layouts.administrator.master')

@section('title')
    Change Password
@endsection

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{__('Ubah Password')}}</h3>
                    <p>{{__('Kelola data password')}}</p>
                </div>
            </div>
        </div>
        <div class="nk-block">
            <div class="card card-preview">
                <div class="card-inner">

                    <form method="post" action="{{ route('admin.security.password.change') }}">
                        @csrf

                        <div class="col-12 col-lg-4">
                            <label class="mb-1">{{ __('Password Lama') }}</label>
                            <div class="form-group">
                                <div class="form-control-wrap">
                                    <div class="form-icon form-icon-right" id="togglePasswordOld" onclick="togglePasswordOldVisibility()">
                                        <em  class="icon ni ni-eye-off"></em>
                                    </div>
                                    <input id="password_old" type="password" name="password_old" class="form-control" placeholder="Password Lama">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="col-12 col-lg-4">
                            <label class="mb-1">{{ __('Password Baru') }}</label>
                            <div class="form-group">
                                <div class="form-control-wrap">
                                    <div class="form-icon form-icon-right" id="togglePassword" onclick="togglePasswordVisibility()">
                                        <em  class="icon ni ni-eye-off"></em>
                                    </div>
                                    <input id="password" type="password" name="password" class="form-control" placeholder="Password Baru">
                                </div>
                            </div>
                            <span id="passwordWarning" class="text-danger" style="color: #BA3C3C"></span>
                        </div>
                        <br>
                        <div class="col-12 col-lg-4">
                            <label class="mb-1">{{ __('Konfirmasi Password Baru') }}</label>
                            <div class="form-group">
                                <div class="form-control-wrap">
                                    <div class="form-icon form-icon-right" id="togglePasswordConfirmation" onclick="togglePasswordConfirmationVisibility()">
                                        <em  class="icon ni ni-eye-off"></em>
                                    </div>
                                    <input id="password_confirmation" type="password" name="password_confirmation" class="form-control" placeholder="Konfirmasi Password Baru">
                                </div>
                            </div>
                            <span id="passwordConfirmationWarning" class="text-danger"
                                style="color: #BA3C3C"></span>
                        </div>

                        <div class="mx-auto w-50 mt-4 text-center">
                            <button type="submit" class="btn btn-primary me-2">{{__('Update')}}</button>
                            <a href="{{ route('dashboard') }}" class="btn btn-outline-primary">{{__('Kembali')}}</a>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')

    <script>

        function togglePasswordOldVisibility() {
            var passwordInput = document.getElementById('password_old');
            var toggleButton = document.getElementById('togglePasswordOld');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.innerHTML = '<em  class="icon ni ni-eye"></em>';
            } else {
                passwordInput.type = 'password';
                toggleButton.innerHTML = '<em  class="icon ni ni-eye-off"></em>';
            }
        }

        function togglePasswordVisibility() {
            var passwordInput = document.getElementById('password');
            var toggleButton = document.getElementById('togglePassword');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.innerHTML = '<em  class="icon ni ni-eye"></em>';
            } else {
                passwordInput.type = 'password';
                toggleButton.innerHTML = '<em  class="icon ni ni-eye-off"></em>';
            }
        }

        function togglePasswordConfirmationVisibility() {
            var passwordInput = document.getElementById('password_confirmation');
            var toggleButton = document.getElementById('togglePasswordConfirmation');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
            } else {
                passwordInput.type = 'password';
                toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
            }
        }
        $(document).ready(function() {

            $('[name=password]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password harus memiliki lebih dari 8 karakter.');
                } else {
                    passwordWarning.text('');
                }
            });
            $('[name=password_confirmation]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordConfirmationWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password harus memiliki lebih dari 8 karakter.');
                } else {
                    passwordWarning.text('');
                }

                if ($(this).val() != $('[name=password]').val()) {
                    passwordWarning.text('Konfimasi password harus sama');
                } else {
                    passwordWarning.text('');
                }
            });
        });
    </script>
@endpush