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>
    <div>
        <nav aria-label="breadcrumb" class="d-none d-lg-block">
            <ol class="breadcrumb bg-transparent p-0 justify-content-end">
                <li class="breadcrumb-item text-capitalize"><a href="/admin/dashboard">Admin</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="/admin/ticket">tickets</a></li>
                <li class="breadcrumb-item text-capitalize active" aria-current="page">Chat</li>
            </ol>
        </nav>
        <div class="main bg-white mt-2 rounded-lg shadow-sm col-lg-8">
            <div class="" style="height: 68vh; overflow-y: auto;">
                <div class="chat-log" id="chat-log">
                    <div id="chat-messages">
                        <div class="chat-log__item client"><h3 class="chat-log__author">{{ $ticket->client->firstname ?? null }} {{ $ticket->client->lastname ?? null }}<small class="small-date"> {{ Carbon\Carbon::parse($ticket->created_at)->format('d.m.Y h:i') }} </small></h3>
                            <div class="chat-log__message"><p>{{ $ticket->content }}</p>
                        </div>
                    </div>
                    </div>
                    <div>
                        <div class="input-group mb-3" style="justify-content: space-between">
                            <a class="btn btn-info" onclick="javascript:history.back()">Back</a>
                            <form id="messageForm" style="display: inherit">
                                <input type="text" id="message-content" class="form-control rounded-lg bg-gray-100 text-black p-2" placeholder="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>
                            </form>
                        </div>
                    </div>
                </div>
            </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: "/admin/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>');
                    }
                });
                $("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
                console.log(res);
            }
        });

        setInterval(function(){
            $('#chat-messages').empty();
            $.ajax({
                url: "/admin/ticket-messages?ticket_id="+id,
                type: 'GET',
                dataType: 'json', // added data type
                success: function(res) {
                    $('#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">{{ Carbon\Carbon::parse($ticket->created_at)->format("d.m.Y h:i") }}</small></h3><div class="chat-log__message"><p>{{ $ticket->content }}</p></div></div>');
                    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": "/admin/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