@extends('install.layout')
@section('title', __('License Verification'))
@section('step-name', __('License'))

@section('content')
<div class="space-y-5">
    <div class="space-y-1">
        <h1 class="text-2xl font-bold tracking-tight">{{ __('Verify your purchase') }}</h1>
        <p class="text-gray-500 text-xs font-medium">{{ __('Paste your Envato purchase code below. We verify it directly with Envato — your code is never stored anywhere except your own server.') }}</p>
    </div>

    @if(!empty($error))
        <div class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-xs text-red-400 flex items-start gap-2">
            <svg class="w-4 h-4 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
            <span class="leading-relaxed">{{ $error }}</span>
        </div>
    @endif

    <form method="POST" action="{{ route('install.license.verify') }}" class="space-y-4"
          x-data="{ submitting: false }" @submit="submitting = true">
        @csrf

        <div>
            <label for="purchase_code" class="block text-xs font-semibold text-gray-300 mb-1.5">
                {{ __('Envato purchase code') }}
            </label>
            <input type="text" id="purchase_code" name="purchase_code"
                   value="{{ $purchaseCode ?? '' }}"
                   required autofocus autocomplete="off" spellcheck="false"
                   maxlength="36"
                   pattern="[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
                   placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                   class="w-full h-11 px-4 rounded-xl bg-[#15171e] border border-[#2d3039] text-gray-100 text-sm font-mono placeholder-gray-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition">
            <p class="text-[10px] text-gray-500 mt-1.5">
                {{ __('Find your code at') }}
                <a href="https://codecanyon.net/downloads" target="_blank" rel="noopener" class="text-primary hover:underline">codecanyon.net/downloads</a>
                — {{ __('click the Download button next to MailTrixy and choose "License certificate & purchase code".') }}
            </p>
        </div>

        {{-- "Where do I find this?" panel — shown collapsed by default,
             expands when the customer clicks the link. Keeps the main
             form short while still giving step-by-step guidance for
             first-time Envato buyers. --}}
        <details class="group rounded-xl border border-[#2d3039] bg-[#15171e]">
            <summary class="cursor-pointer list-none px-4 py-3 text-xs font-medium text-gray-300 hover:text-gray-100 transition flex items-center justify-between">
                <span class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"/></svg>
                    {{ __('How do I find my purchase code?') }}
                </span>
                <svg class="w-4 h-4 group-open:rotate-180 transition" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
            </summary>
            <ol class="px-4 pb-4 space-y-2 text-[11px] text-gray-400 leading-relaxed list-decimal list-inside">
                <li>{{ __('Log in to your CodeCanyon account at envato.com.') }}</li>
                <li>{{ __('Click your avatar → Downloads.') }}</li>
                <li>{{ __('Find MailTrixy in the list, click the Download button.') }}</li>
                <li>{{ __('Choose "License certificate & purchase code (text)".') }}</li>
                <li>{{ __('Open the downloaded .txt file — your purchase code is the last line.') }}</li>
            </ol>
        </details>

        <div class="flex items-center justify-between pt-2">
            <a href="{{ route('install.welcome') }}" class="text-xs text-gray-500 hover:text-gray-300 transition inline-flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
                {{ __('Back') }}
            </a>
            <button type="submit" :disabled="submitting"
                    class="h-11 px-6 rounded-xl bg-primary hover:bg-primary/90 text-sm font-bold shadow-lg shadow-primary/20 transition-all text-white inline-flex items-center gap-2"
                    :class="submitting && 'opacity-75 cursor-not-allowed'">
                <span x-show="!submitting" class="inline-flex items-center gap-2">
                    {{ __('Verify & Continue') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"/></svg>
                </span>
                <span x-show="submitting" x-cloak class="inline-flex items-center gap-2">
                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    {{ __('Verifying with Envato…') }}
                </span>
            </button>
        </div>
    </form>
</div>
@endsection