@extends('verify.layout')

@section('content')
    <flux:card class="space-y-6 rounded-2xl">
        <div>
            <flux:heading size="xl">{{ __('Verify a certificate') }}</flux:heading>
            <flux:text class="mt-2">
                {{ __('Enter the certificate number and the last name of the certificate holder to check whether it is genuine and currently valid.') }}
            </flux:text>
        </div>

        @if ($result === 'valid')
            <flux:callout icon="check-circle" variant="success" :heading="__('Valid')">
                {{ __('This certificate number and last name match a currently valid certificate.') }}
            </flux:callout>
        @elseif ($result === 'invalid')
            <flux:callout icon="x-circle" variant="danger" :heading="__('Invalid')">
                {{ __('No currently valid certificate matches that certificate number and last name.') }}
            </flux:callout>
        @endif

        <form method="POST" action="{{ route('verify.check') }}" class="space-y-6">
            @csrf

            <flux:input
                name="certificate_number"
                :label="__('Certificate number')"
                value="{{ old('certificate_number') }}"
                required
                autofocus
            />

            <flux:input
                name="holder_last_name"
                :label="__('Holder last name')"
                value="{{ old('holder_last_name') }}"
                required
            />

            @error('certificate_number')
                <flux:text class="text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
            @enderror

            @error('holder_last_name')
                <flux:text class="text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
            @enderror

            @if (filled(config('services.turnstile.site_key')))
                <div class="cf-turnstile" data-sitekey="{{ config('services.turnstile.site_key') }}"></div>

                @error('cf-turnstile-response')
                    <flux:text class="text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
                @enderror

                @push('scripts')
                    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
                @endpush
            @endif

            <flux:button type="submit" variant="primary" class="w-full" icon="shield-check">
                {{ __('Check certificate') }}
            </flux:button>
        </form>
    </flux:card>
@endsection