@extends('installer.layout')
@section('title', 'License Activation — Quickro POS Installer')

@section('content')
<div class="max-w-xl">
    <h1 class="text-3xl font-black text-white">License Activation</h1>
    <p class="mt-3 text-sm leading-7 text-slate-400">
        Enter the purchase code and buyer email from your Quickro POS purchase.
        The license will be verified against our secure validation server.
    </p>

    @if($errors->any())
        <div class="mt-6 rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4">
            <p class="text-sm font-semibold text-rose-400">Verification failed</p>
            <ul class="mt-2 space-y-1 text-xs text-rose-300">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('install.verify-purchase-code') }}" class="mt-8 space-y-5">
        @csrf

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Purchase Code</label>
            <input type="text" name="purchase_code" value="{{ old('purchase_code') }}" required
                   placeholder="e.g. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
            <p class="mt-1.5 text-xs text-slate-500">Your Envato/verified purchase code for Quickro POS</p>
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Buyer Email</label>
            <input type="email" name="buyer_email" value="{{ old('buyer_email') }}" required
                   placeholder="email@example.com"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
            <p class="mt-1.5 text-xs text-slate-500">Email address used at the time of purchase</p>
        </div>

        <button type="submit"
                class="w-full inline-flex items-center justify-center gap-2 rounded-full bg-brand-600 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">
            Verify License
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        </button>
    </form>

</div>
@endsection