@extends('layouts.main')

@section('content')
<div class="container mt-4 text-center">

    <h3>Dispositivo registrado correctamente</h3>

    <div class="alert alert-warning mt-3">
        <strong>IMPORTANTE:</strong><br>
        Escanea este código QR desde la tablet.<br>
        Este enlace debe usarse una sola vez.
    </div>

    <p class="mt-3">
        <strong>Nombre del dispositivo:</strong><br>
        {{ $device->device_name }}
    </p>

    @php
        $activationUrl = url('/activate') . '?d=' . $deviceId . '&s=' . $deviceSecret;
    @endphp

    <div class="my-4">
        <img
            src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ urlencode($activationUrl) }}"
            alt="QR de activación del dispositivo"
            style="border: 1px solid #ccc; padding: 10px; background: #fff;"
        >
    </div>

    <p class="text-muted">
        Si no puedes escanear el QR, usa este enlace:
    </p>

    <pre style="
        white-space: break-spaces;
        background: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        font-size: 0.9rem;
    ">{{ $activationUrl }}</pre>

    <div class="mt-4">
        <a href="{{ route('devices.create') }}" class="btn btn-secondary">
            Registrar otro dispositivo
        </a>
    </div>

</div>
@endsection