@extends('layouts.app')

@section('title', 'Verify eTCC - ERAS')

@section('content')
<main class="relative">
    {{-- Hero Section --}}
    <section class="py-16 lg:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    Verify eTCC
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    This section helps in verifying personal tax clearance certificate
                </p>
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <section class="pb-16 lg:pb-24">
        <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
            <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">Verify eTCC</h2>

                @if(session('error'))
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
                        {{ session('error') }}
                    </div>
                @endif

                @if(session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
                        {{ session('success') }}
                    </div>
                @endif

                @if(session('documentStatus') === true)
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                        <p class="text-green-700 font-medium mb-2">The document you submitted passed the PDF certified validation test.</p>
                        <ul class="list-disc list-inside text-green-600 space-y-1">
                            <li>This is a true PDF Certified Document</li>
                            @if(session('isSealed'))
                                <li>Signed and Sealed by {{ session('organizationName', 'EIRS') }}</li>
                            @else
                                <li>Signed by {{ session('organizationName', 'EIRS') }}</li>
                            @endif
                        </ul>
                    </div>
                @elseif(session('documentStatus') === false)
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <p class="text-red-700 font-medium mb-2">The document you submitted failed the PDF certified validation test. Possible causes for this failure are:</p>
                        <ul class="list-disc list-inside text-red-600 space-y-1">
                            <li>The document is not a PDF Certified Document</li>
                            <li>It is a PDF document with unauthorized alterations</li>
                        </ul>
                    </div>
                @endif

                <form action="{{ route('verify-tcc.verify-file-upload.post') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-6">
                        <label for="DocumentFile" class="block text-sm font-medium text-gray-700 mb-2">Document File</label>
                        <div class="flex items-center justify-center w-full">
                            <label for="DocumentFile" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                    <svg class="w-8 h-8 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                                    </svg>
                                    <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                                    <p class="text-xs text-gray-500">PDF files only</p>
                                </div>
                                <input id="DocumentFile" name="DocumentFile" type="file" class="hidden" accept="application/pdf" required />
                            </label>
                        </div>
                        <p id="file-name" class="mt-2 text-sm text-gray-600"></p>
                        @error('DocumentFile')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" class="inline-flex items-center gap-2 bg-emerald-600 text-white px-6 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                            Submit
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
    document.getElementById('DocumentFile').addEventListener('change', function(e) {
        var fileName = e.target.files[0] ? e.target.files[0].name : '';
        document.getElementById('file-name').textContent = fileName ? 'Selected: ' + fileName : '';
    });
</script>
@endpush