Sign In


<!-- Add Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>

<script>
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };
  firebase.initializeApp(firebaseConfig);
</script>

<style type="text/css">
  :root {
    --primary-color: #8e44ad;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --text-color: #333;
    --border-color: #bdc3c7;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --gradient-1: #ff9a9e;
    --gradient-2: #fad0c4;
    --gradient-3: #a1c4fd;
    --gradient-4: #c2e9fb;
  }
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .login-container {
    max-width: 450px;
    width: 100%;
    margin: 20px;
  }
  
  .login-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: none;
    position: relative;
    overflow: hidden;
  }
  
  .login-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4));
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .login-header h1 {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
  }
  
  .login-header p {
    color: #7f8c8d;
    font-size: 16px;
    margin: 0;
  }
  
  .login-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
  
  .login-tab {
    flex: 1;
    text-align: center;
    padding: 14px;
    cursor: pointer;
    font-weight: 600;
    color: #7f8c8d;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
  }
  
  .login-tab.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    background: white;
  }
  
  .tab-content {
    display: none;
  }
  
  .tab-content.active {
    display: block;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
  }
  
  .form-control {
    width: 100%;
    padding: 14px 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  
  .form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
  }
  
  .phone-input-group {
    display: flex;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .phone-input-group:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  }
  
  .country-code {
    padding: 14px 15px;
    background: linear-gradient(135deg, var(--gradient-3), var(--gradient-4));
    border-right: 1px solid var(--border-color);
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
  }
  
  .phone-input {
    flex: 1;
    border: none;
    padding: 14px 15px;
    font-size: 16px;
  }
  
  .phone-input:focus {
    outline: none;
  }
  
  .btn {
    display: inline-block;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #7d3c98, #2980b9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  
  .btn-outline {
    background: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
  }
  
  .btn-outline:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-2px);
  }
  
  .btn-success {
    background: linear-gradient(135deg, var(--success-color), #2ecc71);
    color: white;
  }
  
  .btn-success:hover {
    background: linear-gradient(135deg, #219653, #27ae60);
    transform: translateY(-2px);
  }
  
  .otp-container {
    display: none;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    border-left: 4px solid var(--success-color);
  }
  
  .resend-otp {
    text-align: center;
    margin-top: 15px;
  }
  
  .resend-otp a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
  }
  
  .resend-otp a:hover {
    text-decoration: underline;
  }
  
  .login-footer {
    text-align: center;
    margin-top: 25px;
    color: #7f8c8d;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
  }
  
  .login-footer a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
  }
  
  .login-footer a:hover {
    text-decoration: underline;
  }
  
  .alert {
    padding: 14px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid;
  }
  
  .alert-error {
    background: #ffeaea;
    color: #e74c3c;
    border-color: #e74c3c;
  }
  
  .alert-success {
    background: #eafaf1;
    color: #27ae60;
    border-color: #27ae60;
  }

  /* Firebase specific styles */
  .firebase-error {
    background: #ffeaea;
    color: #e74c3c;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
    border-left: 4px solid #e74c3c;
    font-weight: 500;
  }
  
  .recaptcha-container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
  }

  .loading:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Profile Modal Styles */
  .profile-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
  }
  
  .profile-modal-content {
    background: white;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
  }
  
  .profile-modal-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
  }
  
  .modal-header {
    margin-bottom: 25px;
    text-align: center;
  }
  
  .modal-header h2 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 700;
  }
  
  .modal-header p {
    color: #7f8c8d;
    margin: 0;
  }
  
  .business-type-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .business-type-btn {
    flex: 1;
    padding: 14px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  .business-type-btn.active {
    border-color: var(--secondary-color);
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .gst-field {
    display: none;
  }
  
  .gst-field.show {
    display: block;
    animation: fadeIn 0.5s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Colorful decorations */
  .color-dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
  }
  
  .dot-1 {
    width: 120px;
    height: 120px;
    background: var(--gradient-1);
    top: -40px;
    right: -40px;
  }
  
  .dot-2 {
    width: 80px;
    height: 80px;
    background: var(--gradient-3);
    bottom: -20px;
    left: -20px;
  }

  /* Colorful form highlights */
  .form-highlight {
    position: relative;
  }
  
  .form-highlight:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, var(--gradient-1), var(--gradient-3));
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .form-group:focus-within .form-highlight:before {
    opacity: 1;
  }
</style>




<div class="login-container">
  <div class="login-card">
    <div class="color-dot dot-1"></div>
    <div class="color-dot dot-2"></div>
    
    <div class="login-header">
      <h1>Welcome Back</h1>
      <p>Sign in to your account to continue</p>
    </div>
    
    <div class="firebase-error" id="firebase-error"></div>
    
    <div class="login-tabs">
      <div class="login-tab active" data-tab="phone">Phone Login</div>
    </div>
    
    <!-- Phone Login Tab -->
    <div class="tab-content active" id="phone-tab">
      <form id="firebase-phone-form">
        <input type="hidden" name="csrfmiddlewaretoken" value="B4Tc2S5Yp64yuTKnVAKaTWtdn4wYwzkSJxwhDJbqmYdU7wqwBFdXVw4XU4mbz1DU">
        
        <div class="form-group form-highlight">
          <label class="form-label" for="phone">Phone Number</label>
          <div class="phone-input-group">
            <div class="country-code">+91</div>
            <input type="tel" id="phone" class="phone-input" placeholder="Enter your phone number" required>
          </div>
        </div>
        
        <!-- reCAPTCHA container -->
        <div id="recaptcha-container" class="recaptcha-container"></div>
        
        <button type="button" class="btn btn-primary" id="send-verification-code">
          Send Verification Code
        </button>
        
        <div class="otp-container" id="otp-container">
          <div class="form-group form-highlight">
            <label class="form-label">Enter Verification Code</label>
            <input type="text" id="verification-code" class="form-control" placeholder="Enter 6-digit code" maxlength="6">
          </div>
          
          <button type="button" class="btn btn-success" id="verify-code">
            Verify & Sign In
          </button>
          
          <div class="resend-otp">
            <p>Didn't receive the code? <a href="#" id="resend-code">Resend Code</a></p>
          </div>
        </div>
      </form>
    </div>
    
    <!-- Email Login Tab -->
    <div class="tab-content" id="email-tab">
      <form class="login" method="POST" action="/accounts/login/">
        <input type="hidden" name="csrfmiddlewaretoken" value="B4Tc2S5Yp64yuTKnVAKaTWtdn4wYwzkSJxwhDJbqmYdU7wqwBFdXVw4XU4mbz1DU">
        
        
        
        <div class="form-group form-highlight">
          <label class="form-label" for="id_login">Email</label>
          <input type="email" id="id_login" class="form-control" name="login" placeholder="Enter your email" required>
        </div>
        
        <div class="form-group form-highlight">
          <label class="form-label" for="id_password">Password</label>
          <input type="password" id="id_password" class="form-control" name="password" placeholder="Enter your password" required>
        </div>
        
        
      </form>
    </div>
    
    <div class="login-footer">
      <p>Don't have an account? <a href="/accounts/signup/">Sign up</a></p>
    </div>
  </div>
</div>

<!-- Profile Completion Modal -->
<div class="profile-modal" id="profile-modal">
  <div class="profile-modal-content">
    <div class="color-dot dot-1"></div>
    <div class="color-dot dot-2"></div>
    
    <div class="modal-header">
      <h2>Complete Your Profile</h2>
      <p>Please provide your shop details to continue</p>
    </div>
    
    <form id="profile-completion-form">
      <input type="hidden" name="csrfmiddlewaretoken" value="B4Tc2S5Yp64yuTKnVAKaTWtdn4wYwzkSJxwhDJbqmYdU7wqwBFdXVw4XU4mbz1DU">
      
      <div class="form-group form-highlight">
        <label class="form-label">Shop Name *</label>
        <input type="text" id="shop-name" class="form-control" placeholder="Enter your shop name" required>
      </div>
      
      <div class="form-group form-highlight">
        <label class="form-label">Owner Name *</label>
        <input type="text" id="owner-name" class="form-control" placeholder="Enter your name" required>
      </div>
      
      <div class="form-group">
        <label class="form-label">Business Type *</label>
        <div class="business-type-options">
          <button type="button" class="business-type-btn active" data-type="REGULAR">With GST</button>
          <button type="button" class="business-type-btn" data-type="URP">URP</button>
          <button type="button" class="business-type-btn" data-type="NONE">No Business No.</button>
        </div>
        <input type="hidden" id="business-type" value="REGULAR">
      </div>
      
      <div class="form-group gst-field show" id="gst-field">
        <label class="form-label">GST Number *</label>
        <input type="text" id="gst-number" class="form-control" placeholder="Enter GST number">
      </div>
      
      <div class="form-group form-highlight">
        <label class="form-label">Shop Address *</label>
        <textarea id="shop-address" class="form-control" rows="3" placeholder="Enter your shop address" required></textarea>
      </div>
      
      <button type="submit" class="btn btn-success" id="save-profile">
        Save & Continue
      </button>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const auth = firebase.auth();
    let confirmationResult = null;
    let recaptchaVerifier = null;

    // Tab switching functionality
    const tabs = document.querySelectorAll('.login-tab');
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const tabId = this.getAttribute('data-tab');
        
        // Update active tab
        tabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // Show active tab content
        document.querySelectorAll('.tab-content').forEach(content => {
          content.classList.remove('active');
        });
        document.getElementById(`${tabId}-tab`).classList.add('active');
      });
    });

    // Business type selection
    const businessTypeBtns = document.querySelectorAll('.business-type-btn');
    const businessTypeInput = document.getElementById('business-type');
    const gstField = document.getElementById('gst-field');
    const gstNumberInput = document.getElementById('gst-number');

    businessTypeBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        businessTypeBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        const type = this.getAttribute('data-type');
        businessTypeInput.value = type;
        
        // Show/hide GST field
        if (type === 'REGULAR') {
          gstField.classList.add('show');
          gstNumberInput.required = true;
        } else {
          gstField.classList.remove('show');
          gstNumberInput.required = false;
          gstNumberInput.value = '';
        }
      });
    });

    // Initialize reCAPTCHA verifier
    function initializeRecaptcha() {
      recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal',
        'callback': function(response) {
          console.log('reCAPTCHA solved');
        },
        'expired-callback': function() {
          console.log('reCAPTCHA expired');
        }
      });
    }

    // Show error message
    function showError(message) {
      const errorDiv = document.getElementById('firebase-error');
      errorDiv.textContent = message;
      errorDiv.style.display = 'block';
    }

    // Hide error message
    function hideError() {
      document.getElementById('firebase-error').style.display = 'none';
    }

    // Send verification code
    document.getElementById('send-verification-code').addEventListener('click', function() {
      hideError();
      const phoneNumber = document.getElementById('phone').value;
      
      if (!phoneNumber || phoneNumber.length !== 10) {
        showError('Please enter a valid 10-digit phone number');
        return;
      }
      
      const fullPhoneNumber = '+91' + phoneNumber;
      
      // Show loading state
      this.classList.add('loading');
      this.textContent = 'Sending...';
      
      // Initialize reCAPTCHA if not already done
      if (!recaptchaVerifier) {
        initializeRecaptcha();
        recaptchaVerifier.render().then(function(widgetId) {
          window.recaptchaWidgetId = widgetId;
        });
      }
      
      // Send verification code
      auth.signInWithPhoneNumber(fullPhoneNumber, recaptchaVerifier)
        .then(function(result) {
          confirmationResult = result;
          document.getElementById('otp-container').style.display = 'block';
          document.getElementById('send-verification-code').textContent = 'Code Sent!';
          document.getElementById('send-verification-code').disabled = true;
          console.log('Verification code sent');
        })
        .catch(function(error) {
          showError('Failed to send verification code: ' + error.message);
          console.error('Error sending verification code:', error);
          
          // Reset button state
          document.getElementById('send-verification-code').classList.remove('loading');
          document.getElementById('send-verification-code').textContent = 'Send Verification Code';
          
          // Reset reCAPTCHA on error
          if (window.recaptchaWidgetId) {
            grecaptcha.reset(window.recaptchaWidgetId);
          }
        });
    });

    // Verify code
    document.getElementById('verify-code').addEventListener('click', function() {
      hideError();
      const code = document.getElementById('verification-code').value;
      
      if (!code || code.length !== 6) {
        showError('Please enter a valid 6-digit code');
        return;
      }

      // Show loading
      this.classList.add('loading');
      this.textContent = 'Verifying...';

      confirmationResult.confirm(code)
        .then((result) => {
          // User signed in successfully
          return result.user.getIdToken();
        })
        .then((idToken) => {
          // Send ID token to Django backend for verification
          return fetch('/accounts/login/', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
              idToken: idToken
            })
          });
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            if (data.profile_complete) {
              // Profile already complete, redirect
              window.location.href = data.redirect_url || '/';
            } else {
              // Show profile completion modal
              showProfileModal();
            }
          } else {
            showError(data.message || 'Verification failed');
          }
        })
        .catch(function(error) {
          showError('Verification failed: ' + error.message);
          console.error('Error verifying code:', error);
        })
        .finally(() => {
          // Reset button
          this.classList.remove('loading');
          this.textContent = 'Verify & Sign In';
        });
    });

    // Resend code
    document.getElementById('resend-code').addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementById('send-verification-code').click();
    });

    // Profile completion form
    document.getElementById('profile-completion-form').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const profileData = {
        shop_name: document.getElementById('shop-name').value,
        name: document.getElementById('owner-name').value,
        business_type: document.getElementById('business-type').value,
        gst_number: document.getElementById('gst-number').value,
        shop_address: document.getElementById('shop-address').value
      };

      // Validate GST for regular business
      if (profileData.business_type === 'REGULAR' && !profileData.gst_number) {
        showError('GST number is required for regular business');
        return;
      }

      // Show loading
      const saveBtn = document.getElementById('save-profile');
      saveBtn.classList.add('loading');
      saveBtn.textContent = 'Saving...';

      // Send profile data to backend
 
    });

    function showProfileModal() {
      document.getElementById('profile-modal').style.display = 'flex';
    }

    function hideProfileModal() {
      document.getElementById('profile-modal').style.display = 'none';
    }
  });
</script>