@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 src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        // 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) {
            // تحديث ترتيب الدردشات في القائمة
            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"
                                        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 h-100 d-flex align-items-center justify-content-center">
                    <p class="m-0 text-center">
                        {{ __('admin.select_chat') }}
                    </p>
                </div>
            </div>


            <!-- /Chat History -->

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


    </div>
@endsection