@extends("website.layouts.layout")
@section('title', "My Account")
@section("body")
<style>
/* Basic styling for chat components */
.message-image {
    max-width: 100px;
    height: 100px;
    margin-bottom: 5px;
}

/* Hide chat content by default */
.chat-content {
    display: none;
}

/* Show chat content when active */
.chat-content.active {
    display: block;
}

/* Welcome message styles */
.welcome-chat-wrapper {
    display: block;
    text-align: center;
    padding: 30px;
}

/* Hide welcome-chat-wrapper when chat is opened */
.welcome-chat-wrapper.hidden {
    display: none;
}

/* Close button for image preview */
.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #ff5757;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image container in message */
.img-container img {
    max-width: 100%;
    max-height: 150px;
    display: block;
    margin: 5px 0;
}

/* Message styling */
.message-list {
    margin-bottom: 15px;
    position: relative;
}

.message-list.me {
    text-align: right;
}

.message-list.you {
    text-align: left;
}

.message-list .message {
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
    max-width: 80%;
}

.message-list.me .message {
    background: #EDDEFF;
    color: #111;
}

.message-list.you .message {
    background: #CBD6FF;
    color: #333;
}

.message-list .time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Custom file input */
.custom-file-input {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.image-wrapper-message {
    flex: 1;
    position: relative;
}

.custom-file-label {
    cursor: pointer;
    margin-right: 10px;
}
</style>

<!-- Banner -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!-- Services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Support Team</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Dashboard Main Section -->
<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")

            <div class="main-content">
                <div class="main-content-wrapper lg-width arnette-pro">
                    <div id="chatBlock" class="arnette-chat-block">
                        <div class="chat-content" id="chatContent">
                            <div class="chat-header">
                                <button class="back-button" onclick="closeChat()">Back</button>
                                <img src="{{ url('webAssets/assets/images/123.png') }}" alt="profile" id="chatHeaderProfileImage" />
                                <div class="info">
                                    <span class="user" id="chatHeaderUser">Support Team</span>
                                </div>
                            </div>
                            
                            <!-- Welcome message when no chat is active -->
                            <div class="welcome-chat-wrapper" id="welcomeChatWrapper">
                                <img class="welcomechat-img" src="{{ url('webAssets/assets/images/welcome-chat.svg') }}" />
                                <h3 class="welcome-note mt-3">
                                    Welcome to the support chat. How can we help you today?
                                </h3>
                            </div>
                            
                            <div class="message-wrap" id="messages">
                                <!-- Messages will be appended here dynamically -->
                            </div>
                            
                            <div class="message-footer">
                                <div class="custom-file-input upload">
                                    <label for="fileInput" class="custom-file-label">
                                        <img class="attachment-icon"
                                            src="{{ url('webAssets/assets/images/attachment.png') }}" />
                                    </label>
                                    <input type="file" id="fileInput" accept="image/*">
                                    <div class="image-wrapper-message">
                                        <div class="img-container"></div>
                                        <textarea id="textInput"
                                            placeholder="Enter text and image will be displayed here..."></textarea>
                                        <div id="imageDisplay" class="image-display"></div>
                                        <button id="closeButton" class="close-button" style="display: none;">×</button>
                                    </div>
                                    <button class="btn btn-primary" id="submitButton" type="button">
                                        <img class="send-icon"
                                            src="{{ url('webAssets/assets/images/send-icon2.svg') }}" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('footerItems')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"
    integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const socketUrl = @json(env('SOCKET_URL'));
    const socketImageUrl = @json(env('SOCKET_URL_IMAGE'));
    const socket = io(socketUrl, {
        reconnection: false
    });

    let socketId;
    let senderId = {{ $client->id }};
    let receiverId = 0;
    let senderType = "client";
    let receiverType = "admin";
    let roomId, roomname, jobId = null;
    let chatFile = null;

    // Connection established
    socket.on("connect", (data) => {
        console.log("Connection established:", socket.id);
        socketId = socket.id;
    });

    // Join room automatically on page load
    const dataForRoom = {
        username: "{{ $client->first_name }} {{ $client->last_name }}",
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType,
        job_id: jobId,
    };
    socket.emit("join room", dataForRoom);

    socket.on("chat message", (data) => {
        displayMessage(data);
        // Hide welcome message when chat begins
        document.getElementById('welcomeChatWrapper').classList.add('hidden');
        document.getElementById('chatContent').classList.add('active');
    });

    socket.emit("old chat", {
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType,
        job_id: jobId,
    });

    socket.on('send data', (data) => {
        roomId = data.id;
        roomname = data.roomname;
    });

    socket.on("old chat response", (data) => {
        dMessage(data, senderId);
        
        // If there are messages, hide the welcome screen and show chat
        if (data.status && data.data.length > 0) {
            document.getElementById('welcomeChatWrapper').classList.add('hidden');
            document.getElementById('chatContent').classList.add('active');
        }
    });

    // Image Upload handling
    const fileInput = document.getElementById('fileInput');
    const imgContainer = document.querySelector('.img-container');
    const closeButton = document.getElementById('closeButton');
    
    // Initialize close button to be hidden
    closeButton.style.display = 'none';

    fileInput.addEventListener('change', function() {
        chatFile = null;
        const file = this.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                chatFile = file;
                imgContainer.innerHTML = `<img src="${e.target.result}" alt="Uploaded Image">`;
                closeButton.style.display = 'flex'; // Show close button
            };
            reader.readAsDataURL(file);
        } else {
            alert("Please upload a valid image file.");
        }
    });
    
    // Handle close button click
    closeButton.addEventListener('click', function() {
        resetImageDisplay();
    });
    
    function resetImageDisplay() {
        imgContainer.innerHTML = '';
        closeButton.style.display = 'none';
        fileInput.value = '';
        chatFile = null;
    }

    // Show chat content on initialization
    function initializeChat() {
        document.getElementById('chatContent').classList.add('active');
    }
    
    // Close chat function
    function closeChat() {
        document.getElementById('chatContent').classList.remove('active');
    }
    
    // Expose closeChat to window
    window.closeChat = closeChat;
    
    // Initialize chat
    initializeChat();

    const submitButton = document.querySelector('#submitButton');
    submitButton.addEventListener('click', showConfirmationModal);

    function showConfirmationModal(event) {
        event.preventDefault();
        let valueInput = document.getElementById("textInput").value.trim();

        // Check for empty message and no file
        if (!valueInput && !chatFile) return;

        try {
            let messageBody = {
                value: valueInput,
                user: "{{ $client->first_name }} {{ $client->last_name }}",
                room: roomname,
                user_from: senderId,
                user_to: receiverId,
                socket: roomId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId,
            };

            // Handle file upload if present
            if (chatFile) {
                let formData = new FormData();
                formData.append('file', chatFile);

                // Upload the image
                fetch('/upload-chat-image', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content'),
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            messageBody.file = data.filePath; // Use the returned file path
                            socket.emit("chat message", messageBody);
                            resetInputs();
                        } else {
                            console.error('Upload failed:', data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error uploading file:', error);
                    });
            } else {
                socket.emit("chat message", messageBody);
                resetInputs();
            }

        } catch (error) {
            console.error('Error:', error);
        }
    }

    function resetInputs() {
        document.getElementById("textInput").value = "";
        resetImageDisplay();
    }

    function dMessage(data, idd) {
        const messagesContainer = document.getElementById("messages");
        if (!data.status) {
            messagesContainer.innerHTML = "";
            return;
        }

        messagesContainer.innerHTML = ""; // Clear existing messages

        data.data.forEach(msg => {
            const targetDivClass = msg.user_from == idd ? "message-list me" : "message-list you";
            const messageDiv = document.createElement("div");
            messageDiv.className = targetDivClass;

            // Append image if present
            if (msg.image) {
                const imageElement = document.createElement("img");
                imageElement.src = socketImageUrl + msg.image;
                imageElement.alt = "Image";
                imageElement.className = "message-image";
                messageDiv.appendChild(imageElement);
            }

            // Append message text if present
            if (msg.message) {
                const messageContent = document.createElement("p");
                messageContent.className = "message";
                messageContent.innerText = msg.message;
                messageDiv.appendChild(messageContent);
            }

            // Append timestamp
            const timeP = document.createElement("p");
            timeP.className = "time";
            timeP.innerText = moment(msg.created_at).format("hh:mm A");
            messageDiv.appendChild(timeP);

            // Append the message div to the messages container
            messagesContainer.appendChild(messageDiv);
        });
        
        // Scroll to the bottom after loading all messages
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    function displayMessage(messageData) {
        let {
            value: message,
            user_from,
            file: image
        } = messageData?.data;

        if (image) {
            image = socketImageUrl + image;
        }

        let targetDiv = user_from === senderId ? "message-list me" : "message-list you";
        const messageDiv = document.createElement("div");
        messageDiv.className = targetDiv;

        // Append image if present
        if (image) {
            const imageElement = document.createElement("img");
            imageElement.src = image;
            imageElement.alt = "Image";
            imageElement.className = "message-image";
            messageDiv.appendChild(imageElement);
        }

        // Append text content if present
        if (message) {
            const messageContent = document.createElement("p");
            messageContent.className = "message";
            messageContent.innerText = message;
            messageDiv.appendChild(messageContent);
        }

        // Append timestamp
        const timeP = document.createElement("p");
        timeP.className = "time";
        timeP.innerText = moment().format("hh:mm A");
        messageDiv.appendChild(timeP);

        // Append the messageDiv to the container only if it contains content
        if (messageDiv.children.length > 0) {
            const messagesContainer = document.getElementById("messages");
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
    }
});
</script>
@endsection