@extends('layouts.app')

@section('title', 'Sensor Logs: ' . $sensor->device_uuid)

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="md:flex md:items-center md:justify-between mb-6">
            <div class="flex-1 min-w-0">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                        Sensor Logs: {{ $sensor->device_uuid }}
                    </h1>
                </div>
                <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                    <div class="mt-2 flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                        </svg>
                        {{ $sensor->gasCompany ? $sensor->gasCompany->name : 'No Company' }}
                    </div>
                    <div class="mt-2 flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                        </svg>
                        Last seen {{ $sensor->last_ping ? $sensor->last_ping->diffForHumans() : 'Never' }}
                    </div>
                    <div class="mt-2 flex items-center">
                        @php
                            $status = $sensor->status ?? 'offline';
                            $statusClasses = [
                                'online' => 'bg-green-100 text-green-800',
                                'offline' => 'bg-gray-100 text-gray-800',
                                'battery_low' => 'bg-yellow-100 text-yellow-800',
                            ][$status] ?? 'bg-gray-100 text-gray-800';
                        @endphp
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $statusClasses }}">
                            {{ ucfirst($status) }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="mt-4 flex flex-shrink-0 space-x-3">
                <a href="{{ route('sensors.show', $sensor->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    Back to Sensor
                </a>
            </div>
        </div>

        <!-- Logs -->
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Sensor Logs
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Detailed log of sensor data and events
                </p>
            </div>
            
            <div class="bg-white overflow-hidden">
                @if($logs->count() > 0)
                    <ul class="divide-y divide-gray-200">
                        @foreach($logs as $log)
                            <li class="px-6 py-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $log->created_at->format('M j, Y g:i A') }}
                                        </div>
                                        <div class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $log->gas_level < 20 ? 'bg-red-100 text-red-800' : ($log->gas_level < 50 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                                            {{ $log->gas_level }}% Gas
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $log->created_at->diffForHumans() }}
                                    </div>
                                </div>
                                <div class="mt-2 grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="text-gray-500">Battery:</span>
                                        <span class="font-medium">{{ $log->battery_level }}%</span>
                                    </div>
                                    @if($log->latitude && $log->longitude)
                                        <div>
                                            <span class="text-gray-500">Location:</span>
                                            <a href="https://www.google.com/maps?q={{ $log->latitude }},{{ $log->longitude }}" target="_blank" class="text-primary-600 hover:text-primary-500">
                                                {{ number_format($log->latitude, 4) }}, {{ number_format($log->longitude, 4) }}
                                            </a>
                                        </div>
                                    @endif
                                </div>
                                @if($log->metadata)
                                    <div class="mt-2">
                                        <div class="text-xs text-gray-500">Additional Data:</div>
                                        <div class="mt-1 text-xs bg-gray-50 p-2 rounded overflow-x-auto">
                                            <pre>{{ json_encode($log->metadata, JSON_PRETTY_PRINT) }}</pre>
                                        </div>
                                    </div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                    <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 sm:px-6">
                        {{ $logs->links() }}
                    </div>
                @else
                    <div class="px-6 py-12 text-center text-gray-500">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No logs found</h3>
                        <p class="mt-1 text-sm text-gray-500">This sensor has not reported any data yet.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection