@extends('reachassuree_agent_sub/layouts.main')
@section('title', $data['title'])
@section('content')

<div class="page-content">
    <div class="container-fluid">

        @include('../reachassuree_agent_sub/master/comman/header')

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form id="formPassword" class="needs-validation" action="{{route('do.change.password.save')}}" method="POST" novalidate>
                            @csrf
                            <div class="mb-3 row">
                                <label for="old_password" class="col-md-2 col-form-label">Old Password<span class="text-danger">*</span></label>
                                <div class="col-md-10 d-flex">
                                    <div class="input-group auth-pass-inputgroup">
                                        <input type="password" class="form-control" placeholder="Enter old password" id="old_password" name="old_password" autocomplete="off" required minlength="6" maxlength="14">
                                        <button class="btn btn-light" id="eye1" type="button" title="eye1"><i class="mdi mdi-eye-off-outline"></i></button>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="new_password" class="col-md-2 col-form-label">New Password<span class="text-danger">*</span></label>
                                <div class="col-md-10 d-flex">
                                    <div class="input-group auth-pass-inputgroup">
                                        <input type="password" class="form-control" placeholder="Enter new password" id="new_password" name="new_password" autocomplete="off" required minlength="6" maxlength="14">
                                        <button class="btn btn-light" id="eye2" type="button" title="eye2"><i class="mdi mdi-eye-off-outline"></i></button>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="confirm_password" class="col-md-2 col-form-label">Confirm Password<span class="text-danger">*</span></label>
                                <div class="col-md-10 d-flex">
                                    <div class="input-group auth-pass-inputgroup">
                                        <input type="password" class="form-control" placeholder="Enter confirm password" id="confirm_password" name="confirm_password" autocomplete="off" required minlength="6" maxlength="14">
                                        <button class="btn btn-light" id="eye3" type="button" title="eye3"><i class="mdi mdi-eye-off-outline"></i></button>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex gap-2 flex-row-reverse">
                                <button  type="submit" class="btn btn-primary px-4 waves-effect waves-light px-4" id="UpdatePassword">Update</button>
                                <button type="reset" class="btn btn-secondary waves-effect" id="reset_values">Reset</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>            
        </div>        
    </div>    
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var firstFormSaveAjaxUrl = "{{ route('sub.do.change.password.save') }}";
    var csrfToken = $("[name=_token").val();

    $(document).ready(function() {
        $('#eye1').click(function(){
            if($('#eye1 i').hasClass('mdi-eye-off-outline')){
                $('#eye1 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#old_password').attr('type','text');
            }else{
                $('#eye1 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#old_password').attr('type','password');
            }
        });

        $('#eye2').click(function(){
            if($('#eye2 i').hasClass('mdi-eye-off-outline')){
                $('#eye2 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#new_password').attr('type','text');
            }else{
                $('#eye2 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#new_password').attr('type','password');
            }
        });

        $('#eye3').click(function(){
            if($('#eye3 i').hasClass('mdi-eye-off-outline')){
                $('#eye3 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#confirm_password').attr('type','text');
            }else{
                $('#eye3 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#confirm_password').attr('type','password');
            }
        });

        $('#old_password').bind('keyup blur', function(e){
            var keyCode = e.which;

            if(keyCode === 32){
                e.preventDefault();
               $(this).val('');
            }
        });

        $('#old_password').on('change', function() {
            var old_password = $(this).val();

            if (old_password.length != 0  && (old_password.length < 6 || old_password.length > 14)) {
                toastr['error']("Password should be between 6 and 14 characters.");
                $(this).addClass('is-invalid');
                $("#UpdatePassword").attr("disabled", true);
            } else {
                $(this).removeClass('is-invalid');
                $("#UpdatePassword").attr("disabled", false);
            }
        });

        $('#new_password').bind('keyup blur', function(e){
            var keyCode = e.which;

            if(keyCode === 32){
               e.preventDefault();
               $(this).val('');
            }
        });

        $('#new_password').on('change', function() {
            var new_password = $(this).val();

            if (new_password.length != 0  && (new_password.length < 6 || new_password.length > 14)) {
                toastr['error']("Password should be between 6 and 14 characters.");
                $(this).addClass('is-invalid');
                $("#UpdatePassword").attr("disabled", true);
            } else {
                $(this).removeClass('is-invalid');
                $("#UpdatePassword").attr("disabled", false);
            }
        });

        $('#confirm_password').bind('keyup blur', function(e){
            var keyCode = e.which;
            if(keyCode === 32){
                e.preventDefault();
            $(this).val('');
            }
        });

        $('#confirm_password').on('change', function() {
            var new_password = $('#new_password').val();
            var confirm_password = $(this).val();

            if (confirm_password.length != 0  && (confirm_password.length < 6 || confirm_password.length > 14)) {
                toastr['error']("Password should be between 6 and 14 characters.");
                $(this).addClass('is-invalid');
                $("#UpdatePassword").attr("disabled", true);
            } else {
                if(confirm_password !== new_password) {
                    toastr['error']("Password does not match with confirm password.");
                    $("#confirm_password").addClass('is-invalid');
                }
                $(this).removeClass('is-invalid');
                $("#UpdatePassword").attr("disabled", false);
            }
        });


        $("#reset_values").on('click',function(){
            $("#old_password , #new_password , #confirm_password").removeClass('is-valid , is-invalid');
            $("#formPassword").removeClass('was-validated');
            $("#UpdatePassword").attr("disabled",false);
        });

        $('#UpdatePassword').on('click', function(e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: firstFormSaveAjaxUrl,
                _token: csrfToken,
                data: $('#formPassword').serialize(),
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $('#formPassword').trigger("reset").removeClass("was-validated");
                
                        setTimeout(function() {
                            window.location= "{{ route('login') }}";
                        }, 3000);
                
                    } else if (resultData['status'] == 0) {
                        $('#formPassword').addClass("was-validated");

                        if (typeof resultData['data'] !== "undefined") {
                            var size = Object.keys(resultData['data']).length;
                            if (size > 0) {
                                for (var [key, value] of Object.entries(resultData['data'])) {
                                    toastr["error"](value);
                                }
                            }
                        } else {
                            if(resultData['msg'] == "Old password incorrect"){
                                $('#formPassword').removeClass("was-validated");
                                $("#old_password").addClass('is-invalid');
                            }
                            toastr["error"](resultData['msg']);
                        }
                    }
                }
            });
        });
    });
</script>
@endsection