@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .toggle-password {
            position: absolute;
            top: 70%;
            right: 20px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #1f8811;
        }
    </style>
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                                <a href="index.html"> <i class="feather icon-home"></i> </a>
                            </li>
                            <li class="breadcrumb-item">Update Password</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Update Password</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card bg-light">
                        <div class="card-block">
                            <div class="mT-30">
                                @include('common.error')
                                <script type="text/javascript" src="{{ asset('assets/js/crypto-js.min.js') }}"></script>
                                <form class=" " method="POST" action="{{ route('change.password') }}"
                                    onsubmit="return myFunction()" id="needs-validation">
                                    @csrf
                                    {{-- @foreach ($errors->all() as $error)
                                    <p class="text-danger">{{ $error }}</p>
                                @endforeach --}}

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row div_branch password-toggle">
                                                <div class="col-md-12 mb-3 position-relative">
                                                    <label for="validationCustom01">Old Password <span
                                                            class="red">*</span></label>
                                                    <input type="password" class="form-control" placeholder="Old Password"
                                                        name="current_password" id="current_password" autocomplete="off"
                                                        required><i toggle="#current_password"
                                                        class="fa-solid fa-eye fa-lg toggle-password"></i>
                                                </div>
                                            </div>
                                            <div class="row div_branch password-toggle">
                                                <div class="col-md-12 mb-3">
                                                    <label for="validationCustom01">New Password <span
                                                            class="red">*</span></label>
                                                    <input type="password" class="form-control" placeholder="New Password"
                                                        name="password" id="password" autocomplete="off" required><i
                                                        toggle="#password"
                                                        class="fa-solid fa-eye fa-lg toggle-password"></i>
                                                </div>
                                            </div>
                                            <div class="row div_branch password-toggle">
                                                <div class="col-md-12 mb-3">
                                                    <label for="validationCustom01">Confirm Password <span
                                                            class="red">*</span></label>
                                                    <input type="password" class="form-control"
                                                        placeholder="Confirmd Password" name="password_confirmation"
                                                        id="password_confirmation" autocomplete="off" required><i
                                                        toggle="#password_confirmation"
                                                        class="fa-solid fa-eye fa-lg toggle-password"></i>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3 mb-3">
                                                    <button class="btn btn-sm btn-primary btn_width" type="submit"
                                                        id="add_check">Save</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row form-group border">
                                                <div class="col-md-12">
                                                    <span class="text-danger"> Password Instructions- </span>
                                                </div>
                                                <div class="col-md-12" style="height:15px;">
                                                    <p></p>
                                                    <ul>
                                                        <li>
                                                            At least one Upper Case character
                                                        </li>
                                                        <li>
                                                            At least one Lower Case character
                                                        </li>
                                                        <li>
                                                            At least one Numeric character
                                                        </li>
                                                        <li>
                                                            At least one Special character
                                                        </li>
                                                        <li>
                                                            Password must be between 8 to 16 digit.
                                                        </li>
                                                    </ul>
                                                    <p></p>
                                                </div>

                                            </div>
                                        </div>

                                    </div>


                                </form>
                                <script type="text/javascript">
                                    function myFunction() {

                                        var current_password = $('#current_password').val();
                                        var password = $('#password').val();
                                        var conpassword = $('#password_confirmation').val();
                                        // const regex =  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
                                        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;

                                        if (password != conpassword) {
                                            bootbox.alert('Confirm password must be same as password');
                                            return false;
                                        }

                                        if (!regex.test(password)) {
                                            bootbox.alert(
                                                'Password must be 8-16 characters long, include at least one uppercase letter, one lowercase letter, one numeric character and one special character'
                                            );
                                            return false;
                                        }



                                        $('#current_password').val(CryptoJS.SHA512(current_password).toString());
                                        $('#password').val(CryptoJS.SHA512(password).toString());
                                        $('#password_confirmation').val(CryptoJS.SHA512(conpassword).toString());
                                        return true;
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>
    <script>
        $(document).ready(function() {

            $('input[type="text"]').each(function() {
                $(this).attr('maxlength', '255');
            });


            $(".toggle-password").click(function() {

                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });
        });
    </script>
@endsection