@extends('layouts.main')

@section('title', 'Pdf Upload')

@section('content')

    <div class="bg-gray-100 flex flex-col items-center min-h-screen p-4">
        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-4xl mt-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Converted Images with Extracted Text</h1>

            @if (empty($extractedData))
                <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-md mb-4" role="alert">
                    <p>No images or text were extracted. There might have been an issue with the PDF or conversion process.</p>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach ($extractedData as $data)
                        <div class="border border-gray-200 rounded-md overflow-hidden shadow-sm flex flex-col">
                            <img src="{{ $data['image_url'] }}" alt="Converted PDF Page"
                                class="w-full h-auto object-cover rounded-t-md">
                            <div class="p-3 bg-gray-50 text-center text-sm text-gray-600">
                                Page {{ $data['page'] }}
                            </div>
                            <div class="p-4 bg-white flex-grow">
                                <h3 class="font-semibold text-gray-800 mb-2">Extracted Structured Data:</h3>
                                <div class="bg-gray-50 p-3 rounded-md text-gray-700 text-sm overflow-auto max-h-48 mb-4">
                                    @if (!empty($data['structured_data']))
                                        <dl class="grid grid-cols-2 gap-x-4 gap-y-2">
                                            @foreach ($data['structured_data'] as $field => $value)
                                                <dt class="font-medium text-gray-600">{{ $field }}:</dt>
                                                <dd class="text-gray-900">{{ $value ?? 'N/A' }}</dd>
                                            @endforeach
                                        </dl>
                                    @else
                                        <p class="text-gray-500 italic">No structured data extracted for this page.</p>
                                    @endif
                                </div>

                                <h3 class="font-semibold text-gray-800 mb-2">Raw Extracted Text:</h3>
                                <div
                                    class="bg-gray-50 p-3 rounded-md text-gray-700 text-sm overflow-auto max-h-48 whitespace-pre-wrap">
                                    @if (!empty($data['raw_text']))
                                        {{ $data['raw_text'] }}
                                    @else
                                        <p class="text-gray-500 italic">No raw text extracted for this page.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="mt-6 text-center">
                    <a href="{{ route('pdf.upload.form') }}" class="inline-block bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700
                                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                                transition duration-150 ease-in-out font-semibold">
                        Convert Another PDF
                    </a>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdn.tailwindcss.com"></script>
@endsection