{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>JQuery Examples</title>
  <!--script src="https://code.jquery.com/jquery-3.7.1.min.js"></script-->
  <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script> 
  <script>
    $(document).ready(function () {
      $.ajax({
        type: "GET",
        url: "/ajax/Countries",
        dataType: "text",
        success: function (html) {
          $('#Countries').html(html);
          //loadStates();
        }
      });
    });

    function loadStates() {
      var url = "/ajax/States?countryName=" + $('#Country').val()
      if ($('#UseLocalName').is(':checked')) url += "&useLocalName=yes";
      $.ajax({
        type: "GET",
        url: url,
        dataType: "text",
        success: function (html) {
          $('#States').html(html);
        }
      });
    }

    function loadImage(imgName, msg) {
      $('#Status').remove();
      var s = "<img id='Status' src='"+"{% static 'images/'%}"+imgName+".gif' width='16' alt='"+msg+"'/>";
      $('#UserName').append(s);
    }

    function Register() {
      alert("Submit...");
      return false;
    }

    function checkUserName() {
      var userName = $('#User').val();
      if (userName.length == 0) {
        $('#Status').remove();
        return;
      }
      loadImage("loading", "Checking");
      $.ajax({
        type: "GET",
        url: "/ajax/CheckUser?userName=" + userName,
        dataType: "text",
        success: function (tx) {
          if (tx.length > 0) {
            loadImage("wrong", "Already in used!");
          }
          else {
            loadImage("right", "Available");
          }
        }
      });
    }

    function loadDays() {
      var url = "/ajax/GetDays?year=" + $('#Years').val() + "&sMonth=" + $('#Months').val()
      $.ajax({
        type: "GET",
        url: url,
        dataType: "text",
        success: function (html) {
          $('#tdDays').html(html);
        }
      });
    }

  </script>
</head>
<body>
  <form method='get' onsubmit="return Register()">
    <table border='1'>
      <tr><th colspan='4'>Member Registration</th></tr>
      <tr>
        <td>User:</td>
        <td id='UserName' colspan='3'>
          <input type='text' name='User' id='User' onchange="checkUserName()" />
        </td>
      </tr>
      <tr><td>Password:</td><td colspan='3'><input type='password' name='Password' id='Password' /></td></tr>
      <tr>
        <td>Country:</td>
        <td id='Countries' colspan='3'>
        </td>
      </tr>
      <tr>
        <td>State:</td>
        <td id='States'></td>
        <td colspan="2"><input type='checkbox' id='UseLocalName' onclick='loadStates()' />Local Name </td>
      </tr>
      <tr>
        <td>DOB:</td>
        <td>
          <select id="Years" onchange='loadDays()'>
            <option>2010</option>
            <option>2011</option>
            <option>2012</option>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
          </select>
        </td>
        <td>
          <select id="Months" onchange='loadDays()'>
            <option>JAN</option>
            <option>FEB</option>
            <option>MAR</option>
            <option>APR</option>
            <option>MAY</option>
            <option>JUN</option>
            <option>JUL</option>
            <option>AUG</option>
            <option>SEP</option>
            <option>OCT</option>
            <option>NOV</option>
            <option>DEC</option>
          </select>
        </td>
        <td id="tdDays">
          <select id="Days">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
          </select>
        </td>
      </tr>
      <tr><th colspan="4"><input type='submit' id='Submit' /></th></tr>
    </table>
  </form>
  <div id="Message"></div>
</body>
</html>
