@extends('layouts.app')

@section('title', 'QR Code: ' . $sensor->device_uuid)

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-3xl mx-auto">
        <!-- Header -->
        <div class="md:flex md:items-center md:justify-between mb-6">
            <div class="flex-1 min-w-0">
                <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                    Sensor QR Code
                </h1>
                <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="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z" clip-rule="evenodd" />
                        </svg>
                        {{ $sensor->device_uuid }}
                    </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="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>
            </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>

        <!-- QR Code -->
        <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 QR Code
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Scan this QR code to quickly access this sensor's information
                </p>
            </div>
            
            <div class="px-4 py-5 sm:p-6">
                <div class="flex flex-col items-center justify-center">
                    <!-- QR Code will be generated here -->
                    <div class="p-4 bg-white rounded-lg border border-gray-200 mb-6">
                        <div class="flex justify-center">
                            {!! QrCode::size(300)->generate($qrContent) !!}
                        </div>
                    </div>
                    
                    <div class="w-full max-w-md">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="text-lg font-medium text-gray-900 mb-3">Sensor Information</h4>
                            <dl class="space-y-3">
                                <div class="sm:grid sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-sm font-medium text-gray-500">Device UUID</dt>
                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 font-mono">{{ $sensor->device_uuid }}</dd>
                                </div>
                                <div class="sm:grid sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-sm font-medium text-gray-500">QR Code</dt>
                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ $sensor->qr_code }}</dd>
                                </div>
                                <div class="sm:grid sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-sm font-medium text-gray-500">Gas Company</dt>
                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ $sensor->gasCompany ? $sensor->gasCompany->name : 'N/A' }}</dd>
                                </div>
                                <div class="sm:grid sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                                    <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
                                        @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>
                                    </dd>
                                </div>
                                <div class="sm:grid sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-sm font-medium text-gray-500">Registered</dt>
                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ $sensor->created_at->format('M j, Y g:i A') }}</dd>
                                </div>
                            </dl>
                        </div>
                        
                        <div class="mt-6">
                            <div class="flex justify-between items-center">
                                <h4 class="text-sm font-medium text-gray-500">QR Code Data</h4>
                                <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('qr-data').textContent)" class="text-sm text-primary-600 hover:text-primary-500">
                                    Copy
                                </button>
                            </div>
                            <div class="mt-1 bg-gray-50 p-3 rounded-md">
                                <pre id="qr-data" class="text-xs text-gray-800 overflow-x-auto">{{ $qrContent }}</pre>
                            </div>
                        </div>
                        
                        <div class="mt-6 border-t border-gray-200 pt-6">
                            <div class="flex justify-between">
                                <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>
                                <a href="#" onclick="window.print()" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                    <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                                    </svg>
                                    Print
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Show a temporary message when copying QR data
    document.addEventListener('DOMContentLoaded', function() {
        const copyButtons = document.querySelectorAll('[onclick*="clipboard"]');
        copyButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Show a temporary message
                const originalText = this.textContent.trim();
                this.textContent = 'Copied!';
                this.classList.add('text-green-600');
                
                // Revert back after 2 seconds
                setTimeout(() => {
                    this.textContent = originalText;
                    this.classList.remove('text-green-600');
                }, 2000);
            });
        });
    });
</script>
@endpush

<style>
    @media print {
        body * {
            visibility: hidden;
        }
        .print-content, .print-content * {
            visibility: visible;
        }
        .print-content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .no-print {
            display: none !important;
        }
    }
</style>
@endsection