@extends('layout.call_page')
@section('content')
<!-- Startup Dialog -->
<div id="startup-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: center;">
    <div style="background: white; padding: 40px; border-radius: 16px; text-align: center; max-width: 600px; margin: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(229, 231, 235, 1);">
        <h2 style="color: #2563eb; margin-bottom: 20px;">{{ \Lang::get('messages.display.system_title', [], 'ku') }}</h2>
        <p style="font-size: 18px; margin-bottom: 30px; color: #374151;">{{ \Lang::get('messages.display.starting_message', [], 'ku') }}</p>
        <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px;">
            <div class="serving-loading" style="height: 30px;"></div>
        </div>
        <p style="font-size: 14px; color: #6b7280;">{{ \Lang::get('messages.display.initializing_message', [], 'ku') }}</p>
    </div>
</div>

<!-- System Message Dialog -->
<div id="system-message-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 10000; display: none; justify-content: center; align-items: center;">
    <div style="background: white; padding: 40px; border-radius: 16px; text-align: center; max-width: 600px; margin: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(229, 231, 235, 1);">
        <h2 id="system-message-title" style="color: #dc2626; margin-bottom: 20px; font-size: 24px;">{{ \Lang::get('messages.display.system_message_title', [], 'ku') }}</h2>
        <p id="system-message-content" style="font-size: 18px; margin-bottom: 30px; color: #374151; min-height: 40px; word-wrap: break-word;"></p>
        <p style="font-size: 14px; color: #6b7280; margin-top: 20px;">{{ \Lang::get('messages.display.system_message_body', [], 'ku') }}</p>
    </div>
</div>

<!-- BEGIN: Page Main-->
<div id="loader-wrapper">
    <div id="loader"></div>

    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>

</div>

<!-- Hide header and footer, make boxes fill display -->
<style>
    .page-topbar, .navbar, .sidenav, .page-footer, .footer, 
    .loader-wrapper, .loader-section, #header, #side-menu-icon {
        display: none !important;
    }
    
    /* Make the display fill the entire screen */
    #main {
        padding: 0 !important;
        margin: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden;
    }
    
    .wrapper {
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .content-wrapper {
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Make the two main boxes fill the screen above message box */
    #callarea {
        height: calc(100vh - 80px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .col.m4, .col.m8 {
        height: calc(100vh - 80px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .card-panel {
        height: calc(100vh - 80px) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Hide service header and adjust heights */
    .service-header {
        display: none !important;
    }
    
    #callarea {
        height: calc(100vh - 80px) !important;
    }
    
    .col.m4, .col.m8, .card-panel {
        height: calc(100vh - 80px) !important;
    }
    
    /* Add primary color borders */
    #side-token-display {
        border-right: 3px solid #2563eb !important;
    }
    
    /* Ensure all bolder-color elements are bold */
    .bolder-color {
        font-weight: bold !important;
    }
    
    /* Sidebar row styling - responsive */
    .sidebar-row {
        border-bottom: 1px solid #ddd;
        height: auto; /* Let content determine height */
        min-height: 40px; /* Minimum height for touch targets */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        transition: all 0.3s ease;
    }
    
    /* Responsive sidebar heights based on screen size */
    @media (max-width: 768px) {
        .sidebar-row {
            min-height: 35px;
            padding: 6px 15px;
        }
    }
    
    @media (min-width: 1200px) {
        .sidebar-row {
            min-height: 45px;
        }
    }
    
    @media (min-width: 1920px) {
        .sidebar-row {
            min-height: 50px;
            padding: 12px 30px;
        }
    }
    
    .sidebar-row:last-child {
        border-bottom: none;
    }
    
    .col.m8 .card-panel {
        border: none !important;
    }
    
    .main-token {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
    }
    
    #main-token,
    #counter0 {
        color:#2563eb !important;
        font-weight:bold;
        line-height:1.2;
        font-size:110px;
        display:block;
        text-align:center;
    }
    
    #main-status {
        font-size:28px;
        margin-top:15px;
    }
    
    #counter0 {
        font-size:90px;
        margin-top:25px;
    }
    
    /* Message box styling - fixed position with moving text */
    .message-box {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75px;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: white;
        overflow: hidden;
        z-index: 1000;
        border-top: 2px solid #1e40af;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    
    /* Animations */
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translateY(-10px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.3; }
    }
    
    @keyframes servingBlink {
        0% { opacity: 1; }
        50% { opacity: 0.3; }
        100% { opacity: 1; }
    }
    
    .serving-blink {
        animation: servingBlink 1s infinite !important;
        display: inline-block !important;
    }
    
    /* Loading animation for serving status */
    .serving-loading {
        height: 30px;
        aspect-ratio: 2.5;
        --_g: no-repeat radial-gradient(farthest-side,#2563eb 90%,#0000);
        background:var(--_g), var(--_g), var(--_g), var(--_g);
        background-size: 20% 50%;
        animation: l43 1s infinite linear; 
        display: inline-block;
        margin: 0 auto;
    }
    
    /* Smaller loading animation for sidebar */
    #side-token-display .serving-loading {
        height: 14px;
    }
    
    @keyframes l43 {
        0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
        16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
        33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
        50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
        66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
        83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
        100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    }
    
    /* Status icons for sidebar */
    .status-icon {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        font-weight: bold;
        font-size: 20px;
    }
    
    .status-served {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
    }
    
    .status-served::before {
        content: "✓";
    }
    
    .status-noshow {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
    }
    
    .status-noshow::before {
        content: "✕";
    }
    
    .status-serving {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
    }
    
    .status-serving::before {
        content: "⏳";
    }
    
    .message-content {
        display: flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
    }
    
    .message-content-wrapper {
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        white-space: nowrap;
        /* Animation will be controlled by JavaScript */
    }
    
    .message-content-wrapper.animating {
        animation: moveLeftToRight 25s linear;
    }
    
    
    .message-text {
        font-size: 20px;
        font-weight: 500;
        margin: 0 50px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .message-separator {
        font-size: 30px;
        opacity: 1;
        margin: 0 30px;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        flex-shrink: 0;
    }
    
    .message-separator img {
        height: 48px;
        width: 48px;
        object-fit: contain;
        vertical-align: middle;
        background: white;
        border-radius: 12px;
        padding: 4px 4px 4px 6px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        opacity: 1 !important;
    }
    
    .message-separator .dot {
        font-size: 30px;
    }
    
    @keyframes moveLeftToRight {
        0% { left: -100vw; }
        100% { left: 100%; }
    }
    
    /* Ensure wrapper starts from right edge on large screens */
    .message-content-wrapper {
        will-change: left;
    }
    
    /* Message type styling for alerts - Modern Design */
    .message-maintenance {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
        color: #ffffff !important;
        border: 2px solid #d97706 !important;
        padding: 10px 20px !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 6px -1px rgba(251, 191, 36, 0.3), 0 2px 4px -1px rgba(251, 191, 36, 0.2) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    .message-notice {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: #ffffff !important;
        border: 2px solid #b91c1c !important;
        padding: 10px 20px !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3), 0 2px 4px -1px rgba(239, 68, 68, 0.2) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Token info section with shine border effect */
    #token-info-section {
        position: relative;
        overflow: hidden;
    }
    
    #token-info-section.shine-border {
        animation: shine-border-pulse 3s ease-in-out;
    }
    
    #token-info-section.shine-border::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 18px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            transparent 20%,
            #2563eb 25%,
            #60a5fa 35%,
            #93c5fd 45%,
            #60a5fa 55%,
            #2563eb 65%,
            transparent 70%,
            transparent 100%
        );
        background-size: 400% 100%;
        background-position: -400% 0;
        animation: shine-border-move 3s linear;
        pointer-events: none;
        z-index: 1;
        opacity: 0;
    }
    
    @keyframes shine-border-pulse {
        0%, 100% {
            box-shadow: 
                0 0 0 0 rgba(37, 99, 235, 0),
                0 0 0 0 rgba(96, 165, 250, 0),
                0 0 0 0 rgba(147, 197, 253, 0);
        }
        10% {
            box-shadow: 
                0 0 0 4px rgba(37, 99, 235, 0.8),
                0 0 20px rgba(96, 165, 250, 0.6),
                0 0 40px rgba(147, 197, 253, 0.4);
        }
        50% {
            box-shadow: 
                0 0 0 6px rgba(37, 99, 235, 1),
                0 0 30px rgba(96, 165, 250, 0.8),
                0 0 60px rgba(147, 197, 253, 0.6);
        }
        90% {
            box-shadow: 
                0 0 0 4px rgba(37, 99, 235, 0.8),
                0 0 20px rgba(96, 165, 250, 0.6),
                0 0 40px rgba(147, 197, 253, 0.4);
        }
    }
    
    /* Recall message styling with smooth fade-in/out */
    #token-recall-message {
        opacity: 0;
        display: none !important;
        visibility: hidden;
        position: relative;
        overflow: visible;
        transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
        transform: translateY(10px);
    }
    
    #token-recall-message.show {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0);
        animation: smoothFadeIn 1.5s ease-in-out forwards;
    }
    
    #token-recall-message.hiding {
        opacity: 0 !important;
        transform: translateY(10px);
        transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
    }
    
    @keyframes smoothFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Only animate the border, not the text or background */
    #token-recall-message.shine-border-effect.active {
        animation: smoothFadeIn 1.5s ease-in-out forwards;
        /* Ensure background doesn't animate */
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(29, 78, 216, 0.1) 100%) !important;
    }
    
    /* Ensure text inside doesn't animate */
    #token-recall-message #token-recall-kurdish,
    #token-recall-message #token-recall-arabic,
    #token-recall-message #token-recall-separator {
        animation: none !important;
        opacity: 1 !important;
        font-size: 32px !important;
    }
    
    /* Responsive font sizes for recall message */
    @media (min-width: 1200px) {
        #token-recall-message #token-recall-kurdish,
        #token-recall-message #token-recall-arabic,
        #token-recall-message #token-recall-separator {
            font-size: 36px !important;
        }
    }
    
    @media (max-width: 767px) {
        #token-recall-message #token-recall-kurdish,
        #token-recall-message #token-recall-arabic,
        #token-recall-message #token-recall-separator {
            font-size: 28px !important;
        }
    }
    
    /* Border animation for recall message - only the border blinks */
    #token-recall-message.shine-border-effect.active::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 18px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            transparent 20%,
            #2563eb 25%,
            #60a5fa 35%,
            #93c5fd 45%,
            #60a5fa 55%,
            #2563eb 65%,
            transparent 70%,
            transparent 100%
        );
        background-size: 400% 100%;
        background-position: -400% 0;
        animation: shine-border-move 12s linear infinite, shine-border-pulse-slow 10s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }
    
    /* Very slow, smooth border pulse animation - only affects box-shadow (10 seconds) */
    @keyframes shine-border-pulse-slow {
        0%, 100% {
            box-shadow: 
                0 0 0 0 rgba(37, 99, 235, 0),
                0 0 0 0 rgba(96, 165, 250, 0),
                0 0 0 0 rgba(147, 197, 253, 0);
        }
        15% {
            box-shadow: 
                0 0 0 2px rgba(37, 99, 235, 0.4),
                0 0 10px rgba(96, 165, 250, 0.25),
                0 0 20px rgba(147, 197, 253, 0.15);
        }
        30% {
            box-shadow: 
                0 0 0 3px rgba(37, 99, 235, 0.6),
                0 0 15px rgba(96, 165, 250, 0.4),
                0 0 30px rgba(147, 197, 253, 0.3);
        }
        40% {
            box-shadow: 
                0 0 0 4px rgba(37, 99, 235, 0.75),
                0 0 20px rgba(96, 165, 250, 0.55),
                0 0 40px rgba(147, 197, 253, 0.4);
        }
        50% {
            box-shadow: 
                0 0 0 5px rgba(37, 99, 235, 0.9),
                0 0 25px rgba(96, 165, 250, 0.7),
                0 0 50px rgba(147, 197, 253, 0.5);
        }
        60% {
            box-shadow: 
                0 0 0 4px rgba(37, 99, 235, 0.75),
                0 0 20px rgba(96, 165, 250, 0.55),
                0 0 40px rgba(147, 197, 253, 0.4);
        }
        70% {
            box-shadow: 
                0 0 0 3px rgba(37, 99, 235, 0.6),
                0 0 15px rgba(96, 165, 250, 0.4),
                0 0 30px rgba(147, 197, 253, 0.3);
        }
        85% {
            box-shadow: 
                0 0 0 2px rgba(37, 99, 235, 0.4),
                0 0 10px rgba(96, 165, 250, 0.25),
                0 0 20px rgba(147, 197, 253, 0.15);
        }
    }
    
    /* Slower border move animation (12 seconds) */
    @keyframes shine-border-move {
        0% {
            background-position: -400% 0;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            background-position: 400% 0;
            opacity: 0;
        }
    }
    
    
    /* Responsive text sizing */
    /* Large screens (1200px and above) */
    @media (min-width: 1200px) {
        #side-token-display .bolder-color {
            font-size: 45px !important;
            font-weight: bold !important;
        }
        
        #side-token-display small {
            font-size: 25px !important;
        }
        
        .main-token .bolder-color {
            font-size: 50px !important;
        }
        
        #main-token {
            font-size: 150px !important;
            font-weight: bold !important;
        }
        
        #counter0 {
            font-size: 100px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 32px !important;
            font-weight: bold !important;
        }
        
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 37px !important;
        }
        
        .message-text {
            font-size: 26px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 22px !important;
            padding: 10px 18px !important;
        }
        
        /* Responsive message box for large screens */
        .message-box {
            height: 60px !important;
        }
        
        
        .message-text {
            margin: 0 30px !important;
        }
        
        .message-maintenance, .message-notice {
            margin: 0 30px !important;
        }
        
        .message-separator {
            margin: 0 20px !important;
        }
        
        /* Update main content area height for reduced message box */
        #callarea {
            height: calc(100vh - 60px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 60px) !important;
        }
    }
    
    /* Extra large screens (1600px and above) */
    @media (min-width: 1600px) {
        .message-box {
            height: 50px !important;
        }
        
        .message-text {
            font-size: 24px !important;
            margin: 0 25px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 20px !important;
            padding: 8px 16px !important;
            margin: 0 25px !important;
        }
        
        .message-separator {
            font-size: 24px !important;
            margin: 0 15px !important;
        }
        
        /* Update main content area height for extra large screens */
        #callarea {
            height: calc(100vh - 50px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 50px) !important;
        }
        
        #main-token {
            font-size: 175px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 40px !important;
            font-weight: bold !important;
        }
        
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 44px !important;
        }
    }
    
    /* TV Display Optimization (1920px and above - 55" TV) */
    @media (min-width: 1920px) {
        .message-box {
            height: 40px !important;
        }
        
        .message-text {
            font-size: 22px !important;
            margin: 0 20px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 18px !important;
            padding: 6px 12px !important;
            margin: 0 20px !important;
        }
        
        .message-separator {
            font-size: 20px !important;
            margin: 0 12px !important;
        }
        
        /* Update main content area height for TV displays */
        #callarea {
            height: calc(100vh - 40px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 40px) !important;
        }
        
    }
    
    /* Ultra-wide TV Display (2560px and above) */
    @media (min-width: 2560px) {
        .message-box {
            height: 35px !important;
        }
        
        .message-text {
            font-size: 20px !important;
            margin: 0 15px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 16px !important;
            padding: 5px 10px !important;
            margin: 0 15px !important;
        }
        
        .message-separator {
            font-size: 18px !important;
            margin: 0 10px !important;
        }
        
        /* Update main content area height for ultra-wide displays */
        #callarea {
            height: calc(100vh - 35px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 35px) !important;
        }
        
        #main-token {
            font-size: 250px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 60px !important;
            font-weight: bold !important;
        }
        
        .bilingual-header .bolder-color,
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 60px !important;
        }
    }
    
    /* Medium screens (768px - 1199px) */
    @media (max-width: 1199px) and (min-width: 768px) {
        #side-token-display .bolder-color {
            font-size: 35px !important;
            font-weight: bold !important;
        }
        
        #side-token-display small {
            font-size: 20px !important;
        }
        
        .main-token .bolder-color {
            font-size: 40px !important;
        }
        
        #main-token {
            font-size: 120px !important;
            font-weight: bold !important;
        }
        
        #counter0 {
            font-size: 80px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 28px !important;
            font-weight: bold !important;
        }
        
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 33px !important;
        }
        
        .message-text {
            font-size: 18px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 18px !important;
            padding: 8px 16px !important;
        }
        
        .message-separator {
            font-size: 24px !important;
        }
    }
    
    /* Small screens (480px - 767px) */
    @media (max-width: 767px) and (min-width: 481px) {
        #side-token-display .bolder-color {
            font-size: 28px !important;
            font-weight: bold !important;
        }
        
        #side-token-display small {
            font-size: 16px !important;
        }
        
        .main-token .bolder-color {
            font-size: 32px !important;
        }
        
        #main-token {
            font-size: 100px !important;
            font-weight: bold !important;
        }
        
        #counter0 {
            font-size: 70px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 24px !important;
            font-weight: bold !important;
        }
        
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 30px !important;
        }
        
        .message-text {
            font-size: 16px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 16px !important;
            padding: 6px 14px !important;
        }
        
        .message-separator {
            font-size: 20px !important;
        }
        
        .message-box {
            height: 80px !important;
        }
        
        #callarea {
            height: calc(100vh - 80px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 80px) !important;
        }
    }
    
    /* Extra small screens (480px and below) */
    @media (max-width: 480px) {
        #side-token-display .bolder-color {
            font-size: 24px !important;
            font-weight: bold !important;
        }
        
        #side-token-display small {
            font-size: 14px !important;
        }
        
        .main-token .bolder-color {
            font-size: 28px !important;
        }
        
        #main-token {
            font-size: 80px !important;
            font-weight: bold !important;
        }
        
        #counter0 {
            font-size: 60px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 20px !important;
            font-weight: bold !important;
        }
        
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 24px !important;
        }
        
        .message-text {
            font-size: 14px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 14px !important;
            padding: 4px 12px !important;
        }
        
        .message-separator {
            font-size: 18px !important;
        }
        
        .message-box {
            height: 70px !important;
        }
        
        #callarea {
            height: calc(100vh - 70px) !important;
        }
        
        .col.m4, .col.m8, .card-panel {
            height: calc(100vh - 70px) !important;
        }
    }
    
    /* Bilingual display styles */
    .bilingual-header, .bilingual-token-label, .bilingual-proceed-label {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .bilingual-header .bolder-color,
    .bilingual-token-label .bolder-color,
    .bilingual-proceed-label .bolder-color {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
    
    /* Force correct text direction for bilingual layout */
    .bilingual-header .bolder-color:first-child,
    .bilingual-token-label .bolder-color:first-child,
    .bilingual-proceed-label .bolder-color:first-child {
        direction: ltr;
        text-align: left !important;
        flex: 0 0 auto;
        width: auto;
    }
    
    .bilingual-header .bolder-color:last-child,
    .bilingual-token-label .bolder-color:last-child,
    .bilingual-proceed-label .bolder-color:last-child {
        direction: rtl;
        text-align: right !important;
        flex: 0 0 auto;
        width: auto;
    }
    
    /* Ensure flex layout works properly */
    .bilingual-header,
    .bilingual-token-label,
    .bilingual-proceed-label {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 60px !important;
    }
    
    @media (min-width: 1200px) {
        .bilingual-token-label,
        .bilingual-proceed-label {
            gap: 100px !important;
        }
    }
    
    @media (min-width: 1600px) {
        .bilingual-token-label,
        .bilingual-proceed-label {
            gap: 150px !important;
        }
    }
    
    @media (min-width: 1920px) {
        .bilingual-token-label,
        .bilingual-proceed-label {
            gap: 200px !important;
        }
    }
    
    /* Responsive bilingual text */
    @media (min-width: 1200px) {
        .bilingual-header .bolder-color,
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 28px !important;
        }
    }
    
    @media (min-width: 1600px) {
        .bilingual-header .bolder-color,
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 32px !important;
        }
    }
    
    @media (min-width: 1920px) {
        #main-token {
            font-size: 200px !important;
            font-weight: bold !important;
        }
        
        #main-status {
            font-size: 50px !important;
            font-weight: bold !important;
        }
        
        .bilingual-header .bolder-color,
        .bilingual-token-label .bolder-color,
        .bilingual-proceed-label .bolder-color {
            font-size: 50px !important;
        }
        
        .current-display-banner {
            font-size: 32px !important;
        }
        
        .banner-date-time {
            font-size: 32px !important;
        }
    }
    
    @media (min-width: 1200px) {
        .current-display-banner {
            font-size: 28px !important;
        }
        
        .banner-date-time {
            font-size: 28px !important;
        }
    }
    
    @media (max-width: 767px) {
        .current-display-banner {
            font-size: 20px !important;
            padding: 10px 15px !important;
            flex-direction: column;
            gap: 8px;
        }
        
        .banner-date-time {
            font-size: 20px !important;
        }
        
        .banner-title {
            text-align: center !important;
        }
    }
    
    /* Ensure content is visible */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
    
    /* Hide bilingual labels when no ticket is active */
    .no-ticket-labels {
        display: none !important;
    }
    
    /* Show bilingual labels when ticket is active */
    .has-ticket .no-ticket-labels {
        display: flex !important;
    }
    
    /* Hide only the bilingual label sections - keep main content visible */
    .bilingual-header,
    .bilingual-token-label,
    .bilingual-proceed-label {
        display: none !important;
    }
    
    .current-display-banner {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #fff;
        padding: 12px 30px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30px;
        font-weight: 600;
        border-radius: 0 0 20px 20px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .banner-date-time {
        font-size: 30px;
        font-weight: 600;
        white-space: nowrap;
        direction: ltr !important;
        text-align: left !important;
    }
    
    .banner-title {
        text-align: left;
        flex: 1;
    }
    
    /* RTL layout fix - Display pages are ALWAYS RTL */
    .current-display-banner {
        flex-direction: row-reverse;
    }
    
    .banner-title {
        text-align: right;
    }
    
    
</style>

<div id="main" class="no-print">


    <div class="wrapper" id="display-page">
        <section class="content-wrapper no-print">
            <!-- Service Title Header -->
            <div class="row service-header" style="margin: 0; padding: 25px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; text-align: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
                <div class="col s12">
                    @if(isset($service) && $service)
                        <h2 style="margin: 0; font-size: 32px; font-weight: bold;">{{ $service->name }}</h2>
                    @else
                        <h2 style="margin: 0; font-size: 32px; font-weight: bold;">{{ \Lang::get('messages.display.all_services', [], 'ku') }}</h2>
                    @endif
                </div>
            </div>
            
            <div id="callarea" class="row" style="line-height:1.23;display:flex; flex-direction:row-reverse">
                <div class="col m4">
                    <div class="card-panel center-align p-0" style="margin-bottom:0;height:calc(100vh - 80px)" id="side-token-display">
                        <!-- Generate 22 sidebar rows for history -->
                        @for($i = 1; $i <= 22; $i++)
                        <div class="sidebar-row">
                            <div>
                                <span class="bolder-color" id="counter{{$i}}" style="font-weight:bold;font-size:18px">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</span>
                            </div>
                            <div style="margin: 0 4px;">
                                <span style="color:#666;font-size:32px;font-weight:bold;">→</span>
                            </div>
                            <div>
                                <span class="bolder-color" id="token{{$i}}" style="font-weight:bold;font-size:18px">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</span>
                            </div>
                            <div>
                                <span id="status{{$i}}" style="color:#666;font-size:20px;">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</span>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
                <div class="col m8" style="padding:0;">
                    <div class="card-panel center-align" style="margin-bottom:0;height:calc(100vh - 80px);width:100%;align-items:center;position:relative;padding:110px 35px 60px;">
                        <!-- Display pages are ALWAYS RTL -->
                        <div class="current-display-banner">
                            <div class="banner-date-time" id="display-date-time"></div>
                            <div class="banner-title">
                                @if($locationName)
                                    {{ $locationName }}@if($serviceName) - {{ $serviceName }}@endif
                                @else
                                    {{ $serviceName }}
                                @endif
                            </div>
                        </div>
                        <div class="main-token">
                            <!-- Bilingual token number label -->
                            <!-- Display pages are ALWAYS RTL - Always show Kurdish first (left side in RTL) -->
                            <div class="bilingual-token-label no-ticket-labels" style="margin:10px 0; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 40px;">
                                <div class="bolder-color" style="text-align: left; flex: 0 0 auto;">{{ \Lang::get('messages.display.token_number', [], 'ku') }}</div>
                                <div class="bolder-color" style="text-align: right; flex: 0 0 auto;">{{ \Lang::get('messages.display.token_number_ar', [], 'iq') }}</div>
                            </div>
                            
                            <!-- Token number display -->
                            <div style="display:flex;flex-direction:column;align-items:center; margin: 20px 0;">
                                <span id="main-token">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</span>
                                <div id="main-status">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</div>
                                <!-- Recall message (shows only for recalls) with bilingual text -->
                                <div id="token-recall-message" style="display: none; margin-top: 20px; padding: 30px 50px; border-radius: 16px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(29, 78, 216, 0.1) 100%); border: 2px solid rgba(37, 99, 235, 0.4); text-align: center; min-width: 400px; max-width: 700px;">
                                    <div style="display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: nowrap;">
                                        <span id="token-recall-kurdish" style="font-size: 32px; font-weight: 900; color: #2563eb; line-height: 1.3; white-space: nowrap;"></span>
                                        <span id="token-recall-separator" style="font-size: 32px; font-weight: 900; color: #2563eb; line-height: 1.3;">-</span>
                                        <span id="token-recall-arabic" style="font-size: 32px; font-weight: 900; color: #2563eb; line-height: 1.3; white-space: nowrap;"></span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Horizontal line separator between status and windows -->
                            <div style="margin: 30px 0; text-align: center; width: 100%; padding: 0 20px;">
                                <hr style="border: none; border-top: 3px solid #2563eb; width: 100%; margin: 0; display: block; box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.2);">
                            </div>
                            
                            <!-- Bilingual proceed to label -->
                            <!-- Display pages are ALWAYS RTL - Always show Kurdish first (left side in RTL) -->
                            <div class="bilingual-proceed-label no-ticket-labels" style="line-height:1.4;margin-top:20px; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 40px;">
                                <div class="bolder-color" style="text-align: left; flex: 0 0 auto;">{{ \Lang::get('messages.display.please_proceed_to', [], 'ku') }}</div>    
                                <div class="bolder-color" style="text-align: right; flex: 0 0 auto;">{{ \Lang::get('messages.display.please_proceed_to_ar', [], 'iq') }}</div>
                            </div>
                            <!-- Counter display -->
                            <div style="margin-top: 20px; text-align:center;">
                                <div id="counter0">{{ \Lang::get('messages.call_page.nil', [], 'ku') }}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Message box at bottom with moving text -->
            <div class="message-box">
                <div class="message-content" id="message-content">
                    <div class="message-content-wrapper" id="message-content-wrapper">
                        <!-- Content will be populated by JavaScript -->
                    </div>
                </div>
            </div>
            
            <audio id="called_sound" preload="auto" crossorigin="anonymous" muted>
                <source src="{{ asset('calltoken.mp3') }}?v={{ time() }}" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </section>
    </div>
</div>
@endsection
@section('b-js')
<script>
    window.QFlow = {
        get_tokens_for_display_url: "{{ asset($file) }}",
        get_initial_tokens: "{{ route('get-tokens-for-display') }}",
        get_messages_url: "{{ route('api.display-messages') }}",
        service_id: "{{ isset($service) && $service ? $service->id : '' }}",
        building_id: "{{ $currentBuildingId ?? '' }}",
        date_for_display: "{{$date}}",
        voice_type: "{{$settings->language ? $settings->language->display : 'US English Female'}}",
        voice_content_one: "{{$settings->language ? $settings->language->token_translation : 'Token'}}",
        voice_content_two: "{{$settings->language ? $settings->language->please_proceed_to_translation : 'Please Proceed to'}}",
        voice_enabled: "{{$settings->display_voice_enabled ?? '1'}}",
        logo_url: "{{ (!empty($settings->logo) && \Storage::disk('public')->exists($settings->logo)) ? $settings->logo_url : '' }}",
        audioEl: null, // Will be set after DOM is ready
        translations: {
            served: "{{ \Lang::get('messages.common.served', [], 'ku') }}",
            noshow: "{{ \Lang::get('messages.common.noshow', [], 'ku') }}",
            serving: "{{ \Lang::get('messages.common.serving', [], 'ku') }}",
            nil: "{{ \Lang::get('messages.call_page.nil', [], 'ku') }}",
            token_recall: "{{ \Lang::get('messages.display.token_recall', [], 'ku') }}",
            token_called_message: "{{ \Lang::get('messages.display.token_called_message', [], 'ku') }}",
            token_called_message_ar: "{{ \Lang::get('messages.display.token_called_message_ar', [], 'iq') }}"
        }
    }
    
    // Hide startup dialog after 3 seconds
    setTimeout(function() {
        const startupDialog = document.getElementById('startup-dialog');
        if (startupDialog) {
            startupDialog.style.opacity = '0';
            startupDialog.style.transition = 'opacity 0.5s ease-out';
            setTimeout(function() {
                startupDialog.style.display = 'none';
            }, 500);
        }
    }, 3000);
    
    // Real-time message updates
    let lastMessageUpdate = null;
    let updateInterval = null;
    
    function updateMessages() {
        let url = window.QFlow.get_messages_url;
        let params = [];
        
        if (window.QFlow.building_id) {
            params.push('building_id=' + window.QFlow.building_id);
        }
        
        if (window.QFlow.service_id && window.QFlow.service_id !== 'null') {
            params.push('service_id=' + window.QFlow.service_id);
        }
        
        params.push('t=' + Date.now());
        
        if (params.length > 0) {
            url += '?' + params.join('&');
        }
        
        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            cache: 'no-cache'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.messages) {
                const currentMessages = JSON.stringify(data.messages);
                if (currentMessages !== lastMessageUpdate) {
                    updateMessageDisplay(data.messages);
                    lastMessageUpdate = currentMessages;
                }
            }
            
            // Check for system message
            if (data.success && data.system_message) {
                showSystemMessage(data.system_message);
            } else {
                hideSystemMessage();
            }
        })
        .catch(error => {
            console.error('Error fetching messages:', error);
        });
    }
    
    // System message functions
    function showSystemMessage(systemMessage) {
        const dialog = document.getElementById('system-message-dialog');
        const title = document.getElementById('system-message-title');
        const content = document.getElementById('system-message-content');
        
        if (!dialog || !title || !content) return;
        
        // Get current language (default to Kurdish for display pages)
        const currentLang = 'ku'; // Display pages always use Kurdish
        
        // Set title (translatable default text)
        const titleText = {
            'ku': '{{ \Lang::get("messages.display.system_message_title", [], "ku") }}',
            'iq': '{{ \Lang::get("messages.display.system_message_title", [], "iq") }}',
            'en': '{{ \Lang::get("messages.display.system_message_title", [], "en") }}'
        };
        title.textContent = titleText[currentLang] || titleText['ku'];
        
        // Set content (admin's custom message)
        // Try to get message in current language, fallback to Kurdish, then Arabic, then English
        let messageText = '';
        if (currentLang === 'ku' && systemMessage.text_ku) {
            messageText = systemMessage.text_ku;
        } else if (currentLang === 'iq' && systemMessage.text_iq) {
            messageText = systemMessage.text_iq;
        } else if (currentLang === 'en' && systemMessage.text_en) {
            messageText = systemMessage.text_en;
        } else {
            // Fallback: try Kurdish, then Arabic, then English, then main text
            messageText = systemMessage.text_ku || systemMessage.text_iq || systemMessage.text_en || systemMessage.text || '';
        }
        
        content.textContent = messageText;
        
        // Show dialog with animation
        dialog.style.display = 'flex';
        dialog.style.opacity = '0';
        setTimeout(() => {
            dialog.style.transition = 'opacity 0.5s ease-in';
            dialog.style.opacity = '1';
        }, 10);
    }
    
    function hideSystemMessage() {
        const dialog = document.getElementById('system-message-dialog');
        if (!dialog) return;
        
        dialog.style.opacity = '0';
        dialog.style.transition = 'opacity 0.5s ease-out';
        setTimeout(() => {
            dialog.style.display = 'none';
        }, 500);
    }
    
    // Global variable to track current language group animation
    let currentLanguageIndex = 0;
    let languageGroups = [];
    let animationTimeout = null;
    
    function updateMessageDisplay(messages) {
        const messageContent = document.getElementById('message-content');
        const messageWrapper = document.getElementById('message-content-wrapper');
        if (!messageContent || !messageWrapper) {
            console.error('Message content element not found');
            return;
        }
        
        // Clear any existing animation
        if (animationTimeout) {
            clearTimeout(animationTimeout);
            animationTimeout = null;
        }
        
        // Stop current animation
        messageWrapper.classList.remove('animating');
        messageWrapper.style.animation = 'none';
        messageWrapper.style.left = '0';
        
        // Use requestAnimationFrame for smoother updates
        requestAnimationFrame(() => {
            if (messages.length === 0) {
                const defaultText = '<span class="message-text">بەڕێوبەرایەتی هاتووچۆى هه‌ولێر - مديرية مرور أربيل</span>';
                messageWrapper.innerHTML = defaultText;
                return;
            }
            
            // Group messages by language: Kurdish first, then Arabic, then English
            const groupedMessages = {
                ku: [],
                iq: [],
                en: []
            };
            
            messages.forEach((message) => {
                const lang = message.language || message.language_code || 'ku';
                // Debug: log each message's language
                console.log('Message language:', lang, 'Message:', message);
                if (groupedMessages[lang]) {
                    groupedMessages[lang].push(message);
                } else {
                    // Fallback to Kurdish if language not recognized
                    console.warn('Unknown language:', lang, 'falling back to Kurdish');
                    groupedMessages.ku.push(message);
                }
            });
            
            // Debug: log grouped messages
            console.log('Grouped messages:', {
                ku: groupedMessages.ku.length,
                iq: groupedMessages.iq.length,
                en: groupedMessages.en.length
            });
            
            // Store language groups for sequential animation
            languageGroups = [];
            if (groupedMessages.ku.length > 0) languageGroups.push({ lang: 'ku', messages: groupedMessages.ku });
            if (groupedMessages.iq.length > 0) languageGroups.push({ lang: 'iq', messages: groupedMessages.iq });
            if (groupedMessages.en.length > 0) languageGroups.push({ lang: 'en', messages: groupedMessages.en });
            
            console.log('Language groups to animate:', languageGroups.map(g => ({ lang: g.lang, count: g.messages.length })));
            
            // Reset to first language group
            currentLanguageIndex = 0;
            
            // Start animating the first language group
            animateLanguageGroup();
        });
    }
    
    function animateLanguageGroup() {
        const messageWrapper = document.getElementById('message-content-wrapper');
        if (!messageWrapper || languageGroups.length === 0) {
            console.warn('No language groups to animate');
            return;
        }
        
        console.log('Animating language group:', currentLanguageIndex, 'of', languageGroups.length, languageGroups[currentLanguageIndex]);
        
        // Get current language group
        const currentGroup = languageGroups[currentLanguageIndex];
        if (!currentGroup) {
            console.log('No more groups, restarting from beginning');
            // All groups completed, restart from beginning
            currentLanguageIndex = 0;
            animateLanguageGroup();
            return;
        }
        
        // Build HTML for current language group - no duplication, each message shows once
        let groupHTML = '';
        currentGroup.messages.forEach((message, index) => {
            let messageClass = 'message-text';
            
            if (message.type === 'maintenance') {
                messageClass += ' message-maintenance';
            } else if (message.type === 'notice') {
                messageClass += ' message-notice';
            }
            
            groupHTML += `<span class="${messageClass}" data-message-id="${message.id}" data-lang="${currentGroup.lang}">${message.text}</span>`;
            
            // Add separator between messages (not after the last one)
            if (index < currentGroup.messages.length - 1) {
                if (window.QFlow.logo_url && window.QFlow.logo_url.trim() !== '') {
                    groupHTML += `<span class="message-separator"><img src="${window.QFlow.logo_url}" alt="Logo" /></span>`;
                } else {
                    groupHTML += '<span class="message-separator"><span class="dot">•</span></span>';
                }
            }
        });
        
        // Update wrapper content - no duplication
        messageWrapper.innerHTML = groupHTML;
        
        // Reset position and start animation
        messageWrapper.style.left = '0';
        messageWrapper.style.animation = 'none';
        
        // Force reflow
        void messageWrapper.offsetWidth;
        
        // Start animation
        messageWrapper.classList.add('animating');
        messageWrapper.style.animation = 'moveLeftToRight 25s linear';
        
        // Calculate animation duration based on content width
        // Ensure smooth scrolling from left to right
        const contentWidth = messageWrapper.scrollWidth;
        const viewportWidth = window.innerWidth;
        const totalDistance = contentWidth + viewportWidth;
        // Animation speed: higher divisor = faster animation (100px per second)
        const animationDuration = Math.max(10, (totalDistance / 100)); // 100px per second
        
        // Update animation duration
        messageWrapper.style.animation = `moveLeftToRight ${animationDuration}s linear`;
        
        // When animation completes, move to next language group
        animationTimeout = setTimeout(() => {
            messageWrapper.classList.remove('animating');
            messageWrapper.style.animation = 'none';
            messageWrapper.style.left = '100%';
            
            // Move to next language group immediately (no delay)
            requestAnimationFrame(() => {
                messageWrapper.style.left = '0';
                messageWrapper.style.opacity = '0';
                
                // Move to next language group
                currentLanguageIndex++;
                
                // Start next group immediately
                requestAnimationFrame(() => {
                    messageWrapper.style.opacity = '1';
                    animateLanguageGroup();
                });
            });
        }, animationDuration * 1000);
    }
    
    // Initialize messages on page load
    function initializeMessages() {
        const messageWrapper = document.getElementById('message-content-wrapper');
        if (!messageWrapper) return;
        
        // Get initial messages from server-side rendering
        const initialMessages = @json($messages ?? []);
        if (initialMessages.length > 0) {
            // Convert initial messages to the format expected by updateMessageDisplay
            const formattedMessages = initialMessages.map(msg => ({
                id: msg.id,
                text: msg.message_text || msg.text || '',
                type: msg.message_type || msg.type || 'announcement',
                language: msg.language || 'ku',
                language_code: msg.language || 'ku'
            }));
            
            // Use the same update function
            updateMessageDisplay(formattedMessages);
        } else {
            const defaultText = '<span class="message-text">بەڕێوبەرایەتی هاتووچۆى هه‌ولێر - مديرية مرور أربيل</span>';
            messageWrapper.innerHTML = defaultText;
        }
    }
    
    
    function startMessageUpdates() {
        if (updateInterval) {
            clearInterval(updateInterval);
        }
        
        updateMessages();
        // Increase interval slightly to reduce lag while maintaining live updates
        updateInterval = setInterval(updateMessages, 4000);
    }
    
    // Function to update ticket visibility
    function updateTicketVisibility() {
        const mainToken = document.getElementById('main-token');
        const mainStatus = document.getElementById('main-status');
        const counter0 = document.getElementById('counter0');
        const mainTokenContainer = document.querySelector('.main-token');
        
        if (mainToken && mainStatus && counter0 && mainTokenContainer) {
            // Check if there's an active token - look for actual token patterns like S-1, A-5, etc.
            const tokenText = mainToken.textContent.trim();
            const statusText = mainStatus.textContent.trim();
            const counterText = counter0.textContent.trim();
            
            // Check for token patterns (letter-number format like S-1, A-5, etc.)
            const hasTokenPattern = /^[A-Z]-\d+$/.test(tokenText);
            
            // Check if any of the elements have meaningful content (not empty, nil, or just whitespace)
            const hasMeaningfulContent = (tokenText !== '' && tokenText !== 'nil' && tokenText !== 'NIL' && tokenText.length > 0) ||
                                       (statusText !== '' && statusText !== 'nil' && statusText !== 'NIL' && statusText.length > 0) ||
                                       (counterText !== '' && counterText !== 'nil' && counterText !== 'NIL' && counterText.length > 0) ||
                                       hasTokenPattern;
            
            console.log('Token visibility check:', {
                tokenText: tokenText,
                statusText: statusText,
                counterText: counterText,
                hasTokenPattern: hasTokenPattern,
                hasMeaningfulContent: hasMeaningfulContent
            });
            
            if (hasMeaningfulContent) {
                mainTokenContainer.classList.add('has-ticket');
                console.log('Ticket active - showing labels');
            } else {
                mainTokenContainer.classList.remove('has-ticket');
                console.log('No ticket - hiding labels');
            }
        }
    }
    
    // Update date and time display
    function updateDisplayDateTime() {
        const now = new Date();
        const day = String(now.getDate()).padStart(2, '0');
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const year = now.getFullYear();
        const dateStr = `${day}/${month}/${year}`;
        
        let hours = now.getHours();
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        const hoursStr = String(hours).padStart(2, '0');
        // Format: HH:MM AM/PM - DD/MM/YYYY
        const timeStr = `${hoursStr}:${minutes} ${ampm}`;
        
        const dateTimeElement = document.getElementById('display-date-time');
        if (dateTimeElement) {
            dateTimeElement.textContent = `${dateStr} - ${timeStr}`;
        }
    }
    
    // Initialize when page loads
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Display page loaded');
        updateDisplayDateTime();
        setInterval(updateDisplayDateTime, 1000);
        initializeMessages();
        startMessageUpdates();
        
        // Set audio element in QFlow object after DOM is ready
        const audioEl = document.getElementById('called_sound');
        if (audioEl) {
            window.QFlow.audioEl = audioEl;
            console.log('✅ Audio element set in window.QFlow.audioEl:', audioEl);
            console.log('Audio element details:', {
                id: audioEl.id,
                src: audioEl.src || audioEl.currentSrc,
                readyState: audioEl.readyState,
                paused: audioEl.paused
            });
            
            // Force load the audio
            audioEl.load();
            
            // Test audio playback immediately (for debugging)
            setTimeout(() => {
                const currentSrc = audioEl.currentSrc || audioEl.src;
                console.log('🔊 Current audio source after load:', currentSrc);
                console.log('🔊 Audio readyState:', audioEl.readyState);
                console.log('🔊 Audio error:', audioEl.error);
                
                if (audioEl.error) {
                    console.error('❌ Audio loading error:', {
                        code: audioEl.error.code,
                        message: audioEl.error.message
                    });
                }
                
                // Try to test play
                if (audioEl.readyState >= 2) {
                    console.log('🧪 Testing audio playback...');
                    audioEl.muted = true;
                    audioEl.volume = 0.01;
                    audioEl.play().then(() => {
                        console.log('✅ Test play successful - audio works!');
                        audioEl.pause();
                        audioEl.currentTime = 0;
                        audioEl.muted = false;
                        audioEl.volume = 1;
                        if (window.QFlow) {
                            window.QFlow.audioUnlocked = true;
                        }
                    }).catch(e => {
                        console.error('❌ Test play failed:', e);
                    });
                }
            }, 1000);
            
            // Enhanced unlock for TV displays - CRITICAL: Must unlock immediately
            const unlockAudio = async () => {
                if (window.QFlow?.audioUnlocked) {
                    console.log('✅ Audio already unlocked');
                    return;
                }
                
                try {
                    console.log('🔓 Attempting to unlock audio for TV display...');
                    
                    // Strategy: Muted play immediately (most reliable for autoplay)
                    audioEl.muted = true;
                    audioEl.volume = 0.01;
                    const playPromise = audioEl.play();
                    if (playPromise !== undefined) {
                        await playPromise;
                        console.log('✅ Muted play successful - audio unlocked!');
                        // Keep it playing muted for a moment to ensure unlock
                        await new Promise(resolve => setTimeout(resolve, 100));
                    }
                    audioEl.pause();
                    audioEl.currentTime = 0;
                    audioEl.muted = false;
                    audioEl.volume = 1;
                    
                    if (window.QFlow) {
                        window.QFlow.audioUnlocked = true;
                        console.log('✅ Audio unlocked successfully - ready for playback');
                    }
                } catch (error) {
                    console.warn('⚠️ Initial unlock failed:', error);
                }
            };
            
            // CRITICAL: Unlock immediately when page loads (before any user interaction needed)
            // This must happen as early as possible
            const doUnlock = () => {
                if (audioEl.readyState >= 2) {
                    unlockAudio();
                } else {
                    // Wait for audio to load, then unlock
                    const unlockWhenReady = () => {
                        unlockAudio();
                    };
                    audioEl.addEventListener('canplaythrough', unlockWhenReady, { once: true });
                    audioEl.addEventListener('loadeddata', unlockWhenReady, { once: true });
                    audioEl.addEventListener('canplay', unlockWhenReady, { once: true });
                    // Also try after a short delay as fallback
                    setTimeout(unlockWhenReady, 500);
                    setTimeout(unlockWhenReady, 1000);
                    setTimeout(unlockWhenReady, 2000);
                }
            };
            
            // Try immediately
            doUnlock();
            
            // CRITICAL: Add event listeners for ANY user interaction to unlock audio
            // This will catch clicks, touches, key presses, mouse movements, etc.
            const unlockOnInteraction = (eventType) => {
                if (!window.QFlow?.audioUnlocked) {
                    console.log(`🔓 User interaction detected (${eventType}), unlocking audio...`);
                    unlockAudio();
                    // Remove listeners after first unlock to avoid spam
                    document.removeEventListener('click', unlockOnInteraction);
                    document.removeEventListener('touchstart', unlockOnInteraction);
                    document.removeEventListener('keydown', unlockOnInteraction);
                    document.removeEventListener('mousedown', unlockOnInteraction);
                    document.removeEventListener('mouseover', unlockOnInteraction);
                }
            };
            
            // Add listeners for various user interactions
            document.addEventListener('click', () => unlockOnInteraction('click'), { once: true, passive: true });
            document.addEventListener('touchstart', () => unlockOnInteraction('touchstart'), { once: true, passive: true });
            document.addEventListener('keydown', () => unlockOnInteraction('keydown'), { once: true, passive: true });
            document.addEventListener('mousedown', () => unlockOnInteraction('mousedown'), { once: true, passive: true });
            // Mouseover might trigger on TV displays when cursor appears
            document.addEventListener('mouseover', () => unlockOnInteraction('mouseover'), { once: true, passive: true });
            
            // Also try to unlock when page becomes visible (for TV displays)
            const unlockOnVisible = () => {
                if (!document.hidden && !window.QFlow?.audioUnlocked) {
                    console.log('👁️ Page visible, attempting to unlock audio...');
                    doUnlock();
                }
            };
            
            document.addEventListener('visibilitychange', unlockOnVisible);
            
            // Try on focus (when window gets focus)
            window.addEventListener('focus', () => {
                if (!window.QFlow?.audioUnlocked) {
                    console.log('👁️ Window focused, attempting to unlock audio...');
                    doUnlock();
                }
            }, { once: true });
            
            // Try immediately if page is already visible
            if (!document.hidden) {
                unlockOnVisible();
            }
            
            // Try multiple times with delays (for TV displays that might not have immediate interaction)
            setTimeout(doUnlock, 100);
            setTimeout(doUnlock, 500);
            setTimeout(doUnlock, 1000);
            setTimeout(doUnlock, 2000);
            setTimeout(doUnlock, 3000);
            
            // CRITICAL: For TV displays - try to simulate a user interaction programmatically
            // Create a hidden button and "click" it to unlock audio
            const simulateUserInteraction = () => {
                if (!window.QFlow?.audioUnlocked) {
                    console.log('🔄 Attempting to simulate user interaction for TV display...');
                    try {
                        // Create a temporary invisible button
                        const tempButton = document.createElement('button');
                        tempButton.style.position = 'absolute';
                        tempButton.style.left = '-9999px';
                        tempButton.style.opacity = '0';
                        tempButton.style.pointerEvents = 'none';
                        document.body.appendChild(tempButton);
                        
                        // Try to programmatically click it (some browsers allow this)
                        tempButton.focus();
                        tempButton.click();
                        
                        // Also try dispatching events
                        const clickEvent = new MouseEvent('click', {
                            bubbles: true,
                            cancelable: true,
                            view: window
                        });
                        tempButton.dispatchEvent(clickEvent);
                        
                        // Try unlock after simulated click
                        setTimeout(() => {
                            unlockAudio();
                            document.body.removeChild(tempButton);
                        }, 100);
                    } catch (e) {
                        console.warn('⚠️ Simulated interaction failed:', e);
                    }
                }
            };
            
            // Try simulated interaction after page is fully loaded
            setTimeout(simulateUserInteraction, 500);
            setTimeout(simulateUserInteraction, 1500);
            setTimeout(simulateUserInteraction, 3000);
        } else {
            console.error('❌ Audio element not found in DOMContentLoaded!');
        }
        
        // Set up observer to watch for token changes
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    updateTicketVisibility();
                }
            });
        });
        
        // Observe the main token elements for changes
        const mainToken = document.getElementById('main-token');
        const mainStatus = document.getElementById('main-status');
        const counter0 = document.getElementById('counter0');
        
        if (mainToken) observer.observe(mainToken, { childList: true, characterData: true, subtree: true });
        if (mainStatus) observer.observe(mainStatus, { childList: true, characterData: true, subtree: true });
        if (counter0) observer.observe(counter0, { childList: true, characterData: true, subtree: true });
        
        // Initial check
        updateTicketVisibility();
        
        // Also check periodically to catch any missed updates
        setInterval(updateTicketVisibility, 2000);
    });
    
    // Pause updates when page is not visible
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            if (updateInterval) {
                clearInterval(updateInterval);
                updateInterval = null;
            }
        } else {
            startMessageUpdates();
        }
    });
    
    window.addEventListener('beforeunload', function() {
        if (updateInterval) {
            clearInterval(updateInterval);
        }
    });
</script>

<!-- Load axios first -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.4/dist/axios.min.js"></script>
<!-- Fallback axios from another CDN if the first one fails -->
<script>
    // Check if axios loaded, if not try fallback
    if (typeof axios === 'undefined') {
        console.warn('Primary axios CDN failed, trying fallback...');
        document.write('<script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"><\/script>');
    }
</script>
<!-- Load the display page JavaScript -->
<script>
    // Wait for axios to be available before loading display page JS
    function loadDisplayPageJS() {
        if (typeof axios !== 'undefined') {
            console.log('✅ Axios is available, loading display page JS');
            const script = document.createElement('script');
            script.src = "{{ asset('resources/js/display-page/display-page.js') }}";
            document.head.appendChild(script);
        } else {
            console.error('❌ Axios still not available after fallback, retrying in 1 second...');
            setTimeout(loadDisplayPageJS, 1000);
        }
    }
    
    // Start loading display page JS after a short delay to ensure axios is ready
    setTimeout(loadDisplayPageJS, 500);
</script>
@endsection