@extends('layouts.app')

@section('title', 'Monitoreo en Vivo')
@section('page-title', 'Monitoreo de Técnicos')

@section('breadcrumb')
<li class="breadcrumb-item active">Monitoreo</li>
@endsection

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .monitoreo-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 1rem;
        height: calc(100vh - 200px);
        min-height: 500px;
    }

    @media (max-width: 1200px) {
        .monitoreo-container {
            grid-template-columns: 1fr;
            height: auto;
        }
    }

    .mapa-container {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        position: relative;
    }

    #mapa {
        width: 100%;
        height: 100%;
        min-height: 500px;
    }

    .mapa-overlay {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 1000;
        background: rgba(255,255,255,0.95);
        padding: 0.75rem 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .mapa-overlay h6 {
        margin: 0 0 0.5rem;
        color: #1a3a5c;
        font-size: 0.85rem;
    }

    .stats-row {
        display: flex;
        gap: 1rem;
    }

    .stat-mini {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8rem;
    }

    .stat-mini .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .stat-mini .dot.activo { background: #10b981; }
    .stat-mini .dot.sin-gps { background: #f59e0b; }
    .stat-mini .dot.total { background: #3b82f6; }

    .panel-lateral {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;
    }

    .panel-card {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }

    .panel-header {
        padding: 0.75rem 1rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel-header h6 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .panel-body {
        padding: 0;
        max-height: 400px;
        overflow-y: auto;
    }

    .tecnico-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        transition: background 0.2s;
    }

    .tecnico-item:hover {
        background: #f8fafc;
    }

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

    .tecnico-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.8rem;
        color: #fff;
        position: relative;
    }

    .tecnico-avatar.con-gps {
        background: #10b981;
    }

    .tecnico-avatar.sin-gps {
        background: #f59e0b;
    }

    .gps-indicator {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
    }

    .gps-indicator.activo {
        background: #10b981;
        color: #fff;
    }

    .gps-indicator.inactivo {
        background: #f59e0b;
        color: #fff;
    }

    .tecnico-info {
        flex: 1;
        min-width: 0;
    }

    .tecnico-nombre {
        font-weight: 600;
        color: #1a3a5c;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tecnico-detalle {
        font-size: 0.75rem;
        color: #64748b;
    }

    .tecnico-estado {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .estado-badge-sm {
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.65rem;
        font-weight: 600;
    }

    .tiempo-gps {
        font-size: 0.7rem;
        color: #64748b;
    }

    .tiempo-gps.warning {
        color: #f59e0b;
    }

    .tiempo-gps.danger {
        color: #dc2626;
    }

    .refresh-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .refresh-btn:hover {
        background: #f1f5f9;
    }

    .refresh-btn.loading i {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .empty-tecnicos {
        padding: 2rem;
        text-align: center;
        color: #64748b;
    }

    .empty-tecnicos i {
        font-size: 2rem;
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }

    /* Marker personalizado */
    .marker-tecnico {
        background: #fff;
        border-radius: 50%;
        border: 3px solid #10b981;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.8rem;
        color: #1a3a5c;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .marker-tecnico.en-ruta {
        border-color: #3b82f6;
    }

    .marker-tecnico.en-ejecucion {
        border-color: #10b981;
    }

    .marker-tecnico.sin-gps {
        border-color: #f59e0b;
        opacity: 0.7;
    }

    .leyenda {
        padding: 0.75rem 1rem;
    }

    .leyenda-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 0.375rem;
    }

    .leyenda-item:last-child {
        margin-bottom: 0;
    }

    .leyenda-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
    }

    .leyenda-icon.en-ruta {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .leyenda-icon.en-ejecucion {
        border-color: #10b981;
        color: #10b981;
    }

    .leyenda-icon.peaje {
        border-color: #f57c00;
        background: #f57c00;
        color: #fff;
    }
</style>
@endpush

@section('content')
<div class="monitoreo-container">
    {{-- Mapa --}}
    <div class="mapa-container">
        <div class="mapa-overlay">
            <h6><i class="fas fa-satellite me-1"></i> Estado del Sistema</h6>
            <div class="stats-row">
                <div class="stat-mini">
                    <span class="dot activo"></span>
                    <span><strong>{{ $estadisticas['tecnicos_con_gps'] }}</strong> con GPS</span>
                </div>
                <div class="stat-mini">
                    <span class="dot sin-gps"></span>
                    <span><strong>{{ $estadisticas['tecnicos_sin_gps'] }}</strong> sin GPS</span>
                </div>
                <div class="stat-mini">
                    <span class="dot total"></span>
                    <span><strong>{{ $estadisticas['mantenimientos_hoy'] }}</strong> mant. hoy</span>
                </div>
            </div>
        </div>
        <div id="mapa"></div>
    </div>

    {{-- Panel lateral --}}
    <div class="panel-lateral">
        {{-- Lista de técnicos --}}
        <div class="panel-card">
            <div class="panel-header">
                <h6><i class="fas fa-users me-1"></i> Técnicos Activos</h6>
                <button class="refresh-btn" id="btnRefresh" title="Actualizar posiciones">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
            <div class="panel-body" id="listaTecnicos">
                @forelse($tecnicosActivos as $data)
                <div class="tecnico-item"
                     data-tecnico-id="{{ $data['tecnico']->usu_id }}"
                     data-lat="{{ $data['ubicacion']['lat'] ?? '' }}"
                     data-lng="{{ $data['ubicacion']['lng'] ?? '' }}">
                    <div class="tecnico-avatar {{ $data['ubicacion'] ? 'con-gps' : 'sin-gps' }}">
                        {{ strtoupper(substr($data['tecnico']->usu_nombre ?? 'N', 0, 1)) }}{{ strtoupper(substr($data['tecnico']->usu_apellido ?? 'A', 0, 1)) }}
                        <span class="gps-indicator {{ $data['ubicacion'] && $data['ubicacion']['minutos_atras'] <= 15 ? 'activo' : 'inactivo' }}">
                            <i class="fas fa-{{ $data['ubicacion'] ? 'signal' : 'times' }}"></i>
                        </span>
                    </div>
                    <div class="tecnico-info">
                        <div class="tecnico-nombre">{{ $data['tecnico']->usu_nombre }} {{ $data['tecnico']->usu_apellido }}</div>
                        <div class="tecnico-detalle">
                            <i class="fas fa-road me-1"></i>
                            {{ $data['mantenimiento']->centro->nombre_centro ?? 'N/A' }}
                        </div>
                    </div>
                    <div class="tecnico-estado">
                        <span class="estado-badge-sm" style="background: {{ $data['mantenimiento']->estadoMantenimiento->color_hex ?? '#666' }}20; color: {{ $data['mantenimiento']->estadoMantenimiento->color_hex ?? '#666' }}">
                            {{ $data['mantenimiento']->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                        </span>
                        @if($data['ubicacion'])
                        <span class="tiempo-gps {{ $data['ubicacion']['minutos_atras'] > 30 ? 'danger' : ($data['ubicacion']['minutos_atras'] > 15 ? 'warning' : '') }}">
                            <i class="fas fa-clock me-1"></i>
                            @if($data['ubicacion']['minutos_atras'] < 1)
                                Ahora
                            @elseif($data['ubicacion']['minutos_atras'] < 60)
                                {{ $data['ubicacion']['minutos_atras'] }} min
                            @else
                                {{ round($data['ubicacion']['minutos_atras'] / 60) }}h
                            @endif
                        </span>
                        @else
                        <span class="tiempo-gps danger">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            Sin GPS
                        </span>
                        @endif
                    </div>
                </div>
                @empty
                <div class="empty-tecnicos">
                    <i class="fas fa-user-slash"></i>
                    <p>No hay técnicos activos</p>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Leyenda --}}
        <div class="panel-card">
            <div class="panel-header">
                <h6><i class="fas fa-info-circle me-1"></i> Leyenda</h6>
            </div>
            <div class="leyenda">
                <div class="leyenda-item">
                    <span class="leyenda-icon en-ruta"><i class="fas fa-car"></i></span>
                    <span>En ruta</span>
                </div>
                <div class="leyenda-item">
                    <span class="leyenda-icon en-ejecucion"><i class="fas fa-tools"></i></span>
                    <span>En ejecución</span>
                </div>
                <div class="leyenda-item">
                    <span class="leyenda-icon peaje"><i class="fas fa-road"></i></span>
                    <span>Peaje</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Coordenadas centrales de Ecuador
    const centerLat = -1.831239;
    const centerLng = -78.183406;

    // Inicializar mapa
    const map = L.map('mapa').setView([centerLat, centerLng], 7);

    // Capa de OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Iconos personalizados
    function createTecnicoIcon(iniciales, estado) {
        let borderColor = '#10b981';
        if (estado === 'EN_RUTA') borderColor = '#3b82f6';
        if (estado === 'SIN_GPS') borderColor = '#f59e0b';

        return L.divIcon({
            className: 'marker-custom',
            html: `<div class="marker-tecnico" style="border-color: ${borderColor}">${iniciales}</div>`,
            iconSize: [40, 40],
            iconAnchor: [20, 20],
            popupAnchor: [0, -20]
        });
    }

    const peajeIcon = L.divIcon({
        className: 'marker-custom',
        html: '<div style="width:24px;height:24px;background:#f57c00;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;box-shadow:0 2px 4px rgba(0,0,0,0.3)"><i class="fas fa-road"></i></div>',
        iconSize: [24, 24],
        iconAnchor: [12, 12],
        popupAnchor: [0, -12]
    });

    // Markers de técnicos
    const marcadoresTecnicos = {};

    // Datos desde PHP
    const tecnicosActivos = @json($tecnicosActivos);
    const peajes = @json($peajes);

    // Agregar peajes al mapa
    peajes.forEach(peaje => {
        L.marker([peaje.lat, peaje.lng], { icon: peajeIcon })
            .bindPopup(`<strong>${peaje.nombre}</strong><br><small>${peaje.concesion}</small>`)
            .addTo(map);
    });

    // Agregar técnicos al mapa
    Object.values(tecnicosActivos).forEach(data => {
        if (data.ubicacion && data.ubicacion.lat && data.ubicacion.lng) {
            const iniciales = data.tecnico.usu_nombre.charAt(0) + (data.tecnico.usu_apellido?.charAt(0) || '');
            const estadoCodigo = data.mantenimiento.estado_mantenimiento?.estado_codigo || 'EN_EJECUCION';

            const marker = L.marker([data.ubicacion.lat, data.ubicacion.lng], {
                icon: createTecnicoIcon(iniciales.toUpperCase(), estadoCodigo)
            });

            const popupContent = `
                <strong>${data.tecnico.usu_nombre} ${data.tecnico.usu_apellido}</strong><br>
                <small>
                    <i class="fas fa-road"></i> ${data.mantenimiento.centro?.nombre_centro || 'N/A'}<br>
                    <i class="fas fa-clock"></i> Hace ${data.ubicacion.minutos_atras} min
                </small>
            `;

            marker.bindPopup(popupContent);
            marker.addTo(map);

            marcadoresTecnicos[data.tecnico.usu_id] = marker;
        }
    });

    // Click en lista de técnicos para centrar mapa
    document.querySelectorAll('.tecnico-item').forEach(item => {
        item.addEventListener('click', function() {
            const lat = parseFloat(this.dataset.lat);
            const lng = parseFloat(this.dataset.lng);

            if (lat && lng) {
                map.setView([lat, lng], 15);

                const tecnicoId = this.dataset.tecnicoId;
                if (marcadoresTecnicos[tecnicoId]) {
                    marcadoresTecnicos[tecnicoId].openPopup();
                }
            }
        });
    });

    // Botón de refresh
    const btnRefresh = document.getElementById('btnRefresh');
    btnRefresh.addEventListener('click', function() {
        this.classList.add('loading');

        fetch('{{ route("web.monitoreo.posiciones") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Actualizar markers
                    data.posiciones.forEach(pos => {
                        if (marcadoresTecnicos[pos.tecnico_id]) {
                            marcadoresTecnicos[pos.tecnico_id].setLatLng([pos.lat, pos.lng]);
                        }
                    });
                }
            })
            .catch(error => console.error('Error:', error))
            .finally(() => {
                btnRefresh.classList.remove('loading');
            });
    });

    // Auto-refresh cada 30 segundos
    setInterval(() => {
        btnRefresh.click();
    }, 30000);
});
</script>
@endpush