@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: 75%;
            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="friendsRow">
                        <div class="filter">
                            <a href="" class="active">Buyers</a>
                        </div>
                        <ul class="friends">

                            @foreach($users as $user)
                                <li>
                                    <a class="active" href="{{ route('buyer.chat',['id' => $offerId->offer_id, 'buyer_id' => $user->id]) }}">
                                        <span class="content">
                                            <span class="name">{{ $user->name ?? '' }}</span>

                                        </span>
                                    </a>
                                </li>
                            @endforeach


                        </ul>
                    </div>
                    <div class="chatBox">
                        <div class="chatHead">
                            <h3>Chat Message with   <b>  {{$recieverName->name ?? ''}}</b></h3>
                        </div>
                        @if($agentToBuyersChat)
                            <div class="chatBody chat-container">
                                @foreach($agentToBuyersChat as $chat)
                                    @if($chat->sender_id == Auth::id() && $chat->receiver_id == $recieverName->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 == $recieverName->id && $chat->offer_buyer_id ==  $offerId->offer_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="{{$offerId->offer_id}}">
                                        <input type="hidden" name="receiver_id" value="{{$recieverName->id}}">
                                        <button type="submit">Send</button>
                                    </div>
                                </form>
                            </div>
                        @else
                            <div class="firstMsgAlert">
                                <h2 >Please select buyer for the chat</h2>
                            </div>
                        @endif
                    </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('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