<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manage Branches</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>
<body>



  <!-- Main Content with Tabs -->
  <div class="small-container">

    <!-- Tabs for Branch Form and Branch List -->
    <div class="tab-container">
      <button class="tab-button active" onclick="openTab(event, 'branch-form-tab')">Add/Edit Branch</button>
      <button class="tab-button" onclick="openTab(event, 'branch-list-tab')">Branch List</button>
    </div>

    <!-- Branch Form (Tab 1) -->
    <div id="branch-form-tab" class="tab-content" style="display: block;">
      <h2>Add/Edit Branch</h2>
      <form id="branch-form">

        <!-- Branch Name -->
        <div class="form-group">
          <label for="branch-name">Branch Name</label>
          <input type="text" id="branch-name" placeholder="Enter branch name" required>
        </div>

        <!-- Branch Type -->
        <div class="form-group">
          <label for="branch-type">Branch Type</label>
          <select id="branch-type" required>
            <option value="">Select type</option>
            <option value="store">Store</option>
            <option value="shop">Shop</option>
          </select>
        </div>


  <!-- Branch Type -->
  <div class="form-group">
    <label for="branch-default-action">Branch Type</label>
    <select id="branch-default-action" required>
       <option value="selling">Selling</option>
      <option value="using" >Using</option>
      <option value="purchasing" >Purchasing</option>
      <option value="transfer" >Transfer</option>
      <option value="producing" >Producing</option>
    


    </select>
  </div>


        <!-- Store Branch Dropdown -->
        <div class="form-group">
          <label for="storebranch-select">Store Branch</label>
          <select id="storebranch-select">
            <option value="null">-- null--</option>
          </select>
        </div>

        <!-- Branch Group Dropdown -->
        <div class="form-group">
          <label for="branchgroup-select">Select Branch Group</label>
          <select id="branchgroup-select">
            <option value="null">-- null--</option>
          </select>
        </div>

        <!-- Toggle Switches for Consider Stock, System Sale, and System Withdrawal -->
        <div class="form-group toggle-group">
          <div class="toggle-item">
            <label for="considerStock">Consider Stock</label>
            <label class="switch">
              <input type="checkbox" id="considerStock" checked>
              <span class="slider round"></span>
            </label>
          </div>
        
          <div class="toggle-item">
            <label for="considerSystemSale">Consider System Sale</label>
            <label class="switch">
              <input type="checkbox" id="considerSystemSale" checked>
              <span class="slider round"></span>
            </label>
          </div>
        
          <div class="toggle-item">
            <label for="considerSystemWithdrawal">Consider System Withdrawal</label>
            <label class="switch">
              <input type="checkbox" id="considerSystemWithdrawal" checked>
              <span class="slider round"></span>
            </label>
          </div>
          <div class="toggle-item">
            <label for="considerSystemWithdrawalForSelling">Consider Stock Withdrawal For Selling</label>
            <label class="switch">
              <input type="checkbox" id="considerSystemWithdrawalForSelling" checked>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        
        <input type="hidden" id="branch-id">
        <button type="submit">Save Branch</button>
      </form>
    </div>

<!-- Branch List (Tab 2) -->
<div id="branch-list-tab" class="tab-content" style="display: none;">
  <h2>Branch List</h2>
  <table class="branch-table">

   

    <thead>
      <tr>
        <colgroup>
          <col> <!-- Branch Name -->
          <col style="width: 200px;"> <!-- Branch Group -->
          <col style="width: 200px;"> <!-- Branch Type -->
          <col style="width: 200px;"> <!-- Default Type -->
          <col> <!-- Stock -->
          <col> <!-- Sy Sale -->
          <col> <!-- Withdrawal -->
          <col> <!-- Withdrawal -->
          <col> <!-- Actions -->
        </colgroup>
      </tr>
    </thead>
    <tbody id="branch-list">
      <!-- Branches will be dynamically inserted here -->
    </tbody>
  </table>
</div>


  </div>

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