{% extends "static-pages/base.html" %}

{% block title %}
Register your Account
{% endblock %}

{% block content %}

<style>
    .iti--allow-dropdown{
        width: 100% !important;
    }

    #canvas{
        width: 100% !important;
        height: 100% !important;
    }

    .swal2-confirm{
        background: red !important;
    }
</style>

<section class="mt-10 mb-10 md:flex items-center justify-around p-5 md:px-20" style="width:100%;">
    <div class="md:w-1/2">
        <img src="{{ URL_ROOT }}assets/img/loginImage.png" style="width:80%;height:auto;">
    </div>
    <div class="md:w-1/2">
        <form class="max-w-sm mx-auto" id="registrationForm" method="POST">
            <div class="mb-5">
                <h3 class="font-bold text-blue-1 text-xl">Register to continue investing</h3>
            </div>
            <div class="md:flex gap-5">
                <div class="md:w-1/2 mb-5 md:mb-0">
                    <div class="mb-5">
                        <label for="text" class="block mb-2 text-sm font-medium text-gray-900">Firstname</label>
                        <input type="text" id="firstname" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" required />
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Lastname</label>
                        <input type="text" id="lastname" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" required />
                        
                    </div>
                </div>
            </div>
            <div class="md:flex gap-5">
                <div class="md:w-1/2 mb-5 md:mb-0">
                    <div class="mb-5">
                        <label for="text" class="block mb-2 text-sm font-medium text-gray-900">Username</label>
                        <input type="text" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" required />
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Email</label>
                        <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" required />
                        
                    </div>
                </div>
            </div>
            
            <div class="md:flex gap-5">
                <div class="md:w-[100%] mb-5 md:mb-0">
                    <div class="mb-5">
                        <label for="text" class="block mb-2 text-sm font-medium text-gray-900">Telephone</label>
                        <input id="phone" name="phone" type="tel" value="" class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" style="display:block;"/>
                        <!--
                        <div>
                            <button class="button" id="btn" type="button">Validate</button>
                            <span id="valid-msg" class="hide"></span>
                            <span id="error-msg" class="hide"></span>
                        </div>
                        -->
                    </div>
                </div>
            </div>

            <div class="flex gap-5">
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <div class="max-w-sm">
  <label class="block text-sm mb-2">Password</label>
  <div class="relative">
    <input id="hs-toggle-password1" type="password" class="py-3 ps-4 pe-10 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
    <button type="button" onclick="togglePassword('hs-toggle-password1')" data-hs-toggle-password='{
        "target": "#hs-toggle-password1"
      }' class="absolute inset-y-0 end-0 flex items-center z-20 px-3 cursor-pointer text-gray-400 rounded-e-md focus:outline-none focus:text-blue-600">
      <svg class="shrink-0 size-3.5" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path class="hs-password-active:hidden" d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
        <path class="hs-password-active:hidden" d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
        <path class="hs-password-active:hidden" d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
        <line class="hs-password-active:hidden" x1="2" x2="22" y1="2" y2="22"></line>
        <path class="hidden hs-password-active:block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
        <circle class="hidden hs-password-active:block" cx="12" cy="12" r="3"></circle>
      </svg>
    </button>
  </div>
</div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mb-5">
                        <div class="max-w-sm">
  <label class="block text-sm mb-2">Confirm Password</label>
  <div class="relative">
    <input id="hs-toggle-password2" type="password" class="py-3 ps-4 pe-10 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
    <button type="button" onclick="togglePassword('hs-toggle-password2')" data-hs-toggle-password='{
        "target": "#hs-toggle-password2"
      }' class="absolute inset-y-0 end-0 flex items-center z-20 px-3 cursor-pointer text-gray-400 rounded-e-md focus:outline-none focus:text-blue-600">
      <svg class="shrink-0 size-3.5" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path class="hs-password-active:hidden" d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
        <path class="hs-password-active:hidden" d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
        <path class="hs-password-active:hidden" d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
        <line class="hs-password-active:hidden" x1="2" x2="22" y1="2" y2="22"></line>
        <path class="hidden hs-password-active:block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
        <circle class="hidden hs-password-active:block" cx="12" cy="12" r="3"></circle>
      </svg>
    </button>
  </div>
</div>
                    </div>
                </div>
            </div>

            <div class="flex gap-5">
                <div class="w-full">
                    <div class="mb-5">
                        <label for="text" class="block mb-2 text-sm font-medium text-gray-900">Referral Code</label>
                        <input type="text" id="referral" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="" />
                    </div>
                </div>
            </div>
            
            <div class="mb-5 p-3" style="background:black;">
                        <canvas id="canvas" style="width:200px;"></canvas>
            </div>
            
            <div class="mb-5">
                        <label for="text" class="block mb-2 text-sm font-medium text-gray-900">Captcha</label>
                        <input type="text" name="code" id="code" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
            </div>
            
            
            <div class="flex items-center justify-around gap-10">
                <button type="submit" class="text-white bg-green-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Register</button>
                <p class="text-sm">Already have an account? <a href="{% url login %}">Sign In</a></p>
            </div>
          </form>
    </div>
</section>
{% endblock %}

{% block js %}
<script>
</script>

<script>
    
    const captcha = new Captcha($('#canvas'));
    console.log(captcha.getCode());

    $("#registrationForm").submit(function(e){
        e.preventDefault();
        console.log("Default Action Prevented")

        const username = $("#username").val();
        const email = $("#email").val();
        const telephone = $("#phone").val();
        const password = $("#hs-toggle-password1").val();
        const password_confirm = $("#hs-toggle-password2").val();
        const referral = $("#referral").val();
        const firstname = $("#firstname").val();
        const lastname = $("#lastname").val();
        
        if(password !== password_confirm){
            Swal.fire({
                title: 'Error',
                text: `Passwords do not match please check again`,
                icon: 'error',
                confirmButtonText: 'Okay'
            })
            
        }

        if(!captcha.valid($("#code").val())){
            alert("Invalid Captcha Code. Try Again");
        }else{
            $.post({
                type: "POST",
                url: "{% url register_user %}",
                data: { 
                    'username': username,
                    'email': email,
                    'telephone': telephone,
                    'password': password,
                    'referral': referral,
                    'firstname': firstname,
                    'lastname': lastname,
                },

                success: function(data){
                    const result = JSON.parse(data);
                    switch(result.status){
                        case 'success':
                            Swal.fire({
                                title: 'Success',
                                text: `${result.msg}`,
                                icon: 'success',
                                confirmButtonText: 'Go to Login'
                            }).then((outcome) => {
                                if(outcome.isConfirmed){
                                    window.location = "{% url login %}";
                                }
                            })
                            break;
                        case 'error':
                            Swal.fire({
                                title: 'Error',
                                text: `${result.msg}`,
                                icon: 'error',
                                confirmButtonText: 'Okay'
                            })
                            break;
                            
                    }
                },
            })
        }    
    })

</script>

<script src="build/js/intlTelInputWithUtils.js"></script>
    <script>
      const input = document.querySelector("#phone");
      const iti = window.intlTelInput(input, {
        // allowDropdown: false,
         autoPlaceholder: "off",
        // containerClass: "test",
        // countryOrder: ["jp", "kr"],
        // countrySearch: false,
        // customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
        //   return "e.g. " + selectedCountryPlaceholder;
        // },
        // dropdownContainer: document.querySelector('#custom-container'),
        // excludeCountries: ["us"],
        // fixDropdownWidth: false,
        // formatAsYouType: false,
        // formatOnDisplay: false,
        // geoIpLookup: function(callback) {
        //   fetch("https://ipapi.co/json")
        //     .then(function(res) { return res.json(); })
        //     .then(function(data) { callback(data.country_code); })
        //     .catch(function() { callback(); });
        // },
        // hiddenInput: () => "phone_full",
        // i18n: { 'de': 'Deutschland' },
        initialCountry: "us",
        // nationalMode: false,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
        // showFlags: false,
        // separateDialCode: true,
        // strictMode: true,
        // useFullscreenPopup: true,
        // utilsScript: "/build/js/utils.js", // leading slash (and http-server) required for this to work in chrome
        // validationNumberType: null,
      });
      window.iti = iti; // useful for testing

      const button = document.querySelector("#btn");
      const errorMsg = document.querySelector("#error-msg");
      const validMsg = document.querySelector("#valid-msg");
      const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

      const reset = () => {
        input.classList.remove("error");
        errorMsg.innerHTML = "";
        validMsg.innerHTML = "";
        errorMsg.classList.add("hide");
        validMsg.classList.add("hide");
      };

      const showError = (msg) => {
        input.classList.add("error");
        errorMsg.innerHTML = msg;
        errorMsg.classList.remove("hide");
      };

      // on click button: validate
      button.addEventListener('click', () => {
        reset();
        if (!input.value.trim()) {
          showError("Required");
        } else if (iti.isValidNumber()) {
          validMsg.innerHTML = "Valid number: " + iti.getNumber();
          validMsg.classList.remove("hide");
        } else {
          const errorCode = iti.getValidationError();
          const msg = errorMap[errorCode] || "Invalid number";
          showError(msg);
        }
      });

      // on keyup / change flag: reset
      input.addEventListener('change', reset);
      input.addEventListener('keyup', reset);
    </script>
    
    
    <script>
        function togglePassword(elemId){
            const element = document.getElementById(elemId);
            if(element.type === 'password'){
                element.type = 'text';
            }else if(element.type == 'text'){
                element.type = 'password';
            }
            
        }
    </script>

{% endblock %}