<x-admin-app-layout>
    <div class="grid grid-cols-12">
        <div class="support-left">
            <div class="flex flex-col">
                <div class="p-3 xl:px-5 border-b xl:pb-4 border-neutral-30 dark:border-neutral-500">
                    <div class="mb-3 flex justify-between items-center">
                        <h6 class="text-xl font-semibold text-gray-800">{{ __('Recent Tickets') }}</h6>
                        <button id="close-support" class="lg:hidden text-lg"><i class="ph ph-x"></i></button>
                    </div>
                    <input type="text" class="w-full border border-neutral-30 dark:border-neutral-500 rounded-md p-2"
                        placeholder="{{ __('Search') }}">
                </div>
            </div>
            <div class="divide-y divide-neutral-30 dark:divide-neutral-500">
                @foreach ($support_tickets as $support_ticket)
                    <a href="{{ route('admin.support-tickets.chats', ['ticket_no' => $support_ticket->ticket_no]) }}"
                        class="cursor-pointer hover:bg-primary/5 duration-300 flex flex-col gap-2 py-2 px-3 xl:px-5 {{ isset($ticket) && $ticket->ticket_no === $support_ticket->ticket_no ? 'bg-primary/10 border-l-4 !border-primary !border-t-0' : '' }}">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2 gap-xxl-3">
                                <img src="{{ placeAvatar($support_ticket->user->avatar, $support_ticket->user->full_name) }}"
                                    class="rounded-full size-11 object-fit-cover" alt="">
                                <div>
                                    <p class="lg:text-base mb-1">{{ $support_ticket->user->full_name }}</p>
                                    <span
                                        class="text-xs">{{ \Carbon\Carbon::parse($support_ticket->created_at)->diffForHumans() }}</span>
                                </div>
                            </div>
                            <span
                                class="px-2.5 py-0.5 capitalize flex gap-1 items-center text-[10px] font-semibold rounded-full
                            {{ match ($support_ticket->status) {
                                'open' => 'bg-primary/10',
                                'replied' => 'bg-success/10',
                                'close' => 'bg-error/10',
                                default => '',
                            } }}">
                                <span
                                    class="size-1.5 rounded-full   {{ match ($support_ticket->status) {
                                        'open' => 'bg-primary',
                                        'replied' => 'bg-success',
                                        'close' => 'bg-error',
                                        default => '',
                                    } }}"></span>
                                {{ $support_ticket->status }}
                            </span>
                        </div>
                        <p class="mb-1.5 text-neutral-100">
                            {{ \Illuminate\Support\Str::limit($support_ticket->subject, 30, '...') }}</p>
                        <div class="flex gap-1 justify-between items-center">
                            <span
                                class="px-2.5 py-0.5 text-xs font-semibold rounded-full status capitalize {{ $support_ticket->priority->color() }}">
                                {{ $support_ticket->priority }} Priority
                            </span>
                            <span class="px-2 py-1 text-xs font-semibold">
                                #{{ $support_ticket->ticket_no }}
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
        <div
            class="flex-1 white-box rounded-right border-e-none col-span-12  lg:col-span-7 xxl:col-span-8 3xl:col-span-9">
            <button id="open-support" class="mb-3 btn-primary lg:hidden"><i
                    class="ph ph-chat"></i>{{ __('Chats') }}</button>
            @if (isset($ticket))
                <div class="flex flex-col gap-4">
                    <div class="flex justify-between items-center">
                        <span class="text-xl font-semibold">{{ $ticket->subject }}</span>
                        <div class="flex flex-row gap-4">
                            <span
                                class="px-2 py-1 text-xs font-semibold rounded-full status capitalize flex items-center justify-center {{ $ticket->status->color() }}">
                                {{ $ticket->status }}
                            </span>
                            @if ($ticket->status !== \App\Enums\SupportTicketStatusEnum::CLOSE)
                                <button type="button" class="delete-item-action sm-btn btn-warning"
                                    data-action="{{ route('admin.support-tickets.destroy', $ticket) }}">
                                    {{ __('Close') }}
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="flex flex-row gap-4">
                        <span>{{ \Carbon\Carbon::parse($ticket->created_at)->format('M d, Y, h:i a') }}</span>
                        <span>#{{ $ticket->ticket_no }}</span>
                    </div>
                    <div class="border-b border-neutral-30 dark:border-neutral-500 my-3 w-full h-px"></div>
                    <div class="flex flex-col gap-4">
                        <div class="pb-2 xl:pb-4 border-1 border-neutral-30 dark:border-neutral-500 rounded-md">

                            <div
                                class="border-b-1 border-neutral-30 dark:border-neutral-500 flex items-center gap-2 p-1">
                                <img src="{{ placeAvatar($ticket->user->avatar, $ticket->user->full_name) }}"
                                    class="rounded-full w-8 h-8" alt="{{ $ticket->user->full_name }}">
                                <p>{{ $ticket->user->full_name }}</p>
                                <span>{{ \Carbon\Carbon::parse($ticket->created_at)->format('M d, Y, h:i a') }}</span>
                            </div>
                            <div class="grow p-2 xl:p-4">
                                <p>
                                    {{ $ticket->message }}
                                </p>
                                @if ($ticket->attachments)
                                    <div class="mt-4">
                                        <h6 class="mb-2">{{ count($ticket->attachments) }} {{ __('Attachments') }}
                                        </h6>
                                        @if (count($ticket->attachments) > 0)
                                            <div class="flex flex-wrap gap-4">
                                                @foreach ($ticket->attachments as $attachment)
                                                    <div class="flex flex-col gap-2">
                                                        <a href="{{ $attachment }}" target="_blank"
                                                            class="flex items-center justify-between gap-3 duration-300 p-2 rounded-md border border-primary/30">
                                                            <div class="flex items-center gap-2">
                                                                <span class="block mt-2">
                                                                    {{ __('Attachment') }} {{ $loop->index + 1 }}
                                                                </span>
                                                            </div>
                                                            <i class="ph ph-rocket-launch text-lg"></i>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                    </div>
                                @endif
                            </div>
                        </div>
                        @foreach ($ticket->replies as $reply)
                            <div class="pb-2 xl:pb-4 border-1 border-neutral-30 dark:border-neutral-500 rounded-md">
                                <div
                                    class="border-b-1 border-neutral-30 dark:border-neutral-500 flex items-center gap-2 p-1">
                                    <img src="{{ placeAvatar($reply->reply->avatar, $reply->reply->full_name) }}"
                                        class="rounded-full w-8 h-8"
                                        alt="{{ $reply->reply_type == 'App\Models\Admin' ? config('application_info.company_info.name') : $reply->reply->full_name }}">
                                    <p class="text-sm">
                                        {{ $reply->reply_type == 'App\Models\Admin' ? 'System' : $reply->reply->full_name }}
                                    </p>
                                    <span>{{ \Carbon\Carbon::parse($reply->created_at)->format('M d, Y, h:i a') }}</span>

                                </div>
                                <div class="grow p-2 xl:p-4">
                                    <p>
                                        {!! $reply->message !!}
                                    </p>
                                    @if ($reply->attachments)
                                        <div class="mt-4">
                                            <h6 class="mb-2">{{ count($reply->attachments) }} {{ __('Attachment') }}
                                            </h6>
                                            <div class="flex flex-wrap gap-4">
                                                @foreach ($reply->attachments as $attachment)
                                                    <div class="flex flex-col gap-2">
                                                        <a href="{{ $attachment }}" target="_blank"
                                                            class="flex items-center justify-between gap-3 duration-300 p-2 rounded-md border border-primary/30">
                                                            <div class="flex items-center gap-2">
                                                                <span class="block mt-2">
                                                                    {{ __('Attachment') }} {{ $loop->index + 1 }}
                                                                </span>
                                                            </div>
                                                            <i class="ph ph-rocket-launch text-lg"></i>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>

                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if ($ticket->status == \App\Enums\SupportTicketStatusEnum::OPEN)
                        <div>
                            <div class="overflow-hidden sm:rounded-lg">
                                <div>
                                    <form action="{{ route('admin.support-tickets.store') }}" method="POST"
                                        class="form-submit-add" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="ticket_no" value="{{ $ticket->ticket_no }}">
                                        <!-- Message Area -->
                                        <div class="mb-6">
                                            <x-admin::editor name="message" label="{{ __('Reply Message') }}" />
                                        </div>

                                        <!-- File Attachments -->
                                        <div class="mb-6">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                                {{ __('Attachments') }}
                                            </label>
                                            <div class="flex items-center justify-center w-full">
                                                <label for="fileInput"
                                                    class="w-full flex flex-col items-center px-4 py-6 bg-white rounded-lg border-2 border-dashed border-gray-300 cursor-pointer hover:bg-gray-50">
                                                    <i class="ph ph-cloud-arrow-up text-4xl"></i>
                                                    <span
                                                        class="mt-2 text-sm text-gray-600">{{ __('Drop files here or click to upload') }}</span>
                                                    <input type="file" name="attachments[]" class="hidden"
                                                        id="fileInput" multiple>
                                                </label>
                                            </div>
                                            <div id="fileList" class="mt-2 flex flex-wrap gap-3"></div>
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center space-x-4">
                                                <x-admin::primary-button type="submit">
                                                    <span>{{ __('Reply') }}</span>
                                                </x-admin::primary-button>

                                            </div>
                                            <div>
                                                <label class="flex items-center">
                                                    <input type="checkbox" name="mark_resolved" value="yes"
                                                        class="rounded border-gray-300 text-primary-600 focus:ring-primary-1000">
                                                    <span
                                                        class="ml-2 text-sm text-gray-600">{{ __('Mark as Resolved after reply') }}</span>
                                                </label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @else
            @endif
        </div>
    </div>
    @push('scripts')
        @vite('resources/admin/js/support-tickets/chat.js')
    @endpush
</x-admin-app-layout>
