{{--
|--------------------------------------------------------------------------
| INSTRUKCJA KONFIGURACJI EKRANU DLA KLIENTA (TV)
|--------------------------------------------------------------------------
|
| Aby uzyskać prawdziwy tryb pełnoekranowy bez paska adresu i interfejsu
| przeglądarki, należy uruchomić ją w specjalnym "trybie kiosku".
| Jest to jednorazowa konfiguracja na komputerze podłączonym do telewizora.
|
| Przykład dla Google Chrome:
|
| 1. Utwórz skrót do przeglądarki Chrome na pulpicie.
| 2. Kliknij na niego prawym przyciskiem myszy i wybierz "Właściwości".
| 3. W polu "Element docelowy" (Target), na samym końcu, po cudzysłowie,
|    dodaj spację, a następnie flagę --kiosk oraz adres URL tej strony.
|
|    Przykładowa zawartość pola "Element docelowy":
|    "C:\Program Files\Google\Chrome\Application\chrome.exe" --kiosk "https://twoja-domena.pl/orders/status_screen"
|
| 4. Zapisz zmiany. Od teraz uruchomienie przeglądarki z tego skrótu
|    automatycznie otworzy tę stronę w idealnym trybie pełnoekranowym.
|
|--------------------------------------------------------------------------
--}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ trans('lang.live_order_status_screen') }}</title>
    
    <!-- AlpineJS - ładowany z 'defer', aby poczekał na załadowanie całej strony -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Konfiguracja Tailwind CSS dla CDN
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                    },
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    }
                }
            }
        }
        
        // Ukryj ostrzeżenie o CDN w produkcji
        if (typeof tailwind !== 'undefined') {
            const originalWarn = console.warn;
            console.warn = function(message) {
                if (typeof message === 'string' && message.includes('cdn.tailwindcss.com should not be used in production')) {
                    return; // Ignoruj to ostrzeżenie
                }
                originalWarn.apply(console, arguments);
            };
        }
    </script>

    <style>
        html, body { height: 100%; }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="antialiased font-sans bg-slate-900 text-white overflow-hidden">
    <div class="h-full w-full flex flex-col" x-data 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="{{ asset('/images/pgsymbol .svg') }}" class="h-6 w-auto mr-3" alt="">
                <span>{!! trans('lang.live_order_status_screen') !!}</span>
            </h3>
        </header>

        <main class="flex-1 bg-slate-900 p-6 overflow-y-auto">
            <x-order-status-board vendorId="{{ $id }}" />
        </main>
    </div>

    <!-- Firebase -->
    <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-firestore.js"></script>

    <script type="text/javascript">
        var firebaseConfig = {
            apiKey: "{{ config('firebase.api_key') }}",
            authDomain: "{{ config('firebase.auth_domain') }}",
            databaseURL: "{{ config('firebase.database_url') }}",
            projectId: "{{ config('firebase.project_id') }}",
            storageBucket: "{{ config('firebase.storage_bucket') }}",
            messagingSenderId: "{{ config('firebase.messaging_sender_id') }}",
            appId: "{{ config('firebase.app_id') }}",
            measurementId: "{{ config('firebase.measurement_id') }}"
        };
        firebase.initializeApp(firebaseConfig);
        var database = firebase.firestore();
    </script>
</body>
</html> 