@extends('layouts.master')

@section('pagetitle')
Change Password
@endsection
@section('title')
Change Password
@endsection

@section('content')

<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor" style="font-weight: 600;">Change Password</h4>
    </div>
    <div class="col-md-7 align-self-center text-right">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Change Password</li>
            </ol>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->

<div class="card">
    <div class="card-body">
 
        <!-- <h5 class="card-title">Change Password</h5>
        <hr> -->
        <!-- Nav tabs -->
        <form action="{{ url('setting/store') }}" method="POST" enctype="multipart/form-data" data-parsley-validate="">
            @csrf
            @method('PATCH')

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Current Password*</label>
                <div class="col-10">
                <input type="password" data-parsley-required data-parsley-required-message="The current password field is required" name="current_password" id="password"
                    data-parsley-minlength="8" data-parsley-maxlength="15" value="{{ old('current_password') }}" class="form-control {{ $errors->has('current_password') ? 'is-invalid' : '' }}" 
                    autocomplete="off" placeholder="Enter Current Password">
                <!-- <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fa fa-eye-slash" id="eye"></i></div>
                </div> -->
                
                @error('current_password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                
                <!-- <span class="input-group-btn">
                    <button class="btn btn-warning currentpassword" type="button" style="margin-left: 836px;margin-top: -60px;"><i class="icon-eye" aria-hidden="true"></i></button>
                </span> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">New Password*</label>
                <div class="col-10">
                <input type="password" name="password" data-parsley-required data-parsley-required-message="The new password field is required" 
                    data-parsley-minlength="8" data-parsley-maxlength="15" value="{{ old('password') }}" class="form-control @error('password') is-invalid @enderror" id="pwd-password" 
                    autofocus autocomplete="off" placeholder="Enter New Password">
                <!-- <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fa fa-eye-slash" id="pwd-eye"></i></div>
                </div> -->
                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                <!-- <span class="input-group-btn">
                    <button class="btn btn-warning reveal" type="button" style="margin-left: 836px; margin-top: -60px;"><i class="icon-eye" aria-hidden="true"></i></button>
                </span> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Confirm  Password*</label>
                <div class="col-10">
                <input type="password" name="password_confirmation" data-parsley-required data-parsley-required-message="The confirmation password field is required"
                    data-parsley-minlength="8" data-parsley-maxlength="15" value="{{ old('password_confirmation') }}" class="form-control @error('password_confirmation') is-invalid @enderror" id="cnfm-password" 
                    autofocus autocomplete="off" placeholder="Enter Password Confirmation">
                <!-- <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fa fa-eye-slash" id="cnfm-eye"></i></div>
                </div> -->
                @error('password_confirmation')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                </div>
            </div>

            @include('layouts.alert')

            <div class="mt-2 text-right">
                 <button type="submit" class="btn btn-warning waves-effect waves-light m-r-10">Submit</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('script')
<script>
       $(function(){
        $('#eye').click(function(){
                if($(this).hasClass('fa-eye-slash')){
                $(this).removeClass('fa-eye-slash');
                $(this).addClass('fa-eye'); 
                $('#password').attr('type','text');     
                }else{
                $(this).removeClass('fa-eye');
                $(this).addClass('fa-eye-slash');  
                $('#password').attr('type','password');
                }
            });
        });

        $(function(){
        $('#pwd-eye').click(function(){
            if($(this).hasClass('fa-eye-slash')){
            $(this).removeClass('fa-eye-slash');
            $(this).addClass('fa-eye');
            $('#pwd-password').attr('type','text');    
            }else{
            $(this).removeClass('fa-eye'); 
            $(this).addClass('fa-eye-slash');   
            $('#pwd-password').attr('type','password');
            }
        });
    });

    $(function(){
        $('#cnfm-eye').click(function(){
            if($(this).hasClass('fa-eye-slash')){
            $(this).removeClass('fa-eye-slash'); 
            $(this).addClass('fa-eye');
            $('#cnfm-password').attr('type','text');  
            }else{ 
            $(this).removeClass('fa-eye');
            $(this).addClass('fa-eye-slash');  
            $('#cnfm-password').attr('type','password');
            }
        });
    });
</script>    
@endpush