<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="ticketList()" 
            x-init="fetchTickets"
        >
            <div class="grid grid-cols-1 md:grid-cols-1 gap-6">
                <div 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 class="grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 pb-4">
                        <h4 class="text-lg">Replacement Requests</h4>
                    </div>
                    <div class="max-w-xl mx-auto mt-6">
                        <div class="bg-white shadow-lg rounded-xl overflow-hidden">
                            
                            <!-- Header -->
                            <div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
                            <div>
                                <h2 class="text-lg font-semibold">Ticket #12345</h2>
                                <p class="text-sm">Submitted: 2025-10-12</p>
                            </div>
                            <span class="px-3 py-1 rounded-full text-xs font-medium bg-indigo-800">Open</span>
                            </div>
                            
                            <!-- Body -->
                            <div class="p-4 space-y-3">
                            <div>
                                <p class="text-gray-700"><span class="font-semibold">Customer:</span> John Doe</p>
                                <p class="text-gray-700"><span class="font-semibold">Email:</span> john@example.com</p>
                            </div>
                            <div>
                                <p class="font-semibold text-gray-800">Issue:</p>
                                <p class="text-gray-700">
                                The product I purchased is not working as expected. The vacuum hose is leaking.
                                </p>
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-2 py-1 text-xs font-medium bg-gray-100 rounded">Warranty</span>
                                <span class="px-2 py-1 text-xs font-medium bg-gray-100 rounded">Urgent</span>
                                <span class="px-2 py-1 text-xs font-medium bg-gray-100 rounded">Swimming Hoses</span>
                            </div>
                            </div>

                            <!-- Footer / Actions -->
                            <div class="bg-gray-50 px-4 py-3 flex justify-end gap-2">
                            <button class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm">Reply</button>
                            <button class="px-3 py-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm">Resolve</button>
                            </div>
                        </div>
                        </div>

                </div>
            </div>

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