<%@ 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.
    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("~/app/pages/caster/caster-products/caster-products.css")%>" rel="stylesheet" />
<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;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s linear infinite;
        transform-origin: center;
    }
    /* text center for AG-Grid cells and headers */
    .text-center {
        text-align: center !important;
    }
    .text-right {
        text-align: right !important;
    }
    .ag-theme-alpine .ag-header-cell-label {
        justify-content: center;
    }
    /* Filter select styles */
    .filter-select {
        width: 80px;
        min-width: 80px;
        height: 37.78px;
        line-height: 1.5;
    }
    .search-input {
        border: none !important;
        margin-bottom: 0px !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        width: 150px;
        height: 37.78px !important;
    }
</style>

<h2 class="professional-title">Caster Products</h2>

<div class="bg-white shadow-md rounded-lg p-2 mb-4">
    <div data-bind="classes: { hide: isPageLoading }">
        <div class="bg-white shadow-md rounded-lg mb-2">
            <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">
                        <!-- Start Date -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label for="dateStartTbx" class="ml-2 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">
                                    <input type="text" id="dateStartTbx" class="input-date date-picker pl-10 pr-3 py-2 border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" style="z-index:1000;" data-bind="value: momentFormat(start$, 'YYYY-MM-DD', '<asp:Localize runat=server meta:resourcekey=mmddyyyy_format />')">
                                    <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>

                        <!-- End Date -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label for="dateEndTbx" class="ml-2 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">
                                    <input type="text" id="dateEndTbx" class="input-date date-picker pl-10 pr-3 py-2 border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" style="z-index:1000;" data-bind="value: momentFormat(end$, 'YYYY-MM-DD', '<asp:Localize runat=server meta:resourcekey=mmddyyyy_format />')">
                                    <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>

                        <!-- Caster -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label class="ml-2 mr-2 text-sm font-medium text-gray-700">
                                    <asp:Localize runat="server" meta:resourcekey="caster_label" />
                                </label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <select disabled data-bind="value: casterCode, options: casters" class="block pl-3 py-2 text-base border-0 focus:outline-none focus:ring-blue-500 sm:text-sm rounded-md filter-select">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Crew -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label class="ml-2 mr-2 text-sm font-medium text-gray-700">
                                    <asp:Localize runat="server" meta:resourcekey="crew_label" />
                                </label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <select data-bind="value: crewId, options: crews, optionsDefault: { label: '<asp:Localize runat=server meta:resourcekey=select_crew_label />', value: null }" class="block pl-3 py-2 text-base border-0 focus:outline-none focus:ring-blue-500 sm:text-sm rounded-md filter-select">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Shift -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label class="ml-2 mr-2 text-sm font-medium text-gray-700">
                                    <asp:Localize runat="server" meta:resourcekey="shift_label" />
                                </label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <select data-bind="value: shiftId, options: shifts, optionsDefault: { label: '<asp:Localize runat=server meta:resourcekey=select_shift_label />', value: null }" class="block pl-3 py-2 text-base border-0 focus:outline-none focus:ring-blue-500 sm:text-sm rounded-md filter-select">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Strand -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label class="ml-2 mr-2 text-sm font-medium text-gray-700">
                                    <asp:Localize runat="server" meta:resourcekey="strand_label" />
                                </label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <select data-bind="value: strandId, options: strands, optionsDefault: { label: '<asp:Localize runat=server meta:resourcekey=select_strand_label />', value: null }" class="block pl-3 py-2 text-base border-0 focus:outline-none focus:ring-blue-500 sm:text-sm rounded-md filter-select">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Search -->
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <label 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">
                                    <input type="text" id="search" class="search-input pl-3 pr-3 py-2 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" data-bind="value: trim(searchText)" placeholder="<asp:Localize runat=server meta:resourcekey=search_place_holder />">
                                </div>
                            </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" 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="processes-grid-container ag-theme-alpine w-full" style="height: 75vh; border: 1px solid #ccc;"></div>
            </div>
            <div class="mt-4 flex justify-end">
            </div>
        </div>
    </div>

    <!-- Loading skeleton -->
    <div data-bind="classes: { hide: not(isPageLoading) }">
        <div class="bg-white shadow-md rounded-lg mb-2">
            <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="skeleton-input w-40 h-10 bg-gray-200 rounded-md"></div>
                        <div class="skeleton-input w-40 h-10 bg-gray-200 rounded-md"></div>
                        <div class="skeleton-input w-20 h-10 bg-gray-200 rounded-md"></div>
                        <div class="skeleton-input w-20 h-10 bg-gray-200 rounded-md"></div>
                    </div>
                </div>
                <div class="flex space-x-2 mb-2">
                    <div class="skeleton-button w-64 h-9 bg-gray-200 rounded"></div>
                </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="skeleton-grid w-full h-64vh bg-gray-200"></div>
            </div>
        </div>
    </div>
</div>

<!-- Print Tag Confirmation Modal -->
<script id="print_confirmation_modal" type="text/x-handlebars-template">
  <div class="modal-header">
    <h5>Print Tag Confirmation</h5>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
    <div class="form-grid">

      <!-- Product Number -->
      <label class="form-label">
        <asp:Localize runat="server" meta:resourcekey="productNumber_label" />
      </label>
      <input class="field-input form-control" type="text"
             data-bind="value: productNumber" style="text-align:center;" disabled>

      <!-- Reason -->
      <label class="form-label">
        <asp:Localize runat="server" meta:resourcekey="reasonPhrases_combo_label" />
        <span class="required-star">*</span>
      </label>
      <select class="field-select form-control" data-bind="value: reasonPhraseId, options: reasonPhrases"></select>

      <!-- Printer / Employee -->
      <label class="form-label printerLabel">
        <asp:Localize runat="server" meta:resourcekey="printer_combo_label" />
        <span class="required-star">*</span>
      </label>
      <div class="pair-2">
        <select class="field-select form-control printer-select"
                data-bind="value: printerId, options: printers"></select>
        <div>
          <label class="form-label" style="display:block; margin-bottom:4px;">
            <asp:Localize runat="server" meta:resourcekey="employee_combo_label" />
            <span class="required-star">*</span>
          </label>
          <input class="field-input form-control" type="number" data-bind="value: employeeNumber">
          <span id="warning" style="display:none;">This field is required.</span>
        </div>
      </div>
    </div>
    <div class="length-note alert alert-info mt-4" role="alert">
      <strong> Printing COLD length.</strong>
    </div>

    <!-- Hot & Cold Lengths -->
    <label class="form-label">Lengths</label>
    <div class="pair-2">
      <div>
        <label style="display:block; margin-bottom:4px;">Hot Length</label>
        <input id="pieceLengthInput" class="field-input form-control" type="number"
               data-bind="value: pieceLength">
      </div>
      <div>
        <label style="display:block; margin-bottom:4px;">Cold Length</label>
        <input id="coldLengthInput" class="field-input form-control" type="number">
      </div>
    </div>

    <!-- Comments -->
    <label class="form-label">Comments</label>
    <textarea class="print-comments form-control full"
              data-bind="value: comments"
              placeholder="Add any additional comments..."></textarea>
  </div>

  <div class="modal-footer noselect">
    <div class="footer-btn-bar">
      <button id="acceptBtn" class="btn btn-primary w-half">
        Print
      </button>
      <button id="cancelBtn" class="btn btn-cancel w-half" data-dismiss="modal">
        <asp:Localize runat='server' meta:resourcekey='cancel_btn_label' />
      </button>
    </div>
  </div>
</script>

<!-- Edit Length Modal -->
<script id="edit_length_modal" type="text/x-handlebars-template">
  <div class="modal-header">
    <h5>Edit Length</h5>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>

  <div class="modal-body">
    <div class="form-grid">

      <!-- Product Number -->
      <label class="form-label">Product Number</label>
      <input class="field-input form-control" type="text"
             data-bind="value: productNumber" style="text-align:center;" disabled>

      <!-- Toggle -->
      <label class="form-label">Length Type</label>
      <div>
        <div class="btn-group btn-group-sm" id="editLengthToggle">
          <label class="btn btn-default">
            <input type="radio" name="editLengthMode" value="hot" autocomplete="off" checked> Hot
          </label>
          <label class="btn btn-default">
            <input type="radio" name="editLengthMode" value="cold" autocomplete="off"> Cold
          </label>
        </div>
      </div>

      <!-- Inputs -->
      <label class="form-label">Lengths</label>
      <div class="pair-2">
        <div>
          <label style="display:block; margin-bottom:4px;">Hot Length</label>
          <input id="editHotInput" class="field-input form-control" type="number">
        </div>
        <div>
          <label style="display:block; margin-bottom:4px;">Cold Length</label>
          <input id="editColdInput" class="field-input form-control" type="number">
        </div>
      </div>

    </div>
  </div>

  <div class="modal-footer">
    <button id="saveEditLengthBtn" class="btn btn-primary">Save</button>
    <button id="savePrintEditLengthBtn" class="btn btn-primary">Save &amp; Print</button>
    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
  </div>
</script>
