<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="px-6 space-y-4">
                        <div class="overflow-x-auto pb-25">
                            <table class="min-w-full border-separate border-spacing-y-2">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Ticket No.</th>
                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Subject</th>
                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Date Created</th>
                                        <th class="px-4 py-2 text-right text-sm font-semibold text-gray-600">Status</th>
                                        <th class="px-4 py-2 text-right text-sm font-semibold text-gray-600">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="ticket in tickets" :key="ticket.id">
                                        <tr class="bg-white shadow rounded-lg">
                                            <td class="px-4 py-2" x-text="'#TKT'+String(ticket.id).padStart(3, '0')"></td>
                                            <td class="px-4 py-2" x-text="ticket.subject"></td>
                                            <td class="px-4 py-2" 
                                                x-text="new Date(ticket.created_at).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' })">
                                            </td>
                                            <td class="px-4 py-2 text-right">
                                                <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-600" x-text="ticket.status"></span>
                                            </td>
                                            <td class="px-4 py-2 text-right">
                                                <button 
                                                    @click="openModal(ticket)"
                                                    class="w-1/2 inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium 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 h-9 px-4 py-2"
                                                >
                                                   View
                                                </button>

                                                
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div 
                x-show="modalOpen" 
                x-transition 
                class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"
            >
                <div class="bg-white w-full max-w-4xl rounded-2xl shadow-xl p-6 transform transition-all scale-95 max-h-[90vh] overflow-y-auto">
                    <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-file-text h-5 w-5 text-white" aria-hidden="true">
                                            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
                                            <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                                            <path d="M10 9H8"></path>
                                            <path d="M16 13H8"></path>
                                            <path d="M16 17H8"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <h4 data-slot="card-title" class="leading-none flex items-center gap-2" x-text="selectedTicket ? '#TKT' + String(selectedTicket.id).padStart(3, '0') : ''"><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-clock h-4 w-4 text-amber-500" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg></h4>
                                        <p data-slot="card-description" class="text-muted-foreground mt-1" x-text="selectedTicket?.subject"></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 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;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 [a&amp;]:hover:bg-primary/90 rounded-full bg-amber-100 text-amber-700" x-text="selectedTicket?.status"></span>
                            </div>
                        </div>
                        <div data-slot="card-content" class="px-6 [&amp;:last-child]:pb-6 space-y-4">
                            <div class="bg-gray-50 p-3 rounded-xl">
                                <p class="text-sm text-gray-700 font-medium mb-1">Issue Description:</p>
                                <p class="text-sm text-gray-600"  x-text="selectedTicket?.description"></p>
                            </div>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div><span class="text-gray-600">Created Date:</span>
                                    <div class="font-medium">12/1/2024</div>
                                </div>
                                <div><span class="text-gray-600">Current Status:</span>
                                    <div class="font-medium 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-clock h-4 w-4 text-amber-500" aria-hidden="true">
                                            <path d="M12 6v6l4 2"></path>
                                            <circle cx="12" cy="12" r="10"></circle>
                                        </svg><span x-text="selectedTicket?.status"></span></div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 mt-3">
                                <div class="flex flex-col items-center">
                                    <div class="w-3 h-3 rounded-full border-2 bg-cyan-500 border-cyan-500"></div><span class="text-xs mt-1 text-cyan-600">Under Review</span></div>
                                <div class="flex-1 h-0.5 bg-gray-200"></div>
                                <div class="flex flex-col items-center">
                                    <div class="w-3 h-3 rounded-full border-2 bg-gray-200 border-gray-300"></div><span class="text-xs mt-1 text-gray-400">Approved</span></div>
                                <div class="flex-1 h-0.5 bg-gray-200"></div>
                                <div class="flex flex-col items-center">
                                    <div class="w-3 h-3 rounded-full border-2 bg-gray-200 border-gray-300"></div><span class="text-xs mt-1 text-gray-400">Dispatched</span></div>
                                <div class="flex-1 h-0.5 bg-gray-200"></div>
                                <div class="flex flex-col items-center">
                                    <div class="w-3 h-3 rounded-full border-2 bg-gray-200 border-gray-300"></div><span class="text-xs mt-1 text-gray-400">Completed</span></div>
                            </div>
                            <div class="pt-2 pb-25">
                                <h4>Comment</h4>
                                Thank you for contacting us. We are checking your product from invoice. If it will be under warrenty we will intiate replacement. 
                            </div>
                        </div>
                    </div>
                    <div class="p-4 space-y-4">
                        <!-- Chat body -->
                        <div class="flex-1 overflow-y-auto p-4 space-y-4">
                            <template x-for="rep in selectedTicket.replies" :key="rep.id">
                                <div 
                                    class="flex items-start space-x-2"
                                    :class="selectedTicket.customer_id !== rep.user_id ? 'justify-start' : 'justify-end'"
                                >
                                    <!-- Avatar -->
                                    <div 
                                    class="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold"
                                    :class="selectedTicket.customer_id !== rep.user_id ? 'bg-blue-600' : 'bg-green-600'"
                                    x-text="rep.user.name.split(' ').map(n => n.charAt(0).toUpperCase()).join('')"
                                    ></div>

                                    <!-- Message Bubble -->
                                    <div 
                                    class="px-4 py-2 rounded-2xl shadow-sm max-w-[70%]"
                                    :class="selectedTicket.customer_id !== rep.user_id ? 'bg-white text-gray-800' : 'bg-blue-600 text-white'"
                                    >
                                    <p class="text-xs text-gray-400">Posted By - <span x-text="rep.user.name"></span></p>
                                    <p class="text-sm" x-text="rep.message"></p>
                                    <span class="text-xs" :class="selectedTicket.customer_id !== rep.user_id ? 'text-gray-400' : 'text-blue-200'">10:45 AM</span>
                                    </div>
                                </div>
                            </template>
                    </div>

                    <!-- Input area -->
                    <div class="bg-white p-3 flex items-center border-t">
                        <input
                        type="text" x-model="message"
                        placeholder="Type a message..."
                        class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring focus:ring-blue-300"
                        />
                    </div>
                    <input type="hidden" x-model="selectedTicket.id" />



                    <button 
                        @click="reply" 
                        class="mt-6 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
                    >
                        Reply
                    </button>
                    <button 
                        @click="modalOpen = false" 
                        class="mt-6 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>