@extends('admin.layouts.app')

@section('title', 'KDS - Kitchen Display System')

@section('styles')
<style>
/* KDS Dashboard Styles */
body {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

.kds-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    margin-bottom: 0;
    border-radius: 0;
}

.kds-stats {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.stat-card {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    color: white;
    margin-bottom: 10px;
}

.stat-card.confirmados {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.preparacao {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.prontos {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.tempo {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.kds-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.kds-column {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.kds-column-header {
    padding: 15px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.kds-column.confirmados .kds-column-header {
    background: #667eea;
}

.kds-column.preparacao .kds-column-header {
    background: #f093fb;
}

.kds-column.prontos .kds-column-header {
    background: #4facfe;
}

.kds-orders {
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
}

.kds-order {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.kds-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.kds-order.confirmado {
    border-left: 5px solid #667eea;
}

.kds-order.em-preparacao {
    border-left: 5px solid #f093fb;
}

.kds-order.pronto {
    border-left: 5px solid #4facfe;
    background: #e3f2fd;
}

.kds-order-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 10px;
}

.kds-order-id {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

.kds-order-time {
    font-size: 0.9rem;
    color: #666;
    background: rgba(0,0,0,0.1);
    padding: 3px 8px;
    border-radius: 12px;
}

.kds-order-priority {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
}

.kds-order-priority.alta {
    background: #ff6b6b;
}

.kds-order-priority.urgente {
    background: #ff3838;
    animation: pulse 2s infinite;
}

.kds-customer-info {
    margin-bottom: 10px;
}

.kds-customer-name {
    font-weight: bold;
    color: #333;
}

.kds-delivery-type {
    font-size: 0.8rem;
    color: #666;
    margin-left: 10px;
}

.kds-items {
    margin-bottom: 10px;
}

.kds-item {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.kds-item:last-child {
    border-bottom: none;
}

.kds-item-name {
    font-weight: 500;
    color: #333;
}

.kds-item-obs {
    color: #666;
    font-size: 0.8rem;
    font-style: italic;
}

.kds-item-qty {
    color: #007bff;
    font-weight: bold;
}

.kds-actions {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.kds-action-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kds-action-btn:hover {
    transform: translateY(-1px);
}

.kds-btn-iniciar {
    background: #28a745;
    color: white;
}

.kds-btn-iniciar:hover {
    background: #218838;
}

.kds-btn-pronto {
    background: #17a2b8;
    color: white;
}

.kds-btn-pronto:hover {
    background: #138496;
}

.kds-btn-cancelar {
    background: #dc3545;
    color: white;
}

.kds-btn-cancelar:hover {
    background: #c82333;
}

.kds-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

.kds-status-badge.confirmado {
    background: #667eea;
}

.kds-status-badge.em-preparacao {
    background: #f093fb;
}

.kds-status-badge.pronto {
    background: #4facfe;
}

.kds-refresh-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 1000;
    display: none;
}

.kds-controls {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.kds-filtro-loja select {
    margin-right: 10px;
}

.kds-toggle-auto {
    margin-left: 20px;
}

.kds-timer {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
}

.kds-timer.warning {
    color: #ffc107;
    animation: pulse 1s infinite;
}

.kds-timer.danger {
    color: #dc3545;
    animation: pulse 0.5s infinite;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.kds-order {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .kds-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .kds-orders {
        max-height: 50vh;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

.kds-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #f8f9fa;
    overflow: hidden;
}

.kds-fullscreen .kds-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.kds-fullscreen .kds-columns {
    flex: 1;
    overflow: hidden;
}

.kds-fullscreen .kds-orders {
    max-height: none;
    height: calc(100vh - 200px);
}
</style>
@endsection

@section('content')
<div class="kds-container">
    <!-- Header do KDS -->
    <div class="kds-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h2 mb-0">
                        <i class="fas fa-kitchen-set"></i>
                        Kitchen Display System
                    </h1>
                    <p class="mb-0 opacity-75">Monitoramento em tempo real dos pedidos</p>
                </div>
                <div class="col-md-6 text-right">
                    <div class="btn-group">
                        <button class="btn btn-light btn-sm" onclick="toggleFullscreen()" id="btnFullscreen">
                            <i class="fas fa-expand"></i> Tela Cheia
                        </button>
                        <button class="btn btn-light btn-sm" onclick="refreshKDS()" id="btnRefresh">
                            <i class="fas fa-sync-alt"></i> Atualizar
                        </button>
                        <div class="btn-group" role="group">
                            <button class="btn btn-success btn-sm" onclick="toggleAutoRefresh()" id="btnAutoRefresh">
                                <i class="fas fa-play"></i> Auto
                            </button>
                            <span class="btn btn-light btn-sm" id="refreshInterval">10s</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt-3">
        <!-- Controles -->
        <div class="kds-controls">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="kds-filtro-loja">
                        <label class="mr-2">Loja:</label>
                        <select onchange="filtrarPorLoja(this.value)">
                            <option value="">Todas as lojas</option>
                            @foreach($lojas as $loja)
                            <option value="{{ $loja->id }}" {{ $lojaId == $loja->id ? 'selected' : '' }}>
                                {{ $loja->nome }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <strong>Última atualização:</strong>
                    <span id="lastUpdate">Agora</span>
                </div>
                <div class="col-md-4 text-right">
                    <label class="kds-toggle-auto">
                        <input type="checkbox" id="autoRefreshToggle" checked onchange="toggleAutoRefresh()">
                        Atualização automática
                    </label>
                </div>
            </div>
        </div>

        <!-- Estatísticas -->
        <div class="kds-stats">
            <div class="row">
                <div class="col-md-3">
                    <div class="stat-card confirmados">
                        <div class="stat-number">{{ $stats['confirmados'] }}</div>
                        <div class="stat-label">Confirmados</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card preparacao">
                        <div class="stat-number">{{ $stats['em_preparacao'] }}</div>
                        <div class="stat-label">Em Preparação</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card prontos">
                        <div class="stat-number">{{ $stats['prontos'] }}</div>
                        <div class="stat-label">Prontos</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card tempo">
                        <div class="stat-number">{{ $stats['tempo_medio'] ?? 0 }}min</div>
                        <div class="stat-label">Tempo Médio</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Colunas dos Pedidos -->
        <div class="kds-columns">
            <!-- Confirmados -->
            <div class="kds-column confirmados">
                <div class="kds-column-header">
                    <i class="fas fa-clock"></i>
                    Confirmados ({{ $pedidosAgrupados['confirmado']->count() }})
                </div>
                <div class="kds-orders" id="colunaConfirmados">
                    @forelse($pedidosAgrupados['confirmado'] as $pedido)
                    @include('admin.notificacoes.partials.kds-order', ['pedido' => $pedido, 'status' => 'confirmado'])
                    @empty
                    <div class="text-center text-muted p-4">
                        <i class="fas fa-check-circle fa-2x mb-2"></i>
                        <p>Nenhum pedido confirmado</p>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Em Preparação -->
            <div class="kds-column preparacao">
                <div class="kds-column-header">
                    <i class="fas fa-fire"></i>
                    Em Preparação ({{ $pedidosAgrupados['em_preparacao']->count() }})
                </div>
                <div class="kds-orders" id="colunaPreparacao">
                    @forelse($pedidosAgrupados['em_preparacao'] as $pedido)
                    @include('admin.notificacoes.partials.kds-order', ['pedido' => $pedido, 'status' => 'em_preparacao'])
                    @empty
                    <div class="text-center text-muted p-4">
                        <i class="fas fa-fire fa-2x mb-2"></i>
                        <p>Nenhum pedido em preparação</p>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Prontos -->
            <div class="kds-column prontos">
                <div class="kds-column-header">
                    <i class="fas fa-check-circle"></i>
                    Prontos ({{ $pedidosAgrupados['pronto']->count() }})
                </div>
                <div class="kds-orders" id="colunaProntos">
                    @forelse($pedidosAgrupados['pronto'] as $pedido)
                    @include('admin.notificacoes.partials.kds-order', ['pedido' => $pedido, 'status' => 'pronto'])
                    @empty
                    <div class="text-center text-muted p-4">
                        <i class="fas fa-check-circle fa-2x mb-2"></i>
                        <p>Nenhum pedido pronto</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Indicador de Atualização -->
    <div class="kds-refresh-indicator" id="refreshIndicator">
        <i class="fas fa-sync-alt fa-spin"></i>
        Atualizando pedidos...
    </div>
</div>

<!-- Audio para notificações -->
<audio id="notificationSound" preload="auto">
    <source src="/sounds/notification.mp3" type="audio/mpeg">
    <source src="/sounds/notification.ogg" type="audio/ogg">
</audio>
@endsection

@section('scripts')
<script>
let isFullscreen = false;
let autoRefreshInterval = null;
let currentRefreshInterval = 10000; // 10 segundos

// Inicializar KDS
document.addEventListener('DOMContentLoaded', function() {
    startAutoRefresh();
    updateTimers();
    playSoundIfNewOrder();
});

// Toggle fullscreen
function toggleFullscreen() {
    if (!isFullscreen) {
        document.documentElement.requestFullscreen().then(() => {
            isFullscreen = true;
            document.getElementById('btnFullscreen').innerHTML = '<i class="fas fa-compress"></i> Sair da Tela Cheia';
            document.querySelector('.kds-container').classList.add('kds-fullscreen');
        });
    } else {
        document.exitFullscreen().then(() => {
            isFullscreen = false;
            document.getElementById('btnFullscreen').innerHTML = '<i class="fas fa-expand"></i> Tela Cheia';
            document.querySelector('.kds-container').classList.remove('kds-fullscreen');
        });
    }
}

// Atualizar KDS
function refreshKDS() {
    showRefreshIndicator();
    
    const url = new URL(window.location);
    url.searchParams.set('_t', Date.now());
    
    fetch(url.toString())
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            
            // Atualizar estatísticas
            const stats = doc.querySelectorAll('.stat-number');
            const currentStats = document.querySelectorAll('.stat-number');
            stats.forEach((stat, index) => {
                if (currentStats[index]) {
                    currentStats[index].textContent = stat.textContent;
                }
            });
            
            // Atualizar colunas
            updateColumn('colunaConfirmados', doc.getElementById('colunaConfirmados'));
            updateColumn('colunaPreparacao', doc.getElementById('colunaPreparacao'));
            updateColumn('colunaProntos', doc.getElementById('colunaProntos'));
            
            // Atualizar timestamp
            document.getElementById('lastUpdate').textContent = 'Agora';
            
            hideRefreshIndicator();
        })
        .catch(error => {
            console.error('Erro ao atualizar KDS:', error);
            hideRefreshIndicator();
        });
}

// Atualizar coluna específica
function updateColumn(columnId, newContent) {
    const column = document.getElementById(columnId);
    if (column && newContent) {
        column.innerHTML = newContent.innerHTML;
    }
}

// Toggle auto refresh
function toggleAutoRefresh() {
    const toggle = document.getElementById('autoRefreshToggle');
    const btn = document.getElementById('btnAutoRefresh');
    
    if (toggle.checked) {
        startAutoRefresh();
        btn.innerHTML = '<i class="fas fa-pause"></i> Pausar';
    } else {
        stopAutoRefresh();
        btn.innerHTML = '<i class="fas fa-play"></i> Retomar';
    }
}

// Iniciar auto refresh
function startAutoRefresh() {
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
    }
    
    autoRefreshInterval = setInterval(refreshKDS, currentRefreshInterval);
    document.getElementById('autoRefreshToggle').checked = true;
    document.getElementById('btnAutoRefresh').innerHTML = '<i class="fas fa-pause"></i> Pausar';
}

// Parar auto refresh
function stopAutoRefresh() {
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
    }
    document.getElementById('autoRefreshToggle').checked = false;
    document.getElementById('btnAutoRefresh').innerHTML = '<i class="fas fa-play"></i> Retomar';
}

// Mostrar indicador de refresh
function showRefreshIndicator() {
    const indicator = document.getElementById('refreshIndicator');
    indicator.style.display = 'block';
}

// Esconder indicador de refresh
function hideRefreshIndicator() {
    const indicator = document.getElementById('refreshIndicator');
    indicator.style.display = 'none';
}

// Atualizar timers dos pedidos
function updateTimers() {
    const pedidos = document.querySelectorAll('.kds-order');
    pedidos.forEach(pedido => {
        const timerElement = pedido.querySelector('.kds-timer');
        if (timerElement) {
            const createdTime = new Date(timerElement.dataset.createdTime);
            const now = new Date();
            const diffMinutes = Math.floor((now - createdTime) / 60000);
            
            timerElement.textContent = `${diffMinutes}min`;
            
            // Alertas de tempo
            const kdsOrder = pedido.closest('.kds-order');
            if (diffMinutes > 30) {
                timerElement.classList.add('danger');
                kdsOrder.classList.add('order-delayed');
            } else if (diffMinutes > 20) {
                timerElement.classList.add('warning');
                kdsOrder.classList.add('order-urgent');
            }
        }
    });
}

// Filtrar por loja
function filtrarPorLoja(lojaId) {
    const url = new URL(window.location);
    if (lojaId) {
        url.searchParams.set('loja_id', lojaId);
    } else {
        url.searchParams.delete('loja_id');
    }
    
    window.location.href = url.toString();
}

// Play sound para novos pedidos
function playSoundIfNewOrder() {
    const audio = document.getElementById('notificationSound');
    if (audio) {
        // Implementar lógica para detectar novos pedidos
        // e tocar o som quando necessário
    }
}

// Atualizar status do pedido via KDS
function atualizarStatusPedido(pedidoId, novoStatus) {
    showRefreshIndicator();
    
    fetch(`/admin/notificacoes/kds/update/${pedidoId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            status: novoStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            refreshKDS();
            
            // Feedback visual
            showToast(data.message, 'success');
        } else {
            showToast(data.error || 'Erro ao atualizar status', 'error');
        }
        hideRefreshIndicator();
    })
    .catch(error => {
        console.error('Erro:', error);
        showToast('Erro ao atualizar status', 'error');
        hideRefreshIndicator();
    });
}

// Mostrar toast de feedback
function showToast(message, type = 'info') {
    // Implementar toast de feedback
    console.log(`${type.toUpperCase()}: ${message}`);
}

// Auto-refresh a cada 5 segundos para os timers
setInterval(updateTimers, 5000);

// Event listeners para botões de ação
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('kds-action-btn')) {
        const pedidoId = e.target.dataset.pedidoId;
        const action = e.target.dataset.action;
        
        if (pedidoId && action) {
            e.preventDefault();
            atualizarStatusPedido(pedidoId, action);
        }
    }
});

// Detectar mudanças de visibilidade da página
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        stopAutoRefresh();
    } else {
        if (document.getElementById('autoRefreshToggle').checked) {
            startAutoRefresh();
        }
    }
});

// Teclas de atalho
document.addEventListener('keydown', function(e) {
    // F11 - Toggle fullscreen
    if (e.key === 'F11') {
        e.preventDefault();
        toggleFullscreen();
    }
    
    // R - Refresh manual
    if (e.key === 'r' && e.ctrlKey) {
        e.preventDefault();
        refreshKDS();
    }
    
    // Space - Toggle auto refresh
    if (e.key === ' ') {
        e.preventDefault();
        toggleAutoRefresh();
    }
});
</script>
@endsection