@extends('layouts.admin')

@section('title', 'Edit Device - ' . $device->name)

@section('content')
<div class="admin-device-form">
    <div class="page-header">
        <h1>Edit Device: {{ $device->name }}</h1>
        <p>Update device information</p>
    </div>

    <form method="POST" action="{{ route('admin.devices.update', $device) }}" class="device-form">
        @csrf
        @method('PUT')

        <div class="form-grid">
            <div class="form-group">
                <label>Device ID</label>
                <input type="text" value="{{ $device->device_id }}" disabled>
                <small>Device ID cannot be changed</small>
            </div>

            <div class="form-group">
                <label>Device Name *</label>
                <input type="text" name="name" value="{{ old('name', $device->name) }}" required>
                @error('name') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Device Type *</label>
                <select name="type" required>
                    <option value="sensor" {{ old('type', $device->type) == 'sensor' ? 'selected' : '' }}>Sensor</option>
                    <option value="gateway" {{ old('type', $device->type) == 'gateway' ? 'selected' : '' }}>Gateway</option>
                    <option value="actuator" {{ old('type', $device->type) == 'actuator' ? 'selected' : '' }}>Actuator</option>
                </select>
                @error('type') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Owner *</label>
                <select name="user_id" required>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ old('user_id', $device->user_id) == $user->id ? 'selected' : '' }}>
                            {{ $user->name }} ({{ $user->email }})
                        </option>
                    @endforeach
                </select>
                @error('user_id') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Status</label>
                <select name="status">
                    <option value="pending" {{ old('status', $device->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="online" {{ old('status', $device->status) == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="offline" {{ old('status', $device->status) == 'offline' ? 'selected' : '' }}>Offline</option>
                    <option value="maintenance" {{ old('status', $device->status) == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                </select>
                @error('status') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Firmware Version</label>
                <input type="text" name="firmware_version" value="{{ old('firmware_version', $device->firmware_version ?? '1.0.0') }}">
            </div>

            <div class="form-group full-width">
                <label>Capabilities</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="capabilities[]" value="gempa" {{ in_array('gempa', old('capabilities', $device->capabilities ?? [])) ? 'checked' : '' }}> Earthquake Detection</label>
                    <label><input type="checkbox" name="capabilities[]" value="suhu" {{ in_array('suhu', old('capabilities', $device->capabilities ?? [])) ? 'checked' : '' }}> Temperature</label>
                    <label><input type="checkbox" name="capabilities[]" value="getaran" {{ in_array('getaran', old('capabilities', $device->capabilities ?? [])) ? 'checked' : '' }}> Vibration</label>
                    <label><input type="checkbox" name="capabilities[]" value="kelembaban" {{ in_array('kelembaban', old('capabilities', $device->capabilities ?? [])) ? 'checked' : '' }}> Humidity</label>
                </div>
            </div>

            <div class="form-group full-width">
                <label>Location Metadata</label>
                <div class="location-fields">
                    <input type="text" name="metadata[location]" placeholder="Location name" value="{{ old('metadata.location', $device->metadata['location'] ?? '') }}">
                    <input type="text" name="metadata[lat]" placeholder="Latitude" value="{{ old('metadata.lat', $device->metadata['lat'] ?? '') }}">
                    <input type="text" name="metadata[lng]" placeholder="Longitude" value="{{ old('metadata.lng', $device->metadata['lng'] ?? '') }}">
                </div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-primary">Update Device</button>
            <a href="{{ route('admin.devices.show', $device) }}" class="btn-secondary">Cancel</a>
        </div>
    </form>

    <div class="danger-zone">
        <h3>Danger Zone</h3>
        <p>Regenerating API key will disconnect all active connections</p>
        <button onclick="regenerateApiKey()" class="btn-warning">Regenerate API Key</button>
    </div>
</div>

<script>
function regenerateApiKey() {
    if (confirm('Regenerating API key will disconnect all active connections. Continue?')) {
        fetch('{{ route('admin.devices.regenerate-key', $device) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  alert('New API Key: ' + data.api_key);
              }
          });
    }
}
</script>

<style>
.admin-device-form { max-width: 800px; margin: 0 auto; padding: 2rem; }
.device-form { background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.danger-zone { background: #fef2f2; border: 1px solid #fecaca; border-radius: 16px; padding: 1.5rem; }
.danger-zone h3 { color: #dc2626; margin-bottom: 0.5rem; }
</style>
@endsection