{% extends "base.html" %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="min-h-screen bg-cover bg-center flex items-center justify-center bg-opacity-50" style="background-image: url('{% static 'back.jpg' %}');">
  
  <div class="bg-white bg-opacity-90 p-8 rounded-lg shadow-lg w-full max-w-md">
      <h2 class="text-3xl font-extrabold text-center text-blue-700 mb-6 tracking-wide">
  Login
</h2>
   {% if error %}
      <div class="bg-red-100 text-red-600 p-2 mb-4 rounded">{{ error }}</div>
    {% endif %}
   

    <form method="POST" id="password-login">
      {% csrf_token %}
      <input type="hidden" name="method" value="password">
      <input name="email" type="email" placeholder="Email" class="w-full p-2 mb-3 border rounded" required>
      <input name="password" type="password" placeholder="Password" class="w-full p-2 mb-3 border rounded" required>
       <button class="bg-blue-500 text-white px-4 py-2 rounded">Login</button> <!--<button onclick="toggleLogin('otp')" class="bg-green-500 text-white ml-4 px-4 py-2 rounded">OTP Login</button> -->
    </form>

    <form method="POST" id="otp-login" class="hidden">
      {% csrf_token %}
      <input type="hidden" name="method" value="otp">
      <input id="mobile" name="mobile" type="text" placeholder="Mobile" class="w-full p-2 mb-3 border rounded" required>
      <div class="flex justify-between items-center mb-3">
        <input name="otp" type="text" placeholder="OTP" class="w-full p-2 border rounded mr-2" required>
        <button type="button" onclick="sendOTP()" class="mt-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded w-48">Send OTP</button>
      </div>
      <button class="bg-green-500 text-white px-4 py-2 rounded">Login</button><button onclick="toggleLogin('password')" class="bg-blue-500 text-white ml-4 px-4 py-2 rounded">Email Login</button>
    </form>
    <p class="mt-4 text-sm text-center text-gray-700">
      Don’t have an account?
      <a href="/signup/" class="text-blue-600 hover:underline">Sign up</a>
  </a>
    </p>
	<p class="mt-4 text-sm text-center text-gray-700">      
     <a href="{% url 'password_reset' %}" class="text-blue-600 hover:underline">
    Forgot Password?
  </a>
    </p>
  </div>
</div>
<script>
    function toggleLogin(method) {
      document.getElementById('password-login').classList.toggle('hidden', method !== 'password');
      document.getElementById('otp-login').classList.toggle('hidden', method !== 'otp');
    }

    function sendOTP() {
      const mobile = document.getElementById('mobile').value;
      fetch('/send-otp/', {
        method: 'POST',
        headers: {
          'X-CSRFToken': '{{ csrf_token }}',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `mobile=${mobile}`
      }).then(response => response.json())
        .then(data => {
          alert(data.status === 'ok' ? 'OTP sent!' : data.message);
        });
    }
  </script>
{% endblock %}