@extends('layouts.self-paced-landing')

@section('title', 'Verify Certificate')
@section('meta-description', 'Verify the authenticity of a certificate issued by the Self-Paced Learning Portal.')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14">

    {{-- Header --}}
    <div class="text-center mb-10">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-2xl mb-4">
            <i class="fas fa-shield-check text-indigo-600 text-2xl"></i>
        </div>
        <h1 class="text-3xl font-extrabold text-gray-800">Certificate Verification</h1>
        <p class="text-sm text-gray-500 mt-2 max-w-3xl mx-auto">
            Enter a certificate number or verification code to confirm its authenticity.
        </p>
    </div>

    {{-- Verification form + result --}}
    <div x-data="certVerifier()" x-init="init()">

        {{-- Search form --}}
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6">
            <label class="block text-xs font-semibold text-gray-600 mb-2">
                <i class="fas fa-search text-indigo-400 mr-1"></i>
                Certificate Number or Verification Code
            </label>
            <div class="flex gap-3">
                <input type="text"
                       x-model="code"
                       @keydown.enter.prevent="verify()"
                       placeholder="e.g. SP-CERT-2026-ABCD1234 or ABCDEFGHIJKLMNOP"
                       class="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-300 uppercase"
                       :class="{ 'border-red-300': error }"
                       autocomplete="off"
                       spellcheck="false">
                <button @click="verify()"
                        :disabled="loading || !code.trim()"
                        class="flex items-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 text-white font-semibold text-sm rounded-xl transition">
                    <i class="fas fa-search" x-show="!loading"></i>
                    <i class="fas fa-spinner fa-spin" x-show="loading" x-cloak></i>
                    Verify
                </button>
            </div>
            <p x-show="error" x-cloak class="text-xs text-red-500 mt-2" x-text="error"></p>
        </div>

        {{-- Server-side pre-loaded result (from ?code= query param) --}}
        @if($code && $result)
            @if($result['found'] && $result['valid'])
            <div class="bg-green-50 border border-green-200 rounded-2xl p-6 mb-4">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-check-circle text-green-500 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-base font-bold text-green-800">Certificate is Valid</p>
                        <p class="text-xs text-green-600">{{ $result['message'] }}</p>
                    </div>
                </div>
                @include('self-paced.public.partials.certificate-details', ['certData' => $result['certificate']])
            </div>
            @elseif($result['found'] && !$result['valid'])
            <div class="bg-red-50 border border-red-200 rounded-2xl p-6 mb-4">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-ban text-red-500 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-base font-bold text-red-800">Certificate Revoked</p>
                        @if(!empty($result['revoked_at']))
                            <p class="text-xs text-red-600">Revoked on {{ $result['revoked_at'] }}</p>
                        @endif
                    </div>
                </div>
                @include('self-paced.public.partials.certificate-details', ['certData' => $result['certificate']])
                @if(!empty($result['reason']))
                <div class="mt-3 bg-red-100 rounded-xl px-4 py-2.5 text-xs text-red-700">
                    <strong>Reason:</strong> {{ $result['reason'] }}
                </div>
                @endif
            </div>
            @else
            <div class="bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-4 flex items-center gap-3">
                <i class="fas fa-exclamation-triangle text-amber-500 text-2xl flex-shrink-0"></i>
                <div>
                    <p class="text-sm font-bold text-amber-800">Certificate Not Found</p>
                    <p class="text-xs text-amber-600 mt-0.5">{{ $result['message'] }}</p>
                </div>
            </div>
            @endif
        @endif

        {{-- AJAX result area --}}
        <div x-show="result !== null" x-cloak>

            {{-- Valid --}}
            <div x-show="result && result.found && result.valid"
                 class="bg-green-50 border border-green-200 rounded-2xl p-6 mb-4">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-check-circle text-green-500 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-base font-bold text-green-800">Certificate is Valid</p>
                        <p class="text-xs text-green-600" x-text="result && result.message"></p>
                    </div>
                </div>
                <template x-if="result && result.certificate">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between py-2 border-b border-green-100">
                            <span class="text-gray-500 text-xs">Certificate Number</span>
                            <span class="font-mono font-bold text-gray-800 text-xs" x-text="result.certificate.certificate_number"></span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-green-100">
                            <span class="text-gray-500 text-xs">Holder</span>
                            <span class="font-semibold text-gray-800 text-xs" x-text="result.certificate.holder_name"></span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-green-100">
                            <span class="text-gray-500 text-xs">Course</span>
                            <span class="font-semibold text-gray-800 text-xs text-right max-w-[200px]" x-text="result.certificate.course_name"></span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="text-gray-500 text-xs">Issue Date</span>
                            <span class="font-medium text-gray-700 text-xs" x-text="result.certificate.issue_date"></span>
                        </div>
                    </div>
                </template>
            </div>

            {{-- Revoked --}}
            <div x-show="result && result.found && !result.valid"
                 class="bg-red-50 border border-red-200 rounded-2xl p-6 mb-4">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-ban text-red-500 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-base font-bold text-red-800">Certificate Revoked</p>
                        <p class="text-xs text-red-600" x-text="result && result.revoked_at ? 'Revoked on ' + result.revoked_at : ''"></p>
                    </div>
                </div>
                <template x-if="result && result.certificate">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between py-2 border-b border-red-100">
                            <span class="text-gray-500 text-xs">Certificate Number</span>
                            <span class="font-mono font-bold text-gray-800 text-xs" x-text="result.certificate.certificate_number"></span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-red-100">
                            <span class="text-gray-500 text-xs">Holder</span>
                            <span class="font-semibold text-gray-800 text-xs" x-text="result.certificate.holder_name"></span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-red-100">
                            <span class="text-gray-500 text-xs">Course</span>
                            <span class="font-semibold text-gray-800 text-xs text-right max-w-[200px]" x-text="result.certificate.course_name"></span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="text-gray-500 text-xs">Issue Date</span>
                            <span class="font-medium text-gray-700 text-xs" x-text="result.certificate.issue_date"></span>
                        </div>
                    </div>
                </template>
                <div x-show="result && result.reason" class="mt-3 bg-red-100 rounded-xl px-4 py-2.5 text-xs text-red-700">
                    <strong>Reason:</strong> <span x-text="result && result.reason"></span>
                </div>
            </div>

            {{-- Not found --}}
            <div x-show="result && !result.found"
                 class="bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-4 flex items-center gap-3">
                <i class="fas fa-exclamation-triangle text-amber-500 text-2xl flex-shrink-0"></i>
                <div>
                    <p class="text-sm font-bold text-amber-800">Certificate Not Found</p>
                    <p class="text-xs text-amber-600 mt-0.5" x-text="result && result.message"></p>
                </div>
            </div>

        </div>

        {{-- Info note --}}
        <div class="bg-gray-50 border border-gray-100 rounded-xl p-4 text-xs text-gray-500 flex items-start gap-2">
            <i class="fas fa-info-circle text-indigo-400 mt-0.5 flex-shrink-0"></i>
            <p>
                Certificates are issued only to learners who pass the course exam.
                Each certificate has a unique verification code printed on it.
                If you believe a certificate is fraudulent, please contact us.
            </p>
        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
function certVerifier() {
    return {
        code: '{{ $code ? addslashes($code) : '' }}',
        result: null,
        loading: false,
        error: null,
        verifyUrl: '{{ route('api.self-paced.verify') }}',

        init() {
            // If code was pre-loaded from query param and no server result, auto-verify
            @if($code && !$result)
            if (this.code) {
                this.verify();
            }
            @endif
        },

        verify() {
            const trimmed = this.code.trim().toUpperCase();
            if (!trimmed) return;

            this.loading = true;
            this.error = null;
            this.result = null;

            axios.post(this.verifyUrl, {
                code: trimmed,
                _token: document.querySelector('meta[name="csrf-token"]').content
            })
            .then(response => {
                this.result = response.data;
            })
            .catch(err => {
                if (err.response && err.response.data && err.response.data.errors) {
                    this.error = Object.values(err.response.data.errors).flat().join(' ');
                } else {
                    this.error = 'Verification failed. Please try again.';
                }
            })
            .finally(() => {
                this.loading = false;
            });
        }
    };
}
</script>
@endpush