@extends('main-site.layouts.app')
@section('style')
    <style>
        .div-container {
            width: 100%;
            /* أو الحجم الذي ترغب فيه */
            height: 100%;
            /* أو الحجم الذي ترغب فيه */
        }

        .div-container img {
            object-fit: cover;
            /* تجعل الصورة تغطي الحاوية بشكل كامل مع الحفاظ على النسب */
            width: 100%;
            height: 100%;
        }
    </style>
@endsection
@section('content')
    <!-- Chat Section -->
    <div class="chat-area">
        <div class="row">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="chatlist">
                    <div class="chatlist-head border-bottom">
                        <p class="mb-0">{{__("site.Chat.Chat_1")}}</p>
                    </div>
                    <div class="chatlist-body scrollable" onscroll="">
                        <div class="main-form mb-3">
                            <input type="text" id="search_chat" name="search" value="{{ old('search', request('search')) }}" class="form-control" placeholder="{{ __("messages.Search") }}">
                        </div>
                        <ul class="chatlist-ul" id="chatlist-ulusers">



                            {!! $list_chat_html !!}
                            {{-- @foreach ($chats as $chat)
                                <li class="chatlist-item">
                                    <a data-url="{{ route('site.chat.messages', $chat->id) }}" href="javascript:void(0);"
                                        data-id="{{ $chat->id }}" class="d-flex align-items-center gap-2 fetch-msg">
                                        <input hidden id="fetched-{{ $chat->id }}" name="fetched" value="0">
                                        <div class="msg-img"><img
                                                src="@if ($chat->user_1 == auth()->id()) {{ $chat->user_data_2->account_information?->logo ? asset($chat->user_data_2->account_information->logo) : asset('main-site/assets/img/msg1.png') }}
                                                @else
                                                        {{ $chat->user_data_1->account_information?->logo ? asset($chat->user_data_1->account_information->logo) : asset('main-site/assets/img/msg1.png') }} @endif">
                                        </div>
                                        <div class="msg-info">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <p class="mb-0 dark-color sm-text">
                                                    {{ $chat->user_1 == auth()->id() ? $chat->user_data_2->name : $chat->user_data_1->name }}
                                                </p>
                                                <small
                                                    class="dark-color opacity-80">{{ $chat->last_message->created_at_format }}</small>
                                            </div>
                                            <p class="msg-info-text dark-color opacity-60 mb-0 sm-text">
                                                {{ $chat->last_message->message }}</p>
                                        </div>
                                    </a>
                                </li>
                                @endforeach

                                <input hidden value="" class="last_chat">
                            @if ($next_page)
                                <li class="dropdown-menu-footer border-top" id="next_page_list">
                                    <a href="{{ $next_page }}"
                                        class="dropdown-item d-flex justify-content-center text-primary p-2 h-px-40 mb-1 align-items-center"
                                        id="view-all-list">
                                        {{ __('messages.view More') }}
                                    </a>
                                </li>
                            @endif --}}
                        </ul>

                        <ul id="boxbtnmore">
                            {!! $bnt_more !!}
                        </ul>



                    </div>
                </div>
            </div>

            <div class="col-lg-8">

                <div class="chatbox d-none">
                    <div class="msg chatbox-head d-flex align-items-center gap-35 border-bottom">
                        {{-- <img src="../assets/img/msg1.png">
                        <span class="dark-color small-text">أرامكو السعودية</span> --}}
                    </div>
                    <div class="chatbox-body scrollable" onscroll="">
                        <div class="msgs-wrapper">


                        </div>
                    </div>

                    <form class="form-send-message" method="POST" action="{{ route('site.chat.send') }}">
                        @csrf
                        <div class="chatbox-footer d-flex align-items-center gap-4">
                            <label class="fs-5 attach-file cursor-pointer" for="attach-file">
                                <i class="icon-plus"></i>
                                <input type="file" name="attach" id="attach-file" class="d-none">
                            </label>

                            <input type="hidden" id='form_chat_id' name="chat_id" value="">
                            <div class="send-msg">
                                <input type="text" name="message" class="form-control message-send"
                                    placeholder="{{ __("site.Chat.Chat_2") }}">
                                <button type="submit" class="send-btn">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_402_9398)">
                                            <path
                                                d="M18.5033 16.0644L4.51555 16.0644M18.5033 16.0644L20.7286 9.38841C20.7616 9.29964 20.7684 9.20327 20.7482 9.11076C20.728 9.01824 20.6817 8.93346 20.6147 8.8665C20.5477 8.79954 20.463 8.75321 20.3704 8.73302C20.2779 8.71283 20.1816 8.71963 20.0928 8.75261L4.51555 16.0644M18.5033 16.0644L20.7286 22.7403C20.7616 22.8291 20.7684 22.9255 20.7482 23.018C20.728 23.1105 20.6817 23.1953 20.6147 23.2622C20.5477 23.3292 20.463 23.3755 20.3704 23.3957C20.2779 23.4159 20.1816 23.4091 20.0928 23.3761L4.51555 16.0644"
                                                stroke="#FEFEFE" stroke-width="1.79833" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_402_9398">
                                                <rect width="21.58" height="21.58" fill="white"
                                                    transform="translate(15.9609 31.3242) rotate(-135)" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" value="" id="next_page_url" name="next_page_url">
    {{-- @dd($chats->nextPageUrl()) --}}

    <!-- Modal -->
    <div class="def-modal modal fade" id="modal_image" tabindex="-1" aria-labelledby="addUserLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg  modal-dialog-centered">
            <div class="modal-content border-0">
                <div class="modal-body p-0">
                    <div class="div-container">
                        <img id="attach-file-preview" src="{{ asset('assets/img/logo.png') }}">
                    </div>
                    <div class="mesg_alert_ext" style="display: none">
                        <div class="alert alert-danger" role="alert">
                            <h4 class="alert-heading">Warning!</h4>
                            <p>الامتدادات المسموح بها هي: pdf, docx, jpeg, png, jpg</p>
                            <hr>
                            <p class="mb-0">Allowed file extensions are: pdf, docx, jpeg, png, jpg</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-0 mt-45">
                    <button type="button" id="cancel_send_file" class="main-btn outline"
                        data-bs-dismiss="modal">{{ __("messages.Cancel") }}</button>
                    <button type="submit" id="confirm_send_file" class="main-btn text-center ">{{ __("messages.ADD NEW ") }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')

    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        Pusher.logToConsole = true;

        var pusher = new Pusher("{{ App\Http\Helpers\HelperSetting::get_value('realtime_pusher_app_key') }}", {
            cluster: "{{ App\Http\Helpers\HelperSetting::get_value('realtime_pusher_app_cluster') }}"
        });
    </script>
    @include('main-site.chat.inc.script')
    @include('main-site.chat.inc.preview')
    @include('main-site.chat.inc.list_scroll')
@endsection