@extends('layouts.app')

@section('page_css')
    @parent
    
    <style type="text/css">
        .error{
            color: #ff0000;
        }
    </style>
@endsection
@section('content')
 <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
      <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Application/</span>
            Change Password
      </h4>
      <!-- Sticky Actions -->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div
              class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row"
            >
                <h5 class="card-title mb-sm-0 me-2">Change Password</h5>
                <div class="action-btns">
                    <button type="submit" form="change_pass_form" class="btn btn-primary">   
                        Change Password
                    </button>
                </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-lg-8 mx-auto">      
                    <!-- BEGIN: Change Password -->
                    {!! Form::open(['url' => route('admin.change-password-update'), 'class' => 'form floating-label change-password-form no-margin','id'=>"change_pass_form" ,'method' => 'POST']) !!}
                        <div class="row">
                            <div class="col-12 control-group">
                                <label for="old_password" class="form-label">Old Password <span class="asterisk">*</span></label>
                                {!! Form::password('old_password', ['class' => 'form-control', 'id' => 'old_password', 'placeholder'=>'Old Password', 'data-url' => tokenize_url(route('admin.checkOldPassword'),['user_name' => @$user_data['user_name']])])!!}
                                @if ($errors->has('old_password'))
                                    <label for="old_password" class="error display-inline">{{ $errors->first('old_password') }}</label>
                                @endif
                            </div>
                            <div class="col-12 mt-3 control-group">
                                <label for="password" class="form-label">Password <span class="asterisk">*</span></label>
                                {!! Form::password('password', ['class' => 'form-control', 'id' => 'password', 'placeholder'=>'Password']) !!}
                                @if ($errors->has('password'))
                                    <label for="password" class="error display-inline">{{ $errors->first('password') }}</label>
                                @endif
                            </div>
                            <div class="col-12 mt-3 control-group">
                                <label for="password_confirmation" class="form-label">Confirm Password <span class="asterisk">*</span></label>
                                {!! Form::password('password_confirmation', ['class' => 'form-control', 'id' => 'password_confirmation', 'placeholder'=>'Confirm Password']) !!}
                                @if ($errors->has('password_confirmation'))
                                    <label for="password_confirmation" class="error display-inline">{{ $errors->first('password_confirmation') }}</label>
                                @endif
                            </div>
                        </div>
                    {!! Form::close() !!}
                    <!-- END: Change Password -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Sticky Actions -->
    </div>
    <!-- / Content -->          
@endsection

@section('plugin_scripts')

@endsection

@section('page_scripts')
    @parent
{{--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script>--}}
<script src="{{ asset('assets/js/form-layouts.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
<script src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function(){

        stickyAction();

        //toaster
        let message=@JSON(session()->get('message'));
        if(message)
        {
            if(message.type=='success')
            {
                showMessage(message.message);
            }
            else if(message.type=='error')
            {
                showMessage(message.message,"error");
            }
        }

        // functions section start
        function stickyAction()
        {
            var topSpacing;
            const stickyEl = $('.sticky-element')
            if (Helpers.isNavbarFixed()) {
                topSpacing = $('.layout-navbar').height() + 7;
            } else {
                topSpacing = 0;
            }
            if (stickyEl.length) {
                stickyEl.sticky({
                topSpacing: topSpacing,
                zIndex: 9
                });
            }
        }  
    });
</script>
     {{ Html::script(config('app.assets_url').'dist/js/users/user.js') }}
@endsection
<!--/ END PAGE CONTENT -->