@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h2 class="text-2xl font-bold mb-6">Order Logs</h2>

    <div class="overflow-x-auto bg-white shadow-md rounded-lg">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-100 text-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left">Shopify Order ID</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">Error</th>
                    <th class="px-4 py-3 text-left">Response</th>
                    <th class="px-4 py-3 text-left">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse ($logs as $log)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3">{{ $log->shopify_order_id }}</td>
                        <td class="px-4 py-2">
                        <span class="inline-block px-4 py-2 text-md rounded font-medium 
                            {{ $log->status === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">{{ $log->status }}</span></td>
                        <td class="px-4 py-2 text-sm text-red-600">{{ $log->error ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <button onclick="toggleResponse({{ $log->id }})" class="text-blue-600 hover:underline text-lg">
                                View
                            </button>
                        </td>
                        <td class="px-4 py-3 text-gray-500">
                            {{ $log->created_at->format('Y-m-d H:i') }}
                        </td>
                    </tr>

                    <!-- Hidden Response Row -->
                    <tr id="response-{{ $log->id }}" class="hidden bg-gray-50">
                        <td colspan="5" class="px-4 py-3 text-sm text-gray-800">
                            <pre class="whitespace-pre-wrap">{{ json_encode($log->response, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center px-4 py-6 text-gray-500">No logs found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

  <div class="sticky bottom-0 left-0 w-full bg-white shadow-md py-3 flex justify-center items-center gap-2 z-50 border-t">
        {{ $logs->links() }}
    </div>
</div>

<script>
    function toggleResponse(id) {
        const row = document.getElementById('response-' + id);
        row.classList.toggle('hidden');
    }
</script>
@endsection