@extends('admin.layouts.app')

@section('title', 'Dashboard de Tracking')

@section('content')
<style>
#map {
    height: 500px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.status-badge {
    font-size: 11px;
    padding: 3px 8px;
}

.entregador-card {
    transition: transform 0.2s;
}

.entregador-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.battery-indicator {
    font-size: 14px;
}

.speed-indicator {
    font-weight: bold;
}

.timer {
    font-family: monospace;
    font-size: 18px;
    color: #28a745;
}
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">
                    <i class="fas fa-map-marked-alt"></i> Dashboard de Tracking
                    <span class="timer" id="realtime-timer">--:--:--</span>
                </h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.localizacoes.index') }}">Tracking</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <!-- Estatísticas em Tempo Real -->
        <div class="row">
            <div class="col-md-3">
                <div class="card bg-primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Em Entrega</h6>
                                <h2 class="text-white" id="entregas-ativas">0</h2>
                                <small class="text-white-50">Entregadores ativos</small>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-motorcycle fa-2x text-white-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Disponíveis</h6>
                                <h2 class="text-white" id="entregadores-disponiveis">0</h2>
                                <small class="text-white-50">Livres para atender</small>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-check-circle fa-2x text-white-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Bateria Baixa</h6>
                                <h2 class="text-white" id="bateria-baixa">0</h2>
                                <small class="text-white-50">≤ 20% de carga</small>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-battery-empty fa-2x text-white-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Velocidade Alta</h6>
                                <h2 class="text-white" id="velocidade-alta">0</h2>
                                <small class="text-white-50">> 80 km/h</small>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-tachometer-alt fa-2x text-white-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mapa e Lista de Entregadores -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-map"></i> Localização em Tempo Real
                            <button class="btn btn-sm btn-outline-primary float-right" onclick="refreshMap()">
                                <i class="fas fa-sync"></i> Atualizar
                            </button>
                        </h3>
                    </div>
                    <div class="card-body p-0">
                        <div id="map"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-users"></i> Entregadores Ativos
                            <span class="badge badge-primary float-right" id="total-entregadores">0</span>
                        </h3>
                    </div>
                    <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                        <div id="entregadores-lista">
                            <!-- Lista será carregada via AJAX -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Entregas Recentes -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-history"></i> Histórico de Entregas de Hoje
                            <span class="badge badge-info float-right" id="entregas-hoje-count">{{ $entregasHoje->count() }}</span>
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Entregador</th>
                                        <th>Pedido</th>
                                        <th>Cliente</th>
                                        <th>Status</th>
                                        <th>Distância</th>
                                        <th>Tempo</th>
                                        <th>Velocidade</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="entregas-recentes">
                                    @foreach($entregasHoje as $entrega)
                                        <tr>
                                            <td>{{ $entrega->entregador->usuario->nome }}</td>
                                            <td>
                                                <a href="{{ route('admin.pedidos.show', $entrega->pedido) }}" class="text-primary">
                                                    #{{ $entrega->pedido->id }}
                                                </a>
                                            </td>
                                            <td>{{ $entrega->pedido->usuario->nome }}</td>
                                            <td>
                                                <span class="badge badge-{{ $entrega->status == 'entregue' ? 'success' : ($entrega->status == 'em_entrega' ? 'primary' : 'warning') }}">
                                                    {{ ucfirst(str_replace('_', ' ', $entrega->status)) }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($entrega->distancia_para_cliente)
                                                    {{ number_format($entrega->distancia_para_cliente, 2) }} km
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                @if($entrega->eta_estimado)
                                                    {{ $entrega->eta_estimado }} min
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                @if($entrega->velocidade)
                                                    <span class="{{ $entrega->velocidade > 60 ? 'text-danger' : 'text-success' }}">
                                                        {{ number_format($entrega->velocidade, 1) }} km/h
                                                    </span>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.localizacoes.show', $entrega) }}" class="btn btn-sm btn-info">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Controles Rápidos -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-cogs"></i> Controles Rápidos
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-success btn-lg" onclick="atualizarTodasLocalizacoes()">
                                    <i class="fas fa-sync"></i> Atualizar Todas as Localizações
                                </button>
                                <button type="button" class="btn btn-warning btn-lg ml-2" onclick="limparLocalizacoesAntigas()">
                                    <i class="fas fa-broom"></i> Limpar Antigas
                                </button>
                            </div>
                            <div class="col-md-6 text-right">
                                <a href="{{ route('admin.localizacoes.performance') }}" class="btn btn-info btn-lg">
                                    <i class="fas fa-chart-line"></i> Relatório de Performance
                                </a>
                                <a href="{{ route('admin.localizacoes.index') }}" class="btn btn-secondary btn-lg ml-2">
                                    <i class="fas fa-list"></i> Lista Completa
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Variáveis globais
let map;
let entregadoresMarkers = [];
let realtimeTimer;

// Inicialização
$(document).ready(function() {
    initMap();
    loadEntregadores();
    startRealtimeUpdates();
    updateTimer();
});

// Inicializar mapa
function initMap() {
    // Coordenadas padrão (centro do Brasil)
    const defaultCenter = { lat: -14.2350, lng: -51.9253 };
    
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: defaultCenter,
        mapTypeId: 'roadmap'
    });
}

// Carregar entregadores no mapa e lista
function loadEntregadores() {
    fetch('/admin/localizacoes/api-localizacoes')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateMapMarkers(data.data);
                updateEntregadoresList(data.data);
                updateStats(data.data);
                updateEntregasRecentes(data.data);
            }
        })
        .catch(error => console.error('Erro ao carregar localizações:', error));
}

// Atualizar marcadores no mapa
function updateMapMarkers(entregadores) {
    // Limpar marcadores antigos
    entregadoresMarkers.forEach(marker => marker.setMap(null));
    entregadoresMarkers = [];

    entregadores.forEach(entregador => {
        const marker = new google.maps.Marker({
            position: { lat: parseFloat(entregador.latitude), lng: parseFloat(entregador.longitude) },
            map: map,
            title: entregador.entregador,
            icon: {
                url: getMarkerIcon(entregador.status),
                scaledSize: new google.maps.Size(40, 40)
            }
        });

        // Info window
        const infoWindow = new google.maps.InfoWindow({
            content: createInfoWindowContent(entregador)
        });

        marker.addListener('click', () => {
            // Fechar outros info windows
            entregadoresMarkers.forEach(m => m.infoWindow && m.infoWindow.close());
            
            marker.infoWindow = infoWindow;
            infoWindow.open(map, marker);
        });

        entregadoresMarkers.push(marker);
    });
}

// Obter ícone do marcador baseado no status
function getMarkerIcon(status) {
    const baseUrl = '/images/markers/';
    switch(status) {
        case 'disponivel':
            return baseUrl + 'green-marker.png';
        case 'em_entrega':
            return baseUrl + 'blue-marker.png';
        case 'indisponivel':
            return baseUrl + 'red-marker.png';
        default:
            return baseUrl + 'gray-marker.png';
    }
}

// Criar conteúdo do info window
function createInfoWindowContent(entregador) {
    return `
        <div style="padding: 10px; max-width: 250px;">
            <h6><strong>${entregador.entregador}</strong></h6>
            <p><strong>Status:</strong> ${getStatusText(entregador.status)}</p>
            <p><strong>Velocidade:</strong> ${entregador.velocidade ? entregador.velocidade.toFixed(1) + ' km/h' : 'N/A'}</p>
            <p><strong>Bateria:</strong> ${entregador.bateria ? entregador.bateria + '%' : 'N/A'}</p>
            <p><strong>Distância:</strong> ${entregador.distancia_cliente ? entregador.distancia_cliente.toFixed(2) + ' km' : 'N/A'}</p>
            <p><strong>ETA:</strong> ${entregador.eta ? entregador.eta + ' min' : 'N/A'}</p>
            <p><strong>Atualizado:</strong> ${entregador.updated_at}</p>
            <a href="/admin/pedidos/${entregador.pedido_id}" class="btn btn-sm btn-primary">Ver Pedido</a>
        </div>
    `;
}

// Obter texto do status
function getStatusText(status) {
    const statusMap = {
        'disponivel': 'Disponível',
        'em_entrega': 'Em Entrega',
        'indisponivel': 'Indisponível',
        'entregue': 'Entregue'
    };
    return statusMap[status] || status;
}

// Atualizar lista de entregadores
function updateEntregadoresList(entregadores) {
    const container = document.getElementById('entregadores-lista');
    let html = '';

    entregadores.forEach(entregador => {
        html += `
            <div class="entregador-card m-2 p-3 border rounded">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="mb-1">${entregador.entregador}</h6>
                        <span class="badge badge-${getStatusColor(entregador.status)} status-badge">
                            ${getStatusText(entregador.status)}
                        </span>
                    </div>
                    <div class="text-right">
                        ${entregador.bateria ? getBatteryIcon(entregador.bateria) : ''}
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-6">
                        <small class="text-muted">Velocidade:</small><br>
                        <span class="speed-indicator ${entregador.velocidade > 60 ? 'text-danger' : 'text-success'}">
                            ${entregador.velocidade ? entregador.velocidade.toFixed(1) + ' km/h' : 'N/A'}
                        </span>
                    </div>
                    <div class="col-6">
                        <small class="text-muted">Distância:</small><br>
                        <strong>${entregador.distancia_cliente ? entregador.distancia_cliente.toFixed(2) + ' km' : 'N/A'}</strong>
                    </div>
                </div>
                <div class="mt-2">
                    <small class="text-muted">
                        <i class="fas fa-clock"></i> ${entregador.updated_at}
                    </small>
                </div>
            </div>
        `;
    });

    container.innerHTML = html || '<p class="text-center text-muted p-4">Nenhum entregador ativo encontrado.</p>';
    document.getElementById('total-entregadores').textContent = entregadores.length;
}

// Obter cor do badge baseado no status
function getStatusColor(status) {
    const colorMap = {
        'disponivel': 'success',
        'em_entrega': 'primary',
        'indisponivel': 'danger',
        'entregue': 'info'
    };
    return colorMap[status] || 'secondary';
}

// Obter ícone da bateria
function getBatteryIcon(percentage) {
    if (percentage <= 20) {
        return '<i class="fas fa-battery-empty text-danger battery-indicator"></i>';
    } else if (percentage <= 50) {
        return '<i class="fas fa-battery-quarter text-warning battery-indicator"></i>';
    } else {
        return '<i class="fas fa-battery-full text-success battery-indicator"></i>';
    }
}

// Atualizar estatísticas
function updateStats(entregadores) {
    document.getElementById('entregas-ativas').textContent = 
        entregadores.filter(e => e.status === 'em_entrega').length;
    
    document.getElementById('entregadores-disponiveis').textContent = 
        entregadores.filter(e => e.status === 'disponivel').length;
    
    document.getElementById('bateria-baixa').textContent = 
        entregadores.filter(e => e.bateria && e.bateria <= 20).length;
    
    document.getElementById('velocidade-alta').textContent = 
        entregadores.filter(e => e.velocidade && e.velocidade > 80).length;
}

// Atualizar entregas recentes
function updateEntregasRecentes(entregadores) {
    const container = document.getElementById('entregas-recentes');
    let html = '';

    entregadores.slice(0, 10).forEach(entregador => {
        html += `
            <tr>
                <td>${entregador.entregador}</td>
                <td><a href="/admin/pedidos/${entregador.pedido_id}" class="text-primary">#${entregador.pedido_id}</a></td>
                <td>${entregador.pedido_cliente || 'N/A'}</td>
                <td><span class="badge badge-${getStatusColor(entregador.status)}">${getStatusText(entregador.status)}</span></td>
                <td>${entregador.distancia_cliente ? entregador.distancia_cliente.toFixed(2) + ' km' : 'N/A'}</td>
                <td>${entregador.eta ? entregador.eta + ' min' : 'N/A'}</td>
                <td><span class="${entregador.velocidade > 60 ? 'text-danger' : 'text-success'}">${entregador.velocidade ? entregador.velocidade.toFixed(1) + ' km/h' : 'N/A'}</span></td>
                <td><a href="/admin/localizacoes/${entregador.id}" class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a></td>
            </tr>
        `;
    });

    container.innerHTML = html;
}

// Atualizações em tempo real
function startRealtimeUpdates() {
    setInterval(() => {
        loadEntregadores();
        updateTimer();
    }, 30000); // 30 segundos
}

// Atualizar timer
function updateTimer() {
    const now = new Date();
    document.getElementById('realtime-timer').textContent = 
        now.toLocaleTimeString('pt-BR');
}

// Funções de controle
function refreshMap() {
    loadEntregadores();
}

function atualizarTodasLocalizacoes() {
    if (confirm('Atualizar todas as localizações?')) {
        // Implementar lógica de atualização
        loadEntregadores();
        alert('Localizações atualizadas!');
    }
}

function limparLocalizacoesAntigas() {
    if (confirm('Limpar localizações antigas?')) {
        // Implementar limpeza
        alert('Função de limpeza implementada');
    }
}
</script>

<!-- Google Maps API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
@endpush