@extends('superadmin.auth.layouts.app')
@section('pageTitle', 'Login | ')
@section('content')
    
    <img src="{{asset('cc/superadmin/images/login-bottom-left.png')}}" class="bottom-left" alt="">
    <img src="{{asset('cc/superadmin/images/login-bottom.png')}}" class="bottom" alt="">
    <img src="{{asset('cc/superadmin/images/login-top.png')}}" class="top" alt="">
    <div class="login-box">
        <img src="{{asset('cc/superadmin/images/login-logo.png')}}" class="logo" alt="">
        <form action="{{route('superadmin.login.check')}}" method="post" name="login_frm" id="login_frm">
            @csrf
            <h2>Login</h2>
            <p>Login Your Account</p>
            <label for="email">Username or Email</label>
            <div class="login-input-div"> 
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 25H5C3.61929 25 2.5 23.8807 2.5 22.5V7.39125C2.55826 6.05319 3.66067 4.99873 5 5H25C26.3807 5 27.5 6.11929 27.5 7.5V22.5C27.5 23.8807 26.3807 25 25 25ZM5 9.835V22.5H25V9.835L15 16.5L5 9.835ZM6 7.5L15 13.5L24 7.5H6Z" fill="#A6A6A6"/>
                </svg>                        
                <input type="email" name="email" id="email" placeholder="Enter your username or email" required>
            </div>
            <label for="email">Password</label>
            <div class="login-input-div">
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.2517 10.0046H20.0017V7.64209C20.0017 6.31601 19.4749 5.04424 18.5372 4.10656C17.5996 3.16887 16.3278 2.64209 15.0017 2.64209C13.6756 2.64209 12.4039 3.16887 11.4662 4.10656C10.5285 5.04424 10.0017 6.31601 10.0017 7.64209V10.0046H8.75171C7.75715 10.0046 6.80332 10.3997 6.10006 11.1029C5.3968 11.8062 5.00171 12.76 5.00171 13.7546V23.7546C5.00171 24.7492 5.3968 25.703 6.10006 26.4062C6.80332 27.1095 7.75715 27.5046 8.75171 27.5046H21.2517C22.2463 27.5046 23.2001 27.1095 23.9034 26.4062C24.6066 25.703 25.0017 24.7492 25.0017 23.7546V13.7546C25.0017 12.76 24.6066 11.8062 23.9034 11.1029C23.2001 10.3997 22.2463 10.0046 21.2517 10.0046ZM12.5017 7.64209C12.4849 6.96121 12.7385 6.3014 13.2071 5.80709C13.6756 5.31277 14.3209 5.02422 15.0017 5.00459C15.6825 5.02422 16.3278 5.31277 16.7964 5.80709C17.2649 6.3014 17.5185 6.96121 17.5017 7.64209V10.0046H12.5017V7.64209ZM22.5017 23.7546C22.5017 24.0861 22.37 24.4041 22.1356 24.6385C21.9012 24.8729 21.5832 25.0046 21.2517 25.0046H8.75171C8.42019 25.0046 8.10225 24.8729 7.86783 24.6385C7.63341 24.4041 7.50171 24.0861 7.50171 23.7546V13.7546C7.50171 13.4231 7.63341 13.1051 7.86783 12.8707C8.10225 12.6363 8.42019 12.5046 8.75171 12.5046H21.2517C21.5832 12.5046 21.9012 12.6363 22.1356 12.8707C22.37 13.1051 22.5017 13.4231 22.5017 13.7546V23.7546Z" fill="#A6A6A6"/>
                    <path d="M15 15C14.2583 15 13.5333 15.2199 12.9166 15.632C12.2999 16.044 11.8193 16.6297 11.5355 17.3149C11.2516 18.0002 11.1774 18.7542 11.3221 19.4816C11.4668 20.209 11.8239 20.8772 12.3484 21.4017C12.8728 21.9261 13.541 22.2833 14.2684 22.4279C14.9958 22.5726 15.7498 22.4984 16.4351 22.2145C17.1203 21.9307 17.706 21.4501 18.118 20.8334C18.5301 20.2167 18.75 19.4917 18.75 18.75C18.75 17.7554 18.3549 16.8016 17.6517 16.0983C16.9484 15.3951 15.9946 15 15 15ZM15 20C14.7528 20 14.5111 19.9267 14.3055 19.7893C14.1 19.652 13.9398 19.4568 13.8452 19.2284C13.7505 18.9999 13.7258 18.7486 13.774 18.5061C13.8223 18.2637 13.9413 18.0409 14.1161 17.8661C14.2909 17.6913 14.5137 17.5722 14.7561 17.524C14.9986 17.4758 15.2499 17.5005 15.4784 17.5952C15.7068 17.6898 15.902 17.85 16.0393 18.0555C16.1767 18.2611 16.25 18.5028 16.25 18.75C16.25 19.0815 16.1183 19.3995 15.8839 19.6339C15.6495 19.8683 15.3315 20 15 20Z" fill="#A6A6A6"/>
                </svg>                        
                <input type="password" placeholder="Enter your Password" name="password" id="password">
                <span id="toggle_pwd" onclick="togglePassword()">
                    <svg class="password-show" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_3448_76996)">
                        <path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="white"/>
                        </g>
                        <defs>
                        <clipPath id="clip0_3448_76996">
                        <rect width="24" height="24" fill="white"/>
                        </clipPath>
                        </defs>
                    </svg> 
                </span>                       
            </div>
            <!-- <a href="forgot.html" class="forgot">Forgot Password?</a> -->
            <button class="login">Login</button>
        </form>
    </div>
</div>
<script>
    function togglePassword() {
    var passwordField = document.getElementById('password');
    var toggleButton = document.getElementById('toggle_pwd');
    // Toggle the type attribute of the password field
    passwordField.type = (passwordField.type === 'password') ? 'text' : 'password';
    // Change the eye icon based on the password field type
    if (passwordField.type === 'password') {
        // Display eye icon for password
        toggleButton.innerHTML = '<svg class="password-show" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_3448_76996)"><path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="white"/></g><defs><clipPath id="clip0_3448_76996"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>';
    } else {
        // Display crossed eye icon for text
        toggleButton.innerHTML = '<svg class="password-show" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.25 9.15018C18.94 5.52017 15.56 3.43018 12 3.43018C10.22 3.43018 8.49 3.95018 6.91 4.92018C5.33 5.90018 3.91 7.33018 2.75 9.15018C1.75 10.7202 1.75 13.2702 2.75 14.8402C5.06 18.4802 8.44 20.5602 12 20.5602C13.78 20.5602 15.51 20.0402 17.09 19.0702C18.67 18.0902 20.09 16.6602 21.25 14.8402C22.25 13.2802 22.25 10.7202 21.25 9.15018ZM12 16.0402C9.76 16.0402 7.96 14.2302 7.96 12.0002C7.96 9.77018 9.76 7.96018 12 7.96018C14.24 7.96018 16.04 9.77018 16.04 12.0002C16.04 14.2302 14.24 16.0402 12 16.0402Z" fill="white"/><path d="M11.9999 9.14014C10.4299 9.14014 9.1499 10.4201 9.1499 12.0001C9.1499 13.5701 10.4299 14.8501 11.9999 14.8501C13.5699 14.8501 14.8599 13.5701 14.8599 12.0001C14.8599 10.4301 13.5699 9.14014 11.9999 9.14014Z" fill="white"/></svg> ';
    }
}
</script>
@endsection