<!DOCTYPE html>
<html>
<head>
  <title>Customers Management</title>
  <style>
  
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f4f4; /* Light background */
    color: #333;
}


h2 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Tabs */
.tabs-wrapper {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.tabs {
    display: flex;
}

.tab-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom: none;
    outline: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-size: 16px;
    color: #555;
    margin-right: -1px; /* Remove space between tabs */
}

.tab-btn:first-child {
    border-top-left-radius: 5px;
    border-left: 1px solid #ddd;
}
.tab-btn:last-child {
    border-top-right-radius: 5px;
}

.tab-btn:hover {
    background-color: #eee;
    color: #333;
}

.tab-btn.active {
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom: 2px solid white;
    color: #007bff;
    font-weight: 500;
}

.tab-content {
    display: none;
    padding: 2px;
  
    border-top: none;
  
}

/* Form */
#customer-form label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

#customer-form input[type="text"],
#customer-form select {
    width: calc(100% - 12px);
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}

#customer-form button[type="submit"] {
    padding: 10px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#customer-form button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Table */
#customer-list1 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}

#customer-list1 th,
#customer-list1 td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

#customer-list1 th {
    background-color: #339efb;
    font-weight: 500;
}

#customer-list1 button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 4px;
}

#customer-list1 button:hover {
    background-color: #2b81f9;
}
  </style>
</head>
<body>

  <div class="main-content">
    <div id="customers-container">
      <h2>Customers Management</h2>

      <div class="tabs-wrapper">
        <div class="tabs">
          <button id="tab-btn-add-customer" class="tab-btn active">Add Customer</button>
          <button id="tab-btn-customer-list" class="tab-btn">Customer List</button>
        </div>
      </div>

      <div id="customer-form-tab" class="tab-content" style="display: block;">
        <form id="customer-form">
          <label for="customer-name">Customer Name</label>
          <input type="text" id="name" placeholder="Customer Name" required><br><br>

          <label for="customer-type">Customer Type</label>
          <select id="type">
            <option value="customer">Customer</option>
            <option value="supplier">Supplier</option>
          </select><br><br>

          <label for="customer-phone">Mobile No</label>
          <input type="text" id="phone" placeholder="Mobile" ><br><br>

          <label for="customer-status">Status</label>
          <select id="status">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select><br><br>

          <button type="submit">Add Customer</button>
        </form>
      </div>

      <div id="customer-list-tab" class="tab-content">
        <table id="customer-list1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Phone</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
      </div>
    </div>
  </div>

  <script src="./js/customers.js"></script>
</body>
</html>