@extends('admin.layouts.layouts')

@section('title', 'Change Password | Profile')

@section('content')
    <style>
        .input-group-addon {
            cursor: pointer;
            padding: 10px;
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            border-left: none;
        }

        .input-group-addon:hover {
            background-color: #e9ecef;
        }
    </style>
    <div class="page-header">
        <h3 class="page-title">
            Change Password
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('profile') }}">Profile</a></li>
                <li class="breadcrumb-item active" aria-current="page">Change Password</li>
            </ol>
        </nav>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {!! Form::open([
                        'route' => 'update-password',
                        'method' => 'POST',
                        'id' => 'validate_form_change_password',
                        'class' => 'forms-sample',
                    ]) !!}

                    <div class="form-group">
                        <div class="input-group">
                            <input type="password" id="old_password" name="old_password" placeholder="Enter Old Password"
                                data-parsley-required="required"
                                data-parsley-required-message="{{ __('messages.custom.old_password_required_messages') }}"
                                data-parsley-pattern="(?=.*\d)(?=.*[@#$%&!*])(?=.*[a-z])(?=.*[A-Z]).*"
                                data-parsley-minlength="[8,16]"
                                data-parsley-minlength-message="{{ __('messages.custom.password_length_messages') }}"
                                data-parsley-pattern-message="{{ __('messages.custom.old_password_pattern_messages') }}"
                                data-parsley-trigger="keyup" data-parsley-errors-container="#old_password_error"
                                class="form-control suggest-form-control" />
                            <span class="input-group-addon" onclick="togglePassword('old_password')">
                                <i class="fa fa-eye" id="toggleOldPassword"></i>
                            </span>
                        </div>
                        <span id='old_password_error' style="color:red;">{{ $errors->first('old_password') }}</span>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <input type="password" id="new_password" name="new_password" placeholder="Enter New Password"
                                data-parsley-required="required"
                                data-parsley-required-message="{{ __('messages.custom.new_password_required_messages') }}"
                                data-parsley-pattern="(?=.*\d)(?=.*[@#$%&!*])(?=.*[a-z])(?=.*[A-Z]).*"
                                data-parsley-minlength="[8,16]"
                                data-parsley-minlength-message="{{ __('messages.custom.password_length_messages') }}"
                                data-parsley-pattern-message="{{ __('messages.custom.password_pattern_messages') }}"
                                data-parsley-trigger="keyup" data-parsley-errors-container="#new_password_error"
                                class="form-control suggest-form-control" />
                            <span class="input-group-addon" onclick="togglePassword('new_password')">
                                <i class="fa fa-eye" id="toggleNewPassword"></i>
                            </span>
                        </div>
                        <span id='new_password_error' style="color:red;">{{ $errors->first('new_password') }}</span>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <input type="password" id="confirm_password" name="confirm_password"
                                placeholder="Enter Confirm Password" data-parsley-required="required"
                                data-parsley-required-message="{{ __('messages.custom.confirm_password_required_messages') }}"
                                data-parsley-pattern="(?=.*\d)(?=.*[@#$%&!*])(?=.*[a-z])(?=.*[A-Z]).*"
                                data-parsley-minlength="[8,16]"
                                data-parsley-minlength-message="{{ __('messages.custom.password_length_messages') }}"
                                data-parsley-equalto="#new_password"
                                data-parsley-equalto-message="Confirm Password should be same as new password."
                                data-parsley-pattern-message="{{ __('messages.custom.password_pattern_messages') }}"
                                data-parsley-trigger="keyup" data-parsley-errors-container="#confirm_password_error"
                                class="form-control suggest-form-control" />
                            <span class="input-group-addon" onclick="togglePassword('confirm_password')">
                                <i class="fa fa-eye" id="toggleConfirmPassword"></i>
                            </span>
                        </div>
                        <span id='confirm_password_error'
                            style="color:red;">{{ $errors->first('confirm_password') }}</span>
                    </div>

                    <button type="submit" class="btn btn-primary mr-2" id="changePasswordSubmit">Update</button>
                    <a class="btn btn-light" href="{{ route('profile') }}">Cancel</a>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script>
        var changePasswordURL = `{{ route('update-password') }}`;
        var profileURL = `{{ route('profile') }}`;

        function togglePassword(fieldId) {
            var passwordField = document.getElementById(fieldId);
            var toggleIcon = document.querySelector(`#${fieldId}`).nextElementSibling.querySelector("i");

            if (passwordField && toggleIcon) {
                if (passwordField.type === "password") {
                    passwordField.type = "text";
                    toggleIcon.classList.remove('fa-eye');
                    toggleIcon.classList.add('fa-eye-slash');
                } else {
                    passwordField.type = "password";
                    toggleIcon.classList.remove('fa-eye-slash');
                    toggleIcon.classList.add('fa-eye');
                }
            } else {
                console.error("Element not found: ", fieldId);
            }
        }
    </script>
    <script src="{{ asset('assets/js/admin/change-password.js') }}"></script>
@endsection