@extends('welcome')
@section('content')
<style>
    .galleryno {
        display: none;
    }
</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home</a></li>
                    <li class="active">Edit Password</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                <h1 data-title-border="">Edit Password</h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg">
    <div class="container">

        <div class="row py-4">
            <div class="col-lg-6 mx-auto">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <h2 class="font-weight-bold text-5 mt-2 mb-0 text-center">Edit Password</h2>
                        <form class="" action="" method="post">
                            @csrf
                            @method('PUT')
                            <div class="row">

                                <div class="form-group col-lg-12">
                                    <label class="form-label text-2">New Password</label>
                                    <input type="text" value="" id="NP" class="form-control text-3 h-auto py-2" name="newPassword">
                                    <input type="text" hidden value="{{$userid}}" class="form-control text-3 h-auto py-2" name="id">
                                    <p id="npa"></p>
                                </div>
                                <div class="form-group col-lg-12">
                                    <label class="form-label text-2">
                                        Confirm Password
                                    </label>
                                    <input type="password" value="" id="cp" class="form-control text-3 h-auto py-2" name="confirmPassword">
                                    <p id="npa2"></p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-lg-12 text-center">
                                    <input value="Submit" id="sbt" readonly='true' class="btn btn-primary btn-modern" data-loading-text="Loading...">
                                </div>
                            </div>
                        </form>

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


        </div>

    </div>

</section>
<script>
    let al = $('#npa');
    let al2 = $('#npa2');
    al.hide()
    al2.hide()

        let pass = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$/;
    $("#NP").on('keyup', () => {
        let a = $("#NP").val();
        if (a.match(pass)) {
            al.show();
            al.removeClass('text-danger');
            al.addClass('text-success');
            al.html("Strong Password");
        } else {
            al.show();
            al.remove('text-success');
            al.addClass('text-danger');
            al.html("Weak Password");
        }

    });
    $("#cp").on('keyup', () => {
        if ($("#cp").val() == $("#NP").val() && $("#cp").val().match(pass)) {
            al2.show();
            al2.removeClass('text-danger');
            al2.addClass('text-success');
            al2.html("Strong Password");
            $('#sbt').removeAttr('readonly');
            $('#sbt').attr('type','submit');
        } else {
            al2.show();
            al2.removeClass('text-success');
            al2.addClass('text-danger');
            al2.html("Password does not same");

        }
    });
</script>
@stop