

<div x-data="{ 
        isOnline: true,
        isReady: false,
        ignoreOnlineEvents: false,
        isConnectionDetailsModalOpen: false,
        connectionDetails: {
            effectiveType: 'N/A',
            downlink: 'N/A',
            rtt: 'N/A',
            saveData: 'N/A',
            type: 'N/A'
        },
        init() {
            this.isOnline = navigator.onLine;
            window.addEventListener('online', () => {
                if (!this.ignoreOnlineEvents) {
                    this.isOnline = true;
                }
                this.updateConnectionDetails();
            });
            window.addEventListener('offline', () => {
                this.isOnline = false;
                this.ignoreOnlineEvents = true;
                setTimeout(() => {
                    this.ignoreOnlineEvents = false;
                    if (navigator.onLine) {
                        this.isOnline = true;
                    }
                }, 3000);
                this.updateConnectionDetails();
            });
            setTimeout(() => this.isReady = true, 500);
            this.updateConnectionDetails();
            if ('connection' in navigator) {
                navigator.connection.addEventListener('change', () => this.updateConnectionDetails());
            }
        },
        updateConnectionDetails() {
            if ('connection' in navigator && navigator.connection) {
                const conn = navigator.connection;
                this.connectionDetails.effectiveType = conn.effectiveType || '<?php echo e(trans('lang.not_available_short')); ?>';
                this.connectionDetails.downlink = conn.downlink ? `${conn.downlink} Mbps` : '<?php echo e(trans('lang.not_available_short')); ?>';
                this.connectionDetails.rtt = conn.rtt ? `${conn.rtt} ms` : '<?php echo e(trans('lang.not_available_short')); ?>';
                this.connectionDetails.saveData = conn.saveData ? '<?php echo e(trans('lang.yes')); ?>' : '<?php echo e(trans('lang.no')); ?>';
                this.connectionDetails.type = conn.type || '<?php echo e(trans('lang.not_available_short')); ?>';
            } else {
                // Fallback for browsers that do not support navigator.connection
                this.connectionDetails.type = this.isOnline ? 'wifi' : 'none';
                this.connectionDetails.effectiveType = this.isOnline ? '4g' : 'offline';
                this.connectionDetails.downlink = this.isOnline ? 'Unknown' : '0';
                this.connectionDetails.rtt = 'Unknown';
                this.connectionDetails.saveData = '<?php echo e(trans('lang.no')); ?>';
            }
        },
        openConnectionDetailsModal() {
            this.updateConnectionDetails();
            this.isConnectionDetailsModalOpen = true;
        }
    }" x-init="init()" class="flex items-center w-full bg-white h-[85px] shadow-md">

    <!-- Kontener logo o stałej szerokości -->
    <div
        class="bg-gradient-to-tl from-blue-500 via-blue-500 to-blue-400 flex justify-center items-center shrink-0 w-[120px] h-[85px]">
        <a class="flex justify-center items-center h-full w-full">
            <img src="<?php echo e(asset('/images/pgsymbol .svg')); ?>" alt="homepage" class="dark-logo w-auto h-[60%]"
                id="logo_web">
        </a>
    </div>

    
    <div class="flex justify-between items-center flex-1 h-[85px]">
        
        <div class="flex items-center h-full">
            <div class="flex items-center h-full pr-[10px] pl-6 relative">
                <h1 class="text-2xl font-bold m-0"><?php echo trans('lang.dashboard'); ?></h1>
                <div class="absolute right-0 top-1/2 -translate-y-1/2 h-12 w-[2px] bg-slate-200 rounded-full"></div>
            </div>
            <div class="flex items-center h-full px-[10px]">
                <h1 id="headerTitle" class="text-xl font-normal text-slate-500 m-0" x-text="$store.header.title"></h1>
            </div>
        </div>
        
        
        <div class="flex items-center h-full">

            
            <div class="flex items-center justify-center pr-6 mr-6 h-full relative">

                
                <div class="absolute right-0 top-1/2 -translate-y-1/2 h-12 w-[2px] bg-slate-200 rounded-full"></div>

                
                <div class="flex items-center translate-y-[2px]">
                    
                    <span class="hidden"><?php echo e($role); ?></span>

                    <?php if($role == 'vendor'): ?>
                        <div x-data="{ tooltipVisible: false }" class="relative">
                            
                            <label @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                                class="inline-flex items-center cursor-pointer">
                                
                                <input type="checkbox" id="online-switch"
                                    @click.prevent="$store.app.openStatusModal($el)" class="sr-only peer" 
                                    :checked="$store.restaurant.isOnline" />

                                
                                <div class="relative w-16 h-8 bg-gray-300 rounded-full transition-colors duration-200 peer-checked:bg-blue-500
                        after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white 
                        after:rounded-full after:h-7 after:w-7 after:shadow after:transition-transform 
                        after:duration-200 peer-checked:after:translate-x-[32px]">
                                </div>

                                
                                <span class="ml-2 w-16 text-sm font-medium uppercase text-slate-600"
                                    id="online-switch-text" x-text="$store.restaurant.statusText"></span>
                            </label>

                            <!-- Tooltip -->
                            <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0 translate-y-2"
                                x-transition:enter-end="opacity-100 translate-y-0"
                                x-transition:leave="transition ease-in duration-200"
                                x-transition:leave-start="opacity-100 translate-y-0"
                                x-transition:leave-end="opacity-0 translate-y-2"
                                class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                                style="display: none;">
                                <?php echo trans('lang.change_restaurant_status'); ?>

                                <div
                                    class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            
            <div class="flex items-center h-full space-x-6">
                
                <div x-data="{ tooltipVisible: false }" class="relative">
                    <button type="button" @click="openConnectionDetailsModal()"
                        @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex justify-center items-center w-10 h-10 rounded-full hover:bg-slate-100 border !border-slate-300 transition-colors duration-200 focus:outline-none focus:ring-0">
                        <template x-if="isOnline">
                            <i class="fa-solid fa-wifi text-green-500 text-xl"></i>
                        </template>
                        <template x-if="!isOnline">
                            <i class="fa-solid fa-wifi text-red-600 text-xl"></i>
                        </template>
                    </button>
                    <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-200"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-2"
                        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                        style="display: none;">
                        <?php echo trans('lang.internet_connection_status'); ?>

                        <div
                            class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                        </div>
                    </div>
                </div>

                
                <div x-data="{ tooltipVisible: false }" class="relative">
                    <button type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        @click="$dispatch('open-status-modal')"
                        class="flex justify-center items-center 
                        w-10 h-10
                        rounded-full 
                        text-blue-500 
                        hover:bg-slate-100
                        border
                        !border-slate-300
                        transition-colors
                        duration-200
                        focus:outline-none focus:ring-0">
                        <i class="fa-regular fa-rectangle-list text-8 leading-none"></i>
                    </button>
                    <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-200"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-2"
                        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                        style="display: none;">
                        <?php echo trans('lang.redirect_to_status_page'); ?>

                        <div
                            class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                        </div>
                    </div>
                </div>


                
                <div x-data="{ tooltipVisible: false }" class="relative">
                    <button type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex justify-center items-center 
                        w-10 h-10
                        rounded-full 
                        border
                        !border-slate-300
                        text-blue-500 
                        hover:bg-slate-100
                        transition-colors
                        duration-200
                        focus:outline-none focus:ring-0"
                        onClick="showRestaurantQrCode()">
                        <i class="fa-regular fa-window-restore text-8 leading-none"></i>
                    </button>
                    <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-200"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-2"
                        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                        style="display: none;">
                        <?php echo trans('lang.show_restaurant_qr_code'); ?>

                        <div
                            class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                        </div>
                    </div>
                </div>
            </div>

            
            <?php

                $stripeStatus = \App\Services\StripeStatusService::getStripeStatus();
                $stripeConnected = $stripeStatus['connected'];
                $stripeOnboardingComplete = $stripeStatus['onboarding_complete']; 


                $detailStripeStatus = \App\Services\StripeStatusService::getDetailedStripeStatus();
                $detailStripeconnected = $detailStripeStatus['connected'] ?? false;
                $currentStripeStatus = $detailStripeStatus['status'] ?? 'not_connected';
                $detailStripeOnboardingComplete = $detailStripeStatus['onboarding_complete'] ?? false;
                $detailStripestatusMessage = $detailStripeStatus['status_message'] ?? 'Unknown status';
                $detailStripereason = $detailStripeStatus['reason'] ?? '';

            ?>
            <div class="relative flex items-center ml-6" x-data="{ tooltipVisible: false }">
                <!-- <?php if($stripeConnected && $stripeOnboardingComplete): ?>
                    
                    <button type="button" onclick="openStripeModal()"
                        @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex items-center gap-2 flex-shrink-0 h-10 px-3 rounded-full hover:bg-slate-100 focus:outline-none border !border-slate-300 transition">
                        
                        <i class="fa-brands fa-stripe text-2xl text-blue-500"></i>
                        
                        <span class="w-2.5 h-2.5 bg-green-500 rounded-full flex-shrink-0"></span>
                    </button>
                <?php else: ?>
                    
                    <button onclick="openBusinessTypeModal()"
                            @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                            class="flex items-center gap-2 flex-shrink-0 h-10 px-3 rounded-full hover:bg-slate-100 focus:outline-none border !border-slate-300 transition">
                        
                        <i class="fa-brands fa-stripe text-2xl text-slate-400"></i>
                        
                        <?php if($stripeConnected): ?>
                            <span class="w-2.5 h-2.5 bg-amber-500 rounded-full animate-pulse flex-shrink-0"></span>
                        <?php else: ?>
                            <span class="w-2.5 h-2.5 bg-red-500 rounded-full flex-shrink-0"></span>
                        <?php endif; ?>
                    </button>
                <?php endif; ?> -->

                <?php if($currentStripeStatus === 'active'): ?>
                    <button type="button" onclick="openStripeModal()"
                        @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex items-center gap-2 flex-shrink-0 h-10 px-3 rounded-full hover:bg-slate-100 focus:outline-none border !border-slate-300 transition">
                        
                        <i class="fa-brands fa-stripe text-2xl text-blue-500"></i>
                        
                        <span class="w-2.5 h-2.5 bg-green-500 rounded-full flex-shrink-0"></span>
                    </button>
                <?php elseif(in_array($currentStripeStatus, ['pending', 'incomplete', 'restricted', 'action_required'])): ?>
                    <button onclick="openStripeModal()"
                        @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex items-center gap-2 flex-shrink-0 h-10 px-3 rounded-full hover:bg-slate-100 focus:outline-none border !border-slate-300 transition">
                        <i class="fa-brands fa-stripe text-2xl text-slate-400"></i>
                        <span class="w-2.5 h-2.5 bg-amber-500 rounded-full animate-pulse flex-shrink-0"></span>
                    </button>
                <?php else: ?>
                    <button onclick="openBusinessTypeModal()"
                    @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="flex items-center gap-2 flex-shrink-0 h-10 px-3 rounded-full hover:bg-slate-100 focus:outline-none border !border-slate-300 transition">
                        <i class="fa-brands fa-stripe text-2xl text-slate-400"></i>
                        <span class="w-2.5 h-2.5 bg-red-500 rounded-full flex-shrink-0"></span>
                    </button>
                <?php endif; ?>
                
                
                <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0"
                    x-transition:leave-end="opacity-0 translate-y-2"
                    class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                    style="display: none;">
                    <!-- <?php if($stripeConnected && $stripeOnboardingComplete): ?>
                        Stripe Dashboard
                    <?php elseif($stripeConnected): ?>
                        <?php echo e(trans('lang.stripe_onboarding_incomplete')); ?>

                    <?php else: ?>
                        <?php echo e(trans('lang.stripe_account_not_connected')); ?>

                    <?php endif; ?> -->

                    <?php if($currentStripeStatus === 'active'): ?>
                        Stripe Dashboard
                    <?php elseif($currentStripeStatus === 'action_required'): ?>
                        <?php echo e(trans('lang.stripe_action_required')); ?> - <?php echo e($detailStripereason); ?>

                    <?php elseif($currentStripeStatus === 'restricted'): ?>
                        <?php echo e(trans('lang.stripe_account_restricted')); ?> - <?php echo e($detailStripereason); ?>

                    <?php elseif(in_array($currentStripeStatus, ['pending', 'incomplete'])): ?>
                        <?php echo e(trans('lang.stripe_onboarding_incomplete')); ?>

                    <?php elseif($currentStripeStatus === 'error'): ?>
                        <?php echo e(trans('lang.stripe_connection_error')); ?> - <?php echo e($detailStripereason ?? 'Unable to retrieve status'); ?>

                    <?php else: ?>
                        <?php echo e(trans('lang.stripe_account_not_connected')); ?>

                    <?php endif; ?>


                    <div class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800"></div>
                </div>
            </div>

            
            <div class="relative flex items-center text-[#8d909e] ml-6 mr-6" 
                 x-data='{
                    open: false,
                    tooltipVisible: false,
                    languages: <?php echo json_encode($languages, 15, 512) ?>,
                    current: <?php echo json_encode($currentLang, 15, 512) ?>,
                    changeLang(code) {
                        window.location.href = `<?php echo e(route('changeLang')); ?>?lang=${code}`;
                    }
                 }' 
                 @click.outside="open = false">

                
                <button @click="open = !open" type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false" class="
                    flex items-center
                    flex-shrink-0
                    h-10 px-2
                    rounded-full
                    hover:bg-slate-100
                    focus:outline-none
                    space-x-2
                    border
                    !border-slate-300
                    transition">
                    
                    <img :src="current.flagUrl" :alt="current.code" class="w-7 h-7 rounded-full bg-blue-500" />
                    
                    <i class="fa fa-chevron-down text-xs text-slate-700 transition-transform" :class="{'rotate-180': open}"></i>
                </button>

                
                <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0"
                    x-transition:leave-end="opacity-0 translate-y-2"
                    class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                    style="display: none;">
                    <?php echo trans('lang.change_language'); ?>

                    <div
                        class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                    </div>
                </div>

                
                <ul x-show="open" x-transition class="
                    absolute top-full mt-2 right-0 w-40
                    bg-white
                    border !border-slate-300
                    rounded-lg
                    shadow-lg
                    overflow-hidden
                    z-50" 
                    style="display: none;">
                    <template x-for="lang in languages" :key="lang.code">
                        <li @click="changeLang(lang.code)"
                            class="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap">
                            <img :src="lang.flagUrl" :alt="lang.code" class="w-5 h-5 rounded-full mr-2" />
                            <span x-text="lang.name" class="text-sm text-gray-700"></span>
                        </li>
                    </template>
                </ul>
            </div>

            
            <div x-data="{ tooltipVisible: false }" class="flex items-center h-full relative pr-6 pl-6">
                
                <div class="absolute left-0 top-1/2 -translate-y-1/2 h-12 w-[2px] bg-slate-200 rounded-full"></div>

                
                <a <?php if($role == 'vendor'): ?> href="<?php echo e(route('user.manage_profile')); ?>" <?php endif; ?>
                    @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                    class="flex items-center cursor-pointer no-underline hover:no-underline hover:text-current">
                    <img class="w-12 h-12 rounded-full object-cover flex-shrink-0" id="userimage"
                        :src="$store.user.avatar" />
                    <div class="flex flex-col ml-2">
                        <h4 class="font-normal text-base m-0 text-slate-500 leading-tight">
                            <?php echo trans('lang.hello'); ?>

                        </h4>
                        <h4 class="font-semibold m-0 text-xl text-slate-800 leading-tight -mt-1" id="username" x-text="$store.user.name"></h4>
                    </div>
                </a>

                
                <div x-show="tooltipVisible" x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0"
                    x-transition:leave-end="opacity-0 translate-y-2"
                    class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-20 pointer-events-none"
                    style="display: none;">
                    <?php echo trans('lang.manage_your_profile'); ?>

                    <div
                        class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                    </div>
                </div>
            </div>
        </div>
    </div>


    
    <div x-show="!isOnline && isReady" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-[1010] flex items-center justify-center p-4 bg-black bg-opacity-80"
        style="display: none;" x-cloak>
        <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-md flex flex-col">

            <div class="p-6 text-center">
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100">
                    <i class="fa-solid fa-wifi text-3xl text-red-600"></i>
                </div>
                <h4 class="text-xl font-semibold text-gray-900 mt-4">
                    <?php echo trans('lang.no_internet_connection'); ?>

                </h4>
                <p class="mt-2 text-sm text-gray-600">
                    <?php echo trans('lang.no_internet_connection_message'); ?>

                </p>
            </div>

        </div>
    </div>

    
    <div x-data="statusScreenModal()" @open-status-modal.window="openModal"
        x-show="isOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-[1000] flex flex-col bg-slate-900 text-white"
        style="display: none;" x-cloak>

        
        <header class="flex h-16 items-center justify-between border-b border-slate-700 bg-slate-800/50 px-6 flex-shrink-0">
            <h3 class="flex items-center text-lg font-bold text-slate-100">
                <img src="<?php echo e(asset('/images/pgsymbol .svg')); ?>" class="h-6 w-auto mr-3" alt="">
                <span><?php echo trans('lang.live_order_status_screen'); ?></span>
            </h3>
            <div class="flex items-center gap-4">
                
                <button @click="moveToSecondScreen" x-show="hasMultiScreenSupport"
                    class="flex items-center gap-2 rounded-md bg-blue-500 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-white transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-900">
                    <i class="fa-solid fa-desktop"></i>
                    <span><?php echo trans('lang.move_to_customer_screen'); ?></span>
                </button>
                
                <button @click="closeModal"
                    class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-700 hover:text-white focus:outline-none">
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
        </header>

        
        <main class="flex-1 bg-slate-900 p-6 overflow-y-auto">
            <?php if (isset($component)) { $__componentOriginal4be0ed6d45b70935461a4bbc8abe2813 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal4be0ed6d45b70935461a4bbc8abe2813 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.order-status-board','data' => ['vendorId' => ''.e(Auth::guard('admin')->user()->getvendorId()).'']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('order-status-board'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['vendorId' => ''.e(Auth::guard('admin')->user()->getvendorId()).'']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal4be0ed6d45b70935461a4bbc8abe2813)): ?>
<?php $attributes = $__attributesOriginal4be0ed6d45b70935461a4bbc8abe2813; ?>
<?php unset($__attributesOriginal4be0ed6d45b70935461a4bbc8abe2813); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal4be0ed6d45b70935461a4bbc8abe2813)): ?>
<?php $component = $__componentOriginal4be0ed6d45b70935461a4bbc8abe2813; ?>
<?php unset($__componentOriginal4be0ed6d45b70935461a4bbc8abe2813); ?>
<?php endif; ?>
        </main>
    </div>

    
    <div x-show="isConnectionDetailsModalOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-[1010] flex items-center justify-center p-4 bg-black bg-opacity-80" role="dialog"
        aria-modal="true" style="display: none;" x-cloak>
        <div @click.away="isConnectionDetailsModalOpen = false" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-md flex flex-col">

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
                    <i class="fa-solid fa-signal text-blue-500"></i>
                    <span><?php echo trans('lang.connection_details'); ?></span>
                </h3>
                <button @click="isConnectionDetailsModalOpen = false" type="button"
                    class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
                    <span class="sr-only"><?php echo trans('lang.close'); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                    <div class="bg-blue-50/50 border !border-slate-300 p-3 rounded-lg">
                        <p class="text-slate-500 font-medium"><?php echo trans('lang.connection_effective_type'); ?></p>
                        <p class="text-slate-800 font-bold text-base" x-text="connectionDetails.effectiveType"></p>
                    </div>
                    <div class="bg-blue-50/50 border !border-slate-300 p-3 rounded-lg">
                        <p class="text-slate-500 font-medium"><?php echo trans('lang.connection_type'); ?></p>
                        <p class="text-slate-800 font-bold text-base capitalize" x-text="connectionDetails.type"></p>
                    </div>
                    <div class="bg-blue-50/50 border !border-slate-300 p-3 rounded-lg">
                        <p class="text-slate-500 font-medium"><?php echo trans('lang.connection_downlink'); ?></p>
                        <p class="text-slate-800 font-bold text-base" x-text="connectionDetails.downlink"></p>
                    </div>
                    <div class="bg-blue-50/50 border !border-slate-300 p-3 rounded-lg">
                        <p class="text-slate-500 font-medium"><?php echo trans('lang.connection_rtt'); ?></p>
                        <p class="text-slate-800 font-bold text-base" x-text="connectionDetails.rtt"></p>
                    </div>
                    <div class="bg-blue-50/50 border !border-slate-300 p-3 rounded-lg sm:col-span-2">
                        <p class="text-slate-500 font-medium"><?php echo trans('lang.connection_save_data'); ?></p>
                        <p class="text-slate-800 font-bold text-base" x-text="connectionDetails.saveData"></p>
                    </div>
                </div>
                <div class="mt-4 text-xs text-slate-400 text-center">
                    <?php echo trans('lang.connection_info_notice'); ?>

                </div>
            </div>

            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200">
                <button @click="isConnectionDetailsModalOpen = false" type="button"
                    class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0">
                    <?php echo trans('lang.close'); ?>

                </button>
            </div>
        </div>
    </div>

</div>


<script>
    // Ustawienie dynamicznego tytułu w nagłówku
    document.addEventListener('DOMContentLoaded', () => {
        // Wywołaj funkcję ustawiania tytułu po załadowaniu Alpine.js
        if (typeof changeHeaderTitle === 'function') {
            changeHeaderTitle();
        }
    });
    
    // Wywołaj również po inicjalizacji Alpine.js
    document.addEventListener('alpine:init', () => {
        setTimeout(() => {
            if (typeof changeHeaderTitle === 'function') {
                changeHeaderTitle();
            }
        }, 100);
    });

    function statusScreenModal() {
        return {
            isOpen: false,
            isFullscreen: false,
            hasMultiScreenSupport: false,
            statusPageUrl: "<?php echo e(route('orders.status_screen')); ?>",

            init() {
                this.checkMultiScreenSupport();
                document.addEventListener('fullscreenchange', () => {
                    this.isFullscreen = !!document.fullscreenElement;
                });
            },

            async checkMultiScreenSupport() {
                if ('getScreenDetails' in window) {
                    try {
                        const screenDetails = await window.getScreenDetails();
                        this.hasMultiScreenSupport = screenDetails.screens.length > 1;
                    } catch (err) {
                        this.hasMultiScreenSupport = false;
                    }
                }
            },

            openModal() {
                this.isOpen = true;
                window.dispatchEvent(new CustomEvent('ai-assistant-hide'));
                this.checkMultiScreenSupport(); 
            },

            closeModal() {
                if (this.isFullscreen) {
                    document.exitFullscreen();
                }
                this.isOpen = false;
                window.dispatchEvent(new CustomEvent('ai-assistant-show'));
            },

            async moveToSecondScreen() {
                if (!this.hasMultiScreenSupport) return;
                try {
                    const screenDetails = await window.getScreenDetails();
                    const secondScreen = screenDetails.screens.find(s => !s.isPrimary);
                    const currentUserId = "<?php echo e(Auth::guard('admin')->user()->getvendorId()); ?>";
                    const urlWithId = `${this.statusPageUrl}?id=${currentUserId}`;

                    if (secondScreen) {
                        const features = `left=${secondScreen.availLeft},top=${secondScreen.availTop},width=${secondScreen.availWidth},height=${secondScreen.availHeight},popup=yes`;
                        window.open(urlWithId, '_blank', features);
                        this.closeModal(); // Zamyka modal po otwarciu nowego okna
                    }
                } catch (err) {
                    alert("Nie udało się otworzyć okna na drugim ekranie.");
                }
            }
        }
    }
</script><?php /**PATH C:\xampp\htdocs\pub-and-go-merchant-np\resources\views/layouts/header.blade.php ENDPATH**/ ?>