@extends('business_owner.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('businessOwnerHome') }}">{{ __('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' => ['businessOwner-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" value="{{old('current_password')}}" 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" value="{{old('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" value="{{old('password_confirmation')}}" 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('businessOwnerHome')}}"
                           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