@extends('layouts.main')

@section('content')
    <div class="container mx-auto p-6">
        <h1 class="text-2xl font-bold mb-6">Sync Results</h1>
        
        {{-- Display flash message if exists --}}
        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
                <strong class="font-bold">Error!</strong>
                <span class="block sm:inline">{{ session('error.message') }}</span>
                <button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" data-dismiss="alert">
                    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
                </button>
            </div>
        @endif

        @if(session('sync_results'))
            @php
                $results = session('sync_results.results', []);
                $summary = session('sync_results.summary', [
                    'total' => 0,
                    'success' => 0,
                    'skipped' => 0,
                    'errors' => 0
                ]);
            @endphp

            <!-- Summary Cards -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                {{-- ... existing summary cards ... --}}
            </div>
            
            <!-- Results Table -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product ID</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shopify ID</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Message</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($results as $result)
                                <tr class="{{ $result['status'] === 'success' ? 'bg-green-50' : ($result['status'] === 'error' ? 'bg-red-50' : 'bg-yellow-50') }}">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {{ $result['product_id'] ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {{ $result['status'] === 'success' ? 'bg-green-100 text-green-800' : 
                                               ($result['status'] === 'skipped' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ $result['status'] }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {{ $result['shopify_id'] ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4">
                                        {{ $result['message'] }}
                                        @if(!empty($result['error_details']))
                                            <div class="mt-1 text-xs text-gray-500">
                                                <button onclick="toggleErrorDetails('error-{{ $loop->index }}')" class="text-blue-600 hover:text-blue-800">
                                                    Show Details
                                                </button>
                                                <div id="error-{{ $loop->index }}" class="hidden mt-2 p-2 bg-gray-100 rounded">
                                                    <pre class="text-xs">{{ json_encode($result['error_details'], JSON_PRETTY_PRINT) }}</pre>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                 
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="mt-6 flex justify-between">
                <a href="{{ route('products.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
                    Back to Products
                </a>
                @if($summary['errors'] > 0)
                    <form method="POST" action="{{ route('products.sync.retry') }}">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            Retry Failed Items
                        </button>
                    </form>
                @endif
            </div>
        @else
            <div class="bg-white rounded-lg shadow p-6 text-center">
                <p class="text-gray-500">No sync results found. Please sync some products first.</p>
                <a href="{{ route('products.index') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                    Go to Products
                </a>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
<script>
    function toggleErrorDetails(id) {
        const element = document.getElementById(id);
        element.classList.toggle('hidden');
    }
</script>
@endpush