birzha-legalizasia/resources/views/admin/messages.blade.php

@extends(backpack_view('blank'))

@section('content')
    <style>
        .page-header {
            margin: 0;
            padding: 20px 0 10px;
            color: #FFFFFF;
            position: fixed;
            z-index: 1
        }

        .chat-log {
            padding: 20px;
            height: auto;
            overflow: auto;
        }

        .small-date{
            font-size: 14px;
            float: right;
        }

        .chat-log__item {
            background: #d5ffd0;
            padding: 15px;
            margin: 0 auto 20px;
            max-width: 50%;
            width: 42%;
            float: left;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
            clear: both;
        }

        @media(max-width:600px){
            .chat-log__item{
                width: 100%;
                max-width: 92%;
            }
        }

        .chat-log__item.admin {
            float: right;
            background: #f0f0ff;
        }

        .chat-form {
            background: #DDDDDD;
            padding: 40px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .chat-log__author {
            margin: 0 auto .5em;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
    <nav aria-label="breadcrumb" class="d-none d-lg-block">
        <ol class="breadcrumb bg-transparent p-0">
            <li class="breadcrumb-item text-capitalize"><a href="{{backpack_url('dashboard')}}">{{ trans('app.last_updates.admin_panel') }}</a></li>
            <li class="breadcrumb-item text-capitalize"><a href="{{backpack_url('ticket')}}">{{ trans('app.ticket.title') }}</a></li>
            <li class="breadcrumb-item text-capitalize active" aria-current="page">{{ trans('app.last_updates.chat') }}</li>
        </ol>
    </nav>
    <div class="main bg-white mt-2 rounded-lg shadow-sm p-0">
        <div class="" style="height: 68vh; overflow-y: auto;">
            <div class="w-100 p-3 bg-success text-white">
                <h5><b>{{ trans('app.last_updates.topic') }}:</b> <span style="font-size: 18px;">{{ $ticket->title }}</span></h5>
                <h5><b>{{ trans('app.ticket.category') }}:</b> <span style="font-size: 18px;">{{ $ticket->category->name ?? 'N/A' }}</span></h5>
            </div>
            <div class="chat-log" id="chat-log">
                <div id="chat-messages">
                </div>
                <form id="messageForm">
                    <div class="input-group mb-3">
                        <input type="text" id="message-content" class="form-control rounded-lg bg-gray-100 text-black p-2" placeholder="{{ trans('app.last_updates.type_here') }}" aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="input-group-text" type="submit"><i class="la la-send"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('after_scripts')
    <script>
        var urlq = new URL(window.location.href);
        var query_string = urlq.search;
        var search_params = new URLSearchParams(query_string);
        var id = search_params.get('ticket_id');
        $.ajax({
            url: "{{backpack_url('ticket-messages')}}?ticket_id="+id,
            type: 'GET',
            dataType: 'json', // added data type
            success: function(res) {
                res.data.forEach(element => {
                    var m = new Date(element.created_at);
                    var dateString = m.getUTCDate() + "." + (m.getUTCMonth()+1) + "." + m.getUTCFullYear() + " " + m.getUTCHours() + ":" + m.getUTCMinutes();
                    if(element.is_client === 1){
                        $('#chat-messages').append('<div class="chat-log__item client"><h3 class="chat-log__author">{{ $ticket->account->profile->name }} <small class="small-date">' + dateString + '</small></h3><div class="chat-log__message"><p>' + element.content + '</p></div></div>');
                    }
                    else{
                        $('#chat-messages').append('<div class="chat-log__item admin bg-gray-200"><h3 class="chat-log__author">{{backpack_user()->name}} <small class="small-date">' + dateString + '</small></h3><div class="chat-log__message">' + element.content + '</div></div>');
                    }
                });
                $("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
                console.log(res);
            }
        });

        setInterval(function(){
            $('#chat-messages').empty();
            $.ajax({
                url: "{{backpack_url('ticket-messages')}}?ticket_id="+id,
                type: 'GET',
                dataType: 'json', // added data type
                success: function(res) {
                    res.data.forEach(element => {
                        var m = new Date(element.created_at);
                        var dateString = m.getUTCDate() + "." + (m.getUTCMonth()+1) + "." + m.getUTCFullYear() + " " + m.getUTCHours() + ":" + m.getUTCMinutes();
                        if(element.is_client === 1){
                            $('#chat-messages').append('<div class="chat-log__item client"><h3 class="chat-log__author">{{ $ticket->client->firstname ?? null }} {{ $ticket->client->lastname ?? null }}<small class="small-date">' + dateString + '</small></h3><div class="chat-log__message"><p>' + element.content + '</p></div></div>');
                        }
                        else{
                            $('#chat-messages').append('<div class="chat-log__item admin bg-gray-200"><h3 class="chat-log__author">{{backpack_user()->name}} <small class="small-date">' + dateString + '</small></h3><div class="chat-log__message">' + element.content + '</div></div>');
                        }
                    });
                    console.log(res);
                }
            })
        }, 30000);

        $('#messageForm').on('submit', function(e){
            e.preventDefault();
            var settings = {
            "url": "{{backpack_url('post-message-admin')}}",
            "method": "POST",
            "headers": {
                "Content-Type": "application/json"
            },
            "data": JSON.stringify({
                    content: $('#message-content').val(),
                    ticket_id: id,
                    status_id: 1,
                    admin_id: {{backpack_user()->getAttribute('id')}}
                }),
            };

            $.ajax(settings).done(function (response) {
                var m = new Date(response.data.created_at);
                var dateString = m.getUTCDate() + "." + (m.getUTCMonth()+1) + "." + m.getUTCFullYear() + " " + m.getUTCHours() + ":" + m.getUTCMinutes();
                $('#chat-messages').append('<div class="chat-log__item admin bg-gray-200"><h3 class="chat-log__author">{{backpack_user()->name}} <small class="small-date">' + dateString + '</small></h3><div class="chat-log__message">' + response.data.content + '</div></div>');
                $('#message-content').val('');
            });

        });
    </script>
@endsection