@extends('layouts.app')
@push('style')
@endpush
@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        Chat List
                    </h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Chat Management</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Chats</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Layout-->
                <div class="d-flex flex-column flex-lg-row">
                    <!--begin::Sidebar-->
                    <div class="flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10 mb-lg-0">
                        <!--begin::Contacts-->
                        <div class="card card-flush">
                            <!--begin::Card header-->
                            <div class="card-header pt-7" id="kt_chat_contacts_header">
                                <!--begin::Form-->
                                <form class="w-100 position-relative" autocomplete="off">
                                    <!--begin::Icon-->
                                    <span
                                        class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                                rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                            <path
                                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                                fill="currentColor" />
                                        </svg>
                                    </span>
                                    <!--end::Icon-->
                                    <!--begin::Input-->
                                    <input type="text" id="search_user" class="form-control form-control-solid px-15"
                                        name="search" value="" placeholder="Search by username or email..." />
                                    <!--end::Input-->
                                </form>
                                <!--end::Form-->
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-5" id="kt_chat_contacts_body">
                                <input type="hidden" name="user_id" id="user_id">
                                <div class="scroll-y me-n5 pe-5 h-200px h-lg-auto" data-kt-scroll="true"
                                    data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                                    data-kt-scroll-dependencies="#kt_header, #kt_app_header, #kt_toolbar, #kt_app_toolbar, #kt_footer, #kt_app_footer, #kt_chat_contacts_header"
                                    data-kt-scroll-wrappers="#kt_content, #kt_app_content, #kt_chat_contacts_body"
                                    data-kt-scroll-offset="5px">
                                    <!-- Users will be dynamically loaded here -->
                                </div>
                                <!--end::List-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Contacts-->
                    </div>
                    <!--end::Sidebar-->
                    <!--begin::Content-->
                    <div class="flex-lg-row-fluid ms-lg-7 ms-xl-10">
                        <!--begin::Messenger-->
                        <div class="card" id="kt_chat_messenger">
                            <!--begin::Card header-->
                            <div class="card-header" id="kt_chat_messenger_header">
                                <!--begin::Title-->
                                <div class="card-title">
                                    <!--begin::User-->
                                    <div class="d-flex justify-content-center flex-column me-3">
                                        <a href="#"
                                            class="fs-4 fw-bold text-gray-900 text-hover-primary uname me-1 mb-2 lh-1">
                                            Brian Cox
                                        </a>
                                        <!--begin::Info-->
                                        <div class="mb-0 lh-1">
                                            <span class="badge badge-success badge-circle w-10px h-10px me-1"></span>
                                            <span class="fs-7 fw-semibold text-muted">Active</span>
                                        </div>
                                        <!--end::Info-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body" id="kt_chat_messenger_body">
                                <!--begin::Messages-->
                                <div class="scroll-y me-n5 pe-5 h-300px h-lg-auto" data-kt-element="messages"
                                    data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}"
                                    data-kt-scroll-max-height="auto"
                                    data-kt-scroll-dependencies="#kt_header, #kt_app_header, #kt_app_toolbar, #kt_toolbar, #kt_footer, #kt_app_footer, #kt_chat_messenger_header, #kt_chat_messenger_footer"
                                    data-kt-scroll-wrappers="#kt_content, #kt_app_content, #kt_chat_messenger_body"
                                    data-kt-scroll-offset="5px">
                                    <!-- Messages will be dynamically loaded here -->
                                </div>
                                <!--end::Messages-->
                            </div>
                            <!--end::Card body-->
                            <!--begin::Card footer-->
                            <div class="card-footer pt-4" id="kt_chat_messenger_footer">
                                <!--begin::Input-->
                                <textarea class="form-control form-control-flush mb-3" rows="1" data-kt-element="input"
                                    placeholder="Type a message"></textarea>
                                <!--end::Input-->
                                <!--begin:Toolbar-->
                                <div class="d-flex flex-stack">
                                    <!--begin::Actions-->
                                    <div class="d-flex align-items-center me-2">
                                        <!-- You can add actions here if needed -->
                                    </div>
                                    <!--end::Actions-->
                                    <!--begin::Send-->
                                    <button class="btn btn-primary" type="button" data-kt-element="send">Send</button>
                                    <!--end::Send-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Card footer-->
                        </div>
                        <!--end::Messenger-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Layout-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            function scrollToBottom() {
                let chatBody = $('#kt_chat_messenger_body .scroll-y');
                chatBody.scrollTop(chatBody[0].scrollHeight);
            }
            // Fetch user list and the first user's messages on page load
            function loadInitialData() {
                $.ajax({
                    url: '{{ route('chat.users') }}',
                    method: 'GET',
                    success: function(data) {
                        $('#kt_chat_contacts_body .scroll-y').html(data.userListHtml);

                        if (data.firstUserId) {
                            $('#kt_chat_messenger_body .scroll-y').append(data.firstUserMessagesHtml);
                            $('#user_' + data.firstUserId).addClass('active');
                            $('#user_id').val(data.firstUserId); // Set the user ID to hidden input
                            $('.uname').text(data.uname);
                            scrollToBottom();
                        }
                    }
                });
            }

            // Load messages for a selected user
            function loadMessages(userId) {
                $.ajax({
                    url: '{{ route('chat.messages', '') }}/' + userId,
                    method: 'GET',
                    success: function(data) {
                        $('#kt_chat_messenger_body .scroll-y').html(
                            data.data); // Assuming data is the HTML of the messages
                        $('.uname').text(data.user.name);
                        let chatBody = $('#kt_chat_messenger_body .scroll-y');
                        chatBody.scrollTop(chatBody[0].scrollHeight);
                    }
                });
            }

            // Send a message
            $('button[data-kt-element="send"]').on('click', function() {
                let message = $('textarea[data-kt-element="input"]').val();
                let userId = $('#user_id').val();

                $.ajax({
                    url: '{{ route('chat.send') }}',
                    method: 'POST',
                    data: {
                        message: message,
                        receiver_id: userId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        // Append the new message
                        //$('#kt_chat_messenger_body .scroll-y').append(data.html);

                        // Clear the input field
                        $('textarea[data-kt-element="input"]').val('');

                        scrollToBottom();
                        loadInitialData();
                    }
                });
            });

            // Load messages on user click
            $(document).on('click', '.user-item', function() {
                let userId = $(this).data('id');
                $('.user-item').removeClass('active');
                $(this).addClass('active');
                $('#user_id').val(userId); // Set the user ID to hidden input
                loadMessages(userId);
            });

            // Infinite scroll for user list
            $('#kt_chat_contacts_body .scroll-y').on('scroll', function() {
                if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
                    let offset = $('.user-item').length;
                    $.ajax({
                        url: '{{ route('chat.load_more_users') }}',
                        method: 'GET',
                        data: {
                            offset: offset
                        },
                        success: function(data) {
                            $('#kt_chat_contacts_body .scroll-y').append(
                                data); // Assuming data is the HTML of the users list
                        }
                    });
                }
            });

            // Infinite scroll for chat messages
            $('#kt_chat_messenger_body .scroll-y').on('scroll', function() {
                let chatBody = $(this);

                // Check if user has scrolled to the top
                if (chatBody.scrollTop() === 0) {
                    let offset = $('.message-item').length;
                    let userId = $('#user_id').val();

                    // Get the current scroll position
                    let currentScrollTop = chatBody.scrollTop();
                    let currentScrollHeight = chatBody[0].scrollHeight;

                    $.ajax({
                        url: '{{ route('chat.load_more_messages') }}',
                        method: 'GET',
                        data: {
                            offset: offset,
                            user_id: userId
                        },
                        success: function(data) {
                            // Prepend new messages
                            chatBody.prepend(data.html);

                            // Calculate the height difference
                            let newScrollHeight = chatBody[0].scrollHeight;
                            let heightDifference = newScrollHeight - currentScrollHeight;

                            // Restore the scroll position
                            chatBody.scrollTop(currentScrollTop + heightDifference);
                        }
                    });
                }
            });



            // Search users
            $('#search_user').on('input', function() {
                let query = $(this).val();

                $.ajax({
                    url: '{{ route('chat.search_users') }}',
                    method: 'GET',
                    data: {
                        query: query
                    },
                    success: function(data) {
                        $('#kt_chat_contacts_body .scroll-y').html(data.html);

                        // Clear messages if no user is selected
                        $('#kt_chat_messenger_body .scroll-y').html('');
                        $('#user_id').val(''); // Clear the user ID input
                    }
                });
            });

            loadInitialData();

            // Set up an interval to call loadInitialData every 30 seconds
            setInterval(loadInitialData, 30000); 
        });
    </script>
@endpush