@extends('layouts.website_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;
    }
</style>

<main>
    <!-- Hero Section -->
    <div class="position-relative bg-primary text-white overflow-hidden">
        <div class="container py-5 position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container py-5">
        <div class="row g-4">
            <!-- Main Content -->
            <div class="col-12" id="main-content">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-5">

                        <!-- Forget Password Form -->
                        <div class="card border-0 elevation-4 rounded-3 overflow-hidden shadow" id="forgetPasswordCard">
                            <div class="card-header bg-primary text-dark py-3">
                                <h5 class="h6 mb-0 text-center text-uppercase text-white">
                                    <i class="fa fa-key"></i> Forget Password
                                </h5>
                            </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>
                                        Enter your email address or mobile number to reset your password.
                                    </div>
                                </div>

                                <form action="" id="forgetPasswordForm">
                                    @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">
                                        <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 gap-2 mt-4">
                                        <button type="submit" class="btn btn-warning py-3 fw-semibold rounded-pill">
                                            <i class="fa fa-paper-plane"></i> Send OTP
                                        </button>
                                        <a href="{{ route('public.login') }}" class="btn btn-outline-secondary py-2 rounded-pill">
                                            <i class="fa fa-arrow-left"></i> Back to Login
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- OTP Verification Form -->
                        <div class="card border-0 elevation-4 rounded-3 overflow-hidden" id="otpVerificationCard" style="display: none;">
                            <div class="card-header bg-success text-white py-3">
                                <h3 class="h6 mb-0 text-center text-uppercase">
                                    <i class="fa fa-shield-alt"></i> Verify OTP
                                </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.
                                    </div>
                                    <div id="contactInfo" class="small text-muted mb-3"></div>
                                </div>

                                <form action="" id="otpVerificationForm">
                                    @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 py-3 fw-semibold rounded-pill">
                                            <i class="fa fa-check"></i> Verify OTP
                                        </button>
                                        <button type="button" class="btn btn-outline-primary py-2 rounded-pill" id="resendOtpBtn">
                                            <i class="fa fa-refresh"></i> Resend OTP
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary py-2 rounded-pill" id="backToForgetPasswordBtn">
                                            <i class="fa fa-arrow-left"></i> Back
                                        </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>

                        <!-- Success Message Card -->
                        <div class="card border-0 elevation-4 rounded-3 overflow-hidden" id="successCard" style="display: none;">
                            <div class="card-header bg-success text-white py-3">
                                <h3 class="h6 mb-0 text-center text-uppercase">
                                    <i class="fa fa-check-circle"></i> Email Sent
                                </h3>
                            </div>
                            <div class="card-body p-4 text-center">
                                <div class="alert alert-success">
                                    <i class="fa fa-envelope"></i>
                                    <strong>Check Your Email</strong><br>
                                    We've sent a password reset link to your email address.
                                </div>
                                <div class="text-muted mb-4">
                                    Please check your email and click on the reset link to create a new password.
                                    The link will expire in 24 hour.
                                </div>
                                <a href="{{ route('public.login') }}" class="btn btn-primary py-3 fw-semibold rounded-pill">
                                    <i class="fa fa-arrow-left"></i> Back to Login
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection

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

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

        // Validate the OTP verification form
        $("#otpVerificationForm").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();
                verifyForgetPasswordOtp();
            }
        });

        // 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 forget password button
        $('#backToForgetPasswordBtn').click(function() {
            showForgetPasswordForm();
        });

        // Resend OTP button
        $('#resendOtpBtn').click(function() {
            if (resendTimeRemaining > 0) {
                Swal.fire({
                    icon: "info",
                    title: "Please Wait",
                    text: `You can resend OTP in ${resendTimeRemaining} seconds.`,
                    timer: 2000
                });
                return;
            }
            resendForgetPasswordOtp();
        });

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

    function sendForgetPasswordOtp() {
        $.ajax({
            url: "{{ route('employee-forget-password.send-otp') }}",
            type: "POST",
            data: $("#forgetPasswordForm").serialize(),
            dataType: "json",
            beforeSend: function() {
                $('.site-loader').show();
            },
            success: function(response) {
                $('.site-loader').hide();

                if (response.status === "success") {
                    showOtpVerificationForm();
                    startResendCooldown(); // Start cooldown when OTP is first sent
                    Swal.fire({
                        icon: "success",
                        title: "OTP Sent",
                        text: response.message,
                        timer: 3000
                    });
                } else {
                    refreshCaptcha();
                    Swal.fire({
                        icon: "error",
                        title: "Failed",
                        text: response.message
                    });
                }
            },
            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;
                }
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });
            }
        });
    }

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

                if (response.status === "success") {
                    showSuccessCard();
                    Swal.fire({
                        icon: "success",
                        title: "Email Sent",
                        text: response.message,
                        timer: 3000
                    });
                } else {
                    clearOtpInputs();
                    Swal.fire({
                        icon: "error",
                        title: "Verification Failed",
                        text: response.message
                    });
                }
            },
            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;
                }
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });
            }
        });
    }

    function resendForgetPasswordOtp() {
        $.ajax({
            url: "{{ route('employee-forget-password.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();
                    startResendCooldown(); // Start cooldown after successful resend
                    Swal.fire({
                        icon: "success",
                        title: "OTP Resent",
                        text: response.message,
                        timer: 3000
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Failed to Resend",
                        text: response.message
                    });
                }
            },
            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;
                }
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });
            }
        });
    }

    function showOtpVerificationForm() {
        $('#forgetPasswordCard').hide();
        $('#otpVerificationCard').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();
    }

    function showForgetPasswordForm() {
        $('#otpVerificationCard').hide();
        $('#successCard').hide();
        $('#forgetPasswordCard').show();
        clearOtpInputs();
        stopOtpTimer();
        stopResendTimer();
        $("#forgetPasswordForm")[0].reset();
        refreshCaptcha();
    }

    function showSuccessCard() {
        $('#otpVerificationCard').hide();
        $('#successCard').show();
        stopOtpTimer();
        stopResendTimer();
    }

    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) {
                        if (resendTimeRemaining > 0) {
                            Swal.fire({
                                icon: "info",
                                title: "Please Wait",
                                text: `You can resend OTP in ${resendTimeRemaining} seconds.`,
                                timer: 2000
                            });
                        } else {
                            resendForgetPasswordOtp();
                        }
                    }
                });
            }
        }, 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 cooldown functions
    function startResendCooldown() {
        resendTimeRemaining = RESEND_COOLDOWN;
        updateResendButtonState();

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

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

    function stopResendTimer() {
        if (resendTimer) {
            clearInterval(resendTimer);
        }
        resendTimeRemaining = 0;
        updateResendButtonState();
    }

    function updateResendButtonState() {
        const resendBtn = $('#resendOtpBtn');

        if (resendTimeRemaining > 0) {
            resendBtn.prop('disabled', true);
            resendBtn.html(`<i class="fa fa-clock"></i> Resend OTP (${resendTimeRemaining}s)`);
            resendBtn.removeClass('btn-outline-primary').addClass('btn-secondary');
        } else {
            resendBtn.prop('disabled', false);
            resendBtn.html('<i class="fa fa-refresh"></i> Resend OTP');
            resendBtn.removeClass('btn-secondary').addClass('btn-outline-primary');
        }
    }

    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."
                });
            }
        });
    }
</script>
@endsection