<%@ 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;
    }
    .bg-white.shadow-md.rounded-lg select {
        background-color: #fff;
        color: #111827;
        height: 37.78px;
        padding: 0 0.5rem;
        box-sizing: border-box;
    }
    /* Strip Bootstrap 2's default input border / box-shadow / margin-bottom so the
       search input doesn't render a second inner box nor sit higher than the selects. */
    .search-input {
        border: none !important;
        margin-bottom: 0 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background-color: #fff;
    }
    .search-input:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s linear infinite;
        transform-origin: center;
    }
</style>

<h2 class="professional-title"><asp:Localize runat="server" meta:resourcekey="screen_title" /></h2>

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

    <%-- ============ FILTER BAR ============ --%>
    <div class="bg-white shadow-md rounded-lg mb-2">
        <div class="flex items-center justify-between flex-wrap">
            <div class="flex items-center space-x-2 mb-2">
                <div class="flex flex-wrap items-center space-x-1">
                    <div class="flex items-center">
                        <label for="searchInput" class="ml-2 mr-2 text-sm font-medium text-gray-700"><asp:Localize runat="server" meta:resourcekey="search_label" /></label>
                        <div class="flex items-center border border-gray-300 rounded-md">
                            <span class="pl-3 text-gray-400"><i class="fa fa-search"></i></span>
                            <input type="text" id="searchInput" class="search-input pl-2 pr-3 py-2 border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" style="width:220px;" data-bind="value: trim(search)" placeholder="<asp:Localize runat=server meta:resourcekey=search_place_holder />">
                        </div>
                    </div>
                    <div class="flex items-center">
                        <label class="ml-2 mr-2 text-sm font-medium text-gray-700"><asp:Localize runat="server" meta:resourcekey="status_label" /></label>
                        <select data-bind="value: activeFilter, options: statusOptions" class="block pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" style="width:110px;">
                        </select>
                    </div>
                    <div class="flex items-center">
                        <label class="ml-2 mr-2 text-sm font-medium text-gray-700"><asp:Localize runat="server" meta:resourcekey="group_label" /></label>
                        <select data-bind="value: groupFilter, options: gradeGroupsForFilter, optionsDefault: { label: '<asp:Localize runat=server meta:resourcekey=all_groups_label />', value: null }" class="block pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" style="width:160px;">
                        </select>
                    </div>
                </div>
            </div>
            <div class="flex space-x-2 mb-2">
                <button type="button" class="btn-export-to-excel 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><asp:Localize runat="server" meta:resourcekey="excel_btn_label" /></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><asp:Localize runat="server" meta:resourcekey="refresh_btn_label" /></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><asp:Localize runat="server" meta:resourcekey="loading_label" /></span>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <%-- ============ KPI STRIP ============ --%>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
        <div class="kpi-card kpi-total bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="total_grades_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: totalCount">0</div>
            </div>
            <div class="kpi-icon text-gray-300"><i class="fa fa-flask fa-2x"></i></div>
        </div>
        <div class="kpi-card kpi-active bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="active_grades_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: activeCount">0</div>
            </div>
            <div class="kpi-icon text-gray-300"><i class="fa fa-check-circle fa-2x"></i></div>
        </div>
        <div class="kpi-card kpi-groups bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="groups_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: groupsCount">0</div>
            </div>
            <div class="kpi-icon text-gray-300"><i class="fa fa-object-group fa-2x"></i></div>
        </div>
    </div>

    <%-- ============ MAIN 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="grades-grid"></div>
        </div>
    </div>
</div>

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

<%-- ============ EDIT GRADE MODAL ============ --%>
<%-- style="display:none" is required: Bootstrap 2's .modal.fade rule positions
     hidden modals off-screen at top:-25% but does NOT hide them with display:none,
     so a tall modal's bottom edge can dip into the viewport and its inner AG Grid
     intercepts clicks on whatever's above it (e.g. the Edit modal's selects). BS2's
     modal('show') / modal('hide') JS toggles inline display:block / display:none. --%>
<div class="modal fade grades-edit-modal" id="editGradeModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><asp:Localize runat="server" meta:resourcekey="edit_modal_title" /> &mdash; <span data-bind="text: editTitle" style="font-weight:bold;"></span></h4>
            </div>
            <div class="modal-body">
                <div class="edit-form">
                    <div class="form-row">
                        <label class="form-label"><asp:Localize runat="server" meta:resourcekey="name_col" /></label>
                        <input type="text" class="form-input" data-bind="value: trim(editName)" maxlength="50" />
                    </div>
                    <div class="form-row">
                        <label class="form-label"><asp:Localize runat="server" meta:resourcekey="group_col" /></label>
                        <select class="form-input" data-bind="value: editGroupId, options: gradeGroupsForEdit, optionsDefault: { label: '', value: null }"></select>
                    </div>
                    <div class="form-row">
                        <label class="form-label"><asp:Localize runat="server" meta:resourcekey="description_col" /></label>
                        <input type="text" class="form-input" data-bind="value: trim(editDescription)" maxlength="200" />
                    </div>
                    <div class="form-row">
                        <label class="form-label"><asp:Localize runat="server" meta:resourcekey="recipe_col" /></label>
                        <select class="form-input" data-bind="value: editRecipeName, options: scrapRecipesForEdit, optionsDefault: { label: '', value: null }"></select>
                    </div>
                    <div class="form-row">
                        <label class="form-label"><asp:Localize runat="server" meta:resourcekey="active_col" /></label>
                        <div class="form-input form-check-wrapper">
                            <input type="checkbox" id="editActiveChk" data-bind="checked: editActive" />
                            <label for="editActiveChk" class="form-check-label"><asp:Localize runat="server" meta:resourcekey="active_hint" /></label>
                        </div>
                    </div>
                    <div class="edit-error" data-bind="classes: { hide: equals(editError, '') }, text: editError"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="grades-cancel-edit-btn" class="btn" data-dismiss="modal"><asp:Localize runat="server" meta:resourcekey="cancel_btn_label" /></button>
                <button type="button" id="grades-save-edit-btn" class="btn btn-primary" data-bind="enabled: not(editSaving)">
                    <span data-bind="classes: { hide: editSaving }"><asp:Localize runat="server" meta:resourcekey="save_btn_label" /></span>
                    <span data-bind="classes: { hide: not(editSaving) }"><i class="fa fa-cog fa-spin"></i>&nbsp;<asp:Localize runat="server" meta:resourcekey="saving_label" /></span>
                </button>
            </div>
        </div>
    </div>
</div>

<%-- ============ CHEMISTRY MODAL ============ --%>
<%-- See note on #editGradeModal above re: style="display:none". --%>
<div class="modal fade grades-chemistry-modal" id="chemistryModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><asp:Localize runat="server" meta:resourcekey="chemistry_modal_title" /> &mdash; <span data-bind="text: chemistryGradeName" style="font-weight:bold;"></span></h4>
            </div>
            <div class="modal-body">
                <div class="chemistry-grid-container ag-theme-alpine w-full" id="chemistry-grid"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal"><asp:Localize runat="server" meta:resourcekey="close_btn_label" /></button>
            </div>
        </div>
    </div>
</div>
