@extends('layouts.admin')

@section('title', 'Add New Device')

@section('content')
<div class="admin-device-form">
    <div class="page-header">
        <h1>Add New Device</h1>
        <p>Register a new device to the system</p>
    </div>

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

        <div class="form-grid">
            <div class="form-group">
                <label>Device ID *</label>
                <input type="text" name="device_id" value="{{ old('device_id') }}" required placeholder="e.g., SENSOR_BALI_01">
                <small>Unique identifier for this device</small>
                @error('device_id') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Device Name *</label>
                <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g., Bali Sensor">
                @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') == 'sensor' ? 'selected' : '' }}>Sensor (Data Collector)</option>
                    <option value="gateway" {{ old('type') == 'gateway' ? 'selected' : '' }}>Gateway (Data Forwarder)</option>
                    <option value="actuator" {{ old('type') == 'actuator' ? 'selected' : '' }}>Actuator (Command Receiver)</option>
                </select>
                @error('type') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Owner *</label>
                <select name="user_id" required>
                    <option value="">Select 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') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label>Status</label>
                <select name="status">
                    <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="online" {{ old('status') == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="offline" {{ old('status') == 'offline' ? 'selected' : '' }}>Offline</option>
                    <option value="maintenance" {{ old('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', '1.0.0') }}" placeholder="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', [])) ? 'checked' : '' }}> Earthquake Detection</label>
                    <label><input type="checkbox" name="capabilities[]" value="suhu" {{ in_array('suhu', old('capabilities', [])) ? 'checked' : '' }}> Temperature</label>
                    <label><input type="checkbox" name="capabilities[]" value="getaran" {{ in_array('getaran', old('capabilities', [])) ? 'checked' : '' }}> Vibration</label>
                    <label><input type="checkbox" name="capabilities[]" value="kelembaban" {{ in_array('kelembaban', old('capabilities', [])) ? 'checked' : '' }}> Humidity</label>
                </div>
            </div>

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

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

<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; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.form-group { margin-bottom: 0; }
.form-group.full-width { grid-column: span 2; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.5rem; }
.form-group input, .form-group select { width: 100%; padding: 0.625rem; border: 1px solid #e5e7eb; border-radius: 8px; }
.form-group small { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
.error { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; display: block; }
.checkbox-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; }
.location-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
</style>
@endsection