@extends('user.layouts.master')
@section('changepassword-active', 'active')
@section('content')
    <style>
        .navbar {
            background-color: black !important
        }

        .side-dashboard {
            min-height: 82vh !important;
        }

        @media(max-width:922px) {
            .dashboard-wrap {
                height: 90vh;
            }
        }
        #password_rules ul li {
            /*font-size: 12px;
        font-weight: normal;*/
            color: #000;
        }

        #password_rules ul li.complete {
            color: #5DB406;
        }

        span.togglePassword {
            color: gray;
            font-size: 12px;
            cursor: pointer;
        }
    </style>
    <section class="dashboard-wrap">
        <div class="container-fluid">
            <div class="row">

                <!-- Sidebar Wrap -->
                @include('user.layouts.afterlogin_sidebar')


                <!-- Content Wrap -->
                <div class="col-lg-9 col-md-8">
                    <div class="dashboard-body">
                        <div class="dashboard-caption">

                            <div class="dashboard-caption-header">
                                <h4><i class="ti-key"></i>Change Password</h4>
                            </div>
                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif

                            <div class="dashboard-caption-wrap">

                                <!-- row -->
                                <div class="row mrg-top-20">
                                    <form action="{{ route('changepassword.update') }}" method="post">
                                        @csrf
                                        {{-- <span class="text-danger">{{$errors->first('current_password')}}</span> --}}

                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label>Old Password</label>
                                                <input type="password" name="current_password" class="form-control">
                                                <span class="text-danger">{{ $errors->first('current_password') }}</span>
                                            </div>
                                        </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>New Password</label>
                                            <input type="password" name="newpassword" id="pass" class="form-control validate password">
                                            <span class="text-danger">{{ $errors->first('newpassword') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Confirm Password</label>
                                            <input type="password" name="confirmpassword" id="conf" class="form-control validate passwordConfirm">
                                            <span class="text-danger">{{ $errors->first('confirmpassword') }}</span>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div id="password_rules">
                                            <h4>Passwords must meet these requirements:</h4>
                                            <ul>
                                                <li class="password_length">At least 8 Characters</li>
                                                <li class="password_uppercase">At least 1 Uppercase Letter</li>
                                                <li class="password_number">At least 1 Number</li>
                                                <li class="password_char">At least 1 Special Character</li>
                                                <li class="password_match">Confirmation Matches Password</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn-savepreview">Change Password</button>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection
@push('scripts2')
<script>
    $(document).ready(function() {
        var validateInput = $('input.validate');

        function validateInputs() {
            var password = $('#pass').val(),
                conf = $('#conf').val(),
                all_pass = true;

            var uppercase = password.match(/[A-Z]/),
                number = password.match(/[0-9]/),

                char = password.match(/[!@#$%\^&*)(+=._-]/);

            if (password.length < 8) {
                $('.password_length').removeClass('complete');
                all_pass = false;
            } else $('.password_length').addClass('complete');

            if (uppercase) $('.password_uppercase').addClass('complete');
            else {
                $('.password_uppercase').removeClass('complete');
                all_pass = false;
            }

            if (number) $('.password_number').addClass('complete');
            else {
                $('.password_number').removeClass('complete');
                all_pass = false
            }
            if (char) $('.password_char').addClass('complete');
            else {
                $('.password_char').removeClass('complete');
                all_pass = false
            }


            if (password == conf && password != '') $('.password_match').addClass('complete');
            else {
                $('.password_match').removeClass('complete')
                all_pass = false;
            }
        }
        validateInput.each(validateInputs).on('keyup', validateInputs);

        function showPassword() {
            if (validateInput.attr('type') === 'password') {
                validateInput.attr('type', 'text');
            } else if (validateInput.attr('type') === 'text') {
                console.log('else');
                validateInput.attr('type', 'password');
            }
        }
        $('.togglePassword').on('click', showPassword);
    });
</script>
@endpush