@extends('layouts.app')

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

@section('content')
<x-page-header title="Manual Device Setup" subtitle="Create credentials immediately without a registration code" icon="devices" icon-color="indigo" />

<div class="max-w-lg animate-slide-up">
    <form method="POST" action="{{ route('devices.register.store') }}" class="glass-card p-5 sm:p-6 space-y-5">
        @csrf

        <div>
            <label class="field-label" for="device_name">Device name</label>
            <input id="device_name" type="text" name="device_name" value="{{ old('device_name') }}" required
                   placeholder="e.g. Samsung A14" class="field-input">
            @error('device_name')<p class="text-red-400 text-sm mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="field-label" for="user_id">Assign to user (optional)</label>
            <select id="user_id" name="user_id" class="field-select">
                <option value="">Unassigned</option>
                @foreach ($users as $user)
                    <option value="{{ $user->id }}" @selected(old('user_id') == $user->id)>{{ $user->name }}</option>
                @endforeach
            </select>
            @error('user_id')<p class="text-red-400 text-sm mt-1">{{ $message }}</p>@enderror
        </div>

        <p class="text-xs text-slate-500 flex items-start gap-2">
            <x-icon name="shield" class="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
            You will receive a Device ID and API token shown only once.
        </p>

        <div class="flex flex-wrap gap-3">
            <button type="submit" class="btn-primary">
                <x-icon name="plus" class="w-4 h-4" />
                Register Device
            </button>
            <a href="{{ route('devices.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection