@extends('layouts.app')

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

@section('content')
<div class="create-device-container">
    <h1>Add New Device</h1>
    <p>Register a new sensor or gateway to your account</p>

    <div class="setup-guide">
        <h3>Quick Setup Guide</h3>
        <ol>
            <li>Fill the form below to register your device</li>
            <li>Copy the generated API Key</li>
            <li>Run the gateway script on your computer/Raspberry Pi</li>
            <li>Your device will appear online automatically</li>
        </ol>
    </div>

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

        <div class="form-group">
            <label>Device Name</label>
            <input type="text" name="name" required placeholder="e.g., My Earthquake Sensor">
            <small>Give your device a descriptive name</small>
        </div>

        <div class="form-group">
            <label>Device ID</label>
            <input type="text" name="device_id" required placeholder="e.g., SENSOR_BALI_01">
            <small>Unique identifier for your device</small>
        </div>

        <div class="form-group">
            <label>Device Type</label>
            <select name="type" required>
                <option value="sensor">Sensor (Data Collector)</option>
                <option value="gateway">Gateway (Data Forwarder)</option>
                <option value="actuator">Actuator (Command Receiver)</option>
            </select>
        </div>

        <div class="form-group">
            <label>Capabilities</label>
            <div class="checkbox-group">
                <label><input type="checkbox" name="capabilities[]" value="gempa"> Earthquake Detection</label>
                <label><input type="checkbox" name="capabilities[]" value="suhu"> Temperature</label>
                <label><input type="checkbox" name="capabilities[]" value="getaran"> Vibration</label>
            </div>
        </div>

        <button type="submit" class="btn-submit">Register Device</button>
    </form>
</div>

<style>
.create-device-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.setup-guide {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

.setup-guide h3 {
    color: #166534;
    margin-bottom: 0.5rem;
}

.setup-guide ol {
    padding-left: 1.25rem;
    color: #166534;
}

.setup-guide li {
    margin: 0.25rem 0;
}

.device-form {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.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;
}

.checkbox-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

.btn-submit {
    width: 100%;
    padding: 0.75rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
</style>
@endsection