@extends('layouts.app')
@section('content')
    <style>
        /* Chat Box CSS:START */

        .messageSec {
            display: flex;
            box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
            border-radius: 15px;
            overflow: hidden;
            background: #fff;
            position: sticky;
            top: 2rem;
            height: calc(100vh - 60px);
        }

        .messageSec .friendsRow .searchBox {
            height: 60px;
            border-bottom: 1px solid var(--theme-color);
        }

        .messageSec .friendsRow {
            background: #59595C;
            flex: 0 0 25%;
            width: 25%;
        }

        .messageSec .friendsRow .searchBox input {
            height: 100%;
            width: 100%;
            background: none;
            border: none !important;
            outline: none !important;
            padding-inline: 1rem;
            color: #fff;
        }

        .messageSec .friendsRow .searchBox input::placeholder {
            color: #fff;
        }

        .messageSec .friendsRow .filter {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: 13px 0;
        }

        .messageSec .friendsRow .filter a {
            color: #fff;
            font-size: 0.75rem;
        }

        .messageSec .friendsRow .filter a.active {
            text-decoration: underline !important;
        }

        .messageSec .friendsRow .friends {
            display: flex;
            flex-direction: column;
            height: 650px;
            overflow: auto;
        }

        .messageSec .friendsRow .friends li a {
            display: flex;
            align-items: center;
            padding: 1rem;
            gap: 0.5rem;
            color: #fff;
        }

        .messageSec .friendsRow .friends li a.active {
            background: var(--theme-color);
        }

        .messageSec .friendsRow .friends li a .img img {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 100%;
        }

        .messageSec .friendsRow .friends li a .content {
            display: flex;
            flex-direction: column;
            background: none;
            padding: 0;
            border-radius: 0;
        }

        .messageSec .friendsRow .friends li a .content .name {
            font-size: 0.875rem;
        }

        .messageSec .friendsRow .friends li a .content .status {
            font-size: 0.65rem;
        }

        .messageSec .chatBox .chatHead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
            padding: 0 2rem;
        }

        .messageSec .chatBox {
            /*flex: 0 0 75%;*/
            width: 100%;
            position: relative;
        }

        .messageSec .friendsRow .friends li + li {
            border-top: 1px solid #707070;
        }

        .messageSec .chatBox .chatHead h3 {
            margin: 0;
            font-size: 1.125rem;
        }

        .messageSec .chatBox .chatHead span {
            font-size: 0.75rem;
            color: #ADADAD;
        }

        .messageSec .chatBox .chatBody {
            padding: 2.5rem 2rem;
            overflow: auto;
            border-block: 1px solid #BEBEBE;
            height: calc(100vh - 180px);
        }

        .messageSec .chatBox .chatBody .messageBody {
            display: flex;
            align-items: start;
            gap: 0.5rem;
        }

        .messageSec .chatBox .chatBody .messageBody .content {
            background: none;
            border-radius: 0;
            padding: 0;
        }

        .messageSec .chatBox .chatBody .messageBody .content h4 {
            font-size: 0.875rem;
            margin: 0 0 0.35rem;
        }

        .messageSec .chatBox .chatBody .messageBody .content p {
            color: #fff;
            background: var(--theme-color);
            position: relative;
            padding: 0 1rem;
            font-size: 0.75rem;
            border-radius: 0 5px 5px;
            margin: 0;
        }

        .messageSec .chatBox .chatBody .messageBody .content p::before {
            content: '';
            position: absolute;
            top: 0;
            left: -6px;
            width: 10px;
            height: 10px;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            background: var(--theme-color);
        }

        .messageSec .chatBox .chatBody .messageBody .content span {
            font-size: 0.65rem;
            color: #ADADAD;
            display: block;
        }

        .messageSec .chatBox .chatBody .messageBody + .messageBody {
            margin-top: 1rem;
        }

        .messageSec .chatBox .chatBody .messageBody > img {
            width: 35px;
            height: 35px;
            border-radius: 100%;
            object-fit: cover;
        }

        .messageSec .chatBox .chatBody .messageBody.send {
            flex-direction: row-reverse;
        }

        .messageSec .chatBox .chatBody .messageBody.send .content h4,
        .messageSec .chatBox .chatBody .messageBody.send .content span {
            text-align: right;
        }

        .messageSec .chatBox .chatBody .messageBody.send .content p::before {
            clip-path: polygon(0 0, 100% 0, 0 100%);
            right: -6px;
            left: initial;
        }


        .messageSec .chatBox .chatBody::-webkit-scrollbar-track,
        .messageSec .friendsRow .friends::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
        }

        .messageSec .chatBox .chatBody::-webkit-scrollbar,
        .messageSec .friendsRow .friends::-webkit-scrollbar {
            width: 5px;
            background-color: #F5F5F5;
        }

        .messageSec .chatBox .chatBody::-webkit-scrollbar-thumb,
        .messageSec .friendsRow .friends::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: var(--theme-color);
        }

        .messageSec .chatBox .chatFoot .messageBox {
            display: flex;
            align-items: center;
            padding-inline: 2rem;
            height: 100%;
        }

        .messageSec .chatBox .chatFoot .messageBox textarea {
            flex: 0 1 80%;
            width: 80%;
            height: 100%;
            border: none;
            padding-block: 1rem;
            outline: none;
            border: none;
        }

        .messageSec .chatBox .chatFoot .messageBox .intractables {
            width: 20%;
            display: flex;
            align-items: center;
            flex: 0 1 20%;
            gap: 1rem;
            justify-content: center;
        }

        .messageSec .chatBox .chatFoot .messageBox .intractables .file {
            position: relative;
        }

        .messageSec .chatBox .chatFoot .messageBox .intractables .file input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        .messageSec .chatBox .chatFoot {
            height: 65px;
        }

        .messageSec .chatBox .chatFoot .messageBox .intractables .file input img {
            cursor: pointer;
        }

        .messageSec .chatBox .chatFoot .messageBox .intractables .btnCont button {
            border-radius: 100%;
            border: none;
            background: var(--theme-color);
            width: 30px;
            height: 30px;
            color: #fff;
            font-size: 0.75rem;
            outline: none;
        }

        .messageSec .chatBox .chatBody .messageBody.send .content p {
            border-radius: 5px 0 5px 5px;
        }

        .firstMsgAlert{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        /* Chat Box CSS:END */
    </style>

    <div id="main-wrapper">
        <div class="page-wrapper customWrap">
            <div class="container-fluid">
                <div class="messageSec">
                    <div class="chatBox">
                        <div class="chatHead">
                            <h3>Chat Message with   <b>  Agent</b></h3>
                        </div>

                            <div class="chatBody chat-container">

                                @foreach($chats as $chat)
                                    @if( $chat->sender_id == Auth::id() && $chat->offer_buyer_id == $offerId->offer_id)
                                        <div class="messageBody send">
                                            <div class="content">
                                                <h4>{!! $chat->message !!}</h4>

                                                <span>{{$chat->created_at->diffForHumans()}}</span>
                                            </div>
                                        </div>
                                    @elseif($chat->sender_id == $agentId && $chat->receiver_id == Auth::id())
                                        <div class="messageBody receive">
                                            <div class="content">
                                                <h4>
                                                    {!! $chat->message !!}.
                                                </h4>
                                                <span>{{$chat->created_at->diffForHumans()}}</span>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>
                            <div class="chatFoot">
                                <form class="messageBox" id="message-form">
                                    <textarea type="text" name="message" placeholder="Type your message here"></textarea>
                                    <div class="intractables">
                                        <input type="hidden" name="offer_buyer_id" value="{{Request::segment(2)}}">
                                        <input type="hidden" name="receiver_id" value="{{$agentId}}">
                                        <button type="submit">Send</button>
                                    </div>
                                </form>
                            </div>

                    </div>
                </div>
            </div>
        </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Add a submit event listener to the message form
            $('#message-form').on('submit', function (event) {
                event.preventDefault(); // Prevent the default form submission

                // Get the CSRF token from the meta tag
                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                // Get the message text, offer ID, and receiver ID from the input fields
                const message = $('textarea[name="message"]').val();
                const offer_buyer_id = $('input[name="offer_buyer_id"]').val();
                const receiver_id = $('input[name="receiver_id"]').val();

                // Send the message via AJAX
                $.ajax({
                    url: '{{ route('buyer.message.send') }}', // Replace with the endpoint URL to handle the message on the server
                    type: 'POST',
                    data: {
                        _token: csrfToken, // Include the CSRF token in the data
                        message: message,
                        offer_buyer_id: offer_buyer_id,
                        receiver_id: receiver_id
                    },
                    success: function (response) {
                        // Handle the success response
                        console.log('Message sent successfully:', response);

                        // Assuming the response contains the newly created chat message data
                        const newChatMessage = response.data; // Replace 'data' with the actual response property containing the new chat message

                        // Create the HTML for the new chat message

                        const newChatHTML = `
                                <div class="messageBody send">
                                     <div class="content">
                                         <h4>${newChatMessage.message}</h4>
                                            <span>${newChatMessage.formatted_created_at}</span>
                                    </div>
                                </div>`;
                        // Append the new chat message to the chat container
                        $('.chat-container').append(newChatHTML); // Replace '.chat-container' with the selector for your chat container element

                        // Automatically scroll the chat container to the bottom
                        const chatContainer = $('.chat-container');
                        chatContainer.animate({scrollTop: chatContainer.prop("scrollHeight")}, 500); // Smooth scroll with animation
                    },
                    error: function (error) {
                        // Handle the error response, if needed
                        console.error('Error sending message:', error);
                    }
                });

                // Clear the input field after sending the message
                $('textarea[name="message"]').val('');
            });
        });
    </script>
@endsection