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

<link href="<%= ResolveUrl("~/app/pages/caster/casters-shift-report/casters-shift-report.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/tailwind/tailwind.min.css") %>" rel="stylesheet" />

<h2 class="professional-title">Caster Shift Report</h2>

<div class="sr-page" data-bind="classes: { hide: not(renderCompleted) }">
    <div data-bind="classes: { hide: isPageLoading }">

        <%-- PAGE HEADER --%>
        <div class="sr-page-header">
            <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:relative; z-index:1;">
                <div>
                    <h2 class="sr-title">Caster Shift Report</h2>
                </div>
                <span class="sr-shift-badge" data-bind="text: currentShift"></span>
            </div>
        </div>

        <%-- NAVIGATION BAR --%>
        <div class="sr-nav-bar">
            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                <button id="backNavBtn" class="sr-nav-btn" data-bind="disabled: isLoading">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </button>

                <div class="sr-date-group">
                    <input type="text" id="productionDateTbx" class="input-date date-picker" style="z-index:1000;" data-bind="value: productionDate, disabled: isLoading">
                    <button id="calendarBtn" class="sr-calendar-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>

                <span class="sr-shift-pill" data-bind="text: shiftId"></span>

                <button id="forwardNavBtn" class="sr-nav-btn" data-bind="disabled: isLoading">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                </button>

                <button id="refreshBtn" class="sr-btn-primary">
                    <div data-bind="classes: { hide: isLoading }">
                        <span>Refresh</span>
                    </div>
                    <div data-bind="classes: { hide: not(isLoading) }">
                        <div style="display:flex; align-items:center; gap:6px;">
                            <svg class="h-4 w-4" 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>

            <button id="downloadPdfBtn" class="sr-btn-primary" data-bind="disabled: isLoading" title="Export PDF">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                <span>Export PDF</span>
            </button>
        </div>

        <%-- LOADING STATE --%>
        <div data-bind="classes: { hide: not(isLoading) }">
            <div class="sr-loading-container">
                <div class="sr-loading-spinner"></div>
                <p class="sr-loading-text">Loading shift data...</p>
            </div>
        </div>

        <%-- NO DATA STATE --%>
        <div data-bind="classes: { hide: any(hasData, isLoading) }">
            <div class="sr-empty-container">
                <div class="sr-empty-icon">
                    <svg width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                    </svg>
                </div>
                <p class="sr-empty-text">No data available</p>
                <p class="sr-empty-hint">Try selecting a different date or shift</p>
            </div>
        </div>

        <%-- MAIN CONTENT --%>
        <div data-bind="classes: { hide: any(not(hasData), isLoading) }">

            <%-- SECTION 1: Shift Resume --%>
            <div class="sr-card sr-card--blue">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--blue">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                    </span>
                    Shift Resume
                </h3>
                <div class="shift-resume-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 2: Warehouse Costs --%>
            <div class="sr-card sr-card--blue">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--blue">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
                    </span>
                    Warehouse Costs
                </h3>
                <div class="warehouse-costs-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 3: Products Cast --%>
            <div class="sr-card sr-card--blue">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--blue">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    </span>
                    Products Cast
                </h3>
                <div class="products-cast-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

            <%-- SECTION 4: Caster 1 --%>
            <div data-bind="classes: { hide: not(showCaster1Data) }">

                <%-- Caster 1 Resume --%>
                <div class="sr-card sr-card--green">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        Caster 1 Resume
                    </h3>
                    <div class="caster1-resume-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>

                <%-- Caster 1 Gantt Timeline --%>
                <div class="sr-card sr-card--green">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        Caster 1 Timeline
                    </h3>
                    <div class="caster1-gantt-screen sr-gantt"></div>
                </div>

                <%-- Caster 1 Gantt Legend --%>
                <div class="sr-legend">
                    <div class="sr-legend-inline">
                        <div class="sr-legend-group">
                            <span class="sr-legend-label">Strand Speeds</span>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f11919;"></span><span class="sr-legend-text">&lt; 25%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f79f2d;"></span><span class="sr-legend-text">25-50%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f7e44f;"></span><span class="sr-legend-text">50-75%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#34ba4f;"></span><span class="sr-legend-text">&gt; 75%</span></div>
                        </div>
                        <div class="sr-legend-divider"></div>
                        <div class="sr-legend-group" id="gantt-legend-categories-c1">
                            <span class="sr-legend-label">Delay Categories</span>
                        </div>
                    </div>
                </div>

                <%-- Caster 1 Delays --%>
                <div class="sr-card sr-card--red" data-bind="classes: { hide: not(showDelaysCaster1Data) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--red">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </span>
                        Caster 1 Delays
                    </h3>
                    <div class="delays-caster1-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>

                <%-- Caster 1 Melt Orders --%>
                <div class="sr-card sr-card--purple">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--purple">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                        </span>
                        Caster 1 Melt Orders
                    </h3>
                    <div class="melt-orders-caster1-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>

                <%-- Caster 1 Uncut Tails --%>
                <div class="sr-card sr-card--amber" data-bind="classes: { hide: not(showCaster1UncutTails) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--amber">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        </span>
                        Caster 1 Uncut Tails
                    </h3>
                    <div class="uncut-tails-caster1-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>
            </div>

            <%-- SECTION 5: Caster 2 --%>
            <div data-bind="classes: { hide: not(showCaster2Data) }">

                <%-- Caster 2 Resume --%>
                <div class="sr-card sr-card--green">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        Caster 2 Resume
                    </h3>
                    <div class="caster2-resume-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>

                <%-- Caster 2 Gantt Timeline --%>
                <div class="sr-card sr-card--green">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--green">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </span>
                        Caster 2 Timeline
                    </h3>
                    <div class="caster2-gantt-screen sr-gantt"></div>
                </div>

                <%-- Caster 2 Gantt Legend --%>
                <div class="sr-legend">
                    <div class="sr-legend-inline">
                        <div class="sr-legend-group">
                            <span class="sr-legend-label">Strand Speeds</span>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f11919;"></span><span class="sr-legend-text">&lt; 25%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f79f2d;"></span><span class="sr-legend-text">25-50%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#f7e44f;"></span><span class="sr-legend-text">50-75%</span></div>
                            <div class="sr-legend-item"><span class="sr-legend-swatch" style="background:#34ba4f;"></span><span class="sr-legend-text">&gt; 75%</span></div>
                        </div>
                        <div class="sr-legend-divider"></div>
                        <div class="sr-legend-group" id="gantt-legend-categories-c2">
                            <span class="sr-legend-label">Delay Categories</span>
                        </div>
                    </div>
                </div>

                <%-- Caster 2 Delays --%>
                <div class="sr-card sr-card--red" data-bind="classes: { hide: not(showDelaysCaster2Data) }">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--red">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </span>
                        Caster 2 Delays
                    </h3>
                    <div class="delays-caster2-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>

                <%-- Caster 2 Melt Orders --%>
                <div class="sr-card sr-card--purple">
                    <h3 class="sr-section-title">
                        <span class="sr-icon sr-icon--purple">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                        </span>
                        Caster 2 Melt Orders
                    </h3>
                    <div class="melt-orders-caster2-grid-container compact-grid ag-theme-alpine w-full"></div>
                </div>
            </div>

            <%-- SECTION 6: Log Book --%>
            <div class="sr-card sr-card--slate" style="margin-bottom:16px;">
                <h3 class="sr-section-title">
                    <span class="sr-icon sr-icon--slate">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                    </span>
                    Log Book
                </h3>
                <div class="logbook-grid-container compact-grid ag-theme-alpine w-full"></div>
            </div>

        </div>
    </div>

    <%-- SKELETON LOADING --%>
    <div data-bind="classes: { hide: not(isPageLoading) }">
        <div class="sr-page-header" style="opacity:.6;">
            <div style="display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;">
                <div>
                    <div class="skeleton-input" style="width:200px; height:24px; margin-bottom:6px; border-radius:4px;"></div>
                    <div class="skeleton-input" style="width:130px; height:14px; border-radius:4px;"></div>
                </div>
                <div class="skeleton-input" style="width:240px; height:32px; border-radius:16px;"></div>
            </div>
        </div>
        <div style="padding:0 4px;">
            <div class="sr-nav-bar" style="opacity:.6;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <div class="skeleton-input" style="width:36px; height:36px; border-radius:6px;"></div>
                    <div class="skeleton-input" style="width:140px; height:36px; border-radius:6px;"></div>
                    <div class="skeleton-input" style="width:50px; height:36px; border-radius:16px;"></div>
                    <div class="skeleton-input" style="width:36px; height:36px; border-radius:6px;"></div>
                </div>
                <div class="skeleton-button" style="width:130px; height:36px; border-radius:6px;"></div>
            </div>
            <div class="sr-card" style="opacity:.5;">
                <div class="skeleton-input" style="width:180px; height:20px; margin-bottom:16px; border-radius:4px;"></div>
                <div class="skeleton-grid w-full" style="height: 50vh; border-radius:6px;"></div>
            </div>
        </div>
    </div>
</div>
