@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')

<style>

	.user-form-content {
		max-width: 100% !important;
		border: 1px solid #dbdbdb;
	}

	/* Gautam starting change old css code */
	div#msgSubmit {
		font-size: 15px;
		font-weight: 400;
		text-align: start;
		margin: 0;
	}
	/* Gautam ending change old css code */
	.bg-color{
		background-color: #f8f8fb;
	}
	.login-box{
		background-color: #fff;
		border-radius: 1.5rem;
		padding: 3.5rem 4rem;
		/* width: 50%; */
		margin: 0 auto;
	}
	.row {
		justify-content: center;
	}
	.avatar-md {
		height: 4.5rem;
		width: 4.5rem;
	}
	.avatar-title {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-color: #556ee6;
		color: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		font-weight: 500;
		height: 100%;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
	}
	.default-btn,
	.form-control{
		border-radius: 0.6rem;
	}
	i.text-primary{
		color: #023E8A !important;
	}

	.form-label {
		margin-bottom: 0.3rem;
		font-weight: 500;
		font-size: 18px;
		color: #213438;
		font-size: 24px;
		margin-bottom: 20px;
    	font-weight: 700;
	}

	@media (max-width:1199px) {
        .setYMargin{
            margin: 0 !important;
        }
    }

	@media (max-width:991px) {
		.login-box{
			padding: 2.5rem 4rem;
		}
		.mb-5{
			margin-bottom: 2rem!important;
		}
	}
	@media (max-width: 768px) {
		.imageSection {
			display: none !important;
		}
	}
	@media (max-width:680px) {
		.login-box{
			padding: 2rem 2.5rem;
		}
		.mb-5{
			margin-bottom: 1.5rem!important;
		}
	}
	@media (max-width:640px) {
        .setYMargin{
            padding: 10px !important;
        }
    }
</style>

<div class="page-title-area">
	<div class="container">
		<div class="page-title-content">
			<h2>Login</h2>
			<ul>
				<li><a href="{{ route('home.page') }}">Home</a></li>
				<li class="active">Login</li>
			</ul>
		</div>
	</div>

	<img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
	<img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<div class="bg-color">
	<div class="container p-5 text-center">
			<div class="login-form">
				{{-- Gautam starting changing and committing old code --}}
                <form id="login">
                    @csrf
                    <div class="user-form-content p-4">
                        <div class="row" style="align-items: center;">
                            <div class="col-6 p-4 imageSection">
                                <img src="{{ asset('assets/images/agent_login_vector.svg') }}" alt="">
                            </div>
                            <div class="col-6 p-4 my-5 setYMargin" style="display: grid;">
                                <div class="form-group text-start">
                                    <center><label for="agent_code" class="form-label">Make Agent Life Easy</label></center>
                                    <input type="text" name="agent_code" id="agent_code" class="form-control"
                                        placeholder="Enter Email or Mobile or Agent Code" required>
                                    <div class="invalid-feedback mobileErrors" style="display: none;"></div>
                                </div>

                                <button type="submit" class="default-btn w-100 mt-3 justify-content-center">Login</button>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="row">
						<div class="col-lg-8 col-sm-8">
							<div class="form-group mb-4">
								<div class="help-block with-errors"></div>
							</div>
						</div>
						<div class="col-lg-12 text-center"><div id="msgSubmit" class="h3 text-center hidden"></div></div>
					</div>  --}}
                </form>
                {{-- Gautam ending changing and committing old code --}}
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var ajaxLoginURL="{{route('agent.login.all.process')}}";

		// Gautam add New code
        const loginForm = document.getElementById('login');
        const agentCodeInput = document.getElementById('agent_code');
        const errorElement = document.querySelector('.mobileErrors');

        let lastErrorType = ''; // track the last shown error type

        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const agentCode = agentCodeInput.value.trim();

            // Clear previous error states
            hideError();

            // Check if empty
            if (!agentCode) {
                showError("Did you fill in the form properly?");
                lastErrorType = "empty";
                return;
            }

            // Make AJAX request
            fetch(ajaxLoginURL, {
                    method: 'POST',
                    body: new FormData(loginForm),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 1) {
                        // Redirect — no need to reset form here
                        window.location.href = data.url;
                    } else {
                        if (data.msg) {
                            showError(data.msg);
                        } else {
                            console.warn("No error message received from server.");
                        }
                        lastErrorType = "invalid";
                    }
                })
                .catch(() => {
                    showError("An error occurred. Please try again.");
                    lastErrorType = "error";
                });
        });

        // Real-time error removal when typing
        agentCodeInput.addEventListener('input', function() {
            const value = this.value.trim();

            if (value === '') {
                hideError();
                lastErrorType = '';
            } else {
                // Valid input — hide error unless last error was from server
                if (lastErrorType !== 'invalid') {
                    hideError();
                    lastErrorType = '';
                }
            }
        });

        // Show error with red border + icon if Bootstrap used
        function showError(message) {
            agentCodeInput.classList.add('is-invalid');
            errorElement.innerHTML = message;
            errorElement.style.display = 'block';
        }

        function hideError() {
            agentCodeInput.classList.remove('is-invalid');
            errorElement.style.display = 'none';
            errorElement.innerHTML = '';
        }

        // Optional: Clear form + error when returning back to login (like via browser back button)
        window.addEventListener('pageshow', function() {
            loginForm.reset();
            hideError();
        });
        // Gautam end New code
	</script>
	<!-- Links of JS File -->
	<script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
	<script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
	<script src="{{ asset('rassets/js/meanmenu.min.js') }}"></script>
	<script src="{{ asset('rassets/js/owl.carousel.min.js') }}"></script>
	<script src="{{ asset('rassets/js/carousel-thumbs.min.js') }}"></script>
	<script src="{{ asset('rassets/js/aos.min.js') }}"></script>
	<script src="{{ asset('rassets/js/appear.min.js') }}"></script>
	<script src="{{ asset('rassets/js/odometer.min.js') }}"></script>
	<script src="{{ asset('rassets/js/magnific-popup.min.js') }}"></script>
	<script src="{{ asset('rassets/js/tween-max.min.js') }}"></script>
	<script src="{{ asset('rassets/js/form-validator.min.js') }}"></script>
	<script src="{{ asset('rassets/js/login-script.js') }}"></script>
	<script src="{{ asset('rassets/js/ajaxchimp.min.js') }}"></script>
	<script src="{{ asset('rassets/js/custom.js') }}"></script>
	<script>
		function checkWidth() {
			if ($(window).width() <= 768) {
				$('.setYMargin').removeClass('col-6').addClass('col-12');
			} else {
				$('.setYMargin').removeClass('col-12').addClass('col-6');
			}
		}

		checkWidth();

		$("#tab_login").addClass("hightlight-tab");
	</script>
</section>

@endsection