

<!DOCTYPE html>
<html lang="zxx">

<!-- Mirrored from demo.dashboardpack.com/marketing-html/index_2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 May 2023 10:14:44 GMT -->
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>RFID</title>

 <!-- Other head elements -->
<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<link rel="icon" href="img/logo.png" type="image/png">

<link rel="stylesheet" href="/static/css/bootstrap1.min.css" />

<link rel="stylesheet" href="/static/vendors/themefy_icon/themify-icons.css" />

<link rel="stylesheet" href="/static/vendors/niceselect/css/nice-select.css" />

<link rel="stylesheet" href="/static/vendors/owl_carousel/css/owl.carousel.css" />

<link rel="stylesheet" href="/static/vendors/gijgo/gijgo.min.css" />

<link rel="stylesheet" href="/static/vendors/font_awesome/css/all.min.css" />
<link rel="stylesheet" href="/static/vendors/tagsinput/tagsinput.css" />

<link rel="stylesheet" href="/static/vendors/datepicker/date-picker.css" />

<link rel="stylesheet" href="/static/vendors/scroll/scrollable.css" />

<link rel="stylesheet" href="/static/vendors/datatable/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/responsive.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/buttons.dataTables.min.css" />

<link rel="stylesheet" href="/static/vendors/text_editor/summernote-bs4.css" />

<link rel="stylesheet" href="/static/vendors/morris/morris.css">

<link rel="stylesheet" href="/static/vendors/material_icon/material-icons.css" />

<link rel="stylesheet" href="/static/css/metisMenu.css">

<link rel="stylesheet" href="/static/css/style1.css" />
<link rel="stylesheet" href="/static/css/colors/default.css" id="colorSkinCSS">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/css/intlTelInput.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/css/utils.min.css">
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/intlTelInput.min.js"></script>

<style>
    .form-group {
        position: relative;
    }

    .toggle-password-icon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .form-control {
    border-color:#14cfc8!important;
  }  
  .custom-input {
  width: 100%; /* Adjust the width as needed */
  height: 40px; /* Adjust the height as needed */
}

.custom-input .selected-flag {
  width: 20px; /* Adjust the flag icon width as needed */
  height: 20px; /* Adjust the flag icon height as needed */
}
.iti {
    position: relative;
    display: block!important;
}
</style>
</head>
<body class="crm_body_bg">



<section class="main_content dashboard_part" style="padding-left :0!important">


<div class="" style="background: white">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12">
<div class="dashboard_header mb_50">
<div class="row">
<div class="text-center">
   <img src="/static/img/thingzxcess-logo.png" alt="Logo" class="logo_thing">
</div>

<div class="col-md-6 mx-auto">
        {% if messages %}
        <div class="container">
            {% for message in messages %}
            <div class="alert alert-primary alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

 
<div class="col-lg-12">
<div class="mb_30">
<div class="row justify-content-center">
<div class="col-lg-6">

<div class="modal-content cs_modal">
<div class="modal-header justify-content-center theme_bg_1">
<h5 class="modal-title text_white">Sign up</h5>
</div>
<div class="modal-body">
    <form method="POST" action="/sign_up/" enctype="multipart/form-data" id="sign-up-form">
        {% csrf_token %}
        <div class>
            <input type="text" name="email" class="form-control" placeholder="Enter your email" required>
        </div>
        <div class>
        <input type="text" name="first_name" class="form-control" placeholder="Enter First Name"  required>
        </div>
        <div class>
            <input type="text" name="last_name" class="form-control" placeholder="Enter Last Name"  required>
        </div>
        
        <div class="form-group position-relative">
        <input type="password" name="password" id="password-input" class="form-control" placeholder="Password" required>
        <i class="fa fa-eye-slash toggle-password-icon position-absolute" onclick="togglePasswordVisibility()"></i>
       </div>
        
        <div class="form-group">
          
        <input type="tel" id="phone" name="phone" class="form-control custom-input"  placeholder="Enter your number"  required>
        </div>
        <div class>
        <input type="number" name="role" class="form-control" placeholder="Enter your role" required>
        </div>
        
        <div class="d-grid gap-2">
        <button type="submit" class="btn button_with_theme"> Sign Up</button>
        </div>
        <p>Already have an account ? <a  href="{% url 'login_page' %}">Login</a></p>
        </form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</section>

<footer>
<div class="waves">
  <div class="wave" id="wave1"></div>
  <div class="wave" id="wave2"></div>
  <div class="wave" id="wave3"></div>
  <div class="wave" id="wave4"></div>
</div>

</footer>



<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>
    // Auto-dismiss the alert messages after a certain time
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove();
        });
    }, 1000);  // Adjust the time (in milliseconds) as per your preference
</script>

<script>
    function togglePasswordVisibility() {
        const passwordInput = document.getElementById("password-input");
        const togglePasswordIcon = document.querySelector(".toggle-password-icon");

        const isPasswordVisible = passwordInput.getAttribute("type") === "password";
        passwordInput.setAttribute("type", isPasswordVisible ? "text" : "password");
        togglePasswordIcon.classList.toggle("fa-eye-slash", !isPasswordVisible);
        togglePasswordIcon.classList.toggle("fa-eye", isPasswordVisible);
    }


    document.getElementById("sign-up-form").addEventListener("submit", function (event) {
        if (!validateForm()) {
            event.preventDefault();
        }
    });

    function validateForm() {
        const emailInput = document.querySelector('input[name="email"]');
        const firstNameInput = document.querySelector('input[name="first_name"]');
        const lastNameInput = document.querySelector('input[name="last_name"]');
        const phoneInput = document.querySelector('input[name="phone"]');
        const roleInput = document.querySelector('input[name="role"]');
        console.log(phoneInput)
        // Remove existing error classes
        removeErrorClasses();

        // Validate email format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(emailInput.value)) {
            // Display error message and add red border
            emailInput.classList.add("is-invalid");
            return false;
        }

        // Validate first name (minimum 2 characters)
        if (firstNameInput.value.length < 2) {
            // Display error message and add red border
            firstNameInput.classList.add("is-invalid");
            return false;
        }

        // Validate last name (minimum 2 characters)
        if (lastNameInput.value.length < 2) {
            // Display error message and add red border
            lastNameInput.classList.add("is-invalid");
            return false;
        }

        // Validate phone number (numeric characters only)
        const phoneRegex = /^\d+$/;
        if (!phoneRegex.test(phoneInput.value)) {
            // Display error message and add red border
            phoneInput.classList.add("is-invalid");
            return false;
        }

        // Validate role (minimum 1 character)
        const roleRegex = /^\d$/;
        if (!roleRegex.test(roleInput.value)) {
            // Display error message and add red border
            roleInput.classList.add("is-invalid");
            return false;
        }
                // All validations passed, add green border
        addSuccessClasses();

        return true;
    }

    function removeErrorClasses() {
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.classList.remove("is-invalid");
        });
    }

    function addSuccessClasses() {
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.classList.add("is-valid");
        });
    }


</script>
<script>
  var input = document.querySelector("#phone");

  // Initialize the intl-tel-input library
  var iti = window.intlTelInput(input, {
    separateDialCode: true, // Display the country code separately
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", // Path to the utils.js file
    initialCountry: "pk", // Set Pakistan as the default country
    geoIpLookup: function(success, failure) {
      // Implement your own function to fetch the user's country based on their IP address
      // Use success('US') or failure() to set the country
    },
    flags: true, // Show the flag icons
  });
// Update the phone number input with the concatenated country code
 
    //input.addEventListener("change", function() {
    //var phoneNumber = iti.getNumber();
    //input.value = phoneNumber;
  //});
</script>



</body>
</html>