@extends('layouts.admin')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ Auth::user()->name}}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Change Password</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Content Header (Page header) -->
{{--
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <div class="float-sm-right">
                    <a class="btn btn-info" href="{{route('admin.dashboard')}}" title="Back to List"> <i class="fa fa-backward">
    Back</i></a>
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
--}}


<!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <!-- form start -->
        <form role="form" method="POST" id="changePassword" action="{{ url('/superadmin/password-update') }}">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Change Password</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                        <!-- /.card-body Account Details-->
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group show-pass">
                                        <label for="content_title">Current Password*</label>
                                        <input type="password" id="oldPassword" name="oldPassword" value = "{{old('oldPassword')}}" class="form-control passwordField  {{ session()->has('message-error') ? ' is-invalid' : '' }}" placeholder=" Old Password" />
                                        <span class="kt-input-icon__icon kt-input-icon__icon--right">
                                            <span class="onPasswordHide p-viewer"> <i class="fa fa-eye" aria-hidden="true"></i></span>
                                            <span class="onPasswordShow p-viewer" style="display:none;"> <i class="fa fa-eye-slash" aria-hidden="true"></i></span>
                                        </span>
                                    </div>
                                    <span id="oldPasswordspan" style="color: red"></span>

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group show-pass">
                                        <label for="content_title">Re-enter new password*</label>
                                        <input type="password" id="password" name="password" value = "{{old('password')}}" class="form-control passwordField " placeholder=" New Password" />
                                        <span class="kt-input-icon__icon kt-input-icon__icon--right">
                                            <span class="onPasswordHide p-viewer"> <i class="fa fa-eye" aria-hidden="true"></i></span>
                                            <span class="onPasswordShow p-viewer" style="display:none;"> <i class="fa fa-eye-slash" aria-hidden="true"></i></span>
                                        </span>
                                    </div>
                                    <span id="passwordspan" style="color: red"></span>

                                </div>

                                <div class="col-md-6">
                                    <div class="form-group show-pass">
                                        <label for="content_title">Confirm Password*</label>
                                        <input type="password" id="password_confirmation" name="password_confirmation" value = "{{old('password_confirmation')}}" class="form-control passwordField" placeholder=" Confirm password" />
                                        <span class="kt-input-icon__icon kt-input-icon__icon--right">
                                            <span class="onPasswordHide p-viewer"> <i class="fa fa-eye" aria-hidden="true"></i></span>
                                            <span class="onPasswordShow p-viewer" style="display:none;"> <i class="fa fa-eye-slash" aria-hidden="true"></i></span>
                                        </span>
                                    </div>
                                    <span id="password_confirmationspan" style="color: red"></span>

                                </div>
                            </div>

                        </div>
                        <!-- /.card-body Account Details-->
                        <div class="card-footer">

                            <div class="float-right ">
                                @csrf
                                @method('POST')
                                <input type="submit" id="btnAdd" name="btnAdd" class="btn btn-primary" value="Update" />
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->

                    <!-- general form elements -->
                    <!-- <div class="card card-primary">
                        <div class="card-footer">
                            @csrf
                            @method('POST')
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div> -->
                    <!-- /.card -->

                </div>
                <!--/.col (left) -->
            </div>
        </form>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@section('script')

<script>
    $(document).ready(function() {

        $("#changePassword").validate({
            rules: {
                oldPassword: {
                    required: true,
                    minlength: 6
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 15,
                    //PASSWORD:true
                },
                password_confirmation: {
                    required: true,
                    minlength: 6,
                    maxlength: 15,
                    //PASSWORD:true,
                    equalTo: "#password"
                }
            },
            messages: {

                "password_confirmation": {
                    equalTo: "Confirm password doesn't match with your new password"
                }
            },
        });


    });

    $(document).ready(function() {
        $(".onPasswordHide").on("click", function() {
            let $this = $(this);
            //if ($this.parent().parent().find(".passwordField").val() != "") {
                $this.parent().parent().find(".passwordField").attr("type", "text");
                $this.hide();
                $this.parent().parent().find(".onPasswordShow").show();
            //}
        });
        $(".onPasswordShow").on("click", function() {
            let $this = $(this);
            //if ($this.parent().parent().find(".passwordField").val() != "") {
                $this.parent().parent().find(".passwordField").attr("type", "password");
                $this.hide();
                $this.parent().parent().find(".onPasswordHide").show();
           // }
        });
    });
</script>

@endsection