@extends('layouts.app')
@section('title', 'Document Verification - PT. Surya Bersatu Utama')

@section('content')

{{-- Header --}}
<section class="hero-bg py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-2xl">
            <p class="section-subtitle">Verification</p>
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Document Verification</h1>
        </div>
    </div>
</section>

{{-- Result --}}
<section class="py-16 bg-white">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">

        @if($document)
        {{-- Verified Card --}}
        <div class="bg-white rounded-2xl shadow-xl border border-green-200 overflow-hidden">
            <div class="bg-green-600 px-6 py-4 flex items-center gap-3">
                <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <h2 class="text-white font-bold text-lg">Verified Document</h2>
            </div>

            <div class="p-6 md:p-8">
                <div class="flex items-start gap-4 mb-6">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-primary text-lg">{{ $document->original_filename }}</h3>
                        <p class="text-gray-500 text-sm mt-1">Uploaded by PT. Surya Bersatu Utama</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-gray-400 text-xs uppercase tracking-wider mb-1">Status</p>
                        <p class="font-semibold text-green-600">
                            @if($document->status === 'verified')
                                Verified
                            @elseif($document->status === 'stamped')
                                Valid — QR Code Stamped
                            @else
                                Draft
                            @endif
                        </p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-gray-400 text-xs uppercase tracking-wider mb-1">Document ID</p>
                        <p class="font-mono text-sm text-gray-700 break-all">{{ $document->uuid }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-gray-400 text-xs uppercase tracking-wider mb-1">Upload Date</p>
                        <p class="font-semibold text-gray-700">{{ $document->created_at->format('d M Y') }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-gray-400 text-xs uppercase tracking-wider mb-1">QR Stamped Pages</p>
                        <p class="font-semibold text-gray-700">{{ $document->qr_pages === 'all' ? 'All pages' : $document->qr_pages }}</p>
                    </div>
                </div>

                <div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-start gap-3">
                    <svg class="w-5 h-5 text-green-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <p class="font-semibold text-green-800 text-sm">This document is authentic.</p>
                        <p class="text-green-700 text-xs mt-1">This document has been verified by PT. Surya Bersatu Utama's document management system.</p>
                    </div>
                </div>
            </div>
        </div>

        @else
        {{-- Not Found --}}
        <div class="bg-white rounded-2xl shadow-xl border border-red-200 overflow-hidden">
            <div class="bg-red-600 px-6 py-4 flex items-center gap-3">
                <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <h2 class="text-white font-bold text-lg">Document Not Found</h2>
            </div>
            <div class="p-6 md:p-8 text-center">
                <p class="text-gray-500">The document with this ID could not be found. Please check the QR code or contact PT. Surya Bersatu Utama.</p>
            </div>
        </div>
        @endif

        <div class="mt-6 text-center">
            <a href="{{ route('home') }}" class="text-primary hover:text-accent font-medium text-sm transition-colors">
                &larr; Back to PT. Surya Bersatu Utama
            </a>
        </div>
    </div>
</section>

@endsection