<!DOCTYPE html>
<lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>Login</title>
    <?php if ($__env->exists('layouts.admin.partials.css')) echo $__env->make('layouts.admin.partials.css', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</head>
<style>
    .main-login-div{
        height: 100vh;
        padding: 30px;
    }
    .login-container{
        max-width: 350px;
        margin-inline: auto;
        padding: 50px 25px;
        border: 1px solid var(--color-primary);
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0px 0px 24px -7px rgba(123, 123, 123, 0.56);
    }
    .login-wel{
        font-size: 32px;
        font-weight: 700;
    }
    .login-container label{
        font-weight: 500;
    }
    .login-input{
        border: 1px solid var(--color-primary);
        /* padding: 2px 0px; */
        border-radius: 8px;
        overflow: hidden;
    }
    .login-input input{
        border: none;
    }
    .login-input i{
        background-color: #e9e9e9;
        padding: 12px;
        color: var(--color-primary);
    }
    .login-input .pass-hide{
        background-color: #fff;
        cursor: pointer;
    }

    .login-input input:focus, .login-input input:visited{
        box-shadow: none!important;
        outline: none;
        border: none;
    }
    .login-container .login-btn{
        width: 150px;
    }
</style>
<body>
<div class="container-fluid main-login-div">
    <div class="row align-items-center justify-content-center h-100">
        <div class="col-lg-4 col-md-7 col-sm-8 ">
            <div class="login-container">
                <h3 class="text-center mb-3 login-wel">Welcome</h3>
                <form class="theme-form" action="" method="post" id="login-form">
                    <?php echo csrf_field(); ?>
                <div class="">
                    <label for="email">Email</label>
                    <div class="d-flex align-items-center login-input mt-1">
                        <i class="fa-solid fa-envelope me-2"></i>
                        <input type="email" name="email" placeholder="Your@email.com" class="form-control" id="email">
                    </div>
                </div>
                <div class="mt-4">
                    <label for="password">Password</label>
                    <div class="d-flex align-items-center login-input mt-1">
                        <i class="fa-solid fa-lock me-2"></i>
                        <input type="password" name="password" placeholder="******" class="form-control" id="password">
                        <i class="fa-solid fa-eye-slash pass-hide"></i>
                    </div>
                </div>
                <div class="mt-4 text-center">
                    <button type="submit" class="btn btn-primary login-btn" id="loginBtn">Login</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<?php if ($__env->exists('layouts.admin.partials.js')) echo $__env->make('layouts.admin.partials.js', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<script>
    let pswIcon = document.querySelector(".pass-hide");
    let passwordInput = document.getElementById("password");

    pswIcon.addEventListener("click", function () {
        if (pswIcon.classList.contains("fa-eye-slash")) {
            pswIcon.classList.remove("fa-eye-slash");
            pswIcon.classList.add("fa-eye");
            passwordInput.type = "text";
        } else {
            pswIcon.classList.remove("fa-eye");
            pswIcon.classList.add("fa-eye-slash");
            passwordInput.type = "password";
        }
    });

    $(function(){
        $("#login-form").submit(function(e){
            e.preventDefault();
            if (!validateBuildingForm()) {
                return;
            }
            $.ajax({
                url:"<?php echo e(route('login.submit')); ?>",
                type: "post",
                data:$(this).serialize(),
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                beforeSend:function(){
                    $("#loginBtn").attr('disabled',true)
                    $("#loginBtn").text('Processing')
                },
                success:function(response){
                        console.log("response===========",response)
                    if(response.status == 'success') {
                        window.location.href = response.data.url
                    } else {
                        notification("Error",response.message,'danger',2000)
                        setTimeout(() => {
                            $("#loginBtn").attr('disabled',false)
                            $("#loginBtn").text('Log In')
                        }, 2000);
                    }
                }
            })
        })
    })

    function validateBuildingForm() {
        let error = false;
        let errorMessages = [];

        const fields = {
            email: {
                required: true,
                message: "Email is required",
                id: 'email'
            },
            password: {
                required: true,
                message: "Password is required",
                id: 'password'
            },

        };

        for (const key in fields) {
            const field = fields[key];
            const el = document.getElementById(field.id);

            if (el) {
                const value = el.value.trim();
                if (field.required && !value) {
                    error = true;
                    notification('',field.message,'danger',2000)
                    errorMessages.push(field.message);
                    el.classList.add('is-invalid');
                } else {
                    el.classList.remove('is-invalid');
                }
            }
        }

        if (error) {
            return false;
        }

        return true;
    }

</script>
</html>
<?php /**PATH /var/www/html/nari/resources/views/admin/login.blade.php ENDPATH**/ ?>