<div id="outputSection" class="mt-5">
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          $file = $_FILES['file'];
          $label = $_POST['label'];

          if ($file['error'] == UPLOAD_ERR_OK) {
              $tmp_name = $file['tmp_name'];
              $name = basename($file['name']);
              $upload_dir = 'uploads/';
              
              // Check if upload directory exists, if not create it
              if (!is_dir($upload_dir)) {
                  mkdir($upload_dir, 0777, true);
              }

              $upload_file = $upload_dir . $name;

              if (move_uploaded_file($tmp_name, $upload_file)) {
                  $cfile = curl_file_create($upload_file, $file['type'], $name);
                  $data = array('file' => $cfile, 'label' => $label);

                  $ch = curl_init();
                  curl_setopt($ch, CURLOPT_URL, "http://127.0.0.1:5000/predict");
                  curl_setopt($ch, CURLOPT_POST, 1);
                  curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

                  $response = curl_exec($ch);
                  if (curl_errno($ch)) {
                      echo '<div class="alert alert-danger mt-3">cURL error: ' . curl_error($ch) . '</div>';
                  }
                  curl_close($ch);

                  $result = json_decode($response, true);

                  if (isset($result['error'])) {
                      echo '<div class="alert alert-danger mt-3">Error: ' . htmlspecialchars($result['error']) . '</div>';
                  } else if ($result === null) {
                      echo '<div class="alert alert-danger mt-3">Error: Invalid JSON response</div>';
                  } else {
                      if (isset($result['prediction']) && isset($result['features'])) {
                          echo '<div class="card mt-5">';
                          echo '<div class="card-header bg-primary text-white">';
                          echo '<h2>Output</h2>';
                          echo '</div>';
                          echo '<div class="card-body">';
                          echo '<div class="text-center">';
                          echo '<img src="' . htmlspecialchars($upload_file) . '" class="img-fluid mt-3 mb-3 mx-auto d-block" alt="Uploaded Image">';
                          echo '</div>';
                          echo '<p><center><strong>Hasil Klasifikasi dari Citra diatas termasuk Kelas Bakteri:</strong> ' . htmlspecialchars($result['prediction']) .'</center></p>';
                          echo '<h3>Extracted Features:</h3>';
                          echo '<ul class="list-group">';
                          echo '<li class="list-group-item"><strong>Number of Objects:</strong> ' . htmlspecialchars($result['features']['num_objects']) . '</li>';
                          echo '<li class="list-group-item"><strong>Mean Eccentricity:</strong> ' . htmlspecialchars($result['features']['mean_eccentricity']) . '</li>';
                          echo '<li class="list-group-item"><strong>Mean Metric:</strong> ' . htmlspecialchars($result['features']['mean_metric']) . '</li>';
                          echo '<li class="list-group-item"><strong>Total Area:</strong> ' . htmlspecialchars($result['features']['total_area']) . '</li>';
                          echo '<li class="list-group-item"><strong>Total Perimeter:</strong> ' . htmlspecialchars($result['features']['total_perimeter']) . '</li>';
                          echo '</ul>';

                          // Display binary image
                          if(isset($result['features']['binary_image']) && is_string($result['features']['binary_image'])) {
                            echo '<h3>Binary Image:</h3>';
                            echo '<img src="data:image/jpg;base64,' . htmlspecialchars($result['features']['binary_image']) . '" class="img-fluid mt-3" alt="Binary Image">';
                          }
                          echo '</div>';
                          echo '</div>';
                      } else {
                          echo '<div class="alert alert-danger mt-3">Error: Missing Output or features in response.</div>';
                      }
                  }
              } else {
                  echo '<div class="alert alert-danger mt-3">Failed to move uploaded file.</div>';
              }
          } else {
              echo '<div class="alert alert-danger mt-3">File upload error.</div>';
          }
      }
      ?>
    </div>