<?php
require_once "../../../config/settings.inc.php";
define("IEM_APPID", 59);
require_once "../../../include/myview.php";
$t = new MyView();

$t->headextra = <<<EOM
<link rel="stylesheet" href="index.css" />
EOM;
$t->jsextra = <<<EOM
<script type="module" src="index.module.js?v=4"></script>
EOM;
$t->title = "NWS Text Product Finder";

$helpdiv = <<<EOM
<div class="d-flex align-items-center mb-4">
  <i class="bi bi-info-circle-fill fs-2 text-primary me-3"></i>
  <div>
    <h3 class="mb-1">IEM NWS Text Product Finder</h3>
    <p class="text-muted mb-0">Search and view National Weather Service text products</p>
  </div>
</div>

<div class="row">
  <div class="col-lg-8">
    <div class="alert alert-info" role="alert">
      <h6 class="alert-heading"><i class="bi bi-lightbulb"></i> Quick Start</h6>
      <p class="mb-0">This application provides a nice interface into viewing National Weather Service issued text products. Once you select a product, a cookie is set on your computer so that when you visit this page the next time, the same products will appear!</p>
    </div>

    <div class="accordion" id="helpAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#updates" aria-expanded="false" aria-controls="updates">
            <i class="bi bi-clock-history me-2"></i> Recent Updates
          </button>
        </h2>
        <div id="updates" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
          <div class="accordion-body">
            <ul class="list-unstyled">
              <li class="mb-2">
              <strong>24 April 2026:</strong> Removed mention of the ECMWF Model
              MOS PILs as these are no longer available for public usage.
              </li>
              <li class="mb-2"><strong>5 June 2025:</strong> The app was mostly rewritten and now uses a URL Parameters pil= style page reference. Any previous bookmarks should continue to work, but you may want to update them to the new style.</li>
              <li class="mb-2"><strong>29 Mar 2024:</strong> <a href="/cgi-bin/afos/retrieve.py?help" class="btn btn-sm btn-outline-primary"><i class="bi bi-file-earmark"></i> Backend documentation</a> exists for those wishing to script against this service.</li>
              <li class="mb-2"><strong>15 May 2019:</strong> If you specify a three character PIL, you will get any PIL matches that start with those three characters. You can optionally specify a WMO Header (TTAAII) to reduce PIL ambiguity.</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#about" aria-expanded="false" aria-controls="about">
            <i class="bi bi-info-circle me-2"></i> About This Service
          </button>
        </h2>
        <div id="about" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
          <div class="accordion-body">
            <p>Using our local <a href="https://www.unidata.ucar.edu/data/internet-data-distribution-idd">UNIDATA IDD</a> data feed, a simple script archives <strong>recent</strong> NWS text products into a database. You must know the AFOS PIL / AWIPS ID in order to get the products you want.</p>

            <div class="alert alert-warning" role="alert">
              <h6 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> Important Notice</h6>
              <p class="mb-2">Please do not depend on this page for operational decision making. Errors can and do occur with data processing, data reception and any other error possible with Internet communications.</p>
              <p class="mb-0"><strong>All products should be used for educational purposes only.</strong></p>
            </div>

            <p>The archive maintains products from at least the most recent 7 days. A daily scrubber runs at 3:30 AM each day to reindex the products and delete old products, so the query interface is off-line at that time. This interruption should only last 10 minutes.</p>

            <p class="mb-0">If you don't like this app, <a href="old.phtml" class="btn btn-sm btn-outline-secondary">here is the old one</a>.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-header bg-secondary text-white">
        <i class="bi bi-list-ul"></i> Common Product IDs
      </div>
      <div class="card-body p-2">
        <div class="mb-3">
          <h6 class="text-primary mb-2">MOS PILS</h6>
          <div class="table-responsive">
            <table class="table table-sm table-striped">
              <thead>
                <tr><th>PIL</th><th>Description</th><th>DSM Example</th></tr>
              </thead>
              <tbody>
                <tr><td>MAVxxx</td><td>GFS MOS Guidance</td><td>MAVDSM</td></tr>
                <tr><td>METxxx</td><td>NAM MOS Guidance</td><td>METDSM</td></tr>
                <tr><td>NBExxx</td><td>National Blend E</td><td>NBEDSM</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="mb-3">
          <h6 class="text-primary mb-2">Popular Products</h6>
          <div class="row">
            <div class="col-6">
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='REPNT2'">REPNT2</button>
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='SWODY1'">SWODY1</button>
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='SWODY2'">SWODY2</button>
            </div>
            <div class="col-6">
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='AFDDMX'">AFDDMX</button>
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='SWOMCD'">SWOMCD</button>
              <button class="btn btn-sm btn-outline-primary w-100 mb-1" onclick="document.getElementById('pil').value='PMDHMD'">PMDHMD</button>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="https://www.weather.gov/datamgmt/commsid" class="btn btn-sm btn-outline-info">
            <i class="bi bi-file-earmark-excel"></i> NNN Categories
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
EOM;
$theform = <<<EOM
<form name="control" id="myform">

<div class="mb-3">
  <label for="pil" class="form-label fw-bold">3-6 Character PIL</label>
  <input placeholder="AFDDMX" type="text" name="pil" id="pil" maxlength="6" class="form-control form-control-sm">
  <div class="form-text">Specify 4-6 characters for exact match</div>
</div>

<div class="mb-3">
  <label for="center" class="form-label fw-bold">4 Character Center</label>
  <input placeholder="KDMX" type="text" name="center" id="center" maxlength="4" class="form-control form-control-sm">
  <div class="form-text">Can be left blank</div>
</div>

<div class="mb-3">
  <label for="ttaaii" class="form-label fw-bold">6 Char WMO Header</label>
  <input placeholder="FXUS63" type="text" name="ttaaii" id="ttaaii" maxlength="6" class="form-control form-control-sm">
  <div class="form-text">Can be left blank</div>
</div>

<div class="mb-3">
  <label for="limit" class="form-label fw-bold">Entries</label>
  <input type="number" name="limit" id="limit" min="1" max="100" value="1" class="form-control form-control-sm">
</div>

<div class="mb-3">
  <label class="form-label fw-bold">Time Sort</label>
  <div class="form-check">
    <input type="radio" name="order" value="desc" id="desc" class="form-check-input" checked>
    <label for="desc" class="form-check-label">Newest First</label>
  </div>
  <div class="form-check">
    <input type="radio" name="order" value="asc" id="asc" class="form-check-input">
    <label for="asc" class="form-check-label">Oldest First</label>
  </div>
</div>

<div class="mb-3">
  <label for="sdate" class="form-label fw-bold">Start Date @ 00 UTC</label>
  <input id="sdate" type="date" name="sdate" min="1983-01-01" class="form-control form-control-sm">
</div>

<div class="mb-3">
  <label for="edate" class="form-label fw-bold">End Date @ 00 UTC</label>
  <input id="edate" type="date" name="edate" min="1983-01-02" class="form-control form-control-sm">
</div>

<div class="d-grid">
  <button type="button" id="myform-submit" class="btn btn-primary">
    <i class="bi bi-search"></i> Load Product
  </button>
</div>

</form>
EOM;
$t->content = <<<EOM

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/nws/">NWS Mainpage</a></li>
    <li class="breadcrumb-item"><a href="/nws/text.php">NWS Text</a></li>
    <li class="breadcrumb-item active" aria-current="page">Text Product Finder</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-3">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <i class="bi bi-search"></i> Product Search
      </div>
      <div class="card-body">
        {$theform}
      </div>
    </div>
  </div><!-- ./col-md-3 -->
  <div class="col-md-9">

<div class="card" id="thetabs">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
         <li class="nav-item" role="presentation">
           <a class="nav-link active" href="#help" data-bs-toggle="tab" data-bs-target="#help" role="tab" aria-controls="help" aria-selected="true">Help</a>
         </li>
      </ul>
    </div><!-- ./card-header -->
    <div class="card-body">
    <div id="thetabs-toolbar" class="mb-3">
        <div class="btn-toolbar" role="toolbar">
          <div class="btn-group me-2" role="group">
            <button type="button" id="toolbar-refresh" class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
            <button type="button" id="toolbar-download" class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-download"></i> Download Text
            </button>
            <button type="button" id="toolbar-zip" class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-file-earmark-zip"></i> Download Zipfile
            </button>
          </div>
          <div class="btn-group me-2" role="group">
            <button type="button" id="toolbar-print" class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-printer"></i> Print
            </button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" id="toolbar-close" class="btn btn-outline-danger btn-sm">
              <i class="bi bi-x-lg"></i> Close Tab
            </button>
          </div>
        </div>
    </div>
     <div class="tab-content clearfix" id="myTabContent">

       <div class="tab-pane fade show active" id="help" role="tabpanel" aria-labelledby="help-tab">
        {$helpdiv}
       </div><!-- ./help -->
    </div><!-- ./tab-content -->
    </div><!-- ./card-body -->
  </div><!-- ./card -->
  </div><!-- ./col-md-9 -->
</div><!-- ./row -->

EOM;
$t->render('full.phtml');
