
<style>


.type-form-group {
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.type-form-group label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.type-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* Radio Buttons Styling */
.type-container input[type="radio"] {
  display: none; /* Hide default radio button */
}

.type-container label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: color 0.2s ease-in-out;
}

.type-container label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: white;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Selected State */
.type-container input[type="radio"]:checked + label::before {
  background-color: #007bff; /* Blue fill for selected */
  border-color: #007bff;
}

.type-container input[type="radio"]:checked + label {
  color: #007bff; /* Blue text for selected */
}

/* Hover Effect */
.type-container label:hover::before {
  border-color: #007bff;
}

.type-container label:hover {
  color: #007bff;
}
</style>

<!-- Main Content without Sidebar -->
<div class="main-content">
 <!-- Hidden input for item ID -->
<input type="hidden" id="item-id">

  <!-- Tabs Wrapper -->
  <div class="tabs-wrapper">
    <!-- Tabs Navigation -->
    <div class="tabs">
      <button class="tab-btn active" onclick="openTab(event, 'register-item')">Register Item</button>
      <button class="tab-btn" onclick="openTab(event, 'items-list')">Item List</button>
      <button class="tab-btn" onclick="openTab(event, 'import-items')">Import Items</button> <!-- New Import Tab -->
    </div>
     </div>

  <!-- Tab Content for Registering Item -->
  <div id="register-item" class="tab-content">
    <form id="item-form" method="POST" enctype="multipart/form-data">
      <!-- Item Name -->
      <div class="form-group">
        <label for="item-name">Item Name</label>
        <input type="text" id="item-name" placeholder="Enter item name" required>
      </div>

      <!-- Item Code -->
      <div class="form-group">
        <label for="item-code">Item Code</label>
        <input type="text" id="item-code" placeholder="Enter item code" required>
      </div>
    <!-- Item Average Price -->
      <div class="form-group">
        <label for="item-avg-price">Average Price</label>
        <input type="text" id="item-avg-price" placeholder="Enter average price" required>
      </div>

      <!-- Item Selling Price -->
    <div class="form-group">
        <label for="item-selling-price">Selling Price</label>
        <input type="text" id="item-selling-price" placeholder="Enter selling price" required>
      </div>



    <!-- Item Selling Price -->
    <div class="form-group" style="display: none;">
      <label for="item-exp-date">Exp Date</label>
      <input type="date" id="item-exp-date" >
    </div>



    <div>
      <label for="kitchen">kitchen</label>
      <select id="kitchen" name="kitchen" required>
        <option value="">Select kitchen</option>
        <!-- Options will be populated dynamically here -->
      </select>
    </div>

    <div>
      <label for="category">category</label>
      <select id="category" name="category">
        <option value="">Select catagory</option>
        <!-- Options will be populated dynamically here -->
      </select>
    </div>

    <div>
      <label for="attachment required">attachment required</label>
      <select id="attachmentRequired" name="attachmentRequired">
        <option value="no">No</option>
        <option value="yes">yes</option>
          </select>
    </div>


    <div>
      <label for="stock required">stock required</label>
      <select id="stockRequired" name="stockRequired">
        <option value="no">No</option>
        <option value="yes">yes</option>
          </select>
    </div>


      <!-- Item Image -->
      <div class="form-group">
        <label for="item-image-url">Image:</label>
        <input type="file" id="item-image-url">
      </div>


      
      <!-- Status Radio Buttons -->
      <div class="type-form-group">
        <label for="type">Type:</label>
        <div class="type-container">
          <input type="radio" id="type-shop" name="item-type" value="shop" checked>
          <label for="type-shop">Shop</label>
      
          <input type="radio" id="type-store" name="item-type" value="store">
          <label for="type-store">Store</label>
          <input type="radio" id="type-attachment" name="item-type" value="attachment">
          <label for="type-attachment">Attachment</label>
        </div>
      </div>
      

      <button type="submit">Save Item</button>
    </form>
  </div>

  <!-- Tab Content for Item List -->
  <div id="items-list" class="tab-content" style="display:none;">
    <div><input 
      type="text" 
      id="search-item" 
      placeholder="Search by item name..." 
      oninput="filterItems()" 
      style="margin-bottom: 10px; padding: 5px; width: 100%;"
    />  </div>
    
    
    <table>
      <thead>
        <tr>
          <th>Item Name</th>
          <th>Item Code</th>
          <th>Avg. Price</th>
          <th>Selling Price</th>
          <th>Low Alert</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="items-tbody">
        <!-- Items will be dynamically inserted here -->
      </tbody>
    </table>
    <div class="export-csv">
      <button id="export-csv-btn" onclick="exportAsCSV()">Export as CSV</button>
    </div>

  <div>
    </div>

  </div>

  <!-- Tab Content for Importing Items -->
  <div id="import-items" class="tab-content" style="display:none;">
    <h3>Import Items from CSV</h3>
    <div class="form-group">
      <label for="csv-file">Select CSV File:</label>
      <input type="file" id="csv-file" accept=".csv">
      <button onclick="importCSV()">Import</button>
    </div>

    <!-- New checkbox for "Update Quantity" -->
  <div class="form-group" style="margin-top: 10px;">
    <input type="checkbox" id="update-quantity" name="update-quantity">
    <label for="update-quantity">Update Quantity</label>
  </div>
  </div>
</div>

<!-- JavaScript for Sidebar Toggle and Tabs -->
<script>

  // Function to log out (placeholder)
  function logout() {
  
  // Send logout request to the server
  fetch('/api/auth/logout', { method: 'POST' })
    .then((response) => {
      if (response.ok) {
        // Redirect to login page after successful logout
        window.location.href = '/login';
      } else {
        alert('Error logging out. Please try again.');
      }
    })
    .catch((err) => {
      console.error('Error:', err);
      alert('Error logging out. Please try again.');
    });
  }

  // Function to open the selected tab
  function openTab(event, tabName) {
    const tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(content => content.style.display = 'none');

    const tabButtons = document.querySelectorAll('.tab-btn');
    tabButtons.forEach(button => button.classList.remove('active'));

    document.getElementById(tabName).style.display = 'block';
    event.currentTarget.classList.add('active');
  }

  // Open the default tab on load
  openTab({ currentTarget: document.querySelector('.tab-btn.active') }, 'register-item');







  async function fetchDataAndPopulate(url, selectElement) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      data.forEach(item => {
        const option = document.createElement('option');
        option.value = item._id;
        option.textContent = item.name;
        selectElement.appendChild(option);
      });
    } catch (error) {
      console.error('Error loading data:', error);
    }
  }

  const kitchenSelect = document.getElementById('kitchen');
  const categorySelect = document.getElementById('category');

  // Populate kitchen options
  fetchDataAndPopulate('/api/kitchen', kitchenSelect);

  // Populate category options
  fetchDataAndPopulate('/api/category', categorySelect);

</script>

<script src="./js/items.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

