@section('title'){{ __('Support Ticket') }}@endsection
<span>
     <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
        <div class="grid auto-rows-min gap-4 md:grid-cols-2">

            <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                <span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
                 <flux:icon.clock />
                </span>
                <div>
                    <p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $open }}</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Opened Tickets</p>
                </div>
            </article>

            <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                <span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
                 <flux:icon.circle-x />
                </span>
                <div>
                    <p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $closed }}</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Closed Tickets</p>
                </div>
            </article>
        </div>
        <div x-data="{ show: false, id: 0 }">
             <div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]">
                <div x-show="!show" class="list">
                    <div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
                    <h3 class="text-md font-semibold text-gray-900 dark:text-white pl-1">Tickets</h3>
                    <flux:modal.trigger name="create-ticket">
                        <flux:button class="cursor-pointer">Create Ticket</flux:button>
                     </flux:modal.trigger>
                    </div>
                </div>
                <div x-show="show">
                    <div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
                    <nav class="flex items-center cursor-pointer py-3" x-on:click="show = false">
                        <flux:icon.chevron-left variant="mini"/>
                        <flux:text>{{ __('Get back to Tickets') }}</flux:text>
                    </nav>
                    </div>
                </div>
                 @if(count($tickets) > 0)
                     <div class="ticketbox">
                         <div x-show="!show" class="list">
                            <!-- Tickets Table -->
                             <div class="overflow-x-auto shadow-md sm:rounded-lg">
                                <table class="min-w-full table-auto text-sm text-left text-gray-500 dark:text-gray-400">
                                    <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-zinc-800 dark:text-gray-400">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">ID</th>
                                            <th scope="col" class="px-6 py-3">Subject</th>
                                            <th scope="col" class="px-6 py-3">Status</th>
                                            <th scope="col" class="px-6 py-3">Created Date</th>
                                            <th scope="col" class="px-6 py-3"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach(collect($tickets)->reverse() as $index => $ticket)
                                            <tr class="border-b dark:border-gray-700 border-gray-200">
                                            <td class="px-6 py-4">#{{ $ticket->ticket_id }}</td>
                                            <td class="px-6 py-4 truncate">{{ $ticket->subject }}</td>
                                            <td class="px-6 py-4">
                                                @if($ticket->status == "open")
                                                    <flux:badge size="sm" color="green">Open</flux:badge>
                                                @elseif($ticket->status == "pending")
                                                    <flux:badge size="sm" color="yellow">In-Progress</flux:badge>
                                                @else
                                                    <flux:badge size="sm" color="red">Closed</flux:badge>
                                                @endif

                                            </td>
                                            <td class="px-6 py-4">{{ $ticket->created_at->diffForHumans() }}</td>
                                            <td class="px-6 py-4">
                                                <button class="cursor-pointer px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none"
                                                        x-on:click="show = true; id = {{ $index }};" data-id="{{ $index }}"
                                                        >
                                                    Show
                                                </button>
                                            </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                         </div>
                         <div x-show="show" class="message">
                             @foreach(collect($tickets)->reverse() as $index => $ticket)
                             <div x-show="id === {{ $index }}" id="ticket-{{ $index }}">
                                 <div class="overflow-x-auto shadow-md sm:rounded-lg p-4">
                                     <div class="flex flex-col lg:flex-row gap-6">
                                        <!-- Left Column (Messages & Reply Form) -->
                                        <div class="w-full lg:w-2/3 space-y-4">
                                            <!-- Customer Message -->
                                            <div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
                                                <div class="flex justify-between items-center mb-1">
                                                    <span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->name }}</span>
                                                    <span class="text-sm text-gray-500">{{ $ticket->created_at->format('F d, Y • h:i A') }}</span>
                                                </div>
                                                <p class="text-gray-700 dark:text-gray-300">Subject: {{ $ticket->subject }}<br/>Message: {{ $ticket->message }}</p>
                                            </div>

                                            @if(count($ticket->responses) > 0)
                                                @foreach($ticket->responses as $response)
                                                    <div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
                                                <div class="flex justify-between items-center mb-1">
                                                    <span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->id === $response->user_id ? auth()->user()->name : 'Support Team' }}</span>
                                                    <span class="text-sm text-gray-500">{{ $response->created_at->format('F d, Y • h:i A') }}</span>
                                                </div>
                                                <p class="text-gray-700 dark:text-gray-300">{{ $response->response }}</p>
                                                </div>
                                                @endforeach
                                            @endif

                                            @if($ticket->status !== "closed")
                                                <!-- Reply Form -->
                                                <div class="bg-white dark:bg-zinc-800 p-4 shadow rounded">
                                                    <textarea wire:model="response" class="w-full p-3 rounded border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-500" rows="4" placeholder="Type your response..."></textarea>
                                                    @error('response')
                                                    <div class="my-2 app-primary">
                                                        {{ $message }}
                                                    </div>
                                                    @enderror
                                                    <!-- Success/Error Message -->
                                                    @if (session()->has('success'))
                                                        <div class="my-2" style="color: #00AB55">
                                                            {{ session('success') }}
                                                        </div>
                                                    @endif
                                                    @if (session()->has('error'))
                                                        <div class="my-2 app-primary">
                                                            {{ session('error') }}
                                                        </div>
                                                    @endif
                                                    <flux:button variant="outline" wire:click="reply('{{ $ticket->id }}')">Send Reply</flux:button>
                                                </div>
                                            @endif

                                        </div>

                                        <!-- Right Column (Ticket Details) -->
                                        <div class="w-full lg:w-1/3">
                                            <div class="bg-white dark:bg-zinc-800 shadow rounded-lg p-4 space-y-2">
                                                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Ticket Details</h2>
                                                <div class="text-gray-700 dark:text-gray-300">
                                                    <p><strong>Ticket ID:</strong> #{{ $ticket->ticket_id }}</p>
                                                    <p><strong>Created At:</strong> {{ $ticket->created_at->format('F d, Y • h:i A') }}</p>
                                                    <p><strong>Last Response:</strong> {{ $ticket->last_response_at ? $ticket->last_response_at->format('F d, Y • h:i A') : 'No responses yet' }}</p>
                                                    <span class="flex flex-row gap-2"><p><strong>Status:</strong></p>
                                                    @if($ticket->status == "open")
                                                        <flux:badge size="sm" color="green">Open</flux:badge>
                                                    @elseif($ticket->status == "pending")
                                                        <flux:badge size="sm" color="yellow">In-Progress</flux:badge>
                                                    @else
                                                        <flux:badge size="sm" color="red">Closed</flux:badge>
                                                    @endif
                                                    </span>
                                                    @if($ticket->status !== "closed")
                                                        <flux:button class="mt-2 cursor-pointer inbox-btn" wire:click="close('{{ $ticket->id }}')">Close Ticket</flux:button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                 </div>
                             </div>
                             @endforeach
                         </div>
                     </div>
                 @else
                     <div class="flex justify-center items-center" style="min-height: 400px;">
                        <p class="text-gray-500 dark:text-gray-400">No Tickets</p>
                     </div>
                 @endif
            </div>
        </div>
     </div>
     <flux:modal name="create-ticket" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Create ticket</flux:heading>
                @if (session()->has('success'))
                    <flux:text class="mt-2" style="color: #00AB55">{{ session('success') }}</flux:text>
                @endif
                @if (session()->has('error'))
                    <flux:text class="mt-2 app-primary" >{{ session('error') }}</flux:text>
                @endif
            </div>
            <flux:input label="Subject" placeholder="Enter subject" wire:model="subject"/>
            <flux:textarea
                label="Message"
                placeholder="Enter the issue you are facing or just give us feedback what we can improve"
                wire:model="message"
            />
            <div class="flex">
                <flux:spacer />
                <flux:button class="cursor-pointer" type="submit" variant="primary" wire:click="store">Create</flux:button>
            </div>
        </div>
     </flux:modal>
</span>