@extends('layouts.public')

@section('title', 'Invalid Document - QR Code')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-red-50 to-orange-50 py-12 px-4">
    <div class="container mx-auto max-w-2xl">
        <!-- Error Header -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-4">
                <i class="fas fa-times-circle text-red-600 text-4xl"></i>
            </div>
            <h1 class="text-4xl font-bold text-gray-800 mb-2">Verification Failed</h1>
            <p class="text-xl text-gray-600">Unable to verify this document</p>
        </div>

        <!-- Main Card -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
            <!-- Status Section -->
            <div class="bg-red-500 text-white p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold">Invalid Token</h2>
                        <p class="text-red-100 mt-2">{{ $message ?? 'The QR code token is invalid or corrupted.' }}</p>
                    </div>
                    <div class="text-6xl opacity-20">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>

            <!-- Content Section -->
            <div class="p-6 space-y-6">
                <!-- What Happened -->
                <div>
                    <h3 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">What Happened?</h3>
                    <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                        <p class="text-red-800">
                            The QR code you scanned is invalid. This could happen for several reasons:
                        </p>
                        <ul class="list-disc ml-5 mt-3 space-y-2 text-red-800">
                            <li>The QR code is corrupted or damaged</li>
                            <li>The document has been tampered with</li>
                            <li>The verification token has expired</li>
                            <li>The token was generated incorrectly</li>
                            <li>The document no longer exists in our system</li>
                        </ul>
                    </div>
                </div>

                <!-- Error Details -->
                <div>
                    <h3 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">Error Details</h3>
                    <div class="bg-gray-50 p-4 rounded">
                        <div class="space-y-3">
                            <div>
                                <p class="text-gray-600 text-sm font-semibold">Error Time</p>
                                <p class="text-gray-800">{{ now()->format('d M Y, h:i:s A') }}</p>
                            </div>
                            <div>
                                <p class="text-gray-600 text-sm font-semibold">Your Location</p>
                                <p class="text-gray-800">{{ request()->ip() }}</p>
                            </div>
                            <div>
                                <p class="text-gray-600 text-sm font-semibold">Error Message</p>
                                <p class="text-red-700 font-mono text-sm">{{ $message ?? 'Invalid verification token' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- What You Can Do -->
                <div>
                    <h3 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">What You Can Do</h3>
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm">1</div>
                            </div>
                            <div class="ml-3">
                                <p class="font-semibold text-gray-800">Try Scanning Again</p>
                                <p class="text-gray-600 text-sm">Make sure the QR code is clear and not damaged. Try scanning again.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm">2</div>
                            </div>
                            <div class="ml-3">
                                <p class="font-semibold text-gray-800">Check Your Camera</p>
                                <p class="text-gray-600 text-sm">Ensure your device's camera is working properly and focused on the QR code.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm">3</div>
                            </div>
                            <div class="ml-3">
                                <p class="font-semibold text-gray-800">Download Original Document</p>
                                <p class="text-gray-600 text-sm">Download the original PDF document from your account to verify manually.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm">4</div>
                            </div>
                            <div class="ml-3">
                                <p class="font-semibold text-gray-800">Contact Support</p>
                                <p class="text-gray-600 text-sm">If the problem persists, contact our support team for assistance.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Security Notice -->
                <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
                    <h4 class="font-bold text-yellow-900 mb-2">
                        <i class="fas fa-shield-alt mr-2"></i>Security Notice
                    </h4>
                    <p class="text-yellow-800 text-sm">
                        If you believe this is a suspicious activity or attempted fraud, please report it immediately to our support team. 
                        Do not attempt to verify the same QR code multiple times.
                    </p>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 px-6 py-4 border-t">
                <div class="flex justify-between items-center flex-wrap gap-4">
                    <p class="text-gray-600 text-sm">
                        Error logged at: {{ now()->format('d M Y, h:i:s A') }}
                    </p>
                    <div class="space-x-3">
                        <a href="https://www.willmanagement.com/support" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition">
                            <i class="fas fa-phone mr-2"></i> Contact Support
                        </a>
                        <button onclick="window.history.back()" class="inline-flex items-center px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded transition">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- FAQ -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Frequently Asked Questions</h3>
            <div class="space-y-4">
                <div>
                    <p class="font-semibold text-gray-800">Q: Why is my QR code invalid?</p>
                    <p class="text-gray-700 text-sm">A: QR codes are encrypted tokens. If the document has been tampered with or the token is corrupted, verification will fail.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Q: How do I know if my document is genuine?</p>
                    <p class="text-gray-700 text-sm">A: Genuine documents will have valid QR codes that verify successfully. Always download documents from your official account.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Q: Can QR codes expire?</p>
                    <p class="text-gray-700 text-sm">A: QR codes do not expire, but they are tied to the original document. If the document is modified, the QR code becomes invalid.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection