<html>

<head>
    <title>PNRD HCMS, Assam</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo e(asset('bootstrap/css/bootstrap.min.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('font-awesome/css/font-awesome.min.css')); ?>" />
    <link href="<?php echo e(asset('css/toastr.min.css')); ?>" rel="stylesheet" media="all">
    <link rel="stylesheet" href="<?php echo e(asset('bootstrap/css/style.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('bootstrap/css/responsive.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('ui_assets/css/custom/loader.css')); ?>" crossorigin="anonymous">
    <style type="text/css">
        .header-img {
            height: 90px;
            width: 100%;
        }

        .logo img {
            width: 80px;
        }

        header {
            position: fixed;
            top: 0px;
            width: 100%;
        }

        .btn-style {
            text-align: center;
            width: 100%;
        }

        #login-div,
        #username_div {
            height: 276px;
        }

        #myProgress {
            width: 100%;
            background-color: #ddd;
            /*            border-top-right-radius: 20px;
            border-top-left-radius: 20px;*/
        }

        .progressbarheight {
            height: 4px;
        }

        #myBar {
            width: 1%;
            height: 5px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            background-color: #f3ed2a;
        }

        .title_name_style {
            margin-top: 5px !important;
            margin-bottom: 5px !important;
            color: white;
        }

        .footer-bottom {
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: 0px;
            height: 40px;
            /* background-color: #112432;*/
            background-color: #287cb8;
            z-index: 9;
            padding: 12px 0px;
            font-size: 12px;
            text-transform: uppercase;
            color: #fff;
            letter-spacing: .18em;
        }

        .margin_bottom {
            margin-bottom: 10px;
        }

        .login_container {
            height: calc(100vh - 40px);
            position: relative;
            overflow-y: auto;
        }

        .mt25{
            margin-top: 25px;
        }
        @media (max-width: 1020px) {
            .login-area {
                width: 100%;
               /* height: auto;*/
                position: static;
                /* left: 0px; */
                /* top: 0px; */
                margin-left: 0px;
                margin-top: -5px;
                box-shadow: none;
            }

            .footer-bottom {
                padding: 7px 0px;
                font-size: 8px;
                height: 40px;
            }

            .footer-bottom .text-right {
                text-align: center !important;
            }

            .text-left {
                text-align: center !important;
            }
        }

        @media (max-width: 340px) {
            .logo img {
                width: 60px;
            }

            .mobile_view {
                font-size: 14px;
            }

            .mobile_view_title {
                font-size: 21px;
                margin-top: 10px;
                margin-bottom: 0px;
            }

            .form-group {
                margin-bottom: 10px;
            }
        }
    </style>
</head>

<body style="margin: 0px; padding: 0px; background: url(<?php echo e(asset('media/home-page/main/login-bg2.jpg')); ?>) no-repeat center center fixed;background-size: cover;">

    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="preloader">
                <div class="spinner-layer pl-red">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
            <p>Please wait...</p>
        </div>
    </div>
    <!--<header>
    <img src="<?php echo e(asset('media/home-page/main/header.jpg')); ?>" class="img img-responsive header-img">
</header> -->
  


    <div class="login_container">

         <div class="col-md-12 text-center mt25">
            <div id="flash-msg">
                 <?php if($errors->has('active')): ?>
                    <div class="alert alert-danger" role="alert">
                       <strong><?php echo e($errors->first('active')); ?></strong>
                    </div>
                  <?php endif; ?>
            </div>
         </div>

        <div class="login-area" style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;margin: auto;">
            <div class="progressbarheight">
                <div id="myProgress" style="display:none;">
                    <div id="myBar"></div>
                </div>
            </div>
            <div class="logo text-center" style="padding-top:20px">
                <img src="<?php echo e(asset('ui_assets/icons/logo.png')); ?>" border="0" alt="">
            </div>
            <h4 class="text-center title_name_style mobile_view">Panchayat & Rural Development </h4>
            <h4 class="text-center title_name_style mobile_view">Department, Assam</h4>

            <h2 class="text-center mobile_view_title" style=" color:#f3ed2a;margin-top: 10px;margin-bottom: 0px;"> HCMS </h2>

            <div id="login_div">
                <div class="row" style="margin:0px;">

                    <form action="<?php echo e(route('login')); ?>" method="POST">
                        <?php echo e(csrf_field()); ?>

                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label for="username"><i class="fa fa-user" aria-hidden="true"></i> <?php echo e(__('Username')); ?></label>
                                    <input id="username" type="text" class="form-control<?php echo e($errors->has('username') ? ' is-invalid' : ''); ?> lf-c" name="username" value="<?php echo e(old('username')); ?>" required autofocus>

                                    <?php if($errors->has('username')): ?>
                                    <span class="invalid-feedback">
                                        <strong><?php echo e($errors->first('username')); ?></strong>
                                    </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt5">
                                    <label for="password"> <i class="fa fa-key" aria-hidden="true"></i> <?php echo e(__('Password')); ?></label>
                                    <input id="password" type="password" class="form-control<?php echo e($errors->has('password') ? ' is-invalid' : ''); ?> lf-c" name="password" required>

                                    <?php if($errors->has('password')): ?>
                                    <span class="invalid-feedback">
                                        <strong><?php echo e($errors->first('password')); ?></strong>
                                    </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt5">
                                    <label>
                                        <input type="checkbox" name="remember" <?php echo e(old('remember') ? 'checked' : ''); ?>> <?php echo e(__('Remember Me')); ?>

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

                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button class="btn btn-primary l-btn tran" type="submit"><i class="fa fa-sign-in" aria-hidden="true"></i> <?php echo e(__('Login')); ?></button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="row mt20 mb40" style="color:white;margin:0px;">
                    <div class="col-md-12">
                        <div class="col-md-6 margin_bottom" style="">
                            <div class="form-group">
                                <a class="btn a-rl l-gr btn-style" href="<?php echo e(url('/')); ?>"> <i class="fa fa-arrow-left" aria-hidden="true"></i> Back To Home </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-md-push-0" style="">
                            <div class="form-group">
                                <a class="btn a-rl l-gr btn-style" href="" id="getPassword">
                                    <i class="fa fa-question-circle-o" aria-hidden="true"></i> Forgot Password ?
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="username_div" style="display: none;">
                <div class="row mt20" style="">

                    <form action="#" method="POST" id="forgot-password-request-form">
                        <?php echo e(csrf_field()); ?>

                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label>
                                        Enter your username to send OTP to the phone number associate with it.
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label for="username"><i class="fa fa-user" aria-hidden="true"></i> <?php echo e(__('Username')); ?></label>
                                    <input id="username" type="text" class="form-control<?php echo e($errors->has('username') ? ' is-invalid' : ''); ?> lf-c" name="username" value="<?php echo e(old('username')); ?>" autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">

                            <div class="col-md-6" style="margin-top: 12px;">
                                <div class="form-group mt5">
                                    <a href="#" class="text-white" style="text-decoration:none; color:white;" id="back_login"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to login</a>
                                </div>
                            </div>
                            <!--                    <div class="col-md-6 text-right">
                        <div class="form-group mt5">
                            <button class="btn btn-primary" type="submit" id="forgot-password-request"><i class="fa fa-sign-in" aria-hidden="true"></i>  Next</button>
                        </div>
                    </div>-->
                            <div class="col-md-6">
                                <div class="form-group mt5">
                                    <button class="btn btn-primary l-btn tran" type="submit" id="forgot-password-request"><i class="fa fa-sign-in" aria-hidden="true"></i> Next</button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            <div id="otp_div" style="display: none;">
                <div class="row mt10" style="">

                    <form action="#" method="POST" id="otp-verification-form">
                        <?php echo e(csrf_field()); ?>

                        <input id="key" type="hidden" class="form-control lf-c" name="key" value="" autofocus>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label>
                                        Enter the password reset OTP which is sent to your registered phone number.
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label for="username"><i class="fa fa-key" aria-hidden="true"></i> OTP</label>
                                    <input id="otp" type="text" class="form-control lf-c" name="otp" value="" maxlength="6" autofocus>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-12">

                            <div class="col-md-6" style="margin-top: 12px;">
                                <div class="form-group mt5">
                                    <a href="#" class="text-white" style="text-decoration:none; color:white;" id="back_login"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to login</a>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <div class="form-group mt5">
                                    <button class="btn btn-primary l-btn tran" type="submit" id="otp_verification_btn"><i class="fa fa-key" aria-hidden="true"></i> Verify OTP</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="col-md-12" style="<!--border-top: 1px solid #484646;--> margin: 9px 0px;"></div>

                    <div class="col-md-12" style="height: 52px;">
                        <div class="col-md-12" id="resend_div" style="display:none;">
                            <form action="#" method="POST" id="resend-otp-form">
                                <?php echo e(csrf_field()); ?>

                                <input id="resend_username" type="hidden" class="form-control lf-c" name="username" value="" autofocus>
                                <div class="form-group mt5">
                                    <button class="btn a-rl l-gr btn-style" type="submit"><i class="fa fa-sign-in" aria-hidden="true"></i> Resend OTP</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-12 text-center" id="timer_div" style="color:white;">
                            <h4 id="time" style="margin-top: 10px;"></h4>
                        </div>
                    </div>

                </div>
            </div>
            <div id="new_password_div" style="display: none;">
                <div class="row mt10" style="margin:0px">

                    <form action="#" method="POST" id="new_password-form">
                        <?php echo e(csrf_field()); ?>

                        <input id="key_reset" type="hidden" class="form-control lf-c" name="key_reset" value="" autofocus>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label for="password"><i class="fa fa-key" aria-hidden="true"></i>New password</label>
                                    <input type="text" id="password" class="form-control lf-c" name="password" value="" autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group mt10">
                                    <label for="password_confirmation"><i class="fa fa-key" aria-hidden="true"></i>Confirm password</label>
                                    <input id="password_confirmation" type="text" class="form-control lf-c" name="password_confirmation" value="" autofocus>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-12">

                            <div class="col-md-6" style="margin-top: 12px;">
                                <div class="form-group mt5">
                                    <a href="#" class="text-white" style="text-decoration:none; color:white;" id="back_login"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to login</a>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <div class="form-group mt5">
                                    <button class="btn btn-primary l-btn tran" type="submit" id="otp_verification_btn"><i class="fa fa-sign-in" aria-hidden="true"></i> Save</button>
                                </div>
                            </div>
                        </div>
                    </form>

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

    <div class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 text-left">Copyright © P&RD HCMS, 2017.</div>
                <div class="col-lg-6 text-right">Developed & maintained by Keltron & <i>Gratia Technology</i>.</div>
            </div>
        </div>
    </div>


    <script src="<?php echo e(asset('ui_assets/js/lib/jquery-3.3.1.min.js')); ?>" crossorigin="anonymous"></script>
    <script src="<?php echo e(asset('bootstrap/js/bootstrap.min.js')); ?>"></script>
    <script src="<?php echo e(asset('js/lib/toastr.min.js')); ?>"></script>
    <script src="<?php echo e(asset('js/lib/sweetalert2.all.min.js')); ?>"></script>
    <script src="<?php echo e(asset('js/lib/jquery-validate.js')); ?>"></script>
    <script src="<?php echo e(asset('js/lib/jqueryAddValidate.js')); ?>"></script>
    <script>
        $(function() {
            setTimeout(function() {
                $('.page-loader-wrapper').fadeOut();
            }, 400);
        });
        $('#username_div').hide();
        /*$('#myProgress').hide();*/
        $(document).on('click', '#getPassword', function(e) {
            e.preventDefault();
            progressBar(15, function() {
                $('#myProgress').hide();
                $('#login_div').hide(700);
                $('#username_div').show(700);
                $('#otp_div').hide(700);
                $('#new_password_div').hide(700);

            });
        })

        $(document).on('click', '#back_login', function(e) {
            e.preventDefault();
            progressBar(15, function() {
                $('#myProgress').hide();
                $('#login_div').show(700);
                $('#username_div').hide(700);
                $('#otp_div').hide(700);
                $('#new_password_div').hide(700);
            });
        })


        function progressBar(int_val, callback) {
            $('#myProgress').show();
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, int_val);

            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                    callback();
                } else {
                    width++;
                    elem.style.width = width + '%';
                }
            }
        }

        $('#forgot-password-request-form').on('submit', function(e) {
            e.preventDefault();
            $('#resend_username').val($('#username').val());

            var form = $('#forgot-password-request-form')[0];
            var data = new FormData(form);
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
                url: "<?php echo e(route('forgotPasswordRequest')); ?>",
                data: data,
                dataType: "json",
                success: function(data) {
                    if (data.msgType == true) {
                        $('#key').val(data.data);
                        progressBar(15, function() {
                            $('#myProgress').hide();
                            $('#login_div').hide(700);
                            $('#username_div').hide(700);
                            $('#otp').val('');
                            $('#otp_div').show(700);
                            $('#new_password_div').hide(700);

                            $('#resend_div').hide();

                            var fiveMinutes = 60 * 1,
                                display = document.querySelector('#time');
                            startTimer(fiveMinutes, display, function() {
                                $('#timer_div').hide(500);
                                $('#resend_div').show(500);
                            });
                        });
                        toastr.success(data.msg);
                    } else {
                        /*toastr.error(data.msg);*/
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: data.msg
                        })
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });


        })


        $('#resend-otp-form').on('submit', function(e) {
            e.preventDefault();

            var form = $('#resend-otp-form')[0];
            var data = new FormData(form);
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
                url: "<?php echo e(route('resendpasswordresetotp')); ?>",
                data: data,
                dataType: "json",
                success: function(data) {
                    if (data.msgType == true) {
                        $('#key').val(data.data);

                        progressBar(15, function() {
                            $('#myProgress').hide();
                            $('#resend_div').hide(500);
                            var fiveMinutes = 60 * 1,
                                display = document.querySelector('#time');
                            startTimer(fiveMinutes, display, function() {
                                $('#timer_div').hide(500);
                                $('#resend_div').show(500);
                            });
                        });
                        toastr.success(data.msg);
                    } else {
                        /*toastr.error(data.msg);*/
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: data.msg
                        })
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });


        })




        $('#otp-verification-form').on('submit', function(e) {
            e.preventDefault();


            var form = $('#otp-verification-form')[0];
            var data = new FormData(form);
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
                url: "<?php echo e(route('verifypasswordresetotp')); ?>",
                data: data,
                dataType: "json",
                success: function(data) {
                    if (data.msgType == true) {
                        $('#key_reset').val(data.data);
                        progressBar(15, function() {
                            $('#myProgress').hide();
                            $('#login_div').hide(700);
                            $('#username_div').hide(700);
                            $('#otp_div').hide(700);
                            $('#new_password_div').show(700);
                        });
                        toastr.success(data.msg);
                    } else {
                        /*toastr.error(data.msg);*/
                        if (data.data == 1) {
                            Swal.fire({
                                title: 'Oops...',
                                text: data.msg,
                                type: 'error',
                                showCancelButton: false,
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.value) {
                                    progressBar(15, function() {
                                        $('#myProgress').hide();
                                        $('#login_div').show(700);
                                        $('#username_div').hide(700);
                                        $('#otp_div').hide(700);
                                        $('#new_password_div').hide(700);
                                    });
                                }
                            });
                        } else {
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: data.msg
                            });
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });


        })


        $('#new_password-form').on('submit', function(e) {
            e.preventDefault();
            var form = $('#new_password-form')[0];
            var data = new FormData(form);
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
                url: "<?php echo e(route('resetpassword')); ?>",
                data: data,
                dataType: "json",
                success: function(data) {
                    if (data.msgType == true) {
                        progressBar(15, function() {
                            $('#myProgress').hide();
                            $('#login_div').show(700);
                            $('#username_div').hide(700);
                            $('#otp_div').hide(700);
                            $('#new_password_div').hide(700);
                        });
                        toastr.success(data.msg);
                    } else {
                        /*toastr.error(data.msg);*/
                        if (data.data == 1) {
                            Swal.fire({
                                title: 'Oops...',
                                text: data.msg,
                                type: 'error',
                                showCancelButton: false,
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.value) {
                                    progressBar(15, function() {
                                        $('#myProgress').hide();
                                        $('#login_div').show(700);
                                        $('#username_div').hide(700);
                                        $('#otp_div').hide(700);
                                        $('#new_password_div').hide(700);
                                    });
                                }
                            });
                        } else {
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: data.msg
                            });
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });


        })



        function startTimer(duration, display, callback) {
            $('#timer_div').show();
            var timer = duration,
                minutes, seconds;
            var id = setInterval(function() {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) {
                    /* timer = duration;*/
                    callback();
                    clearInterval(id);
                }
            }, 1000);
        }

        /*window.onload = function () {

        };*/




        function callAjaxErrorFunction(jqXHR, textStatus, errorThrown) {

            if (jqXHR.status == 401) {
                toastr.error("Session Time Out", "Error");
                setTimeout(
                    function() {
                        /*  location.replace(frontEndURL + "/admin/login");*/
                    }, 2000);
            } else if (jqXHR.status == 404) {
                toastr.warning("Page not Found", "Warning");
            } else if (jqXHR.status == 0) {
                toastr.warning("Please Check Net Connection", "Warning");
            } else {
                toastr.error("Opps! Something went wrong", "Error");
            }

        }
        
window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 3000);
    </script>
</body>

</html>