@extends('layouts.auth_layout')

@section('content')
<style>
    .otp-input {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        font-weight: bold;
        border: 2px solid #dee2e6;
        border-radius: 8px;
    }

    .otp-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .otp-input.filled {
        border-color: #198754;
        background-color: #f8f9fa;
    }

    .btn-disabled-countdown {
        position: relative;
        overflow: hidden;
    }

    .btn-disabled-countdown:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
</style>

<div class="auth-main">
    <div class="auth-wrapper v3">
        <div class="auth-form">
            <div class="card mb-5" id="loginCard">
                <div class="card-body">
                    <div class="text-center">
                        <img src="{{ asset('storage' . Config::get('file_paths')['SITE_ADMIN_PANEL_LOGO_PATH'].'/' . $siteSettings->admin_panel_logo) }}" alt="{{ $siteSettings->site_name }}" class="w-75">
                    </div>
                    <hr>
                    <div class="mb-3">
                        <h5 class="mb-0"><b>Login Here</b></h5>
                        <p class="text-secondary">
                            Enter your credentials to login
                        </p>
                    </div>
                    <form action="" id="loginForm" autocomplete="off">
                        @csrf
                        <div class="form-group mb-3">
                            <label class="form-label">Email Address or Mobile Number</label>
                            <input type="text" name="login_field" class="form-control" placeholder="Enter Email or Mobile Number">
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Password</label>
                            <input type="password" name="password" class="form-control" placeholder="Password">
                        </div>
                        <div class="form-group mb-3">
                            <div>
                                <div class="captcha mb-2" id="captcha">
                                    <span>{!! captcha_img() !!}</span>
                                    <button type="button" class="btn btn-secondary btn-refresh"><i class="fa fa-sync"></i></button>
                                </div>
                            </div>
                            <label class="form-label">Captcha</label>
                            <input type="text" class="form-control" name="captcha" placeholder="Enter Captcha">
                        </div>
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-primary fw-semibold">
                                <i class="fa fa-paper-plane"></i> Login
                            </button>
                        </div>
                    </form>

                </div>
            </div>

            <!-- OTP Verification Form -->
            <div class="card border-0 elevation-4 rounded-3 overflow-hidden" id="otpCard" style="display: none;">
                <div class="card-header bg-danger  py-3">
                    <h3 class="h6 mb-0 text-center text-uppercase text-white">
                        <i class="fa fa-shield-alt"></i> Two-Factor Authentication
                    </h3>
                </div>
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i>
                            <strong>Security Check</strong><br>
                            We've sent a 6-digit OTP to your registered email and mobile number for security.
                        </div>
                        <div id="contactInfo" class="small text-muted mb-3"></div>
                    </div>

                    <form action="" id="otpForm">
                        @csrf
                        <div class="form-group mb-4">
                            <label class="form-label text-center d-block">Enter 6-Digit OTP</label>
                            <div class="otp-input-container d-flex justify-content-center gap-2 mb-3">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="0">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="1">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="2">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="3">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="4">
                                <input type="text" class="form-control otp-input text-center" maxlength="1" data-index="5">
                            </div>
                            <input type="hidden" name="otp" id="otpValue">
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success fw-semibold">
                                <i class="fa fa-check"></i> Verify OTP
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-disabled-countdown" id="resendOtpBtn">
                                <i class="fa fa-refresh"></i> <span id="resendBtnText">Resend OTP</span>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="backToLoginBtn">
                                <i class="fa fa-arrow-left"></i> Back to Login
                            </button>
                        </div>
                    </form>

                    <!-- OTP Timer -->
                    <div class="text-center mt-3">
                        <small class="text-muted">
                            OTP expires in: <span id="otpTimer" class="fw-bold text-danger">10:00</span>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    let otpTimer;
    let otpTimeRemaining = 600; // 10 minutes in seconds
    let resendTimer;
    let resendTimeRemaining = 0;

    $(document).ready(function() {
        // Validate the login form
        $("#loginForm").validate({
            rules: {
                login_field: {
                    required: true,
                    minlength: 3
                },
                password: {
                    required: true,
                },
                captcha: {
                    required: true,
                }
            },
            messages: {
                login_field: {
                    required: "Please enter your email address or mobile number",
                    minlength: "Please enter at least 3 characters"
                },
                password: {
                    required: "Please enter your password"
                },
                captcha: {
                    required: "Please enter the captcha code"
                }
            },
            submitHandler: function(form, event) {
                event.preventDefault();
                performLogin();
            }
        });

        // Validate the OTP form
        $("#otpForm").validate({
            rules: {
                otp: {
                    required: true,
                    minlength: 6,
                    maxlength: 6
                }
            },
            messages: {
                otp: {
                    required: "Please enter the OTP",
                    minlength: "OTP must be 6 digits",
                    maxlength: "OTP must be 6 digits"
                }
            },
            submitHandler: function(form, event) {
                event.preventDefault();
                verifyOtp();
            }
        });

        // OTP input handling
        $('.otp-input').on('input', function() {
            let value = $(this).val();
            let index = parseInt($(this).data('index'));

            // Only allow numbers
            value = value.replace(/[^0-9]/g, '');
            $(this).val(value);

            if (value) {
                $(this).addClass('filled');
                // Move to next input
                if (index < 5) {
                    $('.otp-input[data-index="' + (index + 1) + '"]').focus();
                }
            } else {
                $(this).removeClass('filled');
            }

            updateOtpValue();
        });

        $('.otp-input').on('keydown', function(e) {
            let index = parseInt($(this).data('index'));

            // Handle backspace
            if (e.keyCode === 8 && !$(this).val() && index > 0) {
                $('.otp-input[data-index="' + (index - 1) + '"]').focus();
            }
        });

        // Back to login button
        $('#backToLoginBtn').click(function() {
            showLoginForm();
        });

        // Resend OTP button
        $('#resendOtpBtn').click(function() {
            if (!$(this).prop('disabled')) {
                resendOtp();
            }
        });

        // Refresh captcha on button click
        $('.btn-refresh').click(function() {
            refreshCaptcha();
        });

        // Dynamic placeholder for login field
        $('input[name="login_field"]').on('input', function() {
            var value = $(this).val();
            var isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
            var isMobile = /^[0-9]+$/.test(value);

            if (isEmail) {
                $(this).attr('placeholder', 'Enter Email Address');
            } else if (isMobile && value.length > 0) {
                $(this).attr('placeholder', 'Enter Mobile Number');
            } else {
                $(this).attr('placeholder', 'Enter Email or Mobile Number');
            }
        });
    });

    var encryptionKey = "{{ session()->get('encryption_key') }}";

    function performLogin() {
    const formData = new FormData(document.getElementById('loginForm'));
    const password = encryptPassword(formData.get('password'), encryptionKey);
    formData.set('password', password);

    $.ajax({
        url: "{{ route('login.check') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        beforeSend: function() {
            $('.site-loader').show();
        },
        success: function(response) {
            $('.site-loader').hide();

            let key = response.key;
            encryptionKey = key;

            if (response.status === "success") {
                toastr.success("Login successful! Redirecting...");
                setTimeout(() => {
                    window.location.href = response.redirect;
                }, 1000);
            } 
            else if (response.status === "otp_required") {
                if (response.csrf_token) {
                    $('#otpForm input[name="_token"]').val(response.csrf_token);
                }
                showOtpForm();
                toastr.info(response.message || "OTP sent to your registered contact.");
            } 
            else if (response.status === "concurrent_login") {
                handleConcurrentLogin(response);
            } 
            else {
                refreshCaptcha();
                toastr.error(response.message || "Login failed. Please check your credentials.");
            }
        },
        error: function(xhr) {
            $('.site-loader').hide();
            refreshCaptcha();

            let errorMessage = "An error occurred. Please try again.";
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }

            toastr.error(errorMessage);

            let key = xhr.responseJSON?.key;
            encryptionKey = key;
        }
    });
}

    function verifyOtp() {
    $.ajax({
        url: "{{ route('login.verify-otp') }}",
        type: "POST",
        data: $("#otpForm").serialize(),
        dataType: "json",
        beforeSend: function() {
            $('.site-loader').show();
        },
        success: function(response) {
            $('.site-loader').hide();

            if (response.status === "success") {
                toastr.success(response.message || "Login successful! Redirecting...");
                setTimeout(() => {
                    window.location.href = response.redirect[0].url;
                }, 2000); // Give time for toast to appear
            } else {
                clearOtpInputs();
                toastr.error(response.message || "OTP verification failed. Please try again.");
            }
        },
        error: function(xhr) {
            $('.site-loader').hide();
            clearOtpInputs();

            let errorMessage = "An error occurred. Please try again.";
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }

            toastr.error(errorMessage);
        }
    });
}

function resendOtp() {
    $.ajax({
        url: "{{ route('login.resend-otp') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}"
        },
        dataType: "json",
        beforeSend: function() {
            $('.site-loader').show();
        },
        success: function(response) {
            $('.site-loader').hide();

            if (response.status === "success") {
                clearOtpInputs();
                resetOtpTimer();
                startResendTimer(); // Start resend cooldown timer
                toastr.success(response.message || "OTP resent successfully!");
            } else {
                toastr.error(response.message || "Failed to resend OTP.");
            }
        },
        error: function(xhr) {
            $('.site-loader').hide();
            let errorMessage = "Failed to resend OTP. Please try again.";
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }

            toastr.error(errorMessage);
        }
    });
}

    function showOtpForm() {
        $('#loginCard').hide();
        $('#otpCard').show();
        // $('#contactInfo').html(
        //     '<div><i class="fa fa-envelope"></i> Email: ' + email + '</div>' +
        //     '<div><i class="fa fa-mobile-alt"></i> Mobile: ' + mobile + '</div>'
        // );
        $('.otp-input:first').focus();
        startOtpTimer();
        startResendTimer(); // Start resend timer when OTP form is shown
    }

    function showLoginForm() {
        $('#otpCard').hide();
        $('#loginCard').show();
        clearOtpInputs();
        stopOtpTimer();
        stopResendTimer();
        $("#loginForm")[0].reset();
        refreshCaptcha();
    }

    function updateOtpValue() {
        let otp = '';
        $('.otp-input').each(function() {
            otp += $(this).val();
        });
        $('#otpValue').val(otp);
    }

    function clearOtpInputs() {
        $('.otp-input').val('').removeClass('filled');
        $('#otpValue').val('');
    }

    function startOtpTimer() {
        otpTimeRemaining = 600; // Reset to 10 minutes
        updateTimerDisplay();

        otpTimer = setInterval(function() {
            otpTimeRemaining--;
            updateTimerDisplay();

            if (otpTimeRemaining <= 0) {
                stopOtpTimer();
                Swal.fire({
                    icon: "warning",
                    title: "OTP Expired",
                    text: "Your OTP has expired. Please request a new one.",
                    confirmButtonText: "Resend OTP"
                }).then((result) => {
                    if (result.isConfirmed) {
                        resendOtp();
                    }
                });
            }
        }, 1000);
    }

    function stopOtpTimer() {
        if (otpTimer) {
            clearInterval(otpTimer);
        }
    }

    function resetOtpTimer() {
        stopOtpTimer();
        startOtpTimer();
    }

    function updateTimerDisplay() {
        let minutes = Math.floor(otpTimeRemaining / 60);
        let seconds = otpTimeRemaining % 60;
        $('#otpTimer').text(
            minutes.toString().padStart(2, '0') + ':' +
            seconds.toString().padStart(2, '0')
        );
    }

    // Resend Timer Functions
    function startResendTimer() {
        resendTimeRemaining = 120; // 2 minutes in seconds
        updateResendTimerDisplay();

        // Disable the resend button
        $('#resendOtpBtn').prop('disabled', true);

        resendTimer = setInterval(function() {
            resendTimeRemaining--;
            updateResendTimerDisplay();

            if (resendTimeRemaining <= 0) {
                stopResendTimer();
                enableResendButton();
            }
        }, 1000);
    }

    function stopResendTimer() {
        if (resendTimer) {
            clearInterval(resendTimer);
            resendTimer = null;
        }
    }

    function updateResendTimerDisplay() {
        if (resendTimeRemaining > 0) {
            let minutes = Math.floor(resendTimeRemaining / 60);
            let seconds = resendTimeRemaining % 60;
            let timeString = minutes > 0 ?
                `${minutes}:${seconds.toString().padStart(2, '0')}` :
                `${seconds}s`;
            $('#resendBtnText').text(`Resend OTP (${timeString})`);
        } else {
            $('#resendBtnText').text('Resend OTP');
        }
    }

    function enableResendButton() {
        $('#resendOtpBtn').prop('disabled', false);
        $('#resendBtnText').text('Resend OTP');
    }

    function refreshCaptcha() {
        const formData = new FormData();
        formData.append('_token', "{{ csrf_token() }}");
        formData.append('login_type', 'EMPLOYEE');
        $.ajax({
            url: "{{ route('captcha.refresh') }}",
            type: "POST",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('.site-loader').show();
            },
            complete: function() {
                $('.site-loader').hide();
            },
            success: function(data) {
                $('#captcha span').html(data.captcha);
            },
            error: function(xhr) {
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Failed to refresh captcha. Please try again."
                });
            }
        });
    }

    // Handle concurrent login scenario
    function handleConcurrentLogin(response) {
        let sessionInfo = '';
        if (response.current_session) {
            sessionInfo = `<br><small><strong>Current Session Details:</strong><br>
                      IP: ${response.current_session.ip || 'Unknown'}<br>
                      Login Time: ${response.current_session.login_time || 'Unknown'}</small>`;
        }

        Swal.fire({
            icon: 'warning',
            title: 'Already Logged In',
            html: `${response.message}${sessionInfo}`,
            showCancelButton: true,
            confirmButtonText: 'Yes, Logout from Other Device',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "{{ route('logout.other-devices', ':userId') }}".replace(':userId', response.user_id);
            } else {
                refreshCaptcha();
            }
        });
    }
</script>
@endsection