<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Infra Reports IT - SAN Status</title>
  <link rel="shortcut icon" type="image/png" href="/include/favicon-32x32.png">

  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-icons/bootstrap-icons.css">
  <script src="/js/bootstrap.bundle.min.js"></script>

  <style>
      /* Custom styles to match the previous JS rendering */
      .table-danger { background-color: #f8d7da !important; }
      .table-success { background-color: #d1e7dd !important; }
      /* Ensure text is readable on colored headers */
      .card-header a { text-decoration: none; color: white; display: block; width: 100%; }
      .card-header a:hover { color: #f0f0f0; }
  </style>
</head>

<body class="bg-light text-dark">
<?php
  // Include your existing libraries
  include $_SERVER['DOCUMENT_ROOT'] . "/include/all.php";

  // --- PHP LOGIC START ---

  // 1. Fetch JSON Data
  // Ensure the PostJson function returns a valid JSON string
  $jsonString = PostJson("$bdnuss/Storage/BROCADE/PORT/BROCADE_PORT_LIST.php", '');

  // 2. Decode to PHP Array
  $sanData = json_decode($jsonString, true);

  // Check if decode was successful
  if (json_last_error() !== JSON_ERROR_NONE) {
    $sanData = []; // Fallback to empty array to avoid errors
    $errorMessage = "Error decoding JSON: " . json_last_error_msg();
  }
?>

<div class="container-fluid" id="content">
  <div class="row flex-nowrap">
    <div class="col-auto col-md-2 col-xl-2 px-sm-2 px-0 bg-dark vh-100 position-sticky top-0" style="-ms-flex: 0 0 230px;flex: 0 0 230px;">
      <?php include $_SERVER['DOCUMENT_ROOT'] . "/navbar.html"; ?>
    </div>

    <div class="col py-3">
      <h1><span class="badge text-bg-secondary font-weight-bold" style="width:100%;">Fibre Channel Switch Status</span></h1>

      <div class="container mt-4">

        <?php if (isset($errorMessage)): ?>
          <div class="alert alert-danger"><?php echo $errorMessage; ?></div>
        <?php endif; ?>

        <div id="accordion">
          <?php
            // 3. Loop through Switches
            if (!empty($sanData)) {
              $switchIndex = 0; // Iterator for unique IDs

              foreach ($sanData as $switchName => $ports) {
                $switchIndex++;
                $collapseId = "collapse_" . $switchIndex; // Unique ID for Bootstrap

                // Initialize counters
                $upCount = 0;
                $downCount = 0;
                $errorCount = 0;

                // Arrays to store HTML rows (for sorting logic)
                $errorRows = [];
                $normalRows = [];

                // 4. Loop through Ports to calculate stats and build rows
                foreach ($ports as $portId => $portData) {
                  $state = $portData['State'];
                  $errors = (int)$portData['Errors']; // Cast to int for safety

                  if ($state === 'UP') {
                    $upCount++;

                    // Determine row color
                    $rowClass = "table-success";
                    if ($errors > 0) {
                      $errorCount++;
                      $rowClass = "table-danger";
                    }

                    // Build the HTML for this row
                    // Note: Using variables in double quotes for cleaner syntax
                    $rowHtml = "
                            <tr class='{$rowClass}'>
                                <td>{$portId}</td>
                                <td>{$portData['Status']}</td>
                                <td>{$portData['State']}</td>
                                <td>{$portData['Speed']}</td>
                                <td>{$portData['Nego']}</td>
                                <td>{$portData['FrameTX']}</td>
                                <td>{$portData['FrameRX']}</td>
                                <td><strong>{$portData['Errors']}</strong></td>
                            </tr>";

                    // Sort into appropriate array
                    if ($errors > 0) {
                      $errorRows[] = $rowHtml;
                    } else {
                      $normalRows[] = $rowHtml;
                    }

                  } elseif ($state === 'DN') {
                    $downCount++;
                  }
                }

                // 5. Merge rows: Errors first
                $finalRows = array_merge($errorRows, $normalRows);
                $tableBody = implode("\n", $finalRows);

                // 6. Determine Header Style
                $headerColor = "green";
                $msg = "OK";
                if ($errorCount > 0) {
                  $headerColor = "DarkOrange";
                  $msg = "<b> --> {$errorCount} issue(s)</b>";
                }

                // 7. Output the Accordion Item (Card)
                ?>

                <div class="card" style="background-color:<?php echo $headerColor; ?>;">
                  <h4 class="card-header">
                    <a class="btn text-white fs-3 w-100 text-start" data-bs-toggle="collapse" href="#<?php echo $collapseId; ?>">
                      <b><?php echo strtoupper($switchName); ?> : <?php echo $upCount; ?> Ports UP / <?php echo ($upCount + $downCount); ?> :  <?php echo $msg; ?></b>
                    </a>
                  </h4>
                </div>
                <div id="<?php echo $collapseId; ?>" class="collapse" data-bs-parent="#accordion">
                  <div class="card-body bg-white border p-0">
                    <div class="table-responsive">
                      <table class="table table-bordered table-hover mb-0 text-center">
                        <thead class="table-light">
                        <tr>
                          <th>Port</th>
                          <th>Status</th>
                          <th>State</th>
                          <th>Speed</th>
                          <th>Nego</th>
                          <th>FrameTX</th>
                          <th>FrameRX</th>
                          <th>Errors</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php echo $tableBody; ?>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <br>

                <?php
              } // End foreach Switch
            } else {
              echo "<div class='alert alert-warning'>No data available via API.</div>";
            }
          ?>
        </div> </div>
    </div>
  </div>
</div>
</body>
</html>