<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration</title>
  <link rel="stylesheet" href="./css/styles.css">
  <style>
    /* General container styling */
    .container {
      max-width: 500px;
      margin: 0px auto;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      background-color: #f9f9f9;
      font-family: 'Arial', sans-serif;
    }

    .register-form {
      width: 90%;
      margin: 0px auto;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      background-color: #f9f9f9;
      font-family: 'Arial', sans-serif;
    }
    /* Form group for spacing and layout */
    .form-group {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
    }

    /* Centering headers and improving spacing */
    h2, h3 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }

    /* Styling input fields for consistency */
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    input[type="file"] {
      padding: 10px;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #ddd;
      margin-top: 8px;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="file"]:focus {
      border-color: #007BFF;
      outline: none;
      box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
    }

    /* Styling for buttons */
    button {
      display: block;
      margin: 20px auto;
      padding: 12px 25px;
      background-color: #007BFF;
      color: #fff;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    /* Container for centering the main content */
    .main-content {
      text-align: center;
    }

    /* Styling the image preview */
    .company-image-preview {
      max-width: 90%;
      max-height: 200px;
      display: block;
      margin: 15px auto;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>

<!-- Main Content -->
<div class="container">
 
  <div class ="register-form">
  <!-- Step 1: Company and Branch Information -->
  <div id="step-1" class="registration-step">
    <h3>Step 1: Company and Branch Information</h3>
    <div class="form-group">
      <label for="company-name">Company Name:</label>
      <input type="text" id="company-name" placeholder="Enter company name" required>
    </div>
    <div class="form-group">
      <label for="branch-name">Branch Name:</label>
      <input type="text" id="branch-name" placeholder="Enter branch name" required>
    </div>
    <!-- Image Upload for Company Profile -->
    <div class="form-group">
      <label for="company-image">Upload Company Profile Image:</label>
      <input type="file" id="company-image" name="companyImage" accept="image/*">
    </div>
    <button id="next-to-user">Next</button>
  </div>
  
  <!-- Step 2: User Information (Initially Hidden) -->
  <div id="step-2" class="registration-step" style="display:none;">
    <h3>Step 2: Enter User Details</h3>
    <!-- Display Company Profile Image -->
    <img id="company-image-preview" class="company-image-preview" alt="Company Profile Image" style="display: none;">
    <form id="user-form">
      <!-- Username -->
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" placeholder="Enter username" required>
      </div>
      
      <!-- Email -->
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="Enter email" required>
      </div>

      <!-- Password -->
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" placeholder="Enter password" required>
      </div>

      <!-- Confirm Password -->
      <div class="form-group">
        <label for="confirm-password">Confirm Password:</label>
        <input type="password" id="confirm-password" placeholder="Confirm password" required>
      </div>

      <button id="back-to-company-branch" type="button">Back</button>
      <button type="submit" id="submit-registration">Submit Registration</button>
    </form>
  </div>
</div>
</div>
<!-- Include the JavaScript for handling steps -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const companyNameInput = document.getElementById('company-name');
    const branchNameInput = document.getElementById('branch-name');
    const companyImageInput = document.getElementById('company-image');
    const companyImagePreview = document.getElementById('company-image-preview');
    
    // User details elements
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm-password');

    // Step Navigation Buttons
    const nextToUserBtn = document.getElementById('next-to-user');
    const backToCompanyBranchBtn = document.getElementById('back-to-company-branch');
    const submitRegistrationBtn = document.getElementById('submit-registration');

    // Steps
    const step1 = document.getElementById('step-1');
    const step2 = document.getElementById('step-2');

    // Function to show a specific step and hide others
    function showStep(stepToShow) {
      [step1, step2].forEach(step => {
        step.style.display = step === stepToShow ? 'block' : 'none';
      });
    }

    // Preview uploaded company image
    companyImageInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          companyImagePreview.src = e.target.result;
          companyImagePreview.style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    });

    // Next to Step 2 (User Details)
    nextToUserBtn.addEventListener('click', () => {
      if (companyNameInput.value.trim() === '' || branchNameInput.value.trim() === '') {
        alert('Please enter both company and branch name');
        return;
      }
      showStep(step2); // Show Step 2
    });

    // Back to Step 1 (Company and Branch)
    backToCompanyBranchBtn.addEventListener('click', () => {
      showStep(step1); // Show Step 1
    });

    // Submit Registration
    submitRegistrationBtn.addEventListener('click', (e) => {
      e.preventDefault(); // Prevent form submission

      // Validate passwords match
      if (passwordInput.value !== confirmPasswordInput.value) {
        alert('Passwords do not match. Please confirm your password.');
        return;
      }

      // Gather data into FormData
      const formData = new FormData();
      formData.append('companyName', companyNameInput.value);
      formData.append('branchName', branchNameInput.value);
      formData.append('username', usernameInput.value);
      formData.append('email', emailInput.value);
      formData.append('password', passwordInput.value);

      // Append the image file to FormData
      const imageFile = companyImageInput.files[0];
      if (imageFile) {
        formData.append('companyImage', imageFile);
      }

      console.log('Submitting Registration:', formData);

      // Implement AJAX call to backend for registration
      fetch('/api/register', {
        method: 'POST',
        body: formData // Use FormData as body
      })
      .then(response => response.json())
      .then(data => {
        alert('Registration successful!');
        console.log(data);
      })
      .catch(error => {
        console.error('Error during registration:', error);
        alert('Error occurred during registration');
      });
    });
  });
</script>
</body>
</html>
