@extends('dashboard.layouts.master')
@section('title', __('backend.change_password'))
@section('content')
    <style>
        .field-wrapper {
            position: relative;
        }

        .eye-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 1;
        }

        /*.eye-icon.new-pass {
                top: 20%;
                transform: translateY(-20%);
            }*/

        /*.eye-icon i {
                color: #aaa;
            }*/
    </style>
    <div class="padding p-30 edit-package">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3>{{ __('backend.change_password') }}</h3>
                    <small>
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        {{ __('backend.change_password') }}
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="box-tool">
                        <ul class="nav">
                            <li class="nav-item inline">
                                <a class="nav-link" href="{{ route('users') }}">
                                    <i class="material-icons md-18">×</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="box-body">
                {!! Form::open([
                    'route' => ['admin-update-password'],
                    'method' => 'POST',
                    'name' => 'edit_password',
                    'id' => 'edit_password',
                    'autocomplete' => 'off',
                    'class' => 'form-horizontal',
                ]) !!}
                <div class="form-group row">
                    <label for="name" class="col-xl-3 form-control-label">{{ __('backend.current_password') }} <span
                            class="valid_field">*</span>
                    </label>
                    <div class="col-xl-9">
                        <div class="field-wrapper position-relative">
                            <input type="password" name="current_password" class="form-control" id="current_password"
                                placeholder="{{ __('backend.current_password') }}">
                            <span class="eye-icon" onclick="togglePassword('current_password', 'eye-icon-current')">
                                <i class="fas fa-eye" id="eye-icon-current"></i>
                            </span>
                        </div>

                        @if (Session::has('errorMessageCurrentPassword'))
                            <span class="help-block">
                                <span style="color: red;"
                                    class='validate'>{{ Session::get('errorMessageCurrentPassword') }}</span>
                            </span>
                        @endif
                    </div>
                </div>

                <div class="form-group row">
                    <label for="email" class="col-xl-3 form-control-label">{{ __('backend.newPassword') }} <span
                            class="valid_field">*</span>
                    </label>
                    <div class="col-xl-9">
                        <div class="field-wrapper position-relative">
                            <input type="password" name="password" class="form-control" id="password"
                                placeholder="{{ __('backend.newPassword') }}">
                            <span class="eye-icon new-pass" onclick="togglePassword('password', 'eye-icon-new')">
                                <i class="fas fa-eye" id="eye-icon-new"></i>
                            </span>
                        </div>
                        @if (Session::has('errorMessageNewPassword'))
                            <span class="help-block">
                                <span style="color: red;"
                                    class='validate'>{{ Session::get('errorMessageNewPassword') }}</span>
                            </span>
                        @endif
                        <div>
                            <small>
                                <i class="material-icons">&#xe8fd;</i>
                                Note : New Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number,
                                1 special character, and be at least 8 characters long
                            </small>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-xl-3 form-control-label">{{ __('backend.confirmNewPassword') }} <span
                            class="valid_field">*</span>
                    </label>
                    <div class="col-xl-9">
                        <div class="field-wrapper position-relative">
                            <input type="password" name="password_confirmation" class="form-control"
                                id="password_confirmation"
                                placeholder="{{ __('backend.confirmNewPassword') }}">
                            <span class="eye-icon" onclick="togglePassword('password_confirmation', 'eye-icon-confirm')">
                                <i class="fas fa-eye" id="eye-icon-confirm"></i>
                            </span>
                        </div>
                        @if (Session::has('errorMessageConformPassword'))
                            <span class="help-block">
                                <span style="color: red;"
                                    class='validate'>{{ Session::get('errorMessageConformPassword') }}</span>
                            </span>
                        @endif
                    </div>
                </div>

                <div class="form-group row m-t-md">
                    <div class="offset-xl-3 col-xl-9">
                        <button type="submit" class="solid-button m-r-1">{!! __('backend.update') !!}</button>
                        <a href="{{ route('adminHome') }}" class="border-btn"> {!! __('backend.cancel') !!}</a>
                    </div>
                </div>

                {{ Form::close() }}
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        function togglePassword(passwordId, eyeIconId) {
            var passwordField = document.getElementById(passwordId);
            var eyeIcon = document.getElementById(eyeIconId);

            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }
    </script>
@endsection