@include('layout.header')

<div class="recharge resetPassword">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{ url('/') }}">
                <img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
            </a>
            <span>Login</span>
        </div>
    </nav>
    <!-- HEADER -->

    <!-- BODY -->
    <div class="recharge_box bg-transparent shadow-none">
        <form id="loginForm" method="post" autocomplete="off">
            @csrf
            <div class="input_box">
                <img src="{{ asset('assets/img/mobile.png') }}" />
                <div>
                    <span>+91</span><input class="border-0 flex-1" style="width: 80%;" type="number" minlength="10"
                        required name="login_mobile" id="login_mobile" placeholder="Mobile Number" />
                </div>
            </div>
            <div><span id="login_mobile_error" class="error"></span></div>

            <div class="input_box password-container">
                <img src="{{ asset('assets/img/password.png') }}" />
                <input class="border-0 flex-1" type="password" required name="login_password" id="login_password"
                    placeholder="Your Password" minlength="5" />
                <img src="{{ asset('assets/img/eye.png') }}" alt="Show password" class="password-toggle" />
            </div>
            <div><span id="login_password_error" class="error"></span></div>


            <div class="container-fluid pb-5 pt-4">
                <div class="row">
                    <div class="col-10 col-md-8 col-lg-4 col-xl-2 mx-auto">
                        <a class="text-white text-decoration-none">
                            <button class="w-100 btn btn-primary shadow">Login</button>
                        </a>
                    </div>
                </div>
            </div>
        </form>

        <script>
            const togglePassword = document.querySelector('.password-toggle');
            const passwordInput = document.querySelector('#login_password');

            togglePassword.addEventListener('click', function() {
                const type = passwordInput.type === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);

                // Optionally, change the icon image based on type (if you have different images for open and closed eye)
            });
        </script>



        <div class="d-flex justify-content-between">
            <button class="btn border border-primary">
                <a href="{{ url('/register') }}"> Register </a>
            </button>
            <button class="btn border border-primary">
                <a href="{{ url('/forgotPassword') }}"> Forgot Password? </a>
            </button>
        </div>
    </div>

    <div id="registertoast" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content ">
                <div class="modal-body" style="display: flex;">
                    <div class="text-center" id="regtoast">
                    </div>
                    <button type="button" onclick="close_modal()" class="close modal_close_button" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
            </div>
        </div>
    </div>
</div>



@include('layout.footer')
