<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gventuretest</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <div class="layout">
    <aside class="sidebar">
      <div class="brand">
        <img class="company-logo" src="/company-logo" alt="Gventure Technology logo">
        <div>
          <h1>gventuretest</h1>
          <p>QA URL Monitor</p>
        </div>
      </div>
      <nav class="nav">
        <button class="nav-btn active" data-view="checkerView">URL Checker</button>
        <button class="nav-btn" data-view="appsView">Application List</button>
        <button class="nav-btn" data-view="reportView">Report</button>
        <button class="nav-btn" data-view="screenshotsView">Screenshots</button>
      </nav>
      <div class="theme-box">
        <label for="themeToggle">Theme</label>
        <button id="themeToggle" class="secondary">Soft Dark</button>
      </div>
    </aside>

    <main class="content">
      <section id="checkerView" class="view active">
        <section class="card hero">
          <h2>Website Health Dashboard</h2>
          <p>Upload URL file, paste URLs, or auto-discover routes from your app. Screenshots are grouped by application and website.</p>
        </section>

        <section class="card">
          <h3>Application Setup</h3>
          <div class="form-grid">
            <div>
              <label for="appName">Application Name</label>
              <input id="appName" type="text" placeholder="Signalmash">
            </div>
            <label class="checkbox-row">
              <input type="checkbox" id="loginEnabled">
              <span>Login required</span>
            </label>
            <div>
              <label for="loginUrl">Login URL</label>
              <input id="loginUrl" type="text" placeholder="https://app.example.com/login">
            </div>
            <div>
              <label for="username">Username / ID</label>
              <input id="username" type="text" placeholder="your_username">
            </div>
            <div>
              <label for="password">Password</label>
              <input id="password" type="password" placeholder="your_password">
            </div>
          </div>
        </section>

        <section class="card">
          <h3>URLs</h3>
          <div class="form-grid">
            <label class="checkbox-row">
              <input type="checkbox" id="autoDiscover">
              <span>Auto discover URLs from app</span>
            </label>
            <div>
              <label for="discoverFrom">Discover From (Base URL)</label>
              <input id="discoverFrom" type="text" placeholder="https://your-app.com/dashboard">
            </div>
            <div>
              <label for="maxDiscoverPages">Max discovered pages</label>
              <input id="maxDiscoverPages" type="number" value="25" min="1" max="150">
            </div>
          </div>
          <div class="url-toolbar">
            <input id="urlFile" type="file" accept=".txt,.csv">
            <button id="loadFileBtn" class="secondary">Load File</button>
          </div>
          <textarea id="urls" placeholder="example.com&#10;https://google.com&#10;https://your-site.com/pricing"></textarea>
          <button id="checkBtn">Run Testing</button>
          <p id="statusText" class="status"></p>
        </section>

        <section class="card">
          <h3>Latest Results</h3>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>URL</th>
                  <th>Status</th>
                  <th>HTTP</th>
                  <th>Response Time</th>
                  <th>Issue</th>
                  <th>UI Scan</th>
                  <th>Screenshot</th>
                </tr>
              </thead>
              <tbody id="resultsBody">
                <tr>
                  <td colspan="8" class="muted">No checks run yet.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </section>

      <section id="appsView" class="view">
        <section class="card">
          <div class="section-head">
            <h3>Application List</h3>
            <div class="actions-row">
              <button id="selectAllAppsBtn" class="secondary">Select All</button>
              <button id="clearAppsSelectionBtn" class="secondary">Unselect All</button>
              <button id="bulkDeleteAppsBtn" class="secondary danger">Delete Selected</button>
              <button id="refreshAppsBtn" class="secondary">Refresh</button>
            </div>
          </div>
          <div id="appsList" class="list-grid"></div>
        </section>
        <section class="card">
          <h3>Selected Application History</h3>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>Run Time</th>
                  <th>Total</th>
                  <th>PASS</th>
                  <th>ISSUE</th>
                </tr>
              </thead>
              <tbody id="appHistoryBody">
                <tr>
                  <td colspan="4" class="muted">Click an application to view history.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </section>

      <section id="reportView" class="view">
        <section class="card">
          <div class="section-head">
            <h3>Testing Report</h3>
            <div class="actions-row">
              <button id="selectAllReportsBtn" class="secondary">Select All</button>
              <button id="clearReportsSelectionBtn" class="secondary">Unselect All</button>
              <button id="bulkDeleteReportsBtn" class="secondary danger">Delete Selected</button>
              <button id="exportCsvBtn" class="secondary">Export CSV</button>
              <button id="exportPdfBtn" class="secondary">Export PDF</button>
              <button id="refreshReportsBtn" class="secondary">Refresh</button>
            </div>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>Run Time</th>
                  <th>Application</th>
                  <th>Total</th>
                  <th>Working</th>
                  <th>Issues</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody id="reportBody">
                <tr>
                  <td colspan="6" class="muted">No reports yet.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
        <section class="card">
          <h3>Report Details (with images)</h3>
          <div id="reportDetails" class="details-grid">
            <p class="muted">Run a test to see report details and screenshots here.</p>
          </div>
        </section>
      </section>

      <section id="screenshotsView" class="view">
        <section class="card">
          <div class="section-head">
            <h3>Screenshot Gallery</h3>
            <div class="actions-row">
              <button id="selectAllShotsBtn" class="secondary">Select All</button>
              <button id="clearShotsSelectionBtn" class="secondary">Unselect All</button>
              <button id="bulkDeleteShotsBtn" class="secondary danger">Delete Selected</button>
              <button id="refreshScreenshotsBtn" class="secondary">Refresh</button>
            </div>
          </div>
          <div id="screenshotsGrid" class="shots-grid">
            <p class="muted">No screenshots yet.</p>
          </div>
        </section>
      </section>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
  <script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
