{% extends "base.html" %}
{% load static %}
{% block title %}Sign Up{% endblock %}
{% block content %}

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-md max-w-3xl w-full">
    <h2 class="text-3xl font-bold text-center text-blue-700 mb-6">Create Your Account</h2>
	<div id="messageBox" class="hidden p-2 mb-4 rounded"></div>
    <!-- Step 1: Email + Mobile Verification -->
    <div id="step1">
      <label class="block mb-1">Email<span class="text-red-500">*</span></label>
      <input type="email" id="email" class="w-full border px-3 py-2 rounded mb-4" required>

      <label class="block mb-1">Mobile<span class="text-red-500">*</span></label>
      <div class="flex gap-2 mb-4">
        <select id="country_code" class="w-1/4 border px-2 py-2 rounded">
          <option value="+91" selected>+91</option>
          <option value="+1">+1</option>
        </select>
        <input type="number" id="mobile" placeholder="Mobile Number" class="w-3/4 border px-3 py-2 rounded" required>
      </div>
		<div id="loadingBox" class="hidden text-blue-600 font-medium mb-4">
			Sending OTP...
		</div>
      <button onclick="sendOTPs()" id="send-otp-btn"
        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded w-full">
        Send OTPs
      </button>

      <!-- OTP Inputs -->
      <div id="otp-section" class="hidden mt-4">
        <label>Email OTP</label>
        <input type="text" id="email_otp" class="w-full border px-3 py-2 rounded mb-2">

        <!-- <label>Mobile OTP</label> -->
        <!-- <input type="text" id="mobile_otp" class="w-full border px-3 py-2 rounded mb-2"> -->

        <button onclick="verifyOTPs()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded w-full">
          Verify OTPs
        </button>
      </div>
    </div>

    <!-- Step 2: Rest of Form -->
    <form id="step2" class="hidden mt-6">
      {% csrf_token %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
		  <label class="block mb-2">Role</label>
		  <div class="flex rounded-lg overflow-hidden border border-gray-300">
			<label class="flex-1 cursor-pointer">
			  <input type="radio" name="role" value="customer" class="hidden peer" checked>
			  <span class="block text-center px-4 py-2 peer-checked:bg-blue-500 peer-checked:text-white">
				Customer
			  </span>
			</label>
			<label class="flex-1 cursor-pointer">
			  <input type="radio" name="role" value="consultant" class="hidden peer">
			  <span class="block text-center px-4 py-2 peer-checked:bg-blue-500 peer-checked:text-white">
				Consultant
			  </span>
			</label>
		  </div>
		</div>
		 <div></div>
		<div>
          <label>Email</label>
          <input type="text" name="email" id="emailid" class="w-full border px-3 py-2 rounded" readonly>
        </div>
		<div>
          <label class="block mb-1">Mobile<span class="text-red-500">*</span></label>
		  <div class="flex gap-2 mb-4">		
			<input type="text" name="country_code" id="countrycode" class="w-1/4 border px-2 py-2 rounded" readonly>
			<input type="number" name="mobile" id="mobileno" placeholder="Mobile Number" class="w-3/4 border px-3 py-2 rounded" readonly>
		  </div>
        </div>
		<div>
          <label>Salutation</label>
          <select name="salutation" id="salutation" class="w-full border px-3 py-2 rounded">
			  {% for sal in salutations %}
				<option value="{{ sal.id }}">{{ sal.name }}</option>
			  {% endfor %}
			</select>
        </div>
        <div>
          <label>First Name</label>
          <input type="text" name="first_name" id="first_name" class="w-full border px-3 py-2 rounded" required>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" name="last_name" id="last_name" class="w-full border px-3 py-2 rounded" required>
        </div>
        <div>
          <label>Password</label>
          <input type="password" name="password" id="password" class="w-full border px-3 py-2 rounded" required>
        </div>
        <div>
          <label>Repeat Password</label>
          <input type="password" name="password2" id="password2" class="w-full border px-3 py-2 rounded" required>
        </div>
      </div>
      <button type="submit" class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded">
        Register
      </button>
    </form>
  </div>
</div>

<script>
function showLoading(show) {
    const loader = document.getElementById('loadingBox');
    if (show) {
        loader.classList.remove('hidden');
    } else {
        loader.classList.add('hidden');
    }
}
function showMessage(message, type = 'info') {
    const box = document.getElementById('messageBox');
    box.textContent = message;

    // Apply styling based on message type
    box.className = "p-2 mb-4 rounded";
    if (type === 'success') {
        box.classList.add('bg-green-100', 'text-green-800', 'border', 'border-green-300');
    } else if (type === 'error') {
        box.classList.add('bg-red-100', 'text-red-800', 'border', 'border-red-300');
    } else {
        box.classList.add('bg-blue-100', 'text-blue-800', 'border', 'border-blue-300');
    }

    box.classList.remove('hidden');
}

function sendOTPs() {
  const email = document.getElementById('email').value;
  const countryCode = document.getElementById('country_code').value;
  const mobile = document.getElementById('mobile').value;
	 showLoading(true); // start loading
  fetch('/send-otps/', {
    method: 'POST',
    headers: {
      'X-CSRFToken': '{{ csrf_token }}',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, mobile: countryCode + mobile })
  }).then(res => res.json()).then(data => {
	showLoading(false);
    if (data.status === 'ok') {
      document.getElementById('otp-section').classList.remove('hidden');
    } else {
      showMessage(data.message, 'error');
    }
  });
}

function verifyOTPs() {
  const email = document.getElementById('email').value;
  const countryCode = document.getElementById('country_code').value;
  const mobile = document.getElementById('mobile').value;
  const email_otp = document.getElementById('email_otp').value;
 // const mobile_otp = document.getElementById('mobile_otp').value;

  fetch('/verify-otps/', {
    method: 'POST',
    headers: {
      'X-CSRFToken': '{{ csrf_token }}',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, mobile: countryCode + mobile,email_otp })
  }).then(res => res.json()).then(data => {
    if (data.status === 'verified') {
      document.getElementById('step1').classList.add('hidden');
      document.getElementById('step2').classList.remove('hidden');
	  document.getElementById('emailid').value = document.getElementById('email').value;
	  document.getElementById('countrycode').value = document.getElementById('country_code').value;
	  document.getElementById('mobileno').value = document.getElementById('mobile').value;
    } else {
       showMessage(data.message, 'error');
    }
  });
}
</script>
<script>
document.getElementById('step2').addEventListener('submit', function (e) {
    e.preventDefault(); // stop normal form reload
	const role = document.querySelector('input[name="role"]:checked').value;
    const formData = {
		salutation: document.getElementById('salutation').value,
        first_name: document.getElementById('first_name').value,
		last_name: document.getElementById('last_name').value,
		password: document.getElementById('password').value,
		password2: document.getElementById('password2').value,
        email: document.getElementById('email').value,
		role: role,
        mobile: document.getElementById('country_code').value + document.getElementById('mobile').value,
		
    };

    showLoading(true);
	
    fetch('/register/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(data => {
        showLoading(false);		
        if (data.status == 'success') { 
			showMessage(data.message, 'success');
			// Show redirecting text
			showMessage(data.message + " Redirecting to login...", 'success');
			// Delay redirect by 2 seconds
			setTimeout(() => {
				window.location.href = '/login/';
			}, 3000);      
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(() => {
        showLoading(false);
        showMessage("Something went wrong. Please try again.", 'error');
    });
});
</script>
{% endblock %}