@extends('layouts.app')

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

@section('content')
<x-page-header title="Create Device" subtitle="Add a device and registration code for the mobile app" icon="devices" icon-color="emerald" />

<div class="max-w-lg animate-slide-up">
    <form method="POST" action="{{ route('devices.codes.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
            <p class="text-xs text-slate-500 mt-1.5">The app must enter this exact name when registering with the code.</p>
        </div>

        <div>
            <label class="field-label">Assign to user (optional)</label>
            <select 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>
        </div>

        <div>
            <label class="field-label">Code expires in (hours)</label>
            <input type="number" name="expires_in_hours" value="{{ old('expires_in_hours', 24) }}" min="1" max="168" class="field-input">
        </div>

        <p class="text-xs text-slate-500 flex items-start gap-2">
            <x-icon name="qr-code" class="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
            After creation, share the Device ID, device name, and registration code with the phone app.
        </p>

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