@extends('layout')
@section('content')
    <div class="content-wrapper">
        <div class="content">
            <div id="floating-alert-container">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show floating-alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show floating-alert">
                        <strong>{{ session('error') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger alert-dismissible fade show floating-alert">
                            <strong>{{ $error }}</strong>
                            <button type="button" class="close" data-dismiss="alert">×</button>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="ag-panel">
                <div class="ag-right-panel">
                    {{ Form::open(['url' => url('change-password'), 'method' => 'POST', 'id' => 'form1']) }}
                    <div class="row">

                        <div class="col-md-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Old Password</label>
                                    <input type="password" name="old_password" id="old_password"
                                        class="form-control form-control-sm password" value="" autocomplete="off"
                                        onpaste="return false;">
                                    <i class="far fa-eye pass-hide-show icon-suffix" id="toggleOldPassword"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>New Password</label>
                                    <input type="password" name="new_password" id="new_password"
                                        class="form-control form-control-sm password" value="" autocomplete="off"
                                        onpaste="return false;">
                                    <i class="far fa-eye pass-hide-show icon-suffix" id="toggleNewPassword"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Confirm Password</label>
                                    <input type="password" name="confirm_password" id="confirm_password"
                                        class="form-control form-control-sm password" value="" autocomplete="off"
                                        onpaste="return false;">
                                    <i class="far fa-eye pass-hide-show icon-suffix" id="toggleConfirmPassword"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-3">
                                <input type="hidden" class="form-control" name="action" value="ChangePassword">
                                <button type="button" id="savepass" class="btn btn-solid btn-xs mr-2">
                                    <i class="fas fa-check"></i>Save</button>
                                <a href="{{ url('/change-password') }}" class="btn btn-outline btn-xs">
                                    <i class="fas fa-times"></i> Cancel</a>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">
        $(document).on('keypress', '.password', function(e) {
            if (e.which == 32) {
                return false;
            }
        });
        $("#toggleOldPassword").click(function() {
            $(this).toggleClass("fa-eye fa-eye-slash");
            oldPassType = $("#old_password");
            if (oldPassType.attr("type") === "password") {
                oldPassType.attr("type", "text");
            } else {
                oldPassType.attr("type", "password");
            }
        });
        $("#toggleNewPassword").click(function() {
            $(this).toggleClass("fa-eye fa-eye-slash");
            oldPassType = $("#new_password");
            if (oldPassType.attr("type") === "password") {
                oldPassType.attr("type", "text");
            } else {
                oldPassType.attr("type", "password");
            }
        });
        $("#toggleConfirmPassword").click(function() {
            $(this).toggleClass("fa-eye fa-eye-slash");
            oldPassType = $("#confirm_password");
            if (oldPassType.attr("type") === "password") {
                oldPassType.attr("type", "text");
            } else {
                oldPassType.attr("type", "password");
            }
        });
        $('#savepass').click(function(e) {
            e.preventDefault();
            var old_password = $("#old_password").val();
            var new_password = $("#new_password").val();
            var confirm_password = $("#confirm_password").val();
            var passStrFormat = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{6,20}$/;
            var errorcounter = 0;
            if (old_password == undefined || old_password == "") {
                alert("Please enter current password");
                $('#old_password').focus();
                return false;
            }
            if (old_password.length < 6 || old_password.length > 20) {
                alert("Current password should be at least 6 characters and at most 20 characters");
                $('#old_password').focus();
                return false;
            }
            /*if(!old_password.match(passStrFormat))
            {
                alert("Invalid Current password format");
                $("#old_password").focus();
                return false;
            }*/
            if (new_password == undefined || new_password == "") {
                alert("Please enter new password");
                $('#new_password').focus();
                return false;
            }
            if (new_password.length < 6 || new_password.length > 20) {
                alert("New password should be at least 6 characters and at most 20 characters");
                $('#new_password').focus();
                return false;
            }
            /*if(!new_password.match(passStrFormat))
            {
                alert("Invalid new password format");
                $("#new_password").focus();
                return false;
            }*/
            if (confirm_password == undefined || confirm_password == "") {
                alert("Please enter confirm password");
                $('#new_password').focus();
                return false;
            }
            if (confirm_password.length < 6 || new_password.length > 20) {
                alert("Confirm password should be at least 6 characters and at most 20 characters");
                $('#confirm_password').focus();
                return false;
            }
            /*if(!confirm_password.match(passStrFormat))
            {
                alert("Invalid confirm password format");
                $("#confirm_password").focus();
                return false;
            }*/
            if (confirm_password != new_password) {
                alert("Confirm password does not matched");
                $('#confirm_password').focus();
                return false;
            }
            $('#form1').submit();
        });

        $(document).ready(function() {
            setTimeout(function() {
                $('.floating-alert').fadeOut('slow');
            }, 5000); // 5 seconds
        });
    </script>
@endsection