@extends('layouts.app')

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

    <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-50 text-left font-semibold text-gray-700">
                <tr>
                    <th class="px-4 py-2">Title</th>
                    <th class="px-4 py-2">Product ID</th>
                    <th class="px-4 py-2">Shopify ID</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2">Error</th>
                    <th class="px-4 py-2">Created At</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse ($logs as $log)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-2">
                        {{ $log->title ?? 'N/A' }}
                        <br>
                        <span class="text-xs text-gray-500">SKU: {{ $log->sku ?? 'N/A' }}</span>
                    </td>
                    <td class="px-4 py-2">{{ $log->product_id ?? '—' }}</td>
                    <td class="px-4 py-2">{{ $log->shopify_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' }}">
                            {{ ucfirst($log->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-2 text-sm text-red-600">
                        {{ $log->error ?? '—' }}
                    </td>
                    <td class="px-4 py-2 text-sm text-gray-600">
                        {{ $log->created_at->format('d M Y H:i') }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-4 py-4 text-center text-gray-500">No sync 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>
@endsection