@php
    $selectedConversation = $selectedConversation ?? null;
    $query = $query ?? null;
@endphp
<div
        x-data="{
            height: 0,
            conversationElement: null
        }"
        x-init="
            conversationElement = document.getElementById('conversation');
            height = conversationElement.scrollHeight;
            $nextTick(() => conversationElement.scrollTop = height);
        "
        @scroll-bottom.window="
            $nextTick(() => {
                const el = document.getElementById('conversation');
                if (el) el.scrollTop = el.scrollHeight;
            });
        "
        class="w-full overflow-hidden">

    <div class="border-b flex flex-col  grow h-full ">


        {{-- header --}}
        <header class="w-full sticky inset-x-0 flex pb-[5px] pt-[5px] top-0 z-10 bg-white border-b " >

            <div class="flex w-full items-center px-2 lg:px-4 gap-2 md:gap-5">

                <a class="shrink-0 lg:hidden" href="{{route('chat.index')}}">


                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
                    </svg>


                </a>


                {{-- avatar --}}


                <div class="shrink-0">
                    @php
                        $receiver = $selectedConversation->getReceiver();
                    @endphp
                    <x-avatar class="h-9 w-9 lg:w-11 lg:h-11" :src="user_image_url($receiver->image ?? null, 'avatar')"/>
                </div>



                <h6 class="font-bold truncate">
                    @php
                        $receiver = $selectedConversation->getReceiver();
                    @endphp
                    @if($receiver)
                        {{$receiver->specialistInfo?->company_name ?? $receiver->name ?? 'Пользователь'}}
                    @else
                        Пользователь
                    @endif
                </h6>

                <!-- Крестик для закрытия -->
                <a class="absolute top-2 right-0 text-gray-500 hover:text-gray-800 transition ease-in-out" href="javascript:history.back();" >

                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>

                </a>

            </div>


        </header>


        {{-- body --}}
        <main
                @scroll="
      scropTop = $el.scrollTop;

      if(scropTop <= 0){

        window.livewire.emit('loadMore');

      }

     "

                @update-chat-height.window="

         newHeight= $el.scrollHeight;

         oldHeight= height;
         $el.scrollTop= newHeight- oldHeight;

         height=newHeight;

     "
                id="conversation"  class="flex flex-col gap-3 p-2.5  flex-grow overscroll-contain overflow-x-hidden w-full my-auto chat-conversation-main">

            @if ($loadedMessages)

                @php
                    $previousMessage= null;
                    $previousMessageDate = null;
                @endphp


                @foreach ($loadedMessages as $key=> $message)

                    @php
                        $currentMessageDate = $message->created_at->format('Y-m-d'); // Дата текущего сообщения в формате "ГГГГ-ММ-ДД"
                    @endphp

                            <!-- Если дата текущего сообщения отличается от даты предыдущего -->
                    @if ($previousMessageDate !== $currentMessageDate)
                        <div class="text-center text-gray-500 text-xs my-4">
                            {{$message->created_at->translatedFormat('d F Y')}} <!-- Выводим дату, например: 24 ноября 2024 -->
                        </div>
                    @endif

                    <!-- Сохраняем текущую дату как предыдущую -->
                    @php
                        $previousMessageDate = $currentMessageDate;
                    @endphp

                    {{-- keep track of the previous message --}}

                    @if ($key>0)

                        @php
                            $previousMessage= $loadedMessages->get($key-1)
                        @endphp

                    @endif


                    <div
                            wire:key="{{time().$key}}"
                            @class([
                                'max-w-[85%] md:max-w-[78%] flex w-auto gap-2 relative mt-2',
                                'ml-auto'=>$message->sender_id=== auth()->id(),
                                    ]) >

                        {{-- avatar --}}

                        <div @class([
                    'shrink-0',
                    'invisible'=>$previousMessage?->sender_id==$message->sender_id,
                    'hidden'=>$message->sender_id === auth()->id()
                        ])>
                            <x-avatar class="h-9 w-9 lg:w-11 lg:h-11" :src="user_image_url($message->sender->image ?? null, 'avatar')"/>
                        </div>
                        {{-- messsage body --}}

                        <div @class(['flex flex-wrap text-[15px]  rounded-xl p-2.5 flex flex-col text-black bg-[#f6f6f8fb]',
                         'rounded-bl-none border  border-gray-200/40 '=>!($message->sender_id=== auth()->id()),
                         'rounded-br-none bg-custom-green text-white'=>$message->sender_id=== auth()->id()
               ])>


                            <p class="whitespace-normal truncate text-sm md:text-base tracking-wide lg:tracking-normal">
                                {{$message->body}}
                            </p>


                            <div class="ml-auto flex gap-2">

                                <p @class([
                    'text-xs ',
                    'text-gray-500'=>!($message->sender_id=== auth()->id()),
                    'text-white'=>$message->sender_id=== auth()->id(),

                        ]) >


                                    {{$message->created_at->translatedFormat('H:i')}}

                                </p>


                                {{-- message status , only show if message belongs auth --}}

                                @if ($message->sender_id=== auth()->id())

                                    <div>
                                        @if($message->read_at != null)
                                            {{-- double ticks - сообщение прочитано --}}
                                            <span class="text-gray-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                                                    <path d="M11.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L4.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                                                </svg>
                                            </span>
                                        @else
                                            {{-- single tick - сообщение отправлено, но не прочитано --}}
                                            <span class="text-gray-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                                                </svg>
                                            </span>
                                        @endif
                                    </div>
                                @endif



                            </div>

                        </div>







                    </div>

                @endforeach
            @endif

        </main>



        {{-- send message  --}}

        <footer class="shrink-0 z-10 bg-white inset-x-0">

            <div class=" p-2 border-t">

                <form
                        wire:submit.prevent="sendMessage"
                        method="POST" autocapitalize="off">
                    @csrf

                    <input type="hidden" autocomplete="false" style="display:none">

                    <div class="grid grid-cols-12">
                        <input
                                wire:model.defer="body"
                                type="text"
                                autocomplete="off"
                                autofocus
                                placeholder="Напиши что нибудь..."
                                maxlength="1700"
                                class="col-span-10 bg-gray-100 border-0 outline-0 focus:border-0 focus:ring-0 hover:ring-0 rounded-lg  focus:outline-none"
                        >

                        <button class="col-span-2" style="border: 1px solid #217b00;border-radius: 16px;margin-left: 10px;" type='submit'>Отправить</button>

                    </div>

                </form>

                @error('body')

                <p> {{$message}} </p>

                @enderror

            </div>





        </footer>

    </div>

</div>