<?php include 'db.php'; ?>
<?php include 'layout.php'; ?>

<body>
<div class="main-wrapper">
  <div class="page-wrapper">
    <div class="content">
      <div class="page-header">
        <div class="page-title">
          <h4>Branch List</h4>
          <h6>Manage branches</h6>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <table id="branchTable" class="table table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Province</th>
                <th>NTN</th>
                <th>STRN</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $branches = $conn->query("SELECT * FROM branch_info ORDER BY id DESC");
              while ($row = $branches->fetch_assoc()) {
                echo "<tr>
                  <td>{$row['id']}</td>
                  <td>{$row['branch_name']}</td>
                  <td>{$row['branch_phone']}</td>
                  <td>{$row['branch_address']}</td>
                  <td>{$row['province']}</td>
                  <td>{$row['ntn']}</td>
                  <td>{$row['strn']}</td>
                  <td>
                    <button class='btn btn-sm btn-primary editBtn'
                      data-id='{$row['id']}'
                      data-name='{$row['branch_name']}'
                      data-address=\"{$row['branch_address']}\"
                      data-phone='{$row['branch_phone']}'
                      data-province='{$row['province']}'
                      data-ntn='{$row['ntn']}'
                      data-strn='{$row['strn']}'
                      data-bs-toggle='modal' data-bs-target='#editBranchModal'>
                      <i class='fas fa-edit'></i> Edit
                    </button>
                  </td>
                </tr>";
              }
              ?>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Edit Branch Modal -->
      <div class="modal fade" id="editBranchModal" tabindex="-1">
        <div class="modal-dialog">
          <form method="POST" action="update_branch.php" class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Edit Branch</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <input type="hidden" name="id" id="branch_id">

              <div class="alert alert-info small">
                <strong>Note:</strong> Branch Name and Address are managed via the <strong>IT Resources Portal</strong>. To update these details, please contact your administrator.
              </div>

              <div class="mb-2">
                <label>Branch Name</label>
                <input type="text" id="branch_name" class="form-control" readonly>
              </div>

              <div class="mb-2">
                <label>Address</label>
                <textarea id="branch_address" class="form-control" readonly></textarea>
              </div>

              <div class="mb-2">
                <label>Phone</label>
                <input type="text" name="branch_phone" id="branch_phone" class="form-control">
              </div>

              <div class="mb-2">
                <label>Province</label>
                <input type="text" name="province" id="province" class="form-control">
              </div>

              <div class="mb-2">
                <label>NTN</label>
                <input type="text" name="ntn" id="ntn" class="form-control">
              </div>

              <div class="mb-2">
                <label>STRN</label>
                <input type="text" name="strn" id="strn" class="form-control">
              </div>
            </div>

            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Page-specific Scripts -->
<script>
  $(document).ready(function () {
    $('#branchTable').DataTable({
      responsive: true,
      language: {
        searchPlaceholder: "Search...",
        sSearch: "",
      }
    });

    $('.editBtn').on('click', function () {
      $('#branch_id').val($(this).data('id'));
      $('#branch_name').val($(this).data('name'));
      $('#branch_address').val($(this).data('address'));
      $('#branch_phone').val($(this).data('phone'));
      $('#province').val($(this).data('province'));
      $('#ntn').val($(this).data('ntn'));
      $('#strn').val($(this).data('strn'));
    });
  });
</script>

<?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
<script>
  Swal.fire({
    title: 'Branch Updated',
    text: 'Branch updated successfully!',
    icon: 'success',
    timer: 2000,
    showConfirmButton: false
  });

  if (window.location.search.includes('success=1')) {
    history.replaceState({}, document.title, window.location.pathname);
  }
</script>
<?php endif; ?>
</body>
</html>
