{% load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Michael Drinks- Registration</title>
    <link rel="stylesheet" href="{% static 'CSS/signup.css' %}" />
  </head>

  <body>
    <div class="container">
      <form action="" method="post" id="regForm">
        <h1>Registration Form</h1>
        <hr />
        <nav>
          {% if messages %}
            <ul>
              {% for message in messages %}
                <li style="color: {% if message.tags == 'warning' %}
                    red{% else %}green{% endif %};">{{ message }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </nav>
        {% csrf_token %}
        <input type="text" placeholder="FIRST NAME" name="first_name" id="fname" />
        <input type="text" placeholder="LAST NAME" name="last_name" id="lname" />
        <input type="text" placeholder="USER NAME" name="username" id="username" />
        <input type="email" placeholder="EMAIL" name="email" id="email" />
        <input type="number" placeholder="PHONE NUMBER" name="phone" id="phone" />
        <input type="password" placeholder="PASSWORD" name="password" id="password" />
        <input type="password" placeholder="CONFIRM PASSWORD" name="c_password" id="c_password" />
        <div class="pwd">
          <input type="checkbox" id="chk" />show password
        </div>
        <button type="submit" id="btn">Submit</button>
        <p>
          If You Have An Account Please <a href="{% url 'login' %}">Login</a>
        </p>
      </form>
    </div>

    <div id="overlay">
      <div class="loading" id="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <script>
      const password = document.getElementById('password')
      const c_password = document.getElementById('c_password')
      const chk = document.getElementById('chk')
      
      chk.onchange = function (e) {
        password.type = chk.checked ? 'text' : 'password'
        c_password.type = chk.checked ? 'text' : 'password'
      }
      
      const btn = document.getElementById('btn')
      const overlay = document.getElementById('overlay')
      const loader = document.getElementById('loader')
      
      btn.addEventListener('click', (event) => {
        const username = document.getElementById('username').value.trim()
        const email = document.getElementById('email').value.trim()
        const phone = document.getElementById('phone').value.trim()
        const password = document.getElementById('password').value.trim()
      
        if (username === '' || email === '' || phone === '' || password === '') {
          event.preventDefault()
          alert('Please fill all required fields: Username, Email, Phone Number, Password.')
          return
        }
      
        overlay.style.display = 'flex'
        loader.classList.add('start')
      })
    </script>
  </body>
</html>
