<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="laundry">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= data.app_name%>
    </title>
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="uploads/<%=data.app_favicon%>">
    <link href="vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- Toastr -->
    <link rel="stylesheet" href="vendor/toastr/css/toastr.min.css">


</head>

<body class="h-100">
    <div class="authincation container h-100">
        <div class="row h-100 align-items-center justify-contain-center">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="row m-0 justify-content-center align-items-center">
                            <div class="col-xl-6 col-lg-6 sign text-center">
                                <div>
                                    <!-- <img src="images/login-bg.png" class="img-fix img-fluid bitcoin-img sd-shape7 mt-2"> -->
                                    <div id="lottie-animation"></div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6">
                                <div class="sign-in-your py-4 px-2">
                                    <div class="text-center mb-3">
                                        <a href="#"><img src="uploads/<%=data.app_logo%>" width="60px" alt=""></a>
                                    </div>
                                    <div class="mb-3">
                                        <h4 class="fs-20">Sign in your account</h4>
                                        <span class="">Welcome back! Login with your data that you entered<br> during
                                            registration</span>
                                    </div>

                                    <form action="/login" method="post" class="need-validation" id="login">
                                        <div class="mb-3">
                                            <label class="mb-1"><strong>User Name</strong></label>
                                            <input type="taxt" class="form-control" name="username" value="" required>

                                        </div>
                                        <div class="mb-3">
                                            <label class="mb-1"><strong>Password</strong></label>
                                            <input type="password" class="form-control " name="password" value=""
                                                >
                                        </div>

                                    <!-- <div class="form-group">
                                            <label class="mb-1"><strong>Login As</strong></label>
                                            <select class="default-select form-control wide mb-3" name="loginas" required>
                                                <option value="" selected disabled>Select Option</option>
                                                <option value="0">Customer</option>
                                                <option value="1">Branch/Store/Admin/Staff</option>
                                            </select>
                                        </div> -->

                                        <div class="form-group">
                                            <div class="mb-2">
                                                <div class="form-check custom-checkbox">
                                                    <input type="checkbox" class="form-check-input"
                                                        id="basic_checkbox_1">
                                                    <label class="form-check-label" for="basic_checkbox_1">Remember my preference</label>
                                                </div>
                                            </div>

                                        </div>

                                        <button type="submit" class="btn btn-primary btn-block w-100">Sign Me
                                            In</button>

                                    </form>
                                    <div class="text-center my-3">
                                        <span class="dlab-sign-up style-1">Continue With</span>
                                    </div>
                                    
                                    <div class="col-12 text-center d-flex justify-content-center  mt-4">

                                         <% const customer=rollverify.find(r=> r.rollType === 'customer');
                                            const store=rollverify.find(r=> r.rollType === 'store');
                                            let showstore = data.type == '1' && store.roll_status == 'active'
                                            let showcustomer = customer && customer.roll_status == 'active'  %>

                                            <span
                                                class="text-center d-flex <%= customer && customer.roll_status == 'active' ? '' : 'd-none' %> text-nowrap">
                                                <a href="/register" class=""> Sign up as customer</a></span>
                                            <span
                                                class="text-center <%= showstore &&  showcustomer ? '' : 'd-none' %>">&nbsp;|&nbsp;</span>
                                            <span
                                                class="text-center d-flex  <%= data.type == '1' && store.roll_status == 'active' ? '':'d-none' %> text-nowrap">
                                                <a href="/shopregister" class="  d-block  light mb-3">Sign up as
                                                    store/branch</a> </span>

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



    <!--********************************** Scripts ***********************************-->
    <!-- Required vendors -->
    <script src="vendor/global/global.min.js"></script>
    <script src="vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="/js/lottie.min.js"></script>

    <!-- Toastr -->
    <script src="vendor/toastr/js/toastr.min.js"></script>
    <% if(success.length> 0){ %>
        <script>
            (function ($) {
                "use strict"
                console.log('<%=success%>');
                toastr.success('<%=success%>', {
                    timeOut: 500000000,
                    closeButton: !0,
                    debug: !1,
                    newestOnTop: !0,
                    progressBar: !0,
                    positionClass: "toast-top-right",
                    preventDuplicates: !0,
                    onclick: null,
                    showDuration: "300",
                    hideDuration: "1000",
                    extendedTimeOut: "1000",
                    showEasing: "swing",
                    hideEasing: "linear",
                    showMethod: "fadeIn",
                    hideMethod: "fadeOut",
                    tapToDismiss: !1
                })
            })(jQuery)  
        </script>
        <% } %>
            <% if(error.length> 0){ %>
                <script>
                        (function ($) {
                            "use strict"
                            toastr.error('<%=error%>', {
                                timeOut: 500000000,
                                closeButton: !0,
                                debug: !1,
                                newestOnTop: !0,
                                progressBar: !0,
                                positionClass: "toast-top-right",
                                preventDuplicates: !0,
                                onclick: null,
                                showDuration: "300",
                                hideDuration: "1000",
                                extendedTimeOut: "1000",
                                showEasing: "swing",
                                hideEasing: "linear",
                                showMethod: "fadeIn",
                                hideMethod: "fadeOut",
                                tapToDismiss: !1
                            })
                        })(jQuery)
                </script>
                <% } %>

                    <script src="js/custom.min.js"></script>
                    <script src="js/deznav-init.js"></script>
                    <script src="js/demo.js"></script>

                    <script>
                        $('#masterAdmin').click(function () {
                            $('input[name=username]').val('admin')
                            $('input[name=password]').val('1234')
                            $('select[name=loginas]').val('1')
                            $("form").submit()
                        })

                        $('#SubAdmin').click(function () {
                            $('input[name=username]').val('meera')
                            $('input[name=password]').val('123')
                            $('select[name=loginas]').val('1')
                            $("form").submit()
                        })

                        $('#Store').click(function () {
                            $('input[name=username]').val('trinity')
                            $('input[name=password]').val('123')
                            $('select[name=loginas]').val('1')
                            $("form").submit()
                        })

                        $('#SubStore').click(function () {
                            $('input[name=username]').val('tinity2')
                            $('input[name=password]').val('1234')
                            $('select[name=loginas]').val('1')
                            $("form").submit()
                        })

                        $('#Customer').click(function () {
                            $('input[name=username]').val('watson')
                            $('input[name=password]').val('123')
                            $('select[name=loginas]').val('0')
                            $("form").submit()
                        })

                    </script>
                    <script>
                        lottie.loadAnimation({
                            container: document.getElementById('lottie-animation'),
                            renderer: 'svg',
                            loop: true,
                            autoplay: true,
                            path: '/lottie_json/laundry-building.json'
                        });
                    </script>
</body>


</html>