<?php
// --- table_list.php ---
include 'db.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>Dining Tables</h4>
          <h6>Manage Floors and Tables</h6>
        </div>
        <div class="page-btn">
          <a href="floor_list.php" class="btn btn-outline-primary">Manage Floors</a>
          <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#addTableModal">+ Add Table</a>
        </div>
      </div>

      <?php if (isset($_GET['success'])): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          <?php 
          if ($_GET['success'] == '1') echo "Table added successfully!";
          elseif ($_GET['success'] == 'updated') echo "Table updated successfully!";
          ?>
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      <?php endif; ?>

      <?php if (isset($_GET['error'])): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          <?php 
          if ($_GET['error'] == 'missing_data') echo "Please fill all required fields!";
          elseif ($_GET['error'] == 'update_failed') echo "Failed to update table. Please try again!";
          ?>
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      <?php endif; ?>

      <div class="card">
        <div class="card-body">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Table Name</th>
                <th>Floor</th>
                <th>Seats</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $res = $conn->query("SELECT t.*, f.name AS floor_name FROM dinein_tables t JOIN dinein_floors f ON t.floor_id = f.id ORDER BY f.id, t.id");
              while ($row = $res->fetch_assoc()) {
                echo "<tr>
                  <td>{$row['table_name']}</td>
                  <td>{$row['floor_name']}</td>
                  <td>{$row['seats']}</td>
                  <td>{$row['status']}</td>
                  <td>
                    <button class='btn btn-sm btn-primary' onclick='editTable({$row['id']}, \"{$row['table_name']}\", {$row['floor_id']}, {$row['seats']}, \"{$row['status']}\")'>
                      <i class='fas fa-edit'></i> Edit
                    </button>
                  </td>
                </tr>";
              }
              ?>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Add Table Modal -->
      <div class="modal fade" id="addTableModal" tabindex="-1">
        <div class="modal-dialog">
          <form method="POST" action="add_table.php" class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Add Table</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <div class="mb-2">
                <label>Floor</label>
                <select name="floor_id" class="form-control" required>
                  <option value="">Select Floor</option>
                  <?php
                  $floors = $conn->query("SELECT * FROM dinein_floors WHERE is_active = 1");
                  while ($f = $floors->fetch_assoc()) {
                    echo "<option value='{$f['id']}'>{$f['name']}</option>";
                  }
                  ?>
                </select>
              </div>
              <div class="mb-2">
                <label>Table Name</label>
                <input type="text" name="table_name" class="form-control" required>
              </div>
              <div class="mb-2">
                <label>Seats</label>
                <input type="number" name="seats" class="form-control" value="4">
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" type="submit">Save Table</button>
            </div>
          </form>
        </div>
      </div>

      <!-- Edit Table Modal -->
      <div class="modal fade" id="editTableModal" tabindex="-1">
        <div class="modal-dialog">
          <form method="POST" action="edit_table.php" class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Edit Table</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <input type="hidden" name="table_id" id="edit_table_id">
              <div class="mb-2">
                <label>Floor</label>
                <select name="floor_id" id="edit_floor_id" class="form-control" required>
                  <option value="">Select Floor</option>
                  <?php
                  $floors = $conn->query("SELECT * FROM dinein_floors WHERE is_active = 1");
                  while ($f = $floors->fetch_assoc()) {
                    echo "<option value='{$f['id']}'>{$f['name']}</option>";
                  }
                  ?>
                </select>
              </div>
              <div class="mb-2">
                <label>Table Name</label>
                <input type="text" name="table_name" id="edit_table_name" class="form-control" required>
              </div>
              <div class="mb-2">
                <label>Seats</label>
                <input type="number" name="seats" id="edit_seats" class="form-control" value="4">
              </div>
              <div class="mb-2">
                <label>Status</label>
                <select name="status" id="edit_status" class="form-control" required>
                  <option value="available">Available</option>
                  <option value="occupied">Occupied</option>
                  <option value="reserved">Reserved</option>
                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" type="submit">Update Table</button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
function editTable(id, tableName, floorId, seats, status) {
  document.getElementById('edit_table_id').value = id;
  document.getElementById('edit_table_name').value = tableName;
  document.getElementById('edit_floor_id').value = floorId;
  document.getElementById('edit_seats').value = seats;
  document.getElementById('edit_status').value = status;
  
  var editModal = new bootstrap.Modal(document.getElementById('editTableModal'));
  editModal.show();
}
</script>

</body>
</html>