@extends("website.service-providers.layouts.layout")
@section('title', "My Account")
@section("body")
<style>
/* Basic styling for chat components */
.message-image {
    max-width: 200px;
    max-height: 200px;
    margin-bottom: 5px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: block;
}

/* Align images to right or left based on sender */
.message-list.me .message-image {
    margin-left: auto; /* Align to right for my messages */
}

.message-list.you .message-image {
    margin-right: auto; /* Align to left for their messages */
}

/* 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: 100px;
    max-height: 100px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    margin: 4px 0;
}

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

.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%;
    word-wrap: break-word;
}

/* Updated colors to match client's chat */
.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;
}

/* Fix for message container */
.message-wrap {
    height: 60vh;
    overflow-y: auto;
    padding: 15px;
    background-color: #fff;
}

/* 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;
}

#textInput {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    resize: vertical;
    min-height: 40px;
}

/* Fix image display container */
.image-display {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    max-width: 100%;
    box-sizing: border-box;
    display: none;
}

/* Add image error styling */
.image-error {
    border: 1px dashed #ff6b6b;
    background-color: #fff0f0;
    color: #d63031;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    text-align: center;
}
</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.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <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')
<meta name="csrf-token" content="{{ csrf_token() }}">
<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', () => {
    // Setup base URLs and connection
    const socketUrl = @json(env('SOCKET_URL'));
    const socketImageUrl = @json(env('SOCKET_URL_IMAGE'));
    const baseURL = window.location.origin;
    
    // Define image base URL with fallback
    const imageBaseUrl = socketImageUrl ? 
        (socketImageUrl.endsWith('/') ? socketImageUrl : socketImageUrl + '/') : 
        (baseURL + '/');
    
    console.log("Socket URL:", socketUrl);
    console.log("Image Base URL:", imageBaseUrl);
    
    // Initialize socket connection
    const socket = io(socketUrl, {
        reconnection: true,
        reconnectionAttempts: 5,
        reconnectionDelay: 1000
    });

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

    // Get DOM elements
    const fileInput = document.getElementById('fileInput');
    const textInput = document.getElementById('textInput');
    const imgContainer = document.querySelector('.img-container');
    const imageDisplay = document.getElementById('imageDisplay');
    const closeButton = document.getElementById('closeButton');
    const submitButton = document.getElementById('submitButton');
    const messagesContainer = document.getElementById('messages');
    const welcomeWrapper = document.getElementById('welcomeChatWrapper');

    // Initialize close button
    closeButton.style.display = 'none';

    // Socket connection event handlers
    socket.on("connect", () => {
        console.log("Connected to socket server with ID:", socket.id);
        socketId = socket.id;
        joinChatRoom();
    });
    
    socket.on('connect_error', (error) => {
        console.error("Socket connection error:", error);
    });
    
    socket.on('disconnect', () => {
        console.log("Disconnected from socket server");
    });
    
    socket.on('reconnect', (attemptNumber) => {
        console.log("Reconnected to socket server after", attemptNumber, "attempts");
        joinChatRoom();
    });
    
    // Socket message event handlers
    socket.on('send data', (data) => {
        console.log("Room data received:", data);
        socketId = data.socketId || data.id;
        roomId = data.id;
        roomname = data.roomname;
        console.log("Room info set - ID:", roomId, "Name:", roomname);
    });

    socket.on("old chat response", (data) => {
        console.log("Received old chat history:", data);
        dMessage(data, senderId);
        
        // If there are messages, hide the welcome screen
        if (data.status && data.data && data.data.length > 0) {
            welcomeWrapper.classList.add('hidden');
        }
    });

    socket.on("chat message", (data) => {
        console.log("Received new message:", data);
        displayMessage(data);
        welcomeWrapper.classList.add('hidden');
    });

    // File input handlers
    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">`;
                
                if (imageDisplay) {
                    imageDisplay.style.display = 'block';
                }
                closeButton.style.display = 'flex';
            };
            reader.readAsDataURL(file);
        } else if (file) {
            alert("Please upload a valid image file.");
            resetImageDisplay();
        }
    });
    
    closeButton.addEventListener('click', function() {
        resetImageDisplay();
    });
    
    // Submit button handler
    submitButton.addEventListener('click', sendMessage);

    // Chat functions
    function joinChatRoom() {
        const dataForRoom = {
            username: "{{ $provider->first_name }} {{ $provider->last_name }}",
            user_from: senderId, 
            user_to: receiverId,
            user_from_type: senderType,
            user_to_type: receiverType,
            job_id: jobId,
        };
        
        console.log("Joining room with data:", dataForRoom);
        socket.emit("join room", dataForRoom);
        
        setTimeout(() => {
            socket.emit("old chat", {
                user_from: senderId,
                user_to: receiverId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId,
            });
        }, 500);
    }

    function sendMessage(event) {
        event.preventDefault();
        let valueInput = textInput.value.trim();

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

        try {
            let messageBody = {
                value: valueInput,
                user: "{{ $provider->first_name }} {{ $provider->last_name }}",
                room: roomname, // THIS IS THE CRITICAL FIX - using roomname for room parameter
                user_from: senderId,
                user_to: receiverId,
                socket: socketId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId,
            };

            console.log("Sending message with data:", messageBody);

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

                // Get CSRF token
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                
                if (!csrfToken) {
                    console.error("CSRF token not found");
                    alert("CSRF token not found. Please refresh the page.");
                    return;
                }

                // Upload the image
                fetch('/upload-chat-image', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        console.log("File uploaded successfully:", data.filePath);
                        messageBody.file = data.filePath; // Use the returned file path
                        socket.emit("chat message", messageBody);
                        resetInputs();
                    } else {
                        console.error('Upload failed:', data.message);
                        alert("Failed to upload image: " + (data.message || "Unknown error"));
                    }
                })
                .catch(error => {
                    console.error('Error uploading file:', error);
                    alert("Error uploading file: " + error.message);
                });
            } else {
                socket.emit("chat message", messageBody);
                resetInputs();
            }

        } catch (error) {
            console.error('Error sending message:', error);
            alert("Error sending message. Please try again.");
        }
    }

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

    function resetImageDisplay() {
        imgContainer.innerHTML = '';
        if (imageDisplay) {
            imageDisplay.style.display = 'none';
        }
        closeButton.style.display = 'none';
        fileInput.value = '';
        chatFile = null;
    }

    function dMessage(data, idd) {
        if (!data.status || !data.data || data.data.length === 0) {
            messagesContainer.innerHTML = "<p class='text-center my-4'>No messages yet</p>";
            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 || msg.file) {
                const imageElement = document.createElement("img");
                let imageSrc = msg.image || msg.file;
                
                // Process image path consistently
                if (imageSrc) {
                    if (!imageSrc.startsWith('http') && !imageSrc.startsWith('/')) {
                        imageSrc = imageBaseUrl + imageSrc;
                    } else if (imageSrc.startsWith('/')) {
                        imageSrc = baseURL + imageSrc;
                    }
                }
                
                imageElement.src = imageSrc;
                imageElement.alt = "Image";
                imageElement.className = "message-image";
                
                // Add error handling for images
                imageElement.onerror = function() {
                    console.error("Failed to load image:", imageSrc);
                    this.src = baseURL + "/webAssets/assets/images/image-error.png";
                    this.alt = "Image failed to load";
                    this.classList.add("image-error");
                };
                
                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 = msg.created_at ? 
                moment(msg.created_at).format("hh:mm A") : 
                moment().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
        } = messageData?.data;
        
        // Check for image in either the 'file' or 'image' property
        let image = messageData?.data.file || messageData?.data.image || null;

        if (image) {
            console.log("Raw image path:", image);
            
            // Make sure image has a proper URL
            if (!image.startsWith('http') && !image.startsWith('/')) {
                image = imageBaseUrl + image;
            } else if (image.startsWith('/')) {
                image = baseURL + image;
            }
            
            console.log("Final image path:", 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";
            
            // Add error handling for images
            imageElement.onerror = function() {
                console.error("Failed to load image:", image);
                this.src = baseURL + "/webAssets/assets/images/image-error.png";
                this.alt = "Image failed to load";
                this.classList.add("image-error");
            };
            
            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) {
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
    }

    // Show chat content on initialization and define close function
    document.getElementById('chatContent').classList.add('active');
    
    window.closeChat = function() {
        document.getElementById('chatContent').classList.remove('active');
    };
});
</script>
@endsection