@extends('Common::admin.layout.index')

@section('page')
    <style>
        .card-body {
            padding: 0 !important;
        }

        /* width */
        .chat_content__::-webkit-scrollbar {
            width: 8px;
        }

        /* Track */
        .chat_content__::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */
        .chat_content__::-webkit-scrollbar-thumb {
            background: #343a40;
        }

        /* Handle on hover */
        .chat_content__::-webkit-scrollbar-thumb:hover {
            background: #343a40;
        }

        .message__ {
            width: 50%;

        @media only screen and (max-width: 767px) {
            width:

        100%;
        }

        }
        .received {
            /* Set styles for received messages */
            text-align: left;
            margin-inline-start: auto;

        .text_wrapper__ {
            border-radius: 0 18px 18px 18px !important;
            background-color: #343a40;
            color: #fff;
        }

        .received_user_info__,
        img {
            margin-inline-start: auto;
        }

        .symbol-circle {
            order: 2;
            margin-inline-end: 0;
            margin-inline-start: 15px;
        }

        }

        .sent {
            /* Set styles for sent messages */

            text-align: right;
        }

        .form-control {
            resize: none;
            padding: 10px 25px;
            border-radius: 30px;
        }

        textarea::-webkit-scrollbar {
            display: none;
            resize: none;
            padding: 10px 25px;
        }

        .chat_file_label {
            cursor: pointer;
            filter: grayscale(1);
        }

        .send_button__ {
            background-color: #343a40;
            padding: 12px 55px !important;
            border-radius: 30px;
            color: #fff;
        }

        .send_button__:hover {
            background-color: rgba(52, 58, 64, 0.9);
        }
    </style>
    <!-- row -->
    @include("Chats::admin.chat")
    <!-- Message Modal -->
    <!-- Include the jQuery library -->


@stop
@push('js')

    <!-- Include the Pusher library after jQuery -->
    <script>
        chatScrollDirectionDown()
        $('#formChat').submit(function () {
            sendMessage($(this));
            return false;

        });

        function sendMessage(form) {
            var inputData = new FormData(form[0]);
            var order = `{{ (string) @$order->id }}`;
            var url = "{{ route('admin.send_message', ['orderId' => ':orderId']) }}";
            url = url.replace(':orderId', order);
            $.ajax({
                url: url,
                type: 'Post',
                processData: false,
                contentType: false, // Using FormData, no need to process data.
                data: inputData,
                success: function (res) {
                    $('.chat_content__').append(res.data.html);
                    $('#formChat')[0].reset();
                    chatScrollDirectionDown();
                }
            }).fail(function (res) {
                $('#error_message').html(res.responseJSON.message);
                $('#error_message').removeClass('d-none');
                $('#message').val('');
                return false;
            });
            return false;
        }

        function chatScrollDirectionDown() {
            let messageBody = document.querySelector("#chatContainer");
            if (!messageBody) {
                return;
            }
            messageBody.scrollTop = messageBody.scrollHeight;
        }
    </script>
    <script type="module">
        document.onreadystatechange = function () {
            if (document.readyState === 'complete') {
                @if(@$order)
                var channel = 'Order-{{$order->id}}';
                var listener = '.OrderChat';
                @endif
                Echo.private(channel)
                    .listen(listener, (data) => {
                        console.log(data);
                        var messageHtml = `<img src="${data.file}" style="max-height: 200px;max-width: 200px">`;
                        if (data.message) {
                            messageHtml = ` <div class="text_wrapper__" style="padding: 15px 25px; font-size: 14px; font-weight: 500; width: 100%;border: 1px solid #343a40; border-radius: 18px 0 18px 18px;">${data.message}</div>`
                        }
                        var messageBox = `<!--begin::Message(in)-->
    <div class="d-flex justify-content-start mb-10">
        <!--begin::Wrapper-->
        <div class="p-2 d-flex flex-column align-items-start received">
            <!--begin::User-->
           <div class="d-flex align-items-center mb-3 received_user_info__">
                <!--begin::Avatar-->
                 <div class="symbol symbol-35px symbol-circle" style="margin-inline-end: 15px;">

            <img alt="Pic" alt="Pic" style="height: 56px;width: 56px;flex-shrink: 0;" src="${data.from.image}" />

            </div>
            <!--end::Avatar-->
            <!--begin::Details-->
            <div class="ms-3">
                <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary me-1" style="color: #000;font-size: 16px;font-weight: 700;"> ${data.from.name}
            </a>
            <span class="text-muted fs-7 mb-1">${data.created_at}</span>
                </div>
                <!--end::Details-->
            </div>
            <!--end::User-->
            <!--begin::Text-->

            ${messageHtml}

            <!--end::Text-->
        </div>
        <!--end::Wrapper-->
    </div>
`;
                        if (data.from.id != {{ auth('admin')->user()->id }}) {

                            $('.chat_content__').append(messageBox);
                            chatScrollDirectionDown()
                        }
                        // $('#chatContainer').append(data);
                    });
            }
        }

    </script>
@endpush