@extends('layouts.app')

@section('title', 'Register Sensor')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <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">
                    Register Sensor
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Register this sensor to a user account
                </p>
            </div>
            
            <div class="px-4 py-5 sm:p-6">
                <!-- Sensor Information -->
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800">Sensor Details</h3>
                            <div class="mt-2 text-sm text-blue-700">
                                <p><strong>Device UUID:</strong> {{ $sensor->device_uuid }}</p>
                                <p><strong>QR Code:</strong> {{ $sensor->qr_code }}</p>
                                <p><strong>Gas Company:</strong> {{ $sensor->gasCompany->name ?? 'N/A' }}</p>
                                <p><strong>Status:</strong> 
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {{ $sensor->status === 'online' ? 'bg-green-100 text-green-800' : 
                                          ($sensor->status === 'offline' ? 'bg-gray-100 text-gray-800' : 'bg-yellow-100 text-yellow-800') }}">
                                        {{ ucfirst($sensor->status) }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Registration Form -->
                <form action="{{ route('sensors.register.submit', $sensor->qr_code) }}" method="POST">
                    @csrf
                    
                    <div class="space-y-6">
                        <!-- User Selection -->
                        <div>
                            <label for="user_id" class="block text-sm font-medium text-gray-700">Assign to User</label>
                            <select id="user_id" name="user_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                                <option value="">Select a user</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Location Name -->
                        <div>
                            <label for="location_name" class="block text-sm font-medium text-gray-700">Location Name</label>
                            <input type="text" name="location_name" id="location_name" value="{{ old('location_name') }}" 
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" 
                                placeholder="e.g., Home, Office, Kitchen">
                            @error('location_name')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700">Full Address</label>
                            <textarea id="address" name="address" rows="3" 
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
                                placeholder="Enter the full installation address">{{ old('address') }}</textarea>
                            @error('address')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Primary Sensor Toggle -->
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="is_primary" name="is_primary" type="checkbox" 
                                    class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                                    {{ old('is_primary') ? 'checked' : '' }}>
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="is_primary" class="font-medium text-gray-700">Set as primary sensor</label>
                                <p class="text-gray-500">This will unset any existing primary sensor for the selected user.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="mt-8 flex justify-end space-x-3">
                        <a href="{{ route('sensors.show', $sensor->id) }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Register Sensor
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- QR Code Scanner Modal -->
<div id="qrScannerModal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
                    <svg class="h-6 w-6 text-blue-600" 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="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                        Scan QR Code
                    </h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500">
                            Position the QR code within the frame to scan it.
                        </p>
                        <div id="qr-reader" class="mt-4 w-full h-64 bg-gray-100"></div>
                    </div>
                </div>
            </div>
            <div class="mt-5 sm:mt-6">
                <button type="button" id="closeQrModal" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    // QR Code Scanner
    function onScanSuccess(decodedText, decodedResult) {
        // Handle the scanned code here
        console.log(`Code scanned = ${decodedText}`, decodedResult);
        // You can submit the form with the scanned data or update a field
        document.getElementById('qr_code').value = decodedText;
        // Close the modal
        document.getElementById('qrScannerModal').classList.add('hidden');
    }

    // Initialize the QR scanner when the modal is shown
    document.addEventListener('DOMContentLoaded', function() {
        const qrScannerModal = document.getElementById('qrScannerModal');
        const closeQrModal = document.getElementById('closeQrModal');
        let html5QrcodeScanner;

        // Show modal button (if you have one)
        document.getElementById('openQrScanner')?.addEventListener('click', function() {
            qrScannerModal.classList.remove('hidden');
            
            // Initialize scanner
            html5QrcodeScanner = new Html5QrcodeScanner(
                "qr-reader", { 
                    fps: 10, 
                    qrbox: 250,
                    aspectRatio: 1.0
                });
            html5QrcodeScanner.render(onScanSuccess);
        });

        // Close modal
        closeQrModal.addEventListener('click', function() {
            qrScannerModal.classList.add('hidden');
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
            }
        });
    });
</script>
@endpush
@endsection