<?php
require_once "../../../config/settings.inc.php";
define("IEM_APPID", 157);
require_once "../../../include/mlib.php";
force_https();
require_once "../../../include/myview.php";
require_once "../../../include/iemprop.php";
$t = new MyView();
$OL = "10.9.0";

$t->jsextra = <<<EOM
<script src='/vendor/openlayers/{$OL}/ol.js'></script>
<script type="text/javascript" src="/js/olselect-lonlat.js?v=3"></script>
<script src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="index.js?v=11"></script>
EOM;
$t->headextra = <<<EOM
<link rel="stylesheet" type="text/css" href="/vendor/openlayers/{$OL}/ol.css" />
<link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator_bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css" />
EOM;
$t->title = "SPC Convective Outlook + Discussion + Watch Search by Point";

$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 active" aria-current="page">SPC Convective Outlook + Discussion + Watch Search by Point</li>
</ol>
</nav>
<p>This application allows you to search an archive of Storm Prediction Center (SPC)
Convective Outlooks, Mesoscale Convective Discussions (MCD)s, and Convective Watches.
This archive is <strong>unofficial</strong> and based on IEM's processing of text products issued by
the SPC. Each tab presents buttons that allow for a download of the data in
Excel or CSV format and a direct link to the JSON service backending the
table.</p>

<div class="clearfix"></div>

<div class="row">
    <div class="col-md-4 bg-light p-4 rounded-3 border">
        <h3 class="mb-3">Search by Point</h3>

        <div class="mb-4">
            <h5 class="mb-3">Manual Coordinate Entry</h5>
            <div class="row g-2">
                <div class="col-6">
                    <label for="lat" class="form-label small">Latitude (°N)</label>
                    <input type="number" class="form-control form-control-sm" id="lat" placeholder="41.5300" step="0.0001">
                </div>
                <div class="col-6">
                    <label for="lon" class="form-label small">Longitude (°E)</label>
                    <input type="number" class="form-control form-control-sm" id="lon" placeholder="-93.6530" step="0.0001">
                </div>
            </div>
            <button class="btn btn-primary btn-sm mt-2 w-100" id="manualpt">
                    <i class="bi bi-search" aria-hidden="true"></i> Update Search
            </button>
        </div>

        <div class="mb-4">
            <h5 class="mb-3">Outlook Search Options</h5>
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input" id="last" name="last" value="1">
                <label class="form-check-label" for="last">
                    List Most Recent
                    <input type="number" class="form-control form-control-sm d-inline-block ms-1"
                           id="events" name="events" value="1" min="1" max="100" style="width: 60px;">
                    Event(s)
                </label>
            </div>
        </div>

        <div class="mb-4 outlook-days">
            <h5 class="mb-3">Select Outlook Day</h5>
            <div class="day-grid">
                <div class="day-item">
                    <input type="radio" name="day" value="1" checked id="d1">
                    <label for="d1">Day 1</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="2" id="d2">
                    <label for="d2">Day 2</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="3" id="d3">
                    <label for="d3">Day 3</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="4" id="d4">
                    <label for="d4">Day 4</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="5" id="d5">
                    <label for="d5">Day 5</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="6" id="d6">
                    <label for="d6">Day 6</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="7" id="d7">
                    <label for="d7">Day 7</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="day" value="8" id="d8">
                    <label for="d8">Day 8</label>
                </div>
            </div>
        </div>

        <div class="mb-4 category-select">
            <h5 class="mb-3">Select Category</h5>
            <div class="category-grid">
                <div class="day-item">
                    <input type="radio" name="cat" value="categorical" checked id="categorical">
                    <label for="categorical">Categorical</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="cat" value="any severe" id="anysevere">
                    <label for="anysevere">Any Severe</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="cat" value="hail" id="hail">
                    <label for="hail">Hail</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="cat" value="tornado" id="tornado">
                    <label for="tornado">Tornado</label>
                </div>
                <div class="day-item">
                    <input type="radio" name="cat" value="wind" id="wind">
                    <label for="wind">Wind</label>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <h5 class="mb-3">Map Selection</h5>
            <p class="small text-muted mb-2">Drag the marker to select coordinates:</p>
            <div id="map" class="map border rounded"
                 data-lat-input="lat"
                 data-lon-input="lon"
                 data-initial-lat="41.53"
                 data-initial-lon="-93.653"></div>
        </div>
    </div>
    <div class="col-md-8">
    <h3 id="search-results-header">Results of Point Search</h3>

    <!-- Central Loading Indicator -->
    <div id="central-loading" class="text-center py-4 mb-3" style="display: none;">
        <div class="spinner-border text-primary me-2" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <span class="text-muted">Searching the database, one moment...</span>
    </div>

<div id="thetabs">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#1a" data-bs-toggle="tab">Convective Outlooks</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#2a" data-bs-toggle="tab">Mesoscale Convective Discussions</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#3a" data-bs-toggle="tab">Watch Polygons</a>
        </li>
    </ul>

    <div class="tab-content clearfix">
        <div class="tab-pane active" id="1a">

<p>This archive dates back until <strong>1987</strong>.</p>

<div class="float-end">
    <a class="btn btn-secondary" href="/" target="_blank" id="outlooks_excel">
        <i class="bi bi-table" aria-hidden="true"></i> Download as Excel</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="outlooks_csv">
        <i class="bi bi-table" aria-hidden="true"></i> Download as CSV</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="outlooks_link">
        <i class="bi bi-link-45deg" aria-hidden="true"></i> JSON-P Webservice</a>
</div>

<table id="outlooks" class="table table-bordered table-striped">
<caption></caption>
<thead>
<tr><th>Day</th><th>Threshold</th><th>Outlook Issued At (UTC)</th><th>Outlook Begins (UTC)</th>
<th>Outlook Expires (UTC)</th></tr>
</thead>
<tbody>

</tbody>
</table>

</div>
<div class="tab-pane" id="2a">

<p>This archive dates back until <strong>20 October 2008</strong> and is based
on the MCD polygon included within the text.</p>

<div class="float-end">
    <a class="btn btn-secondary" href="/" target="_blank" id="mcds_excel">
        <i class="bi bi-table" aria-hidden="true"></i> Download as Excel</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="mcds_csv">
        <i class="bi bi-table" aria-hidden="true"></i> Download as CSV</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="mcds_link">
        <i class="bi bi-link-45deg" aria-hidden="true"></i> JSON-P Webservice</a>
</div>


<table id="mcds" class="table table-bordered table-striped">
<caption></caption>
<thead>
<tr><th>Discussion Number</th>
<th>UTC Valid</th>
<th>UTC Expire</th>
<th>Watch Confidence</th>
<th>Concerning</th>
<th>Most Prob Tornado</th>
<th>Most Prob Hail</th>
<th>Most Prob Gust</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
        </div><!-- ./2a -->
        <div class="tab-pane" id="3a">

<p>This archive dates back until <strong>1997</strong> and uses the initial watch
polygon included in the SAW product.  <strong>These polygons are not the official
watches!</strong>  You should use the <a href="/vtec/search.php">VTEC Search</a>
tool to get more accurate results for the watch-by-county era.</p>

<div class="float-end">
    <a class="btn btn-secondary" href="/" target="_blank" id="watches_excel">
        <i class="bi bi-table" aria-hidden="true"></i> Download as Excel</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="watches_csv">
        <i class="bi bi-table" aria-hidden="true"></i> Download as CSV</a>
    <a class="btn btn-secondary" href="/" target="_blank" id="watches_link">
        <i class="bi bi-link-45deg" aria-hidden="true"></i> GeoJSON-P Webservice</a>
</div>

<table id="watches" class="table table-bordered table-striped">
<caption></caption>
<thead>
<tr><th>Watch Number</th><th>Type</th><th>UTC Valid</th><th>UTC Expire</th>
<th>Max Hail Size</th><th>Max Wind Speed</th><th>Is PDS?</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
        </div>
    </div>
</div><!-- ./thetabs -->

    </div><!-- ./col-md-8 -->
</div><!-- ./row -->

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