<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('My Products') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8" x-data="productList()" x-init="fetchProducts">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <template x-for="p in products" :key="p.id">
                    <div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border-0 shadow-xl bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
                        <div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-4">
                            <div class="flex items-start justify-between">
                                <div class="flex items-center gap-3">
                                    <div class="bg-gradient-to-br from-cyan-500 to-blue-600 p-3 rounded-xl">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package h-5 w-5 text-white" aria-hidden="true">
                                            <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path>
                                            <path d="M12 22V12"></path>
                                            <polyline points="3.29 7 12 12 20.71 7"></polyline>
                                            <path d="m7.5 4.27 9 5.15"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <h4 data-slot="card-title" class="text-lg" x-text="p.serialnumber.product.name"></h4>
                                        <p data-slot="card-description" class="text-muted-foreground flex items-center gap-1 mt-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hash h-3 w-3" aria-hidden="true">
                                                <line x1="4" x2="20" y1="9" y2="9"></line>
                                                <line x1="4" x2="20" y1="15" y2="15"></line>
                                                <line x1="10" x2="8" y1="3" y2="21"></line>
                                                <line x1="16" x2="14" y1="3" y2="21"></line>
                                            </svg><span x-text="p.serialnumber.product.model_number"></span></p>
                                    </div>
                                </div>
                                <span
    data-slot="badge"
    class="inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent rounded-full"
    x-text="p.status == 1 
        ? 'Verified' 
        : (p.status == 0 
            ? 'Under Process' 
            : (p.status == 2 
                ? 'Rejected' 
                : 'Unknown'))"
    :class="p.status == 1 
        ? 'bg-green-500 text-white' 
        : (p.status == 0 
            ? 'bg-yellow-500 text-black' 
            : (p.status == 2 
                ? 'bg-red-500 text-white' 
                : 'bg-gray-400 text-white'))">
</span>

                            </div>
                        </div>
                        <div data-slot="card-content" class="px-6 [&amp;:last-child]:pb-6 space-y-4">
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div class="space-y-1">
                                    <div class="flex items-center gap-1 text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-3 w-3" aria-hidden="true">
                                            <path d="M8 2v4"></path>
                                            <path d="M16 2v4"></path>
                                            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                                            <path d="M3 10h18"></path>
                                        </svg>Purchase Date</div>
                                    <div class="font-medium" x-text="new Date(p.purchase_date).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' })"></div>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center gap-1 text-gray-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield h-3 w-3" aria-hidden="true">
                                            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                                        </svg>Warranty Expires</div>
                                    <div class="font-medium" x-text="(() => {
                                    let d = new Date(p.purchase_date);
                                    d.setFullYear(d.getFullYear() + p.serialnumber.product.warranty_period); 
                                    return d.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' });
                                    })()"></div>
                                </div>
                            </div>
                            <div class="pt-2 pb-25">
                                <a data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3 w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-xl hover:from-cyan-600 hover:to-blue-700 transition-all duration-200" :href="'product/' + p.id">Check Warranty</a>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</x-app-layout>