@extends('user.layouts.app')

@push('styles')
    <style>
        .resend-otp-link,
        .go-back-link {
            display: block;
            margin-top: 10px;
            color: #002B10;
            /* Green color (adjust based on your project's green) */
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            font-size: 16px;
        }

        .resend-otp-link:hover,
        .go-back-link:hover {
            text-decoration: underline;
        }
        .my-div {
            display: inline-block;
            overflow: hidden;
            width: 300px;   /* note the embedded iframe is 302x76 */
            height: 74px;
            text-align: left;
        }

        .my-div iframe {
            position: relative;
            left: -1px;
            top: -1px;
        }
        .terms-conditions-wrapper {
            margin-bottom: 20px;
            text-align: left;
            display: flex;
            align-items: flex-start;
        }

        .terms-conditions-wrapper input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin-right: 10px;
            cursor: pointer;
            accent-color: #002B10;
            flex-shrink: 0;
            margin-top: 5px;
        }

        .login-options-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .keep-login-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #002B10;
        }

        .keep-login-wrapper input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #002B10;
        }

        @media(max-width:575px){
            .terms-conditions-wrapper input[type="checkbox"]{margin-top: 3px;}
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush

@section('body_class', 'login-page')

@section('content')
    <!-- Login Area -->
    <div class="container login-wrapper d-flex align-items-center justify-content-center">
        <div class="row w-100 justify-content-center">
            <div class="member-login-box">
                <div class="row g-0 login-card">

                    <!-- Display error or success messages -->
                    {{--
                    @if(session('error'))
                        <div id="errorMessage"
                            style="color: #ff4d4d; background-color: #ffe6e6; padding: 5px; margin-bottom: 16px; border-radius: 4px; font-size: 14px; font-weight: bold;">
                            {{ session('error') }}
                        </div>
                    @endif

                    @if(session('success'))
                        <div id="successMessage"
                            style="color: #28a745; background-color: #e6ffe6; padding: 5px; margin-bottom: 16px; border-radius: 4px; font-size: 14px; font-weight: bold;">
                            {{ session('success') }}
                        </div>
                    @endif
                    --}}

                    <!-- Login Form Side -->
                    <div class="col-md-12 login-show-box">
                        <div class="member-login">
                            <div class="padlock">
                                <div class="padlock-icon">
                                    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                                        <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                                        <style>
                                        .s0 { fill: #ffffff } 
                                        </style>
                                        <g id="Objects">
                                        <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0" d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z"/>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="text-center">Member's Login</h3>
                            <!-- Tab Buttons -->
                            <ul class="nav nav-tabs" id="loginTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="otp-tab" data-bs-toggle="tab" data-bs-target="#otp"
                                        type="button" role="tab">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                stroke="#002B10" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path d="M15.9965 12H16.0054" stroke="#002B10" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M11.9945 12H12.0035" stroke="#002B10" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7.99451 12H8.00349" stroke="#002B10" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        Using OTP
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="password-tab" data-bs-toggle="tab"
                                        data-bs-target="#password" type="button" role="tab">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6 10V8C6 4.69 7 2 12 2C17 2 18 4.69 18 8V10" stroke="white"
                                                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path
                                                d="M17 22H7C3 22 2 21 2 17V15C2 11 3 10 7 10H17C21 10 22 11 22 15V17C22 21 21 22 17 22Z"
                                                stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path d="M15.9965 16H16.0054" stroke="white" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M11.9945 16H12.0035" stroke="white" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7.99451 16H8.00349" stroke="white" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        Using Password
                                    </button>
                                </li>
                            </ul>
                            <!-- Tab Content -->
                            <div class="tab-content" id="loginTabContent">
                                <!-- OTP Login -->
                                <div class="tab-pane fade show active" id="otp" role="tabpanel">
                                    <form action="{{ route('user.sendOTP') }}" method="POST">
                                        @csrf
                                        <div class="form-row box-focus">
                                            <label for="member_id">Membership Number</label>
                                            <input type="text" name="member_id" id="member_id" class="form-control membership-number-input"
                                                maxlength="8" inputmode="text" autocapitalize="characters"
                                                placeholder="" />
                                        </div>
                                        <div class="form-row box-focus">
                                            <label class="custom-select-label" for="m_type">Membership Type</label>
                                            <!-- <select name="m_type" id="m_type" required> -->
                                            <select name="m_type" class="custom-selectpicker" data-placeholder="Member Type" data-floating-label="true" id="m_type" required>
                                                <option value="" disabled hidden></option>
                                                <option value="{{ base64_encode('01') }}" selected>Primary</option>
                                                <option value="{{ base64_encode('02') }}">Spouse</option>
                                            </select>
                                        </div>
                                        <div class="login-options-row">
                                            <!-- <label class="keep-login-wrapper" for="remember_otp">
                                                <input type="checkbox" id="remember_otp" name="remember" value="1">
                                                Keep me logged in
                                            </label> -->
                                            <div class="terms-conditions-wrapper form-row green mb-0">
                                                <input type="checkbox" id="remember_otp" name="remember" value="1">
                                                <label for="remember_otp">Keep me logged in</label>
                                            </div>
                                        </div>
                                        <div class="terms-conditions-wrapper form-row green">
                                            <input type="checkbox" id="terms_otp" name="terms" required>
                                            <label class="green" for="terms_otp">I have read and agree to Tollygunge club <a href="{{ route('user.privacy_policy') }}" target="_blank">Privacy policy</a> and <a href="{{ route('user.terms_conditions') }}" target="_blank">Terms and Conditions</a></label>
                                        </div>
                                        <div class="login-btn-outer">
                                            <button type="button" class="btn btn-primary" id="getOtp"
                                                onclick="sendOtp()" disabled>Get OTP</button>
                                        </div>
                                    </form>
                                </div>

                                <!-- Password Login -->
                                <div class="tab-pane fade" id="password" role="tabpanel">
                                    <form action="{{ route('user.loginSubmit') }}" method="POST" id="passwordLoginForm">
                                        @csrf
                                        <div class="form-row box-focus">
                                            <label for="m_id">Membership Number</label>
                                            <input name="m_id" id="m_id" type="text" class="form-control membership-number-input"
                                                maxlength="8" inputmode="text" autocapitalize="characters"
                                                placeholder="" />
                                        </div>
                                        <div class="form-row box-focus">
                                            <label class="custom-select-label" for="member_type">Membership Type</label>
                                            <!-- <select name="member_type" id="member_type" required> -->
                                            <select name="member_type" class="custom-selectpicker" data-placeholder="Member Type" data-floating-label="true" id="member_type" >
                                                <option value="" disabled hidden></option>
                                                <option value="{{ base64_encode('01') }}" selected>Primary</option>
                                                <option value="{{ base64_encode('02') }}">Spouse</option>
                                            </select>
                                        </div>
                                        <div class="form-row box-focus">
                                            <label for="password-field">Password</label>
                                            <input name="password" type="password" class="form-control"
                                                id="password-field" placeholder="" />
                                            <span toggle="#password-field"
                                                class="field-icon toggle-password"></span>
                                        </div>
                                        <div class="login-options-row">
                                            <!-- <label class="keep-login-wrapper" for="remember_pass">
                                                <input type="checkbox" id="remember_pass" name="remember" value="1">
                                                Keep me logged in
                                            </label> -->
                                            <div class="terms-conditions-wrapper form-row green mb-0">
                                             <input type="checkbox" id="remember_pass" name="remember" value="1">
                                            <label for="remember_pass">Keep me logged in</label>
                                        </div>
                                            <div class="forget-password">
                                                <a href="javascript:void(0)" id="forgotPasswordAlert">Forgot password?</a>
                                            </div>
                                        </div>
                                        @if(session('login_attempts', 0) >= 3)
                                            <!-- Google reCAPTCHA -->
                                            <div class="form-row my-div">
                                                <div class="g-recaptcha"
                                                    data-sitekey="{{ config('services.recaptcha.key') }}"></div>
                                                @error('g-recaptcha-response')
                                                    <div class="error" style="color: red; font-size: 14px; padding: 2px;">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        @endif
                                        <div class="terms-conditions-wrapper form-row green">
                                            <input type="checkbox" id="terms_pass" name="terms" required>
                                            <label class="green" for="terms_pass">I have read and agree to Tollygunge club <a href="{{ route('user.privacy_policy') }}" target="_blank">Privacy policy</a> and <a href="{{ route('user.terms_conditions') }}" target="_blank">Terms and Conditions</a></label>
                                        </div>
                                        <div class="login-btn-outer">
                                            <button type="submit" id="loginPassBtn" class="btn btn-primary" disabled>Login</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="get-otp-outer hideOtp">
                            <h3 class="text-center">Verification Code</h3>
                            <div class="sub-text">
                                <p id="otpDeliveryMessage">Please enter the verification code we sent to your registered contact details.</p>
                            </div>
                            <form action="{{ route('user.loginOtp') }}" method="POST" id="otpVerificationForm"
                                class="digit-group-form" data-group-name="digits" data-autosubmit="false"
                                autocomplete="off">
                                @csrf
                                <div class="digit-group-section">
                                    <input type="text" id="digit-1" name="digit-1" inputmode="numeric" maxlength="1" data-next="digit-2" />
                                    <input type="text" id="digit-2" name="digit-2" inputmode="numeric" maxlength="1" data-next="digit-3"
                                        data-previous="digit-1" />
                                    <input type="text" id="digit-3" name="digit-3" inputmode="numeric" maxlength="1" data-next="digit-4"
                                        data-previous="digit-2" />
                                    <input type="text" id="digit-4" name="digit-4" inputmode="numeric" maxlength="1" data-next="digit-5"
                                        data-previous="digit-3" />
                                    <input type="text" id="digit-5" name="digit-5" inputmode="numeric" maxlength="1" data-next="digit-6"
                                        data-previous="digit-4" />
                                    <!-- <input type="text" id="digit-6" name="digit-6" data-previous="digit-5" /> -->
                                </div>
                                <div id="timer" class="timer">Resend in <strong>00:10</strong></div>
                                <!-- Resend OTP link, initially hidden and centered -->
                                <a href="javascript:void(0)" id="resendOtpLink" class="resend-otp-link"
                                    style="display: none;" onclick="resendOtp()">Resend OTP</a>
                                <div class="login-btn-outer">
                                    <button type="submit" class="btn btn-primary">Login</button>
                                </div>
                                <a href="javascript:window.location.reload();" class="go-back-link">Go Back</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
    
@push('scripts')
    <script>
        let countdownTimer;
        let timeLeft = 20; // Set initial countdown time in seconds

        // Function to update the countdown every second
        function startCountdown() {
            countdownTimer = setInterval(function () {
                timeLeft--;
                document.getElementById('timer').innerHTML = `Resend in <strong>00:${timeLeft < 10 ? '0' + timeLeft : timeLeft}</strong>`;

                if (timeLeft <= 0) {
                    clearInterval(countdownTimer); // Stop the countdown
                    document.getElementById('timer').innerHTML = 'You can now request a new OTP.';
                    // Show the Resend OTP link
                    document.getElementById('resendOtpLink').style.display = 'block';
                    // Enable the "Resend OTP" button or show a message here
                    // Example: show the resend button if you have one
                }
            }, 1000); // Update every second
        }

        // Function to handle OTP resend
        // function resendOtp() {
        //     // Resend the OTP via AJAX or any other method
        //     let memberId = document.getElementById('member_id').value;
        //     let memberType = document.getElementById('m_type').value;
        //     let resendOtpLink = document.getElementById('resendOtpLink');

        //     if (!memberId || !memberType) {
        //         alert('Please enter Member ID and select Member Type.');
        //         return;
        //     }

        //     // Disable the link and change text temporarily
        //     resendOtpLink.innerText = 'Sending...';
        //     resendOtpLink.style.pointerEvents = 'none';

        //      // Determine if we are in the local environment
        //      const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

        //     // Determine the protocol (http or https)
        //     const protocol = window.location.protocol; // Returns 'http:' or 'https:'

        //     // Define the API URL based on the environment
        //     const apiUrl = isLocal 
        //         ? `${protocol}//localhost:8000/sendOTP`  // Local API (adjust port if needed)
        //         : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/sendOTP`;  // Production API

        //     // Make AJAX request to resend OTP
        //     fetch(apiUrl, {
        //         method: 'POST',
        //         headers: {
        //             'Content-Type': 'application/json',
        //             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        //         },
        //         body: JSON.stringify({
        //             member_id: memberId,
        //             m_type: memberType
        //         })
        //     })
        //         .then(response => response.json())
        //         .then(data => {
        //             if (data.status === 'success') {
        //                 alert(data.message);
        //                 // Start the countdown again
        //                 timeLeft = 10;
        //                 startCountdown();
        //                 // Hide the Resend OTP link and show timer again
        //                 document.getElementById('resendOtpLink').style.display = 'none';
        //                 clearOtpFields(); // Clear OTP fields
        //             } else {
        //                 alert(data.message);
        //             }
        //         })
        //         .catch(error => {
        //             console.error('Error:', error);
        //             alert('An error occurred while sending OTP.');
        //         })
        //         .finally(() => {
        //             // Re-enable the link and reset text
        //             resendOtpLink.innerText = 'Resend OTP';
        //             resendOtpLink.style.pointerEvents = 'auto';
        //         });
        // }
        function resendOtp() {
            let memberId = formatMembershipNumber(document.getElementById('member_id').value);
            let memberType = document.getElementById('m_type').value;
            let resendOtpLink = document.getElementById('resendOtpLink');
            let rememberOtp = document.getElementById('remember_otp')?.checked;

            document.getElementById('member_id').value = memberId;

            if (!memberId || !memberType) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Info',
                    text: 'Please enter Member ID and select Member Type.',
                    buttonsStyling: false,
                    customClass: { confirmButton: 'my-confirm-btn' }
                });
                return;
            }

            // Disable the link temporarily
            resendOtpLink.innerText = 'Sending...';
            resendOtpLink.style.pointerEvents = 'none';

            const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
            const protocol = window.location.protocol;
            const apiUrl = isLocal
                ? `${protocol}//localhost:8000/sendOTP`
                : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/sendOTP`;

            fetch("{{route('user.sendOTP')}}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: JSON.stringify({
                    member_id: memberId,
                    m_type: memberType,
                    remember: rememberOtp ? 1 : 0
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    const otpChannelTitle = getOtpChannelTitle(data.sent_via);
                    updateOtpDeliveryMessage(data.delivery_message || data.message);

                    Swal.fire({
                        icon: 'success',
                        title: otpChannelTitle,
                        text: data.delivery_message || data.message,
                        buttonsStyling: false,
                        customClass: { confirmButton: 'my-confirm-btn' }
                    });

                    // Reset OTP fields and countdown
                    timeLeft = 20;
                    startCountdown();
                    document.getElementById('resendOtpLink').style.display = 'none';
                    clearOtpFields();

                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message,
                        buttonsStyling: false,
                        customClass: { confirmButton: 'my-confirm-btn' }
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Server Error',
                    text: 'An error occurred while sending OTP.',
                    buttonsStyling: false,
                    customClass: { confirmButton: 'my-confirm-btn' }
                });
            })
            .finally(() => {
                // Re-enable the link and reset text
                resendOtpLink.innerText = 'Resend OTP';
                resendOtpLink.style.pointerEvents = 'auto';
            });
        }

        // Function to handle OTP send logic
        // function sendOtp() {
        //     // Validate if Member ID and Member Type are filled
        //     let memberId = document.getElementById('member_id').value;
        //     let memberType = document.getElementById('m_type').value;
        //     let sendOtpBtn = document.getElementById('getOtp');
        //     // let loader = document.getElementById('loader'); // Assuming you have a loader element

        //     if (!memberId || !memberType) {
        //         // alert(memberId);
        //         // alert(memberType);
        //         alert('Please enter Member Number and select Member Type.');
        //         return;
        //     }

        //     // Disable the "Send OTP" button and show the loader
        //     sendOtpBtn.disabled = true;
        //     sendOtpBtn.innerText = 'Sending...'; // Change button text temporarily
        //     // loader.style.display = 'inline'; // Show loader

        //     // Determine if we are in the local environment
        //     const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

        //     // Determine the protocol (http or https)
        //     const protocol = window.location.protocol; // Returns 'http:' or 'https:'

        //     // Define the API URL based on the environment
        //     const apiUrl = isLocal 
        //         ? `${protocol}//localhost:8000/sendOTP`  // Local API (adjust port if needed)
        //         : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/sendOTP`;  // Production API

        //     // Make AJAX request to send OTP
        //     fetch(apiUrl, {
        //         method: 'POST',
        //         headers: {
        //             'Content-Type': 'application/json',
        //             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        //         },
        //         body: JSON.stringify({
        //             member_id: memberId,
        //             m_type: memberType
        //         })
        //     })
        //         .then(response => response.json())
        //         .then(data => {
        //             if (data.status === 'success') {
        //                 // Display success message
        //                 alert(data.message);

        //                 // Display OTP verification form after OTP is sent
        //                 // document.getElementById('otpLoginForm').style.display = 'none';
        //                 // document.getElementById('otpVerificationForm').style.display = 'block';

        //                 // Using querySelector to select the first element with the class 'otpLoginForm'
        //                 document.querySelector('.member-login').classList.add('hideMember');

        //                 // Using querySelector to select the first element with the class 'otpVerificationForm'
        //                 document.querySelector('.get-otp-outer').classList.remove('hideOtp');

        //                 startCountdown();

        //             } else if (data.status === 'error') {
        //                 // Display success message
        //                 alert(data.message);

        //                 // Display OTP verification form after OTP is sent
        //                 // document.getElementById('otpLoginForm').style.display = 'none';
        //                 // document.getElementById('otpVerificationForm').style.display = 'block';
        //             } else {
        //                 alert('Error sending OTP.');
        //             }
        //         })
        //         .catch(error => {
        //             console.error('Error:', error);
        //             alert('An error occurred while sending OTP.');
        //         })
        //         .finally(() => {
        //             // Re-enable the "Send OTP" button and hide the loader
        //             sendOtpBtn.disabled = false;
        //             sendOtpBtn.innerText = 'Send OTP'; // Reset button text
        //             // loader.style.display = 'none'; // Hide loader
        //         });
        // }
        function sendOtp() {
            let memberId = formatMembershipNumber(document.getElementById('member_id').value);
            let memberType = document.getElementById('m_type').value;
            let sendOtpBtn = document.getElementById('getOtp');
            let rememberOtp = document.getElementById('remember_otp')?.checked;

            document.getElementById('member_id').value = memberId;

            if (!memberId || !memberType) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter a valid membership number and select membership type.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // Disable button while sending
            sendOtpBtn.disabled = true;
            sendOtpBtn.innerText = 'Sending...';

            // const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
            // const protocol = window.location.protocol;
            // const apiUrl = isLocal 
            //     ? `${protocol}//localhost:8000/sendOTP`
            //     : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/sendOTP`;

            // fetch(apiUrl, {
            fetch("{{route('user.sendOTP')}}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: JSON.stringify({
                    member_id: memberId,
                    m_type: memberType,
                    remember: rememberOtp ? 1 : 0
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    const otpChannelTitle = getOtpChannelTitle(data.sent_via);
                    updateOtpDeliveryMessage(data.delivery_message || data.message);

                    Swal.fire({
                        icon: 'success',
                        title: otpChannelTitle,
                        text: data.delivery_message || data.message,
                        confirmButtonText: 'OK'
                    });

                    document.querySelector('.member-login').classList.add('hideMember');
                    document.querySelector('.get-otp-outer').classList.remove('hideOtp');
                    startCountdown();

                } else if (data.status === 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message,
                        confirmButtonText: 'Try Again'
                    });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Unexpected',
                        text: 'Error sending OTP.',
                        confirmButtonText: 'Close'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Server Error',
                    text: 'An error occurred while sending OTP.',
                    confirmButtonText: 'OK'
                });
            })
            .finally(() => {
                sendOtpBtn.disabled = false;
                sendOtpBtn.innerText = 'Send OTP';
            });
        }

        function getOtpChannelTitle(sentVia) {
            if (sentVia?.sms && sentVia?.email) {
                return 'OTP Sent to SMS and Email';
            }

            if (sentVia?.sms) {
                return 'OTP Sent to Phone';
            }

            if (sentVia?.email) {
                return 'OTP Sent to Email';
            }

            return 'OTP Sent';
        }

        function updateOtpDeliveryMessage(message) {
            const otpDeliveryMessage = document.getElementById('otpDeliveryMessage');
            if (otpDeliveryMessage && message) {
                otpDeliveryMessage.textContent = message;
            }
        }

        // Add the event listener to handle form submission
        // document.addEventListener('DOMContentLoaded', function () {
        //     // Handle OTP verification form submission
        //     document.getElementById('otpVerificationForm').addEventListener('submit', function (e) {
        //         e.preventDefault(); // Prevent form from submitting normally

        //         // Get OTP values from the input fields
        //         var otp1 = document.getElementById('digit-1').value;
        //         var otp2 = document.getElementById('digit-2').value;
        //         var otp3 = document.getElementById('digit-3').value;
        //         var otp4 = document.getElementById('digit-4').value;
        //         var otp5 = document.getElementById('digit-5').value;

        //         // Combine OTP fields into a single string
        //         var otp = otp1 + otp2 + otp3 + otp4 + otp5;

        //         // Prepare the data for the AJAX request
        //         var data = new FormData();
        //         data.append('otp', otp);
        //         data.append('_token', '{{ csrf_token() }}'); // Laravel CSRF token

        //         // Determine if we are in the local environment
        //         const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

        //         // Determine the protocol (http or https)
        //         const protocol = window.location.protocol; // Returns 'http:' or 'https:'

        //         // Define the API URL based on the environment
        //         const apiUrl = isLocal 
        //             ? `${protocol}//localhost:8000/loginOtp`  // Local API (adjust port if needed)
        //             : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/loginOtp`;  // Production API

        //         // Make the AJAX request using Fetch API
        //         fetch(apiUrl, {
        //             method: 'POST',
        //             body: data
        //         })
        //             .then(response => response.json()) // Parse the JSON response
        //             .then(result => {
        //                 if (result.status === 'success') {
        //                     // Handle successful OTP verification
        //                     alert('OTP verified successfully!');
        //                     // window.location.href = '/setPassword'; // Redirect after success
        //                     // Check the 'redirect_to' field in the response and redirect accordingly
        //                     if (result.redirect_to) {
        //                         window.location.href = result.redirect_to; // Redirect to the appropriate page
        //                     }
        //                 } else if (result.status === 'error') {
        //                     // Handle error response
        //                     alert(result.message);
        //                     clearOtpFields(); // Clear OTP fields
        //                 } else {
        //                     // Handle any other response
        //                     alert(result.message);
        //                     window.location.href = '/login'; // Redirect after error
        //                 }
        //             })
        //             .catch(error => {
        //                 // Handle AJAX error
        //                 alert('Error: ' + error);
        //             });
        //     });
        // });
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('otpVerificationForm').addEventListener('submit', function (e) {
                e.preventDefault();

                // Get OTP values
                var otp = '';
                for (let i = 1; i <= 5; i++) {
                    otp += document.getElementById('digit-' + i).value;
                }

                // Prepare data
                var data = new FormData();
                data.append('otp', otp);
                data.append('_token', '{{ csrf_token() }}');

                // Environment detection
                const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
                const protocol = window.location.protocol;
                const apiUrl = isLocal
                    ? `${protocol}//localhost:8000/loginOtp`
                    : `${protocol}//tollyclubdev.nodejsdapldevelopments.com/loginOtp`;

                // Fetch
                fetch("{{ route('user.loginOtp') }}", {
                    method: 'POST',
                    body: data
                })
                .then(response => response.json())
                .then(result => {
                    if (result.status === 'success') {
                        // Swal.fire({
                        //     icon: 'success',
                        //     title: 'Success',
                        //     text: 'OTP verified successfully!',
                        //     buttonsStyling: false,
                        //     customClass: {
                        //         confirmButton: 'my-confirm-btn'
                        //     }
                        // }).then(() => {
                        //     if (result.redirect_to) {
                        //         window.location.href = result.redirect_to;
                        //     }
                        // });

                        if (result.redirect_to) {
                            window.location.href = result.redirect_to;
                        }

                    } else if (result.status === 'error') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.message,
                            buttonsStyling: false,
                            customClass: {
                                confirmButton: 'my-confirm-btn'
                            }
                        });
                        // clearOtpFields();

                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Unexpected',
                            text: result.message || 'Something went wrong!',
                            buttonsStyling: false,
                            customClass: {
                                confirmButton: 'my-confirm-btn'
                            }
                        }).then(() => {
                            window.location.href = '/login';
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: 'Error: ' + error,
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'my-confirm-btn'
                        }
                    });
                });
            });
        });

        function clearOtpFields() {
            // Clear each OTP input field
            document.getElementById('digit-1').value = '';
            document.getElementById('digit-2').value = '';
            document.getElementById('digit-3').value = '';
            document.getElementById('digit-4').value = '';
            document.getElementById('digit-5').value = '';
            // Optionally, you can focus on the first input field after clearing
            document.getElementById('digit-1').focus();
        }

        function formatMembershipNumber(value) {
            return (value || '').toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 8);
        }

        function getOtpValue() {
            let otp = '';
            for (let i = 1; i <= 5; i++) {
                otp += (document.getElementById('digit-' + i)?.value || '');
            }
            return otp;
        }

        function isOtpComplete() {
            return getOtpValue().length === 5;
        }

        // document.addEventListener('DOMContentLoaded', function() {
        //     const loginForm = document.querySelector('form[action="{{route("user.loginSubmit")}}"]');
        //     if (loginForm) {
        //         loginForm.addEventListener('submit', function(event) {
        //             if (grecaptcha.getResponse().length === 0) {
        //                 event.preventDefault(); // Prevent form submission
        //                 alert('Please verify that you are not a robot.');
        //             }
        //         });
        //     }
        // });
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.membership-number-input').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.value = formatMembershipNumber(this.value);
                });

                input.addEventListener('blur', function() {
                    this.value = formatMembershipNumber(this.value.trim());
                });
            });

            function setLoginButtonLoadingState(isLoading) {
                const loginPassBtn = document.getElementById('loginPassBtn');
                if (!loginPassBtn) return;

                if (isLoading) {
                    loginPassBtn.disabled = true;
                    loginPassBtn.dataset.originalText = loginPassBtn.dataset.originalText || loginPassBtn.innerText;
                    loginPassBtn.innerText = 'Please wait...';
                } else {
                    loginPassBtn.innerText = loginPassBtn.dataset.originalText || 'Login';
                    loginPassBtn.disabled = false;
                }
            }

            @if(session('error'))
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: @json(session('error')),
                    confirmButtonText: 'OK'
                });
            @endif

            @if(session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: @json(session('success')),
                    confirmButtonText: 'OK'
                });
            @endif

            const forgotPasswordLink = document.getElementById('forgotPasswordAlert');
            if (forgotPasswordLink) {
                forgotPasswordLink.addEventListener('click', function (e) {
                    e.preventDefault();

                    Swal.fire({
                        icon: 'info',
                        title: 'Please use OTP login',
                        // text: 'Please try login using OTP. After that you can set your password.',
                        text: 'Please log in using the OTP option and then set your password from your profile settings.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const otpTabTrigger = document.getElementById('otp-tab');
                            if (otpTabTrigger) {
                                bootstrap.Tab.getOrCreateInstance(otpTabTrigger).show();
                            }
                        }
                    });
                });
            }

            const loginForm = document.querySelector('form[action="{{route("user.loginSubmit")}}"]');
            if (loginForm) {
                loginForm.addEventListener('submit', function(event) {
                    setLoginButtonLoadingState(true);

                    if (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse().length === 0) {
                        event.preventDefault(); // Stop form submit
                        // setLoginButtonLoadingState(false);

                        Swal.fire({
                            icon: 'warning',
                            title: 'reCAPTCHA Required',
                            text: 'Please verify that you are not a robot.',
                            buttonsStyling: false,
                            customClass: {
                                confirmButton: 'my-confirm-btn'
                            }
                        }).then(() => {
                            setLoginButtonLoadingState(false);
                        });
                        return;
                    }

                    // setLoginButtonLoadingState(true);
                });
            }

            const termsOtp = document.getElementById('terms_otp');
            const getOtpBtn = document.getElementById('getOtp');
            const termsPass = document.getElementById('terms_pass');
            const loginPassBtn = document.getElementById('loginPassBtn');

            if(termsOtp && getOtpBtn) {
                termsOtp.addEventListener('change', function() {
                    getOtpBtn.disabled = !this.checked;
                });
            }

            if(termsPass && loginPassBtn) {
                termsPass.addEventListener('change', function() {
                    loginPassBtn.disabled = !this.checked;
                });
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
        const otpInputs = Array.from(document.querySelectorAll('#otpVerificationForm .digit-group-section input'));
        const otpVerificationForm = document.getElementById('otpVerificationForm');

        otpInputs.forEach((input) => {
            input.addEventListener('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 1);

                if (this.value && this.dataset.next) {
                    document.getElementById(this.dataset.next)?.focus();
                }

                if (isOtpComplete()) {
                    otpVerificationForm?.requestSubmit();
                }
            });

            input.addEventListener('keydown', function (e) {
                if (e.key === 'Backspace' && !this.value && this.dataset.previous) {
                    document.getElementById(this.dataset.previous)?.focus();
                }
            });

            input.addEventListener('paste', function (e) {
                e.preventDefault();

                const pastedValue = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 5);
                if (!pastedValue) {
                    return;
                }

                otpInputs.forEach((field, index) => {
                    field.value = pastedValue[index] || '';
                });

                if (pastedValue.length === otpInputs.length) {
                    otpVerificationForm?.requestSubmit();
                    return;
                }

                otpInputs[Math.max(pastedValue.length - 1, 0)]?.focus();
            });
        });

        const form = document.getElementById('passwordLoginForm');
        form.addEventListener('submit', function (e) {
            const memberType = document.getElementById('member_type').value;
            const memberNumberInput = document.getElementById('m_id');
            const memberNumber = formatMembershipNumber(memberNumberInput.value);
            const password = document.getElementById('password-field').value;
            const loginPassBtn = document.getElementById('loginPassBtn');

            memberNumberInput.value = memberNumber;

            if (!memberType || !memberNumber || !password) {
            e.preventDefault();
            if (loginPassBtn) {
                loginPassBtn.innerText = 'Login';
                loginPassBtn.disabled = false;
            }
            Swal.fire({
                icon: 'error',
                title: 'Missing Information',
                // text: 'Please fill Membership Number, Membership Type, Password.',
                text: 'Please enter a valid membership number, membership type & password.',
                buttonsStyling: false,
                customClass: { confirmButton: 'my-confirm-btn' }
            });
            return;
            }

            if (loginPassBtn) {
                loginPassBtn.dataset.originalText = loginPassBtn.dataset.originalText || 'Login';
                loginPassBtn.innerText = 'Please wait...';
                loginPassBtn.disabled = true;
            }
        });
        });

        document.addEventListener('DOMContentLoaded', function () {
            function syncMemberTypeFloatingLabel(selectId) {
                const select = document.getElementById(selectId);
                if (!select) return;

                const label = document.querySelector("label[for='" + selectId + "']");
                if (!label) return;

                if ((select.value || '').trim() !== '') {
                    label.classList.add('animate-label');
                } else {
                    label.classList.remove('animate-label');
                }
            }

            ['m_type', 'member_type'].forEach(function(selectId) {
                const select = document.getElementById(selectId);
                if (!select) return;

                syncMemberTypeFloatingLabel(selectId);

                select.addEventListener('change', function () {
                    syncMemberTypeFloatingLabel(selectId);
                });

                const wrapper = select.nextElementSibling;
                if (wrapper && wrapper.classList.contains('select-wrapper')) {
                    const display = wrapper.querySelector('.select-display');

                    if (display) {
                        display.addEventListener('click', function () {
                            const label = document.querySelector("label[for='" + selectId + "']");
                            if (label) {
                                label.classList.add('animate-label');
                            }
                        });
                    }
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const otpVerificationForm = document.getElementById('otpVerificationForm');
            if (!otpVerificationForm) {
                return;
            }

            otpVerificationForm.addEventListener('submit', function (e) {
                if (!isOtpComplete()) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Incomplete OTP',
                        text: 'Please fill the OTP properly.',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'my-confirm-btn'
                        }
                    });
                    return;
                }
            }, true);
        });
    </script>
@endpush