<%@ 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();

    //@Override this is suggested by Microsoft, overriding the initialize culture function (that is
    //automatically called by the aspx.
    //Checks if the cookie exists and sets the language correctly, otherwise will fall-back to the default language
    //(English).
    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>

<%  
    //this prevents the browser from caching templates. (on IE the templates where cached with the old language
    //too, so the change language was not working, this is a workaround for that).

    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("~/assets/fonts/reboto-font.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/tailwind/tailwind.min.css") %>" rel="stylesheet" />


<style>
    /* Page content */
    .content-container{
        padding-top: 0px !important;
    }
    #subnavbar-inner{
        display:none !important;
    }
    /*Page Title */
    .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*/
    .date-picker{
        border:none !important;
        margin-bottom: 0px !important;
        -webkit-box-shadow:none !important;
        box-shadow: none !important;
        width: 100px;
        text-align: center;
    }
    .print-drop-down{
        width: 60px;
        height: 37.78px;
        padding: 0px !important;
        text-align: center;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s linear infinite;
        transform-origin: center;
    }

    @keyframes downloadAnimation {
        0% { transform: translateY(-1px); }
        50% { transform: translateY(1px); }
        100% { transform: translateY(-1px); }
    }
    .document {
        animation: downloadAnimation 1s ease-in-out infinite;
    }

    /* right side of the screen */
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    .blink {
        animation: blink 2s linear infinite;
    }
    .real-time-title {
        font-size: 22px;
        font-weight: 400;
        color: #202124;
        margin-left: 5px;
        padding-bottom: 1px;
        margin-bottom: 2px;
        font-family: 'Roboto', Arial, sans-serif;
    }
    .pickers-section{
        height: 45px !important;
    }
    .h-screen-custom{
        height: 86vh;;
    }
    /* Border for the first child column of each cover */
.ag-cell.cover-first-column {
    border-left: 2px solid #ddd;  /* Left border to separate the first column */
}

/* Border for the last child column of each cover */
.ag-cell.cover-last-column {
    border-right: 2px solid #ddd;  /* Right border to separate the last column */
}

/* Center the parent headers (group headers) */
.ag-header-group-cell-label {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    text-align: center;
    width: 100%;             /* Ensure the label takes full width */
}

/* Center the child headers (individual columns) */
.ag-header-cell-label {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    text-align: center;
    width: 100%;             /* Ensure the label takes full width */
}

/* Out of Cover Alert: highlight row when heat has exceeded alert threshold */
.ag-row.out-of-cover-alert-row {
    background-color: #fef3c7;
    border-left: 3px solid #d97706;
}
.ag-row.out-of-cover-alert-row .ag-cell {
    border-left: none;
}

</style>



<h2 class="professional-title" data-bind="text:screenTitle">
</h2>

<div class="flex h-screen-custom" data-bind="classes: { hide: not(renderCompleted) }">
    
    <!-- Left side : Real Time -->
    <div class="w-1/2 bg-white shadow-md p-4">
        <div class="bg-white shadow-md rounded-lg mb-2 pickers-section">
            <div class="flex justify-between items-center mb-2">
                <div class="flex items-center space-x-2">
                    <!-- <span class="real-time-title">Real Time</span> -->
                    <label class="ml-2 mr-2 text-sm font-medium text-gray-700">Real Time</label>
                    <div class="w-3 h-3 rounded-full bg-green-500 blink"></div>
                </div>
                <button id="assignCoverBtn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center mb-2 mr-2" style="width: 250px; height: 36.5px; font-size: 14px;">Assign Cover</button>
                
                <button id="refreshBtnRt" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center mb-2 mr-2" style="width: 250px; height: 36.5px; font-size: 14px;">
                    <div data-bind="classes: { hide: isLoadingRt }">
                        <span data-bind="text:refreshIn"></span>
                    </div>
                    <div data-bind="classes: { hide: not(isLoadingRt) }">
                        <div class="flex items-center">
                            <svg class="h-5 w-5 mr-3" 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 class="mx-auto">       
            <div class="bg-white shadow-md rounded-lg p-2 mb-4" style="border: 4px solid #ccc;">
                <div class="grid-container-rt w-full" style="height: 75vh;border:1px solid #ccc"></div>
            </div>    
            <div class="mt-4 flex justify-end">
            </div>
        </div>

    </div>

    <!-- Right Side : Hystorical -->
    <div class="w-1/2 bg-white shadow-md p-4">     
        <div class="bg-white shadow-md rounded-lg mb-2 pickers-section">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2 mb-2">         
                    <div class="flex flex-wrap items-center space-x-1">
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label for="dateTbx" class="ml-2 mr-2 text-sm font-medium text-gray-700">Start</label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <input type="text" id="dateStartTbx" class="input-date date-picker pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500" style="z-index:1000;" data-bind="value: momentFormat(start$, 'YYYY-MM-DD', 'MM/DD/YYYY')">
                                    <button id="calendarStartBtn" class="px-2 py-2 border-l border-gray-300 hover:bg-gray-100">
                                        <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>
    
    
                        <div class="flex flex-col"></div>
                            <div class="flex items-center">
                                <label for="dateTbx" class="ml-2 mr-2 text-sm font-medium text-gray-700">End</label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <input type="text" id="dateEndTbx" class="input-date date-picker pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500" style="z-index:1000;" data-bind="value: momentFormat(end$, 'YYYY-MM-DD', 'MM/DD/YYYY')">
                                    <button id="calendarEndBtn" class="px-2 py-2 border-l border-gray-300 hover:bg-gray-100">
                                        <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>               
                </div>
                <div class="flex space-x-2 mb-2">
                    <button id="refreshBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center mb-2 mr-2" style="width: 250px; height: 36.5px; font-size: 14px;">
                        <div data-bind="classes: { hide: isLoading }">
                            <span>Refresh</span>
                        </div>
                        <div data-bind="classes: { hide: not(isLoading) }">
                            <div class="flex items-center">
                                <svg class="h-5 w-5 mr-3" 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>   
        <div class="mx-auto">       
            <div class="bg-white shadow-md rounded-lg p-2 mb-4" style="border: 4px solid #ccc;">
                <div class="grid-container w-full" style="height: 75vh;border:1px solid #ccc"></div>
            </div>    
            <div class="mt-4 flex justify-end">
            </div>
        </div>
    </div>

 
</div>

<!-- 
<div data-bind="classes: { hide: renderCompleted }">
    <div class="flex items-center justify-center h-full">
      <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
      <p class="mt-4 text-lg text-gray-600">Loading...</p>
    </div>
</div>
 -->
