@extends('user.layouts.app')

@push('styles')
    <style>
        /* new style add here */
        .password-form {
            order: none;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
            padding: 40px;
        }

        .password-form h3 {
            color: var(--blueDipColor);
        }

        .password-form p {}

        .password-form {
            margin: 100px auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group .form-control {
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
            font-family: var(--baseFont);
            font-weight: normal;
            font-size: 16px;
            line-height: 1;
            /* text-transform: capitalize; */
            padding: 20px 20px;
            width: 100%;
            border: 0;
            color: var(--blueColor);
        }
.password-form .btn.btn-primary{height: 50px;display: flex;justify-content: center;align-items: center;}
        .password-form .btn.btn-secondary {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            background-color: transparent !important;
            color: #002B10;
            -bs-btn-border-color: transparent;
            border-radius: 10px;
            border: 2px solid #002B10;
            font-size: 16px;
            font-weight: 400;
            margin-top: 5px;
            padding: 10px;
            text-transform: uppercase;
            /* font-family: 'palatino_linotypebold'; */
        }

        .password-form .btn.btn-secondary:hover {
            background-color: #000;
        }
        @media(max-width:991px){
            .password-form .btn.btn-secondary,
            .password-form .btn.btn-primary{font-size: 14px;height: 40px;}
        
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush

@section('body_class', 'set-password-page')

@section('content')
    <div class="password-form col-md-4">
        <h3 class="form-title text-center">Set Your Password</h3>
        <p class="form-text text-muted text-center mt-3">Set your password for hassle-free future logins, or skip for now.</p>

        <form action="{{route('user.setPasswordSubmit')}}" method="POST">
            @csrf
            <div class="form-group">

                <input type="password" class="form-control" id="new-password" name="new_password" required
                    placeholder="Enter new password">
            </div>

            <div class="form-group">

                <input type="password" class="form-control" id="confirm-password" name="confirm_password" required
                    placeholder="Confirm new password">
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">Set Password</button>
                <a href="{{route('user.dashboard')}}" class="btn btn-secondary" style="border-radius: 100px;">Skip For Now</a>
            </div>

            <!-- Optional: Add some password strength hints -->
            <div class="form-text text-muted text-center mt-3">
                Use at least 8 characters with a mix of letters, numbers, and symbols.
            </div>
        </form>
    </div>
@endsection
    
@push('scripts')
    <script>
        let countdownTimer;
        let timeLeft = 10; // 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 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
                });
        }

        // 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);
                    });
            });
        });

        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();
        }

        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.');
                    }
                });
            }
        });
    </script>
@endpush