<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" meta:resourcekey="PageResource1" %>

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Globalization" %>

<script runat="server">
    String version = WebAppVersion.GetWebAppVersion();

    protected override void InitializeCulture()
    {
        HttpCookie lang = Request.Cookies["siteLanguage"];

        String selectedLanguage = (lang != null) ? lang.Value : "en";
        UICulture = selectedLanguage;
        Culture = selectedLanguage;

        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(selectedLanguage);
        Thread.CurrentThread.CurrentUICulture = new CultureInfo(selectedLanguage);
        base.InitializeCulture();
    }
</script>

<%
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetExpires(DateTime.Now.AddMinutes(-30)); %>

<%--view template starts here (will be appended inside a row-fluid)--%>

<link href="<%= ResolveUrl("~/assets/ag-grid/ag-grid.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/ag-grid/ag-theme-alpine.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/app/components/ag-grid/ag-grid-styles.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/app/pages/lab/" + Path.GetFileNameWithoutExtension(this.Request.PhysicalPath) + "/" + Path.GetFileNameWithoutExtension(this.Request.PhysicalPath) + ".css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/fonts/reboto-font.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/tailwind/tailwind.min.css") %>" rel="stylesheet" />

<style>
    .processes-grid-container .ag-pinned-right-cols-container,
    .processes-grid-container .ag-pinned-left-cols-container {
        border-right: none !important;
    }
    .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
        border-right: none !important;
    }
    .ag-pinned-left-header {
        border-right: none !important;
    }
    .content-container { padding-top: 0px !important; }
    #subnavbar-inner { display: none !important; }
    .professional-title {
        font-size: 22px;
        font-weight: 400;
        color: #202124;
        padding-bottom: 1px;
        border-bottom: 1px solid #dadce0;
        margin-bottom: 2px;
        font-family: 'Roboto', Arial, sans-serif;
    }
    .date-picker {
        border: none !important;
        margin-bottom: 0 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background-color: #fff;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s linear infinite;
        transform-origin: center;
    }
</style>

<h2 class="professional-title">Chemistry Summary</h2>

<div class="bg-white shadow-md rounded-lg p-3 mb-4">

    <%-- ============ TOOLBAR ============ --%>
    <div class="bg-white shadow-md rounded-lg p-3 mb-3 toolbar-card">

        <%-- ROW 1: dates + heat picker + status / actions ------------------------- --%>
        <div class="flex items-center justify-between flex-wrap toolbar-row">
            <div class="flex items-center flex-wrap toolbar-left">

                <%-- Date range (dims when Heat is active) --%>
                <div class="filter-group date-group flex flex-wrap items-center" data-bind="classes: { 'is-inactive': heatActive }">
                    <div class="flex items-center mr-3">
                        <label for="dateStartTbx" class="mr-2 text-sm font-medium text-gray-700"><asp:localize runat="server" meta:resourcekey="date_start_tbx_label" /></label>
                        <div class="flex items-center border border-gray-300 rounded-md bg-white">
                            <input type="text" id="dateStartTbx" class="input-date date-picker pl-3 pr-2 py-2 border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" style="z-index:1000; width:120px;" data-bind="value: momentFormat(start$, 'YYYY-MM-DD', '<asp:Localize runat=server meta:resourcekey=mmddyyyy_format />')">
                            <button type="button" id="calendarStartBtn" class="px-2 py-2 border-l border-gray-300 hover:bg-gray-100 rounded-r" tabindex="-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <label for="dateEndTbx" class="mr-2 text-sm font-medium text-gray-700"><asp:localize runat="server" meta:resourcekey="date_end_tbx_label" /></label>
                        <div class="flex items-center border border-gray-300 rounded-md bg-white">
                            <input type="text" id="dateEndTbx" class="input-date date-picker pl-3 pr-2 py-2 border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" style="z-index:1000; width:120px;" data-bind="value: momentFormat(end$, 'YYYY-MM-DD', '<asp:Localize runat=server meta:resourcekey=mmddyyyy_format />')">
                            <button type="button" id="calendarEndBtn" class="px-2 py-2 border-l border-gray-300 hover:bg-gray-100 rounded-r" tabindex="-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <%-- Visual OR divider --%>
                <div class="filter-divider" aria-hidden="true">
                    <span class="filter-divider-line"></span>
                    <span class="filter-divider-text">OR</span>
                    <span class="filter-divider-line"></span>
                </div>

                <%-- Heat picker (single box: [◀] [input × inside] [▶] [⏭]) --%>
                <div class="flex items-center heat-group">
                    <label for="heatSearchTbx" class="mr-2 text-sm font-medium text-gray-700"><asp:Localize runat="server" meta:resourcekey="heat_filter" /></label>
                    <div class="heat-picker">
                        <button type="button" id="getPreviousItemBtn" class="heat-picker-btn" data-bind="disabled: navigating" title="<asp:Localize runat=server meta:resourcekey=previous_process_btn_title />" tabindex="-1">
                            <i class="fa fa-play fa-rotate-180"></i>
                        </button>
                        <div class="heat-picker-input-wrap">
                            <input type="text" id="heatSearchTbx" class="heat-picker-input" data-bind="value: trim(heatSearch), events: ['change', 'keydown']" placeholder="<asp:Localize runat=server meta:resourcekey=process_picker_place_holder />" data-select-on-focus autocomplete="off" />
                            <button type="button" id="clearHeatBtn" class="heat-picker-clear" data-bind="classes: { hide: not(heatActive) }" title="Clear heat filter" tabindex="-1">
                                <i class="fa fa-times-circle"></i>
                            </button>
                        </div>
                        <button type="button" id="getNextItemBtn" class="heat-picker-btn" data-bind="disabled: navigating" title="<asp:Localize runat=server meta:resourcekey=next_process_btn_title />" tabindex="-1">
                            <i class="fa fa-play"></i>
                        </button>
                        <button type="button" id="goToCurrentBtn" class="heat-picker-btn" data-bind="disabled: navigating" title="<asp:Localize runat=server meta:resourcekey=current_process_btn_title />" tabindex="-1">
                            <i class="fa fa-step-forward"></i>
                        </button>
                    </div>
                </div>
            </div>

            <%-- Right side of row 1: Auto-refresh pill + last updated --%>
            <div class="flex items-center toolbar-right">
                <button type="button" id="autoRefreshToggle"
                        class="auto-refresh-pill flex items-center rounded-full px-3 py-1 text-sm font-medium transition-colors"
                        data-bind="classes: { 'auto-on': autoRefreshEnabled, 'auto-off': not(autoRefreshEnabled) }"
                        title="Toggle auto refresh">
                    <span class="auto-refresh-dot mr-2" data-bind="classes: { 'is-on': autoRefreshEnabled }"></span>
                    <span data-bind="classes: { hide: not(autoRefreshEnabled) }">
                        Auto Refresh ON&nbsp;<span data-bind="text: countdown"></span>s
                    </span>
                    <span data-bind="classes: { hide: autoRefreshEnabled }">
                        Auto Refresh OFF
                    </span>
                </button>

                <div class="last-updated">
                    <i class="fa fa-clock-o mr-1"></i>
                    <span class="last-updated-label">Last updated:</span>&nbsp;
                    <span class="last-updated-value" data-bind="text: lastUpdatedText">-</span>
                </div>
            </div>
        </div>

        <%-- ROW 2: Only Missing + area checkboxes + Excel + Refresh ------------------ --%>
        <div class="flex items-center justify-between flex-wrap toolbar-row toolbar-row-secondary">

            <%-- Left: status chip + area filters --%>
            <div class="flex items-center flex-wrap toolbar-left">

                <%-- Active filter status chip --%>
                <div class="active-filter-status" data-bind="classes: { 'is-heat': heatActive }">
                    <i class="fa" data-bind="classes: { 'fa-bolt': heatActive, 'fa-calendar-o': not(heatActive) }"></i>
                    <span data-bind="text: filterStatusText">Filtering by date</span>
                </div>

                <%-- Areas group (dims when heat is active because a single heat shows everything) --%>
                <div class="areas-group" data-bind="classes: { 'is-inactive': heatActive }">
                    <label class="cb-item only-missing-cb">
                        <input type="checkbox" data-bind="checked: onlyMissing">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="only_missing_label" /></span>
                    </label>

                    <span class="areas-divider" aria-hidden="true"></span>

                    <span class="areas-label">Areas:</span>

                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: eafChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="eaf_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: eafSlagChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="eaf_slag_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: lfChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="lf_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: lfSlagChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="lf_slag_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: licoChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="lico_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: vtdChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="vtd_label" /></span>
                    </label>
                    <label class="cb-item">
                        <input type="checkbox" data-bind="checked: casterChecked">
                        <span class="cb-label"><asp:Localize runat="server" meta:resourcekey="caster_label" /></span>
                    </label>
                </div>
            </div>

            <%-- Right: action buttons --%>
            <div class="flex items-center space-x-2 toolbar-right">
                <button type="button" id="excelBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-center" style="height: 36.5px; font-size: 14px;">
                    <span class="fa fa-file-excel-o mr-2"></span>
                    <span>Excel</span>
                </button>
                <button id="refreshBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center" style="width: 120px; height: 36.5px; font-size: 14px;" title="<asp:localize runat=server meta:resourcekey=refresh_btn_title />">
                    <div data-bind="classes: { hide: isLoading }">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>Refresh</span>
                    </div>
                    <div data-bind="classes: { hide: not(isLoading) }">
                        <div class="flex items-center">
                            <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <g class="spinner">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                                </g>
                            </svg>
                            <span>Loading...</span>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <%-- ============ LEGEND ============ --%>
    <div class="legend-strip bg-white shadow-md rounded-lg p-2 mb-3">
        <span class="legend-strip-label">Legend:</span>
        <div class="legend-item">
            <span class="bullet no-samples"><i class="fa fa-times"></i></span>
            <span class="legend-text"><asp:Localize runat="server" meta:resourcekey="no_samples" /></span>
        </div>
        <div class="legend-item">
            <span class="bullet one-sample"><i class="fa fa-check"></i></span>
            <span class="legend-text"><asp:Localize runat="server" meta:resourcekey="one_samples" /></span>
        </div>
        <div class="legend-item">
            <span class="bullet two-samples"><i class="fa fa-check"></i></span>
            <span class="legend-text"><asp:Localize runat="server" meta:resourcekey="two_samples" /></span>
        </div>
    </div>

    <%-- ============ GRID ============ --%>
    <div class="mx-auto">
        <div class="bg-white shadow-md rounded-lg p-2 mb-4" style="border: 4px solid #ccc;">
            <div class="processes-grid-container ag-theme-alpine w-full" id="chemistry-summary-grid"></div>
        </div>
    </div>
</div>

<div class="row-fluid screen-content" id="main-div"></div>
