@extends('doctor.layouts.authapp')

@section('content')
<style>.show-hide {
    position: absolute;
    right: 20px;
    top: 27px;
    transform: translateY(-50%);
}</style>
<div class="container">
        <div class="align-items-center d-flex justify-content-center vh-100">
            <div class="register-page">
                <a class="logo text-center d-block mb-3" href="{{url('doctor/login')}}"><img src="{{ asset('assets/images/logo/logo.png') }}"></a>
                <h4 class="text-center">Let’s Login with Password.</h4>
                <p class="text-center">Enter your Password.</p>
                <form class="default-form-wrap" action="{{ route('doctor.loginwithpin') }}" method="POST">
        @csrf
        <input type="hidden" name="mobileno" value="{{ session('mobileno') }}">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="single-input-wrap">
                                <label><img src="{{ asset('frontend/assets/img/icon/profile.svg') }}" alt="img"></label>
                                <input type="password" id="password" name="password" class="form-control" required  placeholder="Enter Password">
                                <div class="show-hide" onclick="togglePassword()">
            <span >👁</span>
        </div>
                            </div>
                            @error('password')
                <div class="text-danger">{{ $message }}</div>
            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-base w-100">Login</button>
                        </div>
                    </div>


                </form>
                <div class="row">
                        <div class="col-md-12">
                    <a class="flogo text-center mt-4" href="{{url('doctor/login')}}"><img src="{{ asset('assets/images/logo/corona-logo.png') }}"></a>
                    </div>
                    </div>
            </div>           
        </div>
    </div>
@endsection
@section('footers')
<script>
function togglePassword() {
    var passwordField = document.getElementById("password");
    var toggleIcon = document.querySelector(".show-hide span");

    if (passwordField.type === "password") {
        passwordField.type = "text";
        toggleIcon.innerHTML = "🙈"; // Change icon to indicate it's visible
    } else {
        passwordField.type = "password";
        toggleIcon.innerHTML = "👁"; // Change icon back to hidden state
    }
}
</script>
@endsection