@if($chat)
    <div class="chat_content_head__">
        <div class="card_head__">
            <div class="img_wrapper__">
                                <figure class="figure__ asp-om">
                                    <img class="img-om"src="@if($chat->from_id == auth()->id()){{ $chat->to->image }} @else{{ $chat->from->image }}@endif"  alt="" />
                                </figure>
                            </div>
            <div class="info__">
                <h3 class="name__">@if($chat->from_id == auth()->id() ) {{ $chat->to->name }} @else {{ $chat->from->name }} @endif</h3>
                <div class="time__">
                    <img src="{{ url('assets/site/assets/images/shapes/time_icon2.svg') }} " alt="" />
                   {{ $chat->updated_at->diffForHumans() }}
                </div>
            </div>
        </div>
        <div class="info_wrapper">
            <div class="person_info">
                <img class="icon__" src="{{ url('assets/site/assets/images/shapes/person_info_age.svg') }}" alt="" />
                {{ $chat->to->age }} {{ __("Years Old") }}
            </div>
            <div class="person_info">
                <img class="icon__"
                src="{{ $chat->to->nationality?->image ? $chat->to->nationality?->image :  url('assets/site/assets/images/shapes/person_info_flag.svg') }}" 
                style="width: 20px; height: 20px;"
                alt="" />
                {{ __("Nationality")}} {{ $chat->to->nationality?->title }}
            </div>
            <div class="person_info">
                <img class="icon__"
                 src="{{ url('assets/site/assets/images/shapes/person_info_state.svg') }}" alt="" />
                {{ __($chat->to->familySitation?->title ) }}
            </div>
            <div class="person_info">
            <img class="icon__"
            src="{{ url('assets/site/assets/images/shapes/person_info_location.svg')}}" alt="" />
                {{ __("Residing in")}}  {{ $chat->to->country?->name }}
            </div>
        </div>
        <button type="button" data-id="{{ $chat->id }}" onclick="deleteChat({{ $chat->id }})" class="button__ full_width_xs red__ main_rounded__ chat_delete__">
            <img class="icon__"
             src="{{ url('assets/site/assets/images/shapes/delete_chat.svg')}}" alt="" />
            <span class="text__">{{ __("Delete") }}</span>
        </button>
    </div>
    <div class="chat_content_body__">
       
        <div class="messages_wrapper__ content_scroll_y">

            @forelse($messages as $message)
           
            <div class="message__ {{ $message->from_id == auth()->id() ? 'sender__' : 'recipient__' }}">
                <div class="message_content__">{{ $message->message }}</div>
                <div class="time__">{{ $message->updated_at?->format('h:i A') }}</div>
            </div>
            @empty
            <div class="no_messages__">
                <p>{{ __("Start your conversation now") }}</p>
            </div>
            @endforelse
        </div>
        <div class="chat_form__">
            <form class="chatForm" onsubmit="submitForm(event)"
            data-id="{{ $chat->id }}" >
                <div class="input_wrapper__">

                    <input type="text" required name="message" class="chat_input__" placeholder="{{ __('Enter your message') }}" />
                    <button class="button__ chat_button__ primary__ main_rounded__" type="submit"  >
                        <img class="icon__"
                        src="{{ url('assets/site/assets/images/shapes/send_button.svg') }}" alt="" />
                        <span class="text__">{{ __("Send") }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endif