@section('page-title', 'Product Details')

<x-app-layout>
    <div class="p-6">
        <div class="max-w-7xl mx-auto">

            <div class="mb-6 flex justify-between items-center">
                <div>
                    <a href="{{ route('products.index') }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
                        &larr; Back to Products
                    </a>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">{{ $product->name }}</h1>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('products.tag.form', $product) }}" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        Tag Customers
                    </a>
                    <a href="{{ route('products.edit', $product) }}" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        Edit Product
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

                <!-- Product Details -->
                <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Product Information</h2>

                    <div class="space-y-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Product Name</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $product->name }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Product Code</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $product->code }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">SKU</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $product->sku }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">KKM Registration</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $product->kkm }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Halal Certification Date</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {{ $product->halal_status ? $product->halal_status->format('M d, Y') : 'N/A' }}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Manufacture Date</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {{ $product->manufacture_dt ? $product->manufacture_dt->format('M d, Y') : 'N/A' }}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Expiry Date</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {{ $product->expiry_dt ? $product->expiry_dt->format('M d, Y') : 'N/A' }}
                            </dd>
                        </div>
                    </div>
                </div>

                <!-- Tagged Customers -->
                <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tagged Customers ({{ $product->customers->count() }})</h2>

                    @if($product->customers->count() > 0)
                        <div class="space-y-3 max-h-96 overflow-y-auto">
                            @foreach($product->customers as $customer)
                                <div class="p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <p class="font-medium text-gray-900 dark:text-white">{{ $customer->name }}</p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $customer->email }}</p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $customer->contact }}</p>
                                            @if($customer->pivot->notes)
                                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 italic">Note: {{ $customer->pivot->notes }}</p>
                                            @endif
                                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                                                Tagged: {{ $customer->pivot->created_at->diffForHumans() }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-gray-500 dark:text-gray-400 text-sm">
                            No customers tagged yet.
                            <a href="{{ route('products.tag.form', $product) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400">
                                Tag customers now
                            </a>
                        </p>
                    @endif
                </div>

            </div>

            <!-- QR Codes Summary Section -->
            <div class="mt-6 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Assigned QR Codes</h2>
                    <a href="{{ route('products.tag.form', $product) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                        Manage QR Codes
                    </a>
                </div>

                @if($product->qr_codes_count > 0)
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
                            <p class="text-sm text-blue-600 dark:text-blue-400 font-medium">Total Assigned</p>
                            <p class="text-3xl font-bold text-blue-900 dark:text-blue-100 mt-1">{{ number_format($product->qr_codes_count) }}</p>
                        </div>

                        @php
                            $usedCount = \App\Models\QrCode::where('product_id', $product->id)->where('status', 'used')->count();
                            $unusedCount = \App\Models\QrCode::where('product_id', $product->id)->where('status', 'unused')->count();
                        @endphp

                        <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg">
                            <p class="text-sm text-green-600 dark:text-green-400 font-medium">Unused Codes</p>
                            <p class="text-3xl font-bold text-green-900 dark:text-green-100 mt-1">{{ number_format($unusedCount) }}</p>
                        </div>

                        <div class="p-4 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg">
                            <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Used Codes</p>
                            <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ number_format($usedCount) }}</p>
                        </div>
                    </div>

                    <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
                        <p class="text-sm text-blue-800 dark:text-blue-300">
                            <strong>Performance Optimized:</strong> For large datasets (50k+ codes), use the "Manage QR Codes" button above to view, search, and manage all assigned codes.
                        </p>
                    </div>
                @else
                    <p class="text-gray-500 dark:text-gray-400 text-sm">
                        No QR codes assigned to this product yet.
                        <a href="{{ route('products.tag.form', $product) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400">
                            Tag QR codes now
                        </a>
                    </p>
                @endif
            </div>

        </div>
    </div>
</x-app-layout>