@extends('admin.layout')

@section('content')

<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 400px; /* Adjust height as needed */
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
    }
    .chat-box {
        flex: 1;
        padding: 10px;
        overflow-y: auto; /* Allow vertical scroll */
        background-color: #f9f9f9;
        border-bottom: 1px solid #ddd;
        max-height: 100%; /* Ensure it takes available space */
    }
    .chat-input {
        position: relative;
        padding: 15px;
        background-color: #fff;
        border-top: 1px solid #ccc;
    }

    .chat-input input {
        padding: 10px;
        width: 100%; /* Adjust width to make space for the button */
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .chat-input button {
    position: absolute;
    right: 20px;
    top: 36px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
}
    .chat-input button img {
        width: 20px; /* Adjust size as needed */
        height: 20px; /* Adjust size as needed */
    }

    .chat-message {
        margin-bottom: 10px;
    }

    .chat-message.user-message {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .chat-message.admin-message {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-message div {
        border-radius: 24px;
        padding: 10px;
        max-width: 60%; /* Adjust max-width for messages */
    }

    .chat-message.admin-message div {
        background-color: #7DA0FA33;
    }

    .chat-message.user-message div {
        background-color: #6662FF33;
    }

    .chat-message small {
        margin-top: 5px;
        display: block;
    }
    @media screen and (max-width: 768px) {
    .chat-message div {
        border-radius: 24px;
        padding: 10px;
        max-width: 100%; /* Adjust max-width for messages */
    }
}

</style>

<div class="row mb-3">
    <div class="row d-flex justify-content-between">
        <h4 class="page-top-heading">Chat</h4>
    </div>
</div>




<div class="container p-0">

    <div class="row d-flex justify-content-center">
        <div class="col-lg-12 p-0">
            <div class="card">
                <div class="d-flex justify-content-between align-items-center p-2" style="height: 77px;">
                    <span class="ms-2 d-flex align-items-center">
                        <img src="{{ asset('/assets/images/pages/avatar.svg') }}" alt="User Icon" style="vertical-align: middle; margin-right: 5px;">
                        <span style="font-weight: bold; font-size: 1rem;">Admin</span>
                    </span>
                    <span style="font-size: 1rem; font-weight: bold;">
                        Ticket ID-<span style="color: #000;">XBE-LZJBG-338</span>
                    </span>
                </div>
                <div class="chat-container">
                    <div class="chat-box" id="chat-box">
                        <!-- Example admin and user chat messages -->
                        <div class="chat-message admin-message">
                            <div>
                                <p>Welcome</p>
                                <p>Hi Trader! 👋 We're here to help you with any questions or issues you may have. Our Support Team is available 24/7 to assist you. Just let us know how we can help, and we'll do our best to provide you with quick and effective solutions. Thank you for reaching out to us!</p>
                            </div>
                            <small>Jan 31, 2024 08:21 AM</small>
                        </div>

                        <div class="chat-message user-message">
                            <div>
                                <p>Of course! I'm sorry to hear about the trouble. Could you please provide more details about the payment issue you're facing?</p>
                            </div>
                            <small>Jan 31, 2024 08:21 AM</small>
                        </div>

                        <div class="chat-message admin-message">
                            <div>
                                <p>Hi there! I'm experiencing some issues with my payment for the school lunch app. Can you help me out?</p>
                            </div>
                            <small>Jan 31, 2024 08:21 AM</small>
                        </div>
                    </div>

                    <div class="chat-input">
                        <input type="text" id="message" class="form-control" placeholder="Start typing... (max 100 words)">
                        <button type="button" onclick="sendMessage()">
                            <img src="{{ asset('/assets/images/pages/send.svg') }}" class="filtericon">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function sendMessage() {
        var messageBox = document.getElementById('chat-box');
        var messageInput = document.getElementById('message');
        
        var message = messageInput.value;
        if (message.trim() === '') return; // Prevent empty messages
        
        // Append user message to chat box
        var messageElement = document.createElement('div');
        messageElement.className = 'chat-message user-message';
        messageElement.innerHTML = '<div>' + message + '<br><small>Just Now</small></div><div style="clear: both;"></div>';
        messageBox.appendChild(messageElement);
        
        // Clear the input field
        messageInput.value = '';
        
        // Scroll to the bottom of the chat box
        messageBox.scrollTop = messageBox.scrollHeight;
    }
</script>

@endsection