@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: #e74c3c; 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>

<!-- 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>

<style>
    .page-topbar, .navbar, .sidenav, .page-footer, .footer, 
    .loader-wrapper, .loader-section, #header, #side-menu-icon {
        display: none !important;
    }
    
    #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;
    }
    
    /* Message box styling - fixed position with moving text - Modern design with red color */
    .message-box {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75px;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        overflow: hidden;
        z-index: 1000;
        border-top: 2px solid #a93226;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .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-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 with red theme */
    .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;
    }
    
    /* Missed tokens display - 4 columns with multiple tokens per column */
    #missed-tokens-display {
        height: calc(100vh - 140px);
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        overflow: hidden;
        direction: ltr !important; /* Force left-to-right display */
    }
    
    /* Responsive adjustments for large screens - matching normal display */
    /* Large screens (1200px and above) */
    @media (min-width: 1200px) {
        .message-box {
            height: 60px !important;
        }
        
        .message-text {
            font-size: 26px !important;
            margin: 0 30px !important;
        }
        
        .message-maintenance, .message-notice {
            font-size: 22px !important;
            padding: 10px 18px !important;
        }
        
        .message-separator {
            margin: 0 20px !important;
        }
        
        .missed-tokens-header {
            padding: 15px 30px;
        }
        
        #missed-tokens-display {
            height: calc(100vh - 60px - 90px) !important; /* 60px message box + ~90px header */
        }
    }
    
    /* 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;
        }
        
        .missed-tokens-header {
            padding: 12px 30px;
        }
        
        #missed-tokens-display {
            height: calc(100vh - 50px - 85px) !important; /* 50px message box + ~85px header */
        }
    }
    
    /* 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;
        }
        
        .missed-tokens-header {
            padding: 10px 30px;
        }
        
        .header-left .company-name {
            font-size: 26px;
        }
        
        .header-right {
            font-size: 20px;
        }
        
        #missed-tokens-display {
            height: calc(100vh - 40px - 80px) !important; /* 40px message box + ~80px header */
        }
        
        .missed-token-number {
            font-size: 26px;
        }
    }
    
    /* 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;
        }
        
        .missed-tokens-header {
            padding: 8px 30px;
        }
        
        .header-left .company-name {
            font-size: 24px;
        }
        
        .header-right {
            font-size: 18px;
        }
        
        #missed-tokens-display {
            height: calc(100vh - 35px - 75px) !important; /* 35px message box + ~75px header */
        }
        
        .missed-token-number {
            font-size: 28px;
        }
    }
    
    .missed-token-column {
        background: #fff;
        border: 2px solid #e74c3c;
        border-radius: 12px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        max-height: 100%;
        box-shadow: 0 4px 6px -1px rgba(231, 76, 60, 0.1), 0 2px 4px -1px rgba(231, 76, 60, 0.06);
        transition: box-shadow 0.3s ease;
    }
    
    .missed-token-column:hover {
        box-shadow: 0 10px 15px -3px rgba(231, 76, 60, 0.2), 0 4px 6px -2px rgba(231, 76, 60, 0.1);
    }
    
    
    .missed-token-item {
        background: #fff;
        border: 2px solid #e74c3c;
        border-radius: 8px;
        padding: 8px 12px;
        text-align: center;
        min-height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px -1px rgba(231, 76, 60, 0.1);
    }
    
    .missed-token-item:hover {
        background: linear-gradient(135deg, #fee 0%, #fdd 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(231, 76, 60, 0.2), 0 2px 4px -1px rgba(231, 76, 60, 0.1);
    }
    
    .missed-token-number {
        font-size: 24px;
        font-weight: bold;
        color: #e74c3c;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    
    .missed-token-label {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }
    
    .missed-token-label.noshow-label {
        color: #e74c3c !important;
        font-weight: bold;
    }
    
    /* Expired token styling */
    .expired-token {
        background: #f5f5f5 !important;
        border: 1px solid #999 !important;
        opacity: 0.7;
    }
    
    .expired-token .missed-token-number {
        color: #999 !important;
        text-decoration: line-through;
    }
    
    .expired-label {
        color: #d32f2f !important;
        font-weight: bold;
    }
    
    .empty-token-item {
        display: none !important; /* Hide NIL items */
    }
    
    .missed-tokens-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-bottom: 2px solid #a93226;
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .header-left img {
        max-height: 50px;
        width: auto;
    }
    
    .header-left .company-name {
        font-size: 28px;
        font-weight: bold;
    }
    
    .header-right {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 500;
        direction: ltr !important;
        text-align: left !important;
    }
    
    #current-date-time {
        direction: ltr !important;
        text-align: left !important;
    }
    
    .header-middle {
        display: none !important;
    }
    
    /* Medium screens (768px - 1199px) */
    @media (max-width: 1199px) and (min-width: 769px) {
        .missed-token-number {
            font-size: 22px;
        }
        
        .message-box {
            height: 50px;
        }
        
        .message-text {
            font-size: 18px;
        }
        
        .message-maintenance, .message-notice {
            font-size: 18px;
            padding: 8px 16px;
        }
        
        .message-separator {
            font-size: 24px;
        }
        
        #missed-tokens-display {
            height: calc(100vh - 50px - 90px);
        }
    }
    
    @media (max-width: 768px) {
        #missed-tokens-display {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 15px;
            height: calc(100vh - 160px);
        }
        
        .missed-tokens-header {
            flex-direction: column;
            padding: 15px;
            gap: 10px;
        }
        
        .header-left {
            font-size: 20px;
        }
        
        .header-left .company-name {
            font-size: 22px;
        }
        
        .header-right {
            font-size: 18px;
        }
        
        .missed-token-number {
            font-size: 20px;
        }
        
        .missed-token-item {
            padding: 6px 10px;
            min-height: 45px;
        }
        
        .message-text {
            font-size: 16px;
        }
        
        .message-maintenance, .message-notice {
            font-size: 16px;
            padding: 6px 14px;
        }
        
        .message-separator {
            font-size: 20px;
        }
        
        .message-box {
            height: 80px !important;
        }
    }
    
    @media (max-width: 480px) {
        #missed-tokens-display {
            grid-template-columns: 1fr;
        }
        
        .missed-token-number {
            font-size: 18px;
        }
        
        .message-text {
            font-size: 14px;
        }
        
        .message-maintenance, .message-notice {
            font-size: 14px;
            padding: 4px 12px;
        }
        
        .message-separator {
            font-size: 18px;
        }
        
        .message-box {
            height: 70px !important;
        }
    }
</style>

<div id="main" class="no-print">
    <div class="wrapper" id="display-page">
        <section class="content-wrapper no-print">
            <!-- Missed Tokens Header -->
            <div class="missed-tokens-header">
                <!-- Left: Logo + Company Name -->
                <div class="header-left">
                    @if(isset($settings->logo) && Storage::disk('public')->exists($settings->logo))
                        <img src="{{ $settings->logo_url }}" alt="Logo">
                    @endif
                    <span class="company-name">{{ $settings->name ?? 'QFlow Management System' }}</span>
                </div>
                
                <!-- Middle: Title (Hidden) -->
                <div class="header-middle">
                    @if(isset($service) && $service)
                        {{ $service->name }} - {{ \Lang::get('messages.common.noshow', [], 'ku') }}
                    @else
                        {{ \Lang::get('messages.common.noshow', [], 'ku') }} {{ \Lang::get('messages.common.tokens', [], 'ku') }}
                    @endif
                </div>
                
                <!-- Right: Current Time with Date -->
                <div class="header-right" id="current-time-display">
                    <span id="current-date-time"></span>
                </div>
            </div>
            
            <!-- Missed Tokens Display Grid -->
            <div id="missed-tokens-display">
                <!-- Tokens will be populated by JavaScript -->
            </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 duplicated by JavaScript for seamless loop -->
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection
@section('b-js')
<script>
    window.QFlow = {
        get_missed_tokens_url: "{{ route('get-missed-tokens-for-display') }}",
        get_messages_url: "{{ route('api.display-messages') }}",
        service_id: "{{ isset($service) && $service ? $service->id : '' }}",
        building_id: "{{ $currentBuildingId ?? '' }}",
        date_for_display: "{{$date}}",
        logo_url: "{{ (!empty($settings->logo) && \Storage::disk('public')->exists($settings->logo)) ? $settings->logo_url : '' }}",
        translations: {
            noshow: "{{ \Lang::get('messages.common.noshow', [], 'ku') }}",
            nil: "{{ \Lang::get('messages.call_page.nil', [], 'ku') }}",
            expired: "{{ \Lang::get('messages.common.expired', [], 'ku') }}"
        }
    }
    
    // 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);
    
    // Update current time and date display
    function updateCurrentTime() {
        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');
        const timeStr = `${hoursStr}:${minutes} ${ampm}`;
        
        const timeElement = document.getElementById('current-date-time');
        if (timeElement) {
            timeElement.textContent = `${dateStr} - ${timeStr}`;
        }
    }
    
    // Update time immediately and then every second
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);
    
    // Function to get missed tokens
    function getMissedTokens() {
        let apiUrl = window.QFlow.get_missed_tokens_url;
        let params = [`time=${new Date().getTime()}`];
        
        if (window.QFlow.service_id && 
            String(window.QFlow.service_id).trim() !== '' &&
            String(window.QFlow.service_id) !== 'null' && 
            String(window.QFlow.service_id) !== 'undefined') {
            params.push(`service_id=${window.QFlow.service_id}`);
        }
        
        if (window.QFlow.building_id && 
            String(window.QFlow.building_id).trim() !== '' &&
            String(window.QFlow.building_id) !== 'null' && 
            String(window.QFlow.building_id) !== 'undefined') {
            params.push(`building_id=${window.QFlow.building_id}`);
        }
        
        apiUrl += (apiUrl.includes('?') ? '&' : '?') + params.join('&');
        
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                displayMissedTokens(data);
            })
            .catch(error => {
                console.error('Error fetching missed tokens:', error);
            });
    }
    
    // Function to display missed tokens in 4 columns with up to 15 tokens per column (filled from left)
    function displayMissedTokens(tokens) {
        const container = document.getElementById('missed-tokens-display');
        if (!container) return;
        
        container.innerHTML = '';
        
        // Create 4 columns
        const columns = [];
        for (let i = 0; i < 4; i++) {
            const column = document.createElement('div');
            column.className = 'missed-token-column';
            
            columns.push(column);
            container.appendChild(column);
        }
        
        if (!tokens || tokens.length === 0) {
            // Fill all 4 columns with NIL items (15 per column)
            const maxTokensPerColumn = 15;
            columns.forEach((column) => {
                for (let i = 0; i < maxTokensPerColumn; i++) {
                    const emptyItem = document.createElement('div');
                    emptyItem.className = 'empty-token-item';
                    emptyItem.textContent = window.QFlow.translations.nil || 'NIL';
                    column.appendChild(emptyItem);
                }
            });
            return;
        }
        
        // Distribute tokens across 4 columns - fill from left (column 0, then 1, then 2, then 3)
        // Each column can hold up to 15 tokens
        const maxTokensPerColumn = 15;
        const columnCounts = [0, 0, 0, 0]; // Track tokens per column
        
        tokens.forEach((token, index) => {
            // Fill columns sequentially from left to right
            // Find the first column that has space
            let columnIndex = -1;
            for (let i = 0; i < 4; i++) {
                if (columnCounts[i] < maxTokensPerColumn) {
                    columnIndex = i;
                    break;
                }
            }
            
            // If all columns are full, stop adding tokens
            if (columnIndex === -1) {
                return;
            }
            
            const column = columns[columnIndex];
            columnCounts[columnIndex]++;
            
            // Create token item
            const tokenItem = document.createElement('div');
            tokenItem.className = 'missed-token-item';
            
            const tokenNumber = document.createElement('div');
            tokenNumber.className = 'missed-token-number';
            tokenNumber.textContent = (token.token_letter || '') + '-' + (token.token_number || '');
            
            const tokenLabel = document.createElement('div');
            tokenLabel.className = 'missed-token-label';
            
            // Check if token is expired - show in English only
            if (token.is_expired) {
                tokenLabel.textContent = 'Expired';
                tokenLabel.classList.add('expired-label');
                tokenItem.classList.add('expired-token');
            } else {
                tokenLabel.textContent = 'Missed';
                tokenLabel.classList.add('noshow-label');
            }
            
            tokenItem.appendChild(tokenNumber);
            tokenItem.appendChild(tokenLabel);
            column.appendChild(tokenItem);
        });
        
        // Fill remaining slots in columns with empty items to reach 15 per column
        columns.forEach((column, colIndex) => {
            const currentTokens = column.querySelectorAll('.missed-token-item').length;
            const needed = maxTokensPerColumn - currentTokens;
            
            for (let i = 0; i < needed; i++) {
                const emptyItem = document.createElement('div');
                emptyItem.className = 'empty-token-item';
                emptyItem.textContent = window.QFlow.translations.nil || 'NIL';
                column.appendChild(emptyItem);
            }
        });
    }
    
    // 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);
        }
        
        // Add is_missed parameter to include missed-only messages
        params.push('is_missed=1');
        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;
                }
            }
        })
        .catch(error => {
            console.error('Error fetching messages:', error);
        });
    }
    
    // Global variables for missed page animation
    let missedCurrentLanguageIndex = 0;
    let missedLanguageGroups = [];
    let missedAnimationTimeout = 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 (missedAnimationTimeout) {
            clearTimeout(missedAnimationTimeout);
            missedAnimationTimeout = null;
        }
        
        // Stop current animation
        messageWrapper.style.animation = 'none';
        messageWrapper.style.left = '0';
        messageWrapper.style.opacity = '0.7';
        
        setTimeout(() => {
            if (messages.length === 0) {
                const defaultText = '<span class="message-text">بەڕێوبەرایەتی هاتووچۆى هه‌ولێر - مديرية مرور أربيل</span>';
                messageWrapper.innerHTML = defaultText;
                messageWrapper.style.opacity = '1';
                return;
            }
            
            // Group messages by language
            const groupedMessages = {
                ku: [],
                iq: [],
                en: []
            };
            
            messages.forEach((message) => {
                const lang = message.language || message.language_code || 'ku';
                console.log('Missed page - Message language:', lang, 'Message:', message);
                if (groupedMessages[lang]) {
                    groupedMessages[lang].push(message);
                } else {
                    console.warn('Missed page - Unknown language:', lang, 'falling back to Kurdish');
                    groupedMessages.ku.push(message);
                }
            });
            
            console.log('Missed page - Grouped messages:', {
                ku: groupedMessages.ku.length,
                iq: groupedMessages.iq.length,
                en: groupedMessages.en.length
            });
            
            // Store language groups for sequential animation
            missedLanguageGroups = [];
            if (groupedMessages.ku.length > 0) missedLanguageGroups.push({ lang: 'ku', messages: groupedMessages.ku });
            if (groupedMessages.iq.length > 0) missedLanguageGroups.push({ lang: 'iq', messages: groupedMessages.iq });
            if (groupedMessages.en.length > 0) missedLanguageGroups.push({ lang: 'en', messages: groupedMessages.en });
            
            console.log('Missed page - Language groups to animate:', missedLanguageGroups.map(g => ({ lang: g.lang, count: g.messages.length })));
            
            // Reset to first language group
            missedCurrentLanguageIndex = 0;
            
            // Start animating
            animateMissedLanguageGroup();
        }, 200);
    }
    
    function animateMissedLanguageGroup() {
        const messageWrapper = document.getElementById('message-content-wrapper');
        if (!messageWrapper || missedLanguageGroups.length === 0) {
            console.warn('Missed page - No language groups to animate');
            if (messageWrapper) messageWrapper.style.opacity = '1';
            return;
        }
        
        console.log('Missed page - Animating language group:', missedCurrentLanguageIndex, 'of', missedLanguageGroups.length, missedLanguageGroups[missedCurrentLanguageIndex]);
        
        // Get current language group
        const currentGroup = missedLanguageGroups[missedCurrentLanguageIndex];
        if (!currentGroup) {
            console.log('Missed page - No more groups, restarting from beginning');
            // All groups completed, restart from beginning
            missedCurrentLanguageIndex = 0;
            animateMissedLanguageGroup();
            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;
        messageWrapper.style.opacity = '1';
        
        // Reset position and start animation
        messageWrapper.style.left = '0';
        messageWrapper.style.animation = 'none';
        
        // Force reflow
        void messageWrapper.offsetWidth;
        
        // Calculate animation duration based on content width
        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
        
        // Start animation
        messageWrapper.style.animation = `moveLeftToRight ${animationDuration}s linear`;
        
        // When animation completes, move to next language group
        missedAnimationTimeout = setTimeout(() => {
            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
                missedCurrentLanguageIndex++;
                
                // Start next group immediately
                requestAnimationFrame(() => {
                    messageWrapper.style.opacity = '1';
                    animateMissedLanguageGroup();
                });
            });
        }, 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) {
            // Group messages by language: Kurdish first, then Arabic, then English
            const groupedMessages = {
                ku: [],
                iq: [],
                en: []
            };
            
            initialMessages.forEach((message) => {
                const lang = message.language || 'ku';
                if (groupedMessages[lang]) {
                    groupedMessages[lang].push(message);
                } else {
                    groupedMessages.ku.push(message);
                }
            });
            
            let messageHTML = '';
            
            // First: All Kurdish messages
            groupedMessages.ku.forEach((message, index) => {
                let messageClass = 'message-text';
                
                if (message.message_type === 'maintenance') {
                    messageClass += ' message-maintenance';
                } else if (message.message_type === 'notice') {
                    messageClass += ' message-notice';
                }
                
                messageHTML += `<span class="${messageClass}" data-message-id="${message.id}">${message.message_text}</span>`;
                
                // Add separator if not last Kurdish message, or if there are more languages
                if (index < groupedMessages.ku.length - 1 || groupedMessages.iq.length > 0 || groupedMessages.en.length > 0) {
                    if (window.QFlow.logo_url && window.QFlow.logo_url.trim() !== '') {
                        messageHTML += `<span class="message-separator"><img src="${window.QFlow.logo_url}" alt="Logo" /></span>`;
                    } else {
                        messageHTML += '<span class="message-separator"><span class="dot">•</span></span>';
                    }
                }
            });
            
            // Second: All Arabic messages
            groupedMessages.iq.forEach((message, index) => {
                let messageClass = 'message-text';
                
                if (message.message_type === 'maintenance') {
                    messageClass += ' message-maintenance';
                } else if (message.message_type === 'notice') {
                    messageClass += ' message-notice';
                }
                
                messageHTML += `<span class="${messageClass}" data-message-id="${message.id}">${message.message_text}</span>`;
                
                // Add separator if not last Arabic message, or if there are English messages
                if (index < groupedMessages.iq.length - 1 || groupedMessages.en.length > 0) {
                    if (window.QFlow.logo_url && window.QFlow.logo_url.trim() !== '') {
                        messageHTML += `<span class="message-separator"><img src="${window.QFlow.logo_url}" alt="Logo" /></span>`;
                    } else {
                        messageHTML += '<span class="message-separator"><span class="dot">•</span></span>';
                    }
                }
            });
            
            // Third: All English messages
            groupedMessages.en.forEach((message, index) => {
                let messageClass = 'message-text';
                
                if (message.message_type === 'maintenance') {
                    messageClass += ' message-maintenance';
                } else if (message.message_type === 'notice') {
                    messageClass += ' message-notice';
                }
                
                messageHTML += `<span class="${messageClass}" data-message-id="${message.id}">${message.message_text}</span>`;
                
                // Add separator if not last English message
                if (index < groupedMessages.en.length - 1) {
                    if (window.QFlow.logo_url && window.QFlow.logo_url.trim() !== '') {
                        messageHTML += `<span class="message-separator"><img src="${window.QFlow.logo_url}" alt="Logo" /></span>`;
                    } else {
                        messageHTML += '<span class="message-separator"><span class="dot">•</span></span>';
                    }
                }
            });
            
            // No duplication - simple left to right scroll
            messageWrapper.innerHTML = messageHTML;
        } else {
            const defaultText = '<span class="message-text">بەڕێوبەرایەتی هاتووچۆى هه‌ولێر - مديرية مرور أربيل</span>';
            messageWrapper.innerHTML = defaultText;
        }
    }
    
    function startMessageUpdates() {
        if (updateInterval) {
            clearInterval(updateInterval);
        }
        
        updateMessages();
        updateInterval = setInterval(updateMessages, 3000);
    }
    
    // Initialize when page loads
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Missed tokens display page loaded');
        initializeMessages();
        getMissedTokens();
        startMessageUpdates();
        
        // Refresh missed tokens every 5 seconds
        setInterval(getMissedTokens, 5000);
    });
    
    // 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>
<script>
    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>
@endsection