<!-- DEBUG-VIEW START 1 APPPATH/Views/login.php -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $pageTitle; ?> | <?= PROJECT_NAME; ?></title>
    <link rel="icon" type="image/x-icon" href="<?= ApiBaseUrl()['url'] . $header_data[0]['leftImage'] ?>">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?= base_url('assets/payonline'); ?>/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="<?= base_url('assets/payonline'); ?>/css/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?= base_url('assets/payonline'); ?>/css/adminlte.min.css">
    <!-- SweetAlert2 -->


    <!-- sweet alert -->
    <script src="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.css">

    <link href='<?= base_url('assets/css/toast.css') ?>' rel='stylesheet' type='text/css'>
    <!-- country_code links -->
    <link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/intlTelInput.css?1549804213570'); ?>">
    <!-- country_code links -->


    <link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/ldld.min.css'); ?>">
    <script type="text/javascript" charset="utf8" src="<?= base_url('assets/js/ldld.min.js'); ?>"></script>
    <style>
        .form-group {
            position: relative;
            margin-bottom: 1rem;
        }


        .form-label {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #888;
            font-size: 1rem;
            pointer-events: none;
            transition: 0.2s ease all;
            background-color: #121212;
            padding: 0 5px;
        }

        .form-input:focus+.form-label,
        .form-input:not(:placeholder-shown)+.form-label {
            top: -10px;
            left: 8px;
            font-size: 0.75rem;
            color: #000000;
        }

        body {
            background-color: #1e1e1e;
            font-family: sans-serif;
            padding: 2rem;
        }


        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #000000;
            background: #ffffff;
            color: #000000;
            border-radius: 6px;
            font-size: 16px;
            appearance: none;
            /* removes default dropdown arrow on some browsers */
            outline: none;
        }

        /* Label styling */
        .form-group label {
            position: absolute;
            top: 12px;
            left: 12px;
            color: #000000;
            background: #ffffff;
            padding: 0 5px;
            transition: 0.2s ease all;
            pointer-events: none;
        }

        /* Float label if select has a value */
        .form-group select:focus+label,
        .form-group select:valid+label {
            top: -10px;
            left: 10px;
            font-size: 12px;
            color: #000000;
        }

        .form-input-with-btn {
            display: flex;
            align-items: center;
            background-color: #121212;
            border: 1px solid #000000;
            border-radius: 5px;
            overflow: hidden;
            padding: 0;
        }

        .form-input-with-btn input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 12px 10px;
            font-size: 1rem;
            color: #fff;
            outline: none;
        }

        .form-input-with-btn button {
            padding: 10px 16px;
            background-color: #000000;
            color: #000;
            border: none;
            cursor: pointer;
            font-weight: bold;
            height: 100%;
        }

        .form-label {
            position: absolute;
            top: 12px;
            left: 12px;
            color: #888;
            font-size: 1rem;
            pointer-events: none;
            transition: 0.2s ease all;
            background-color: #121212;
            padding: 0 5px;
        }

        .form-input-with-btn input:focus+.form-label,
        .form-input-with-btn input:not(:placeholder-shown)+.form-label {
            top: -10px;
            left: 10px;
            font-size: 0.75rem;
            color: #000000;
        }

        .form-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            border: 1px solid #000000;
            border-radius: 5px;
            background-color: #ffffff;
        }

        .form-input {
            flex: 1;
            background: transparent;
            border: none;
            padding: 10px 10px;
            color: #000000;
            font-size: 1rem;
            outline: none;
        }

        .verify-action {
            padding: 0 10px;
            color: green;
            cursor: pointer;
            font-weight: 600;
        }

        .verify-icon {
            padding: 0 10px;
            color: green;
            font-size: 1.2rem;
        }

        .form-label {
            position: absolute;
            top: 12px;
            left: 12px;
            color: #aaa;
            font-size: 1rem;
            pointer-events: none;
            transition: 0.2s ease all;
            background: #121212;
            padding: 0 5px;
        }

        .form-input:focus+.form-label,
        .form-input:not(:placeholder-shown)+.form-label {
            top: -10px;
            left: 10px;
            font-size: 0.75rem;
            color: #000000;
        }

        .iti--allow-dropdown input,
        .iti--allow-dropdown input[type=text],
        .iti--allow-dropdown input[type=tel],
        .iti--separate-dial-code input,
        .iti--separate-dial-code input[type=text],
        .iti--separate-dial-code input[type=tel] {
            padding-right: 65px;
            padding-left: 43px;
            margin-left: 0;
            padding-top: 10px;
            padding-bottom: 10px;
            border: 1px solid;
            margin-bottom: 1rem !important;
            height: 45px;
        }

        .iti__flag-container {
            position: absolute;
            top: 0;
            bottom: 15px;
            right: 0;
            padding: 1px;
        }

        #signupPhoneNumber, #signupPhoneNumber::placeholder {
            /* font-weight: 600; */
    color: black;
        }

        .add-address-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #000000;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 1rem;
        }

        .address-section {
            display: none;
        }

        .form-floating-group {
            position: relative;
            margin-bottom: 1rem;
        }

        .form-floating-group input {
            width: 100%;
            padding: 14px 12px;
            border: 1px solid green;
            border-radius: 6px;
            background-color: #121212;
            color: #fff;
            font-size: 1rem;
            outline: none;
        }

        .form-floating-group label {
            position: absolute;
            top: 14px;
            left: 12px;
            background: #121212;
            padding: 0 5px;
            color: #888;
            transition: 0.2s ease all;
            pointer-events: none;
        }

        .form-floating-group input:focus+label,
        .form-floating-group input:not(:placeholder-shown)+label {
            top: -10px;
            left: 10px;
            font-size: 0.75rem;
            color: green;
        }

        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: 700;
            font-size: 13px;
        }

        .login-page,
        .register-page {
            /* height: auto !important; */
        }

        .custom-checkbox {
            display: none;
        }

        /* Label style (checkbox box) */
        .custom-checkbox+label {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-color: #eee;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            vertical-align: middle;
            border: 1px solid #000;
        }

        /* On check - green background */
        .custom-checkbox:checked+label {
            background-color: green;
        }

        /* White Tick using CSS (not emoji) */
        .custom-checkbox:checked+label::after {
            content: '';
            position: absolute;
            left: 7px;
            top: 2px;
            width: 9px;
            height: 16px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        @media only screen and (min-width:464px) and (max-width:576px) {

            .iti--allow-dropdown input,
            .iti--allow-dropdown input[type=text],
            .iti--allow-dropdown input[type=tel],
            .iti--separate-dial-code input,
            .iti--separate-dial-code input[type=text],
            .iti--separate-dial-code input[type=tel] {
                padding-right: 159px;
            }
        }

        .form-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .form-input-wrapper input.form-input {
            flex: 1;
            padding-right: 80px;
            /* space for button */
        }

        .verify-action {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            border: none;
            color: green;
            font-size: 14px;
            z-index: 2;
            padding: 4px 8px;
            cursor: pointer;
        }

        .verify-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: green;
            font-size: 16px;
            z-index: 1;
        }

        @media (max-width: 576px) {
            .verify-action {
                font-size: 12px;
                padding: 2px 6px;
            }
        }

        .email-suggestion-list {
            list-style: none;
            margin: 0;
            padding: 0;
            border: 1px solid #ccc;
            position: absolute;
            z-index: 1000;
            background-color: white;
            width: 100%;
            max-width: 300px;
            display: none;
        }

        .email-suggestion-list li {
            padding: 8px;
            cursor: pointer;
        }

        .email-suggestion-list li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body class="hold-transition login-page" style="display:grid!important;justify-items: center!important;">

    <!--- popup --->





    <div class="login-box">

        <div class="card card-outline card-danger">
            <!-- <div class=" card-header text-center">
                <div class="login-box-msg parent">
                    <div class="center fill-remaining-space">
                        <h4>DEVOTEE REGISTRATION</h4>
                    </div>
                </div>
            </div> -->

            <div class="card-body login-card-body">
                <!-- <p class="login-box-msg">Sign in to start your session</p> -->

                <div class="row">

                    <!-- SIGNUP BOX -->
                    <div class="col-md-12" id="signupModal">

                        <form action="#" method="post" onsubmit="return SignupUserLogin('<?= base_url('signup') ?>')">

                            <div class="modal-body p-0">
                                <div class="container">
                                    <img src="<?= ApiBaseUrl()['url'] . $header_data[0]['leftImage']; ?>"
                                        class="img-fluid my-1" height="100px" width="100px"
                                        style="display: block;margin-left: auto;margin-right: auto;">
                                    <h6 style="text-align: center;font-weight: bold;color: var(--main-color-new-theme);font-size: 1.2rem;">

                                        <?= GetProjectName() ?>
                                    </h6>
                                    <h5 class="text-center mb-2" style="font-weight: 700;color: black;">DEVOTEE REGISTRATION</h5>
                                    <div class="row" style="text-align:center;">
                                        <div class="col-md-12 mb-3">
                                            <span id="signup-error-flashmsg" class="text-center"
                                                style="color: red;"></span>
                                            <span id="signup-success-flashmsg" class="text-center"
                                                style="color: green;"></span>
                                        </div>
                                    </div>
                                    <div class="row d-flex justify-content-center align-items-center">
                                        <div class="col-xl-12">
                                            <div class="row g-0">

                                                <div class="col-xl-12">


                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="email" id="signupEmail" name="email" class="form-input" placeholder=" " autocomplete="off" oninput="this.value = this.value.toLowerCase();showEmailSuggestions();" />
                                                                    <label for="email" class="form-label">Enter Email - Head of Household <span class="text-danger">*</span></label>
                                                                    <button class="verify-action" type="button" id="verifySignupEmailbtn" style="border: none;background: white;z-index: 99;" onclick="sendMemberAuthCode('<?= base_url('send-member-auth-code') ?>')">Verify</button>
                                                                    <span class="verify-icon" id="verifiedIcon" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></span>

                                                                </div>
                                                                <ul id="email-suggestion-list" class="email-suggestion-list"></ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="text" id="fname" name="fname" class="form-input" placeholder=" " />
                                                                    <label for="fname" class="form-label">First Name - Head of Household<span class="text-danger">*</span></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="text" id="lname" name="lname" class="form-input" placeholder=" " />
                                                                    <label for="lname" class="form-label">Last Name - Head of Household <span class="text-danger">*</span></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <!-- <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="tel" id="phone" class="form-input" placeholder=" " required />
                                                                    <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                                                </div>
                                                            </div> -->
                                                            <div class="form-outline">
                                                                <!-- <label class="form-label" for="signupPhoneNumber">Phone Number <span class="text-danger">*</span></label> -->
                                                                <input type="tel" placeholder="Ex. +1 123-456-7890" minlength="10" maxlength="15" id="signupPhoneNumber" name="phone" class="phone-with-country-code form-control" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57 || event.charCode==43 || event.charCode==13 ))" oninput="nonEditCuntryCode1(this);" value="+1" minlength="10" autocomplete="none">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="add-address-header">
                                                                <span>Add Address</span>
                                                                <div style="display: flex; align-items: center;">
                                                                    <!-- <input type="checkbox" name="add_address" id="add_address" onchange="toggleAddressSection(this)" style="width: 25px;height: 29px;"> -->
                                                                    <input type="checkbox" id="add_address" class="custom-checkbox" onchange="toggleAddressSection(this)">
                                                                    <label for="add_address"></label>

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

                                                        <div class="col-sm-12 address-section">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="text" id="address_line1" name="address_line1" class="form-input" placeholder=" " />
                                                                    <label for="address_line1" class="form-label">Address Line1 <span class="text-danger">*</span></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 address-section">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="text" id="address_line2" name="address_line2" class="form-input" placeholder=" " />
                                                                    <label for="address_line2" class="form-label">Address Line2</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6 address-section">
                                                            <div class="form-group">
                                                                <!-- <div class="form-input-wrapper"> -->
                                                                <select name="state" id="signupState">
                                                                    <option value="" selected disabled>--select state --</option>
                                                                    <?php

                                                                    // print_r($userDetails);

                                                                    // $keys = array_column($GetState, 'refDataName'); /// Multidiamensional array sort by key
                                                                    // array_multisort($keys, SORT_ASC, $GetState);
                                                                    usort($GetState, function ($a, $b) {
                                                                        return strcmp($a->refDataName, $b->refDataName);
                                                                    });

                                                                    foreach ($GetState as $state) { ?>
                                                                        <option value="<?= strtoupper(@replaceSingleQuotesWithBackticks($state->refDataName)) ?>" <?= strtoupper(@replaceSingleQuotesWithBackticks($state->refDataName)) == strtoupper(@replaceSingleQuotesWithBackticks($userDetails->stateTypes)) ? 'selected' : ''; ?>><?= strtoupper(@replaceSingleQuotesWithBackticks($state->refDataName)) ?></option>
                                                                    <?php } ?>
                                                                </select>
                                                                <label for="state">Select State <span class="text-danger">*</span></label>
                                                                <!-- </div> -->
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6 address-section">
                                                            <div class="form-group">
                                                                <!-- <div class="form-input-wrapper"> -->
                                                                <select name="city" id="signupCity">
                                                                    <option value="" selected disabled>--select city --</option>
                                                                </select>
                                                                <label for="signupCity">Select City <span class="text-danger">*</span></label>
                                                                <!-- </div> -->
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 address-section">
                                                            <div class="form-group">
                                                                <div class="form-input-wrapper">
                                                                    <input type="text" id="signupzipcode" name="zipcode" class="form-input" placeholder=" " maxlength="5" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" />
                                                                    <label for="signupzipcode" class="form-label">Zip Code <span class="text-danger">*</span></label>
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12 p-3">
                                                            <center>
                                                                <button type="button" class="btn btn-info ms-2"
                                                                    id="signupBtnAlert" onclick="checkVerifyEmail()" style="background-color: green!important;">REGISTER</button>

                                                                <button type="submit" class="btn btn-info ms-2 d-none"
                                                                    id="signupBtn" style="background-color: green!important;">REGISTER</button>
                                                            </center>

                                                        </div>
                                                    </div>
                                                    <div class="row d-flex justify-content-center text-center modal-footer">
                                                        <hr>
                                                        <div class="col-sm-12  text-center">
                                                            <a href="<?= base_url('login') ?>" onclick="loader.on();" class="inSignup text-dark">Already
                                                                registered? <b class="text-danger">Login</b></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>


                    </div>

                </div>


            </div>
        </div>
    </div>
    <!--- signup OTp---->
    <div class="modal fade" id="signUpOTP" tabindex="-1" role="dialog" aria-labelledby="signUpOTPTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Please verify OTP</h5>
                    <button type="button" class="close" style="background: white;" onclick="closesignUpOTPModal()">
                        <span aria-hidden="true" style="font-size: 22px !important;font-weight: 900;">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row" style="text-align:center;">
                        <div class="col-md-12">

                            <div class="hs-toast-wrapper mb-3" id="signup-auth-error-flashmsg"></div>
                            <div class="hs-toast-wrapper mb-3" id="signup-auth-success-flashmsg"></div>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-12 mb-1 mx-0 px-0">
                            <input type="number" id="signUpOtp" name="otp" placeholder="Please enter OTP to continue." class="form-control" />
                            <!-- <span class="otpsendmsg_number_error" style="color: red; font-size: 18px;margin-left: 12px;"></span> -->

                            <div class="hs-toast-wrapper mb-3" class="otpauthsendmsg_number_errorg"></div>

                        </div>
                        <div class="col-md-12 mb-2 mx-0 px-2">
                            <a class="" id="resendOtpBtn" type="button" onclick="resendMemberAuthCode('<?= base_url('send-member-auth-code') ?>')" href="javascript:void(0)" style="color:red!important;">Resend OTP?</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-center" style="display: flow!important;">
                    <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                    <button type="button" id="memberAuthCodeVerifyBtn" onclick="verifyMemberAuthCode('<?= base_url('email-otp-verification') ?>')" class="btn btn-danger" style="color: #ffffff!important;border-radius: 9px !important;border-color: white;padding: 10px 40px;background:var(--main-color-new-theme)!important; box-shadow: 1px 1px 10px #7e455561;">VERIFY OTP</button>
                </div>
            </div>
        </div>
    </div>
    <!--- signup OTp---->

    <div class="ldld full" style=" z-index: 9999;"></div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery (required before Bootstrap) -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.min.js"></script>
    <!-- OR for Bootstrap 5 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript" src="<?= base_url('assets/js/intlTelInput.js?1549804213570'); ?>"></script>
    <script src="<?= base_url('assets/js/toast.js') ?>"></script>
    <script type="text/javascript">
        var loader = new ldLoader({
            root: ".ldld.full"
        });
    </script>

    <script type="text/javascript">
        const commonDomains = ["gmail.com", "yahoo.com", "outlook.com", "hotmail.com", "rediffmail.com", "yahoo.in"];

        function showEmailSuggestions() {
            const input = document.getElementById("signupEmail");
            const list = document.getElementById("email-suggestion-list");
            const value = input.value.trim();

            list.innerHTML = "";
            list.style.display = "none";

            // Only proceed if @ is present
            if (value.includes("@")) {
                const [prefix, domainPart] = value.split("@");

                // Prevent showing suggestions if nothing before @
                if (!prefix) return;

                const matchedDomains = commonDomains.filter(domain =>
                    domain.startsWith(domainPart.toLowerCase())
                );

                // If there's at least one match, show list
                if (matchedDomains.length > 0) {
                    matchedDomains.forEach(domain => {
                        const suggestion = document.createElement("li");
                        suggestion.textContent = `${prefix}@${domain}`;
                        suggestion.style.cursor = "pointer";
                        suggestion.style.padding = "5px";

                        suggestion.onclick = () => {
                            input.value = suggestion.textContent;
                            list.style.display = "none";
                        };

                        list.appendChild(suggestion);
                    });

                    list.style.display = "block";
                }
            }
        }

        // ✅ Hide suggestions when clicking outside
           document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("click", function (e) {
        const input = document.getElementById("signupEmail"); // or loginEmail if you're using that
        const list = document.getElementById("email-suggestion-list");

        if (input && list && !input.contains(e.target) && !list.contains(e.target)) {
            list.style.display = "none";
        }
    });
});

        function toggleAddressSection(checkbox) {


            if (checkbox.checked) {
                $(".address-section").css("display", "block");
                // $("#address_line1").attr("required", true);
                // $("#signupState").attr("required", true);
                // $("#signupCity").attr("required", true);
                // $("#signupzipcode").attr("required", true);
            } else {
                $(".address-section").css("display", "none");
                // $("#address_line1").attr("required", false);
                // $("#signupState").attr("required", false);
                // $("#signupCity").attr("required", false);
                // $("#signupzipcode").attr("required", false);

                $("#address_line1").val('');
                $("#address_line2").val('');
                $("#signupState").val('');
                $("#signupCity").val('');
                $("#signupzipcode").val('');
                $("#signupCity").html('');
                $("#signupCity").html('<option value="" selected disabled>--select city--</option>');
            }
        }




        var baseUrl = "<?= base_url(); ?>";


        var countryData = window.intlTelInputGlobals.getCountryData(),
            signup_input = document.querySelector("#signupPhoneNumber"),
            addressDropdown = document.querySelector("#address-country");



        window.intlTelInput(signup_input, {
            utilsScript: baseUrl + "assets/js/utils.js?1706723638591",
        });


        for (var i = 0; i < countryData.length; i++) {
            var country = countryData[i];
            var optionNode = document.createElement("option");
            optionNode.value = country.iso2;
            var textNode = document.createTextNode(country.name);
            optionNode.appendChild(textNode);
            addressDropdown.appendChild(optionNode);
        }

        addressDropdown.value = iti.getSelectedCountryData().iso2;

        // listen to the address dropdown for changes
        addressDropdown.addEventListener('change', function() {
            iti.setCountry(this.value);
        });


        function nonEditCuntryCode1(el) {
            var cuntryCode = $("#signupModal .iti__selected-flag").attr('title');
            cuntryCode = (cuntryCode.split(':')[1]).trim();
            if (el.value.length > cuntryCode.length) {
                var value = el.value.replace(cuntryCode, '');; //replace all $ with empty string
                el.value = cuntryCode + value;
            } else {
                el.value = cuntryCode;
            }
        }
    </script>

    <script>
        function sendMemberAuthCode(url) {

            var signupBtn = document.getElementById('signupBtn');
            var verifySignupEmailbtn = document.getElementById('verifySignupEmailbtn');
            var memberAuthCodeVerifyBtn = document.getElementById('memberAuthCodeVerifyBtn');
            var email = $('#signupEmail').val();

            $("#login-error-flashmsg").html("");
            // alert(email == "");
            if (email == "") {
                // event.preventDefault();
                // LoginUser('<?= base_url('signin'); ?>');
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: ' Please enter your email id and verify.',
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
                loader.off();
            } else {

                var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                if (email.match(mailformat)) {
                    var btn = document.getElementById('verifySignupEmailbtn');
                    btn.disabled = true;
                    btn.innerHTML = '<div class="spinner-border" role="status" style="font-size:16px!important;"><span class="sr-only">Loading...</span></div>';


                    // event.preventDefault();
                    var url = url;


                    const activeLoginTab = $('.nav-link.active');
                    const LoginTabName = activeLoginTab.attr('tab-name');

                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data: {
                            'email': email,
                            'LoginTabName': LoginTabName
                        },
                        success: function(data) {
                            loader.off();
                            console.log(data['statusCode'] == '1');
                            console.log(data['statusCode'] == 1);

                            if (data['statusCode'] == '1') {
                                btn.disabled = true;
                                btn.innerText = 'SEND';
                                $("#signUpOtp").val('');
                                $("#signup-auth-success-flashmsg").text('');
                                $("#signup-auth-error-flashmsg").text('');
                                $("#memberAuthCodeVerifyBtn").disabled = false;
                                $("#memberAuthCodeVerifyBtn").innerText = 'VERIFY OTP';
                                $('#signUpOTP').modal('show');
                                $('body *').not('#signUpOTP, #signUpOTP *').addClass('dimmed');
                                showToast({
                                    eleWrapper: '#signup-auth-success-flashmsg',
                                    msg: 'OTP sent on your email id ' + email,
                                    theme: 'success',
                                    closeButton: false,
                                    autoClose: true,
                                    afterShow: function() {
                                        console.log('After show function');
                                    },
                                    afterClose: function() {
                                        console.log('After close function');
                                    }
                                });
                            } else if (data['statusCode'] == '-1') {
                                btn.disabled = false;
                                btn.innerText = 'VERIFY';
                                showToast({
                                    eleWrapper: '#signup-error-flashmsg',
                                    msg: data['message'],
                                    theme: 'error',
                                    closeButton: false,
                                    autoClose: true,
                                    afterShow: function() {
                                        console.log('After show function');
                                    },
                                    afterClose: function() {
                                        console.log('After close function');
                                    }
                                });
                            } else {

                                btn.disabled = false;
                                btn.innerText = 'VERIFY';
                                showToast({
                                    eleWrapper: '#signup-error-flashmsg',
                                    msg: 'Technical Error! Please Login With Phone Number or Contact Admin.',
                                    theme: 'error',
                                    closeButton: false,
                                    autoClose: true,
                                    afterShow: function() {
                                        console.log('After show function');
                                    },
                                    afterClose: function() {
                                        console.log('After close function');
                                    }
                                });
                            }

                        }
                    });

                } else {


                    showToast({
                        eleWrapper: '#signup-error-flashmsg',
                        msg: 'Please enter a valid email address.',
                        theme: 'error',
                        closeButton: false,
                        autoClose: true,
                        afterShow: function() {
                            console.log('After show function');
                        },
                        afterClose: function() {
                            console.log('After close function');
                        }
                    });
                    loader.off();
                }

            }
            loader.off();

        }

        function verifyMemberAuthCode(url) {
            loader.on();
            var signupBtn = document.getElementById('signupBtn');
            var verifySignupEmailbtn = document.getElementById('verifySignupEmailbtn');
            var memberAuthCodeVerifyBtn = document.getElementById('memberAuthCodeVerifyBtn');
            var btn = document.getElementById('memberAuthCodeVerifyBtn');
            btn.disabled = true;
            btn.innerText = 'VERIFYING';


            // event.preventDefault();
            var url = url;
            var otp = $('#signUpOtp').val();

            if (otp == "") {
                $("#login-success-flashmsg").html("");

                showToast({
                    eleWrapper: '#signup-auth-error-flashmsg',
                    msg: 'Please enter 6 digit OTP!',
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
                btn.disabled = false;
                btn.innerText = 'VERIFY';
                loader.off();

            } else {
                var email = $('#signupEmail').val();
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        'otp': otp,
                        'email': email
                    },
                    success: function(data) {
                        loader.off();
                        console.log("statusCOde: " + data['statusCode']);
                        if (data['statusCode'] == 1) {
                            showToast({
                                eleWrapper: '#signup-auth-success-flashmsg',
                                msg: data['message'],
                                theme: 'success',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                }
                            });
                            $("#signupBtn").removeAttr("disabled");
                            $("#signupBtn").removeClass('d-none');
                            $("#signupBtnAlert").addClass('d-none');
                            $('#verifySignupEmailbtn').disabled = true;
                            $('#verifySignupEmailbtn').html('<i class="fa fa-check" aria-hidden="true"></i>');
                            $('#signupEmail').attr('readonly', true);
                            $("#signUpOTP").modal("hide");
                            $("#signup-error-flashmsg1").addClass("d-none");
                            $('body *').removeClass('dimmed');

                        } else {
                            $("#signup-auth-error-flashmsg").html("");
                            $("#signup-auth-success-flashmsg").html("");


                            showToast({
                                eleWrapper: '#signup-auth-error-flashmsg',
                                msg: data['message'],
                                theme: 'error',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                }
                            });
                            btn.disabled = false;
                            btn.innerText = 'VERIFY';
                        }


                    }
                });
            }
        }

        function closesignUpOTPModal() {
            var btn = document.getElementById('verifySignupEmailbtn');
            btn.disabled = false;
            btn.innerText = 'VERIFY';
            $('body *').removeClass('dimmed');
            $("#signUpOTP").modal("hide");

        };

        function SignupUserLogin(url) {
            event.preventDefault();

            loader.on();

            var btn = document.getElementById('signupBtn');




            var phone = $('#signupPhoneNumber').val();
            // alert(phone);








            btn.disabled = true;
            btn.innerText = 'PLEASE WAIT...';

            var url = url;
            var fname = $('#fname').val();
            var lname = $('#lname').val();
            var email = $('#signupEmail').val();
            var address_line1 = $('#address_line1').val();
            var address_line2 = $('#address_line2').val();

            var stateElem = document.getElementById("signupState");
            var cityElem = document.getElementById("signupCity");

            var state = stateElem ? stateElem.value.trim() : "";
            var city = cityElem ? cityElem.value.trim() : "";

            var zipcode = $('#signupzipcode').val();

            var newphone = 0;
            var cuntryCode = $("#signupModal .iti__selected-flag").attr('title');
            cuntryCode = (cuntryCode.split(':')[1]).trim();
            var value = phone.replace(cuntryCode, '');
            newphone = value;
            if (fname.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $('#fname').focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please fill first name.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if (lname.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $('#lname').focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please fill last name.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if (email.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $('#signupEmail').focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please enter a valid email id.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if (value <= 0 || phone.length < 6) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: 'Please enter a valid phone number.',
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });

                $('#signupPhoneNumber').focus();
                loader.off();

            } else if ($("#add_address").is(':checked') && address_line1.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $('#address_line1').focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please fill adreess line1.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if ($("#add_address").is(':checked') && state.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $("#signupState").focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please select state.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if ($("#add_address").is(':checked') && city.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $("#signupCity").focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please select city.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else if ($("#add_address").is(':checked') && zipcode.length <= 0) {
                loader.off();
                btn.disabled = false;
                btn.innerText = 'REGISTER';
                $('#signupzipcode').focus();
                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: "<b>Alert! </b>Please fill zipcode.",
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
            } else {


                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        'fname': fname,
                        'lname': lname,
                        'email': email,
                        'phone': newphone,
                        'countryCode': cuntryCode,
                        'address_line1': address_line1,
                        'address_line2': address_line2,
                        'state': state,
                        'city': city,
                        'zipcode': zipcode
                    },
                    success: function(data) {

                        loader.off();

                        // console.log(data);

                        var loginbtn = document.getElementById('signupBtn');


                        const obj = JSON.parse(data);
                        if (obj.message == '') {

                            loginbtn.disabled = false;
                            loginbtn.innerText = 'LOGIN';


                            showToast({
                                eleWrapper: '#signup-success-flashmsg',
                                msg: data,
                                theme: 'success',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                    window.location.reload();
                                }

                            });
                            alert('Successfully Register.');
                            loader.on();
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);



                        } else {



                            if (obj.statusCode == '1') {
                                loginbtn.disabled = true;
                                loginbtn.innerText = 'LOGIN';



                                showToast({
                                    eleWrapper: '#signup-success-flashmsg',
                                    msg: obj.message,
                                    theme: 'success',
                                    closeButton: false,
                                    autoClose: true,
                                    afterShow: function() {
                                        console.log('After show function');
                                    },
                                    afterClose: function() {
                                        console.log('After close function');
                                        // window.location.reload();
                                    }
                                });

                                alert('Successfully Register.');
                                loader.on();

                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);

                                btn.disabled = false;
                                btn.innerText = 'REGISTER';
                            } else {
                                loginbtn.disabled = false;
                                loginbtn.innerText = 'LOGIN';



                                showToast({
                                    eleWrapper: '#signup-error-flashmsg',
                                    msg: obj.message,
                                    theme: 'error',
                                    closeButton: false,
                                    autoClose: true,
                                    afterShow: function() {
                                        console.log('After show function');
                                    },
                                    afterClose: function() {
                                        console.log('After close function');

                                    }
                                });
                                // alert('Successfully Register.');
                                // loader.on();
                                // setTimeout(function() {
                                //     window.location.reload();
                                // }, 2000);
                                btn.disabled = false;
                                btn.innerText = 'REGISTER';
                            }
                        }
                    }




                });
            }


            return false;
        }

        function checkVerifyEmail() {


            // swal({
            //     html: true,
            //     title: "Please verify your email",
            //     text: "<span style='font-weight: 600;margin:5px;padding:5px;font-size: 27px !important;'></span> ",
            //     type: "error",
            //     confirmButtonText: 'OK',
            //     confirmButtonColor: 'var(--web-main-color)',
            //     // timer:5000,
            //   },

            //   function() {
            //     // if ((location.href.match(/([^\/]*)\/*$/)[1]).indexOf('Payonline') != -1) {
            //     //   window.location.href = "<?= base_url('logout'); ?>"
            //     // } else {
            //     //   window.location.reload();
            //     // }

            //   });

            showToast({
                eleWrapper: '#signup-error-flashmsg',
                msg: 'Please verify your email id.',
                theme: 'error',
                closeButton: false,
                autoClose: true,
                duration: 60000,
                afterShow: function() {
                    console.log('After show function');
                },
                afterClose: function() {
                    console.log('After close function');
                }
            });
        }

        function resendMemberAuthCode(url) {


            var email = $('#signupEmail').val();

            $("#login-error-flashmsg").html("");



            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if (email.match(mailformat)) {
                var btn = document.getElementById('resendOtpBtn');
                btn.innerText = 'SENDING';


                // event.preventDefault();
                var url = url;


                const activeLoginTab = $('.nav-link.active');
                const LoginTabName = activeLoginTab.attr('tab-name');

                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        'email': email,
                        'LoginTabName': LoginTabName
                    },
                    success: function(data) {
                        loader.off();
                        console.log(data['statusCode'] == '1');
                        console.log(data['statusCode'] == 1);
                        btn.innerText = 'Resend OTP?';
                        if (data['statusCode'] == '1') {


                            $('#signUpOTP').modal('show');
                            $('body *').not('#signUpOTP, #signUpOTP *').addClass('dimmed');
                            showToast({
                                eleWrapper: '#signup-auth-success-flashmsg',
                                msg: 'OTP sent on your email ' + email,
                                theme: 'success',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                }
                            });
                        } else if (data['statusCode'] == '-1') {

                            showToast({
                                eleWrapper: '#signup-error-flashmsg',
                                msg: data['message'],
                                theme: 'error',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                }
                            });
                        } else {


                            showToast({
                                eleWrapper: '#signup-error-flashmsg',
                                msg: 'Technical Error! Please Login With Phone Number or Contact Admin.',
                                theme: 'error',
                                closeButton: false,
                                autoClose: true,
                                duration: 60000,
                                afterShow: function() {
                                    console.log('After show function');
                                },
                                afterClose: function() {
                                    console.log('After close function');
                                }
                            });
                        }

                    }
                });

            } else {


                showToast({
                    eleWrapper: '#signup-error-flashmsg',
                    msg: 'Please enter a valid email address.',
                    theme: 'error',
                    closeButton: false,
                    autoClose: true,
                    duration: 60000,
                    afterShow: function() {
                        console.log('After show function');
                    },
                    afterClose: function() {
                        console.log('After close function');
                    }
                });
                loader.off();
            }


            loader.off();

        }

        $('#signupState').change(function() {

            var stateCode = $(this).val();
            $("#signupCity").html('');
            $("#signupCity").html('<option value="" selected disabled>--select city--</option>');
            $.ajax({
                url: "<?= base_url('Home/GetCity') ?>",
                type: "POST",
                // dataType: "json",
                data: {
                    'stateCode': stateCode
                },
                success: function(data) {
                    $("#signupCity").html('');
                    $("#signupCity").html(data);
                }
            });

        });
    </script>