script.js

script.js

$(document).ready(function () {
    // Switch between login methods
    $("#tab-password").click(function () {
        $("#password-login-form").show();
        $("#otp-login-form").hide();
        $(".tab").removeClass("active");
        $(this).addClass("active");
    });

    $("#tab-otp").click(function () {
        $("#otp-login-form").show();
        $("#password-login-form").hide();
        $(".tab").removeClass("active");
        $(this).addClass("active");
    });

    // Enable Login button when both fields are filled
    $("#patient-id, #password").on("input", function () {
        let id = $("#patient-id").val().trim();
        let pass = $("#password").val().trim();
        $("#login-with-password").prop("disabled", !(id.length > 0 && pass.length > 0));
    });

    // Enable Send OTP button when a valid phone number is entered
    $("#phone-number").on("input", function () {
        let phone = $(this).val().trim();
        $("#send-otp").prop("disabled", phone.length >= 10);
    });

    // Simulate OTP Send (You need to integrate Twilio here)
    $("#send-otp").click(function () {
        alert("OTP Sent! (Simulated, integrate Twilio)");
        $("#otp").show();
        $("#verify-otp").show();
    });

    // Enable Verify OTP button when OTP is entered
    $("#otp").on("input", function () {
        let otp = $(this).val().trim();
        $("#verify-otp").prop("disabled", otp.length === 6);
    });

    // Simulate login (You need to integrate the backend here)
    $("#password-login-form").submit(function (event) {
        event.preventDefault();
        alert("Logging in with Password (Simulated)");
    });

    $("#otp-login-form").submit(function (event) {
        event.preventDefault();
        alert("Logging in with OTP (Simulated)");
    });
});