@extends('admin.layout.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('admin') }}/assets/vendor/css/pages/app-chat.css">
@endsection

@section('scripts')
    <script src="{{ asset('admin') }}/assets/js/app-chat.js"></script>
    <script>
        $(document).ready(function() {
            let chatBox = $(".chat-history-body ul.chat-history");

            // إرسال الرسالة عبر Ajax
            $('.form-send-message').submit(function(e) {
                e.preventDefault(); // منع الإرسال العادي

                let form = $(this);
                let url = form.attr('action');
                let formData = form.serialize();
                form[0].reset();
                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    dataType: "json",
                    success: function(response) {
                        console.log(response)
                        if (response.success) {
                            // إضافة الرسالة إلى قائمة الدردشة مباشرة
                            let newMessage = `
                        <li class="chat-message chat-message-right">
                            <div class="overflow-hidden d-flex">
                                <div class="chat-message-wrapper flex-grow-1">
                                    <div class="chat-message-text">
                                        <p class="mb-0">${response.data.message}</p>
                                    </div>
                                    <div class="mt-1 text-end text-muted">
                                        <i class="ti ti-checks ti-16px text-success me-1"></i>
                                        <small>الآن</small>
                                    </div>
                                </div>
                                <div class="flex-shrink-0 user-avatar ms-4">
                                    <div class="avatar avatar-sm">
                                        <img src="{{ asset('storage/images/upload/settings/default.png') }}" alt="Avatar"
                                            class="rounded-circle">
                                    </div>
                                </div>
                            </div>
                        </li>
                    `;
                            chatBox.append(newMessage);

                            $('.chat-history-body').animate({
                                    scrollTop: $('.chat-history-body')[0].scrollHeight
                                },
                                2000
                            );

                            // تحديث ترتيب الدردشات في القائمة
                            const chatList = document.getElementById("chat-list");



                            // البحث عن الدردشة التي تحتوي على الرسالة الجديدة في القائمة
                            const chatItem = chatList.querySelector(
                                `.chat-contact-list-item[data-chat-id="${response.data.order_id}"]`);

                            const firstChatItem = chatList.firstElementChild;


                            if (chatItem) {
                                if (firstChatItem) {
                                    chatList.insertBefore(chatItem, firstChatItem.nextSibling);
                                } else {
                                    // إذا لم يوجد أي عناصر في القائمة، نضيف العنصر كأول عنصر
                                    chatList.appendChild(chatItem);
                                }
                            }
                        } 
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = "حدث خطأ:\n";
                        $.each(errors, function(key, value) {
                            errorMessage += value[0] + "\n";
                        });
                    }
                });
            });
        });
    </script>

    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        var chat_id = {{ $order->id }};
        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = false;

        var pusher = new Pusher('4553f8afdc79c50c4fb5', {
            cluster: 'eu'
        });

        var channel = pusher.subscribe('adminChat');
        channel.bind('chat-message-admin', function(data) {
            if (data.order_id == chat_id) {

                const chatHistory = document.querySelector(".chat-history");

                // إنشاء عنصر <li> جديد للرسالة
                const messageLi = document.createElement("li");
                messageLi.classList.add("chat-message");

                // محتوى الرسالة بنفس التنسيق المطلوب
                messageLi.innerHTML = `
                    <div class="overflow-hidden d-flex">
                        <div class="flex-shrink-0 user-avatar me-4">
                            <div class="avatar avatar-sm">
                                <img src="${data.user.image}" alt="Avatar" class="rounded-circle">
                            </div>
                        </div>
                        <div class="chat-message-wrapper flex-grow-1">
                            <div class="chat-message-text">
                                <p class="mb-0">${data.message}</p>
                            </div>
                            <div class="mt-1 text-muted">
                                <small>${data.diffrent}</small>
                            </div>
                        </div>
                    </div>
                `;

                // إضافة الرسالة إلى الـ chat-history
                chatHistory.appendChild(messageLi);

                // التمرير لأسفل تلقائيًا عند إضافة رسالة جديدة
                $('.chat-history-body').animate({
                        scrollTop: $('.chat-history-body')[0].scrollHeight
                    },
                    2000
                );
            }

            // تحديث ترتيب الدردشات في القائمة
            const chatList = document.getElementById("chat-list");



            // البحث عن الدردشة التي تحتوي على الرسالة الجديدة في القائمة
            const chatItem = chatList.querySelector(`.chat-contact-list-item[data-chat-id="${data.order_id}"]`);

            const firstChatItem = chatList.firstElementChild;


            if (chatItem) {
                if (firstChatItem) {
                    chatList.insertBefore(chatItem, firstChatItem.nextSibling);
                } else {
                    // إذا لم يوجد أي عناصر في القائمة، نضيف العنصر كأول عنصر
                    chatList.appendChild(chatItem);
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">


        <div class="overflow-hidden app-chat card">
            <div class="row g-0">

                <!-- Chat & Contacts -->
                <div class="flex-grow-0 overflow-hidden col app-chat-contacts app-sidebar border-end" id="app-chat-contacts">

                    <div class="sidebar-body ps ps--active-y">

                        <!-- Chats -->
                        <ul class="py-2 mb-0 list-unstyled chat-contact-list" id="chat-list">
                            <li class="mt-0 chat-contact-list-item chat-contact-list-item-title">
                                <h5 class="mb-0 text-primary">{{ __('admin.chats') }}</h5>
                            </li>
                            @if ($chats->count() == 0)
                                <li class="chat-contact-list-item chat-list-item-0 d-none">
                                    <h6 class="mb-0 text-muted">{{ __('admin.not_chat_found') }}</h6>
                                </li>
                            @else
                                @foreach ($chats as $chat)
                                    <li class="mb-1 chat-contact-list-item {{ $chat->id == $order->id ? 'active' : '' }}"
                                        data-chat-id="{{ $chat->id }}">
                                        <a class="d-flex align-items-center"
                                            href="{{ route('admin.chat.message', $chat->id) }}">
                                            <div class="flex-shrink-0 avatar avatar-online">
                                                <img src="{{ $chat->user->image }}" alt="Avatar" class="rounded-circle">
                                            </div>
                                            <div class="chat-contact-info flex-grow-1 ms-4">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <h6 class="m-0 chat-contact-name text-truncate fw-normal">
                                                        {{ $chat->user->name . ' ' . __('admin.from_order') . ' #' . $chat->id }}
                                                    </h6>
                                                    <small
                                                        class="text-muted">{{ $chat->messages->first()->created_at->diffForHumans() }}</small>
                                                </div>
                                                <small
                                                    class="chat-contact-status text-truncate">{{ $chat->messages->first()->message }}</small>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                        </div>
                        <div class="ps__rail-y" style="top: 0px; height: 480px; right: 0px;">
                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 228px;"></div>
                        </div>
                    </div>
                </div>
                <!-- /Chat contacts -->

                <!-- Chat History -->
                <div class="col app-chat-history">
                    <div class="chat-history-wrapper">
                        <div class="chat-history-header border-bottom">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="overflow-hidden d-flex align-items-center">
                                    <i class="cursor-pointer ti ti-menu-2 ti-lg d-lg-none d-block me-4"
                                        data-bs-toggle="sidebar" data-overlay="" data-target="#app-chat-contacts"></i>
                                    <div class="flex-shrink-0 avatar avatar-online">
                                        <img src="{{ $user->image }}" alt="Avatar" class="rounded-circle"
                                            data-bs-toggle="sidebar" data-overlay="" data-target="#app-chat-sidebar-right">
                                    </div>
                                    <div class="chat-contact-info flex-grow-1 ms-4">
                                        <h6 class="m-0 fw-normal">{{ $user->name }}</h6>
                                        <a href="{{ route('admin.order.show',$order->id) }}"><small class="text-mute">{{  __('admin.from_order') . ' #' . $chat->id }}</small></a>
                                    </div>
                                    
                                </div>
                                <div class="d-flex align-items-center">
                                  
                                        <a href='{{ route('admin.order.show',$order->id) }}' class="btn btn-primary">{{ __('order') }}</a>
                                </div>

                            </div>
                        </div>
                        <div class="chat-history-body ps ps--active-y">
                            <ul class="list-unstyled chat-history">
                                @foreach ($messages as $message)
                                    @if ($message->user_send == 0)
                                        <li class="chat-message chat-message-right">
                                            <div class="overflow-hidden d-flex">
                                                <div class="chat-message-wrapper flex-grow-1">
                                                    <div class="chat-message-text">
                                                        <p class="mb-0">{{ $message->message }}</p>
                                                    </div>
                                                    <div class="mt-1 text-end text-muted">
                                                        <i class="ti ti-checks ti-16px text-success me-1"></i>
                                                        <small>{{ $message->created_at->diffForHumans() }}</small>
                                                    </div>
                                                </div>
                                                <div class="flex-shrink-0 user-avatar ms-4">
                                                    <div class="avatar avatar-sm">
                                                        <img src="{{ asset('storage/images/upload/settings/default.png') }}"
                                                            alt="Avatar" class="rounded-circle">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @else
                                        <li class="chat-message">
                                            <div class="overflow-hidden d-flex">
                                                <div class="flex-shrink-0 user-avatar me-4">
                                                    <div class="avatar avatar-sm">
                                                        <img src="{{ $user->image }}" alt="Avatar"
                                                            class="rounded-circle">
                                                    </div>
                                                </div>
                                                <div class="chat-message-wrapper flex-grow-1">
                                                    <div class="chat-message-text">
                                                        <p class="mb-0">{{ $message->message }}</p>
                                                    </div>
                                                    <div class="mt-1 text-muted">
                                                        <small>{{ $message->created_at->diffForHumans() }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                @endforeach

                            </ul>
                        </div>
                        <!-- Chat message form -->
                        <div class="shadow-xs chat-history-footer">
                            <form method="post" action="{{ route('admin.chat.send') }}"
                                class="form-send-message d-flex justify-content-between align-items-center ">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                <input type="hidden" name="order_id" value="{{ $order->id }}">
                                <input class="border-0 shadow-none form-control me-4" type="text" name="message"
                                    placeholder="Type your message here...">
                                <div class="message-actions d-flex align-items-center">
                                    <button class="btn btn-primary d-flex waves-effect waves-light">
                                        <i class="ti ti-send ti-16px ms-md-2 ms-0"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /Chat History -->

                <div class="app-overlay"></div>
            </div>
        </div>


    </div>
@endsection