@extends('teacher.layouts.layouts')

@section('content')
    <style>
        /* Style for chat message image */
        .chat-image {
            width: 100px;
            cursor: pointer;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

        .chat-image:hover {
            transform: scale(1.05);
        }

        /* Style for the image popup */
        .image-popup {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        /* Style for the close button */
        .image-popup .close {
            position: absolute;
            top: 10px;
            right: 25px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Style for the popup image content */
        .image-popup-content {
            max-width: 90%;
            max-height: 90%;
            border-radius: 10px;
        }
    </style>
    <div class="page-wrapper">
        <div class="left-part bg-light fixed-left-part border-top">
            <!-- Mobile toggle button -->
            <a class="ti-menu ti-close btn btn-success show-left-part d-block d-md-none" href="javascript:void(0)"></a>
            <!-- Mobile toggle button -->
            <div class="p-15">
                <h4>Chat Sidebar</h4>
            </div>
            <div class="scrollable position-relative" style="height:100%;">
                <div class="p-15">
                    <h5 class="card-title">
                        <input class="form-control" type="text" data-search-group="true" placeholder="Search Group">
                    </h5>
                </div>
                <hr>
                <ul class="mailbox list-style-none">
                    <li>
                        <div class="message-center chat-scroll">
                            @foreach($groups as $group)
                                <a href="javascript:void(0)" class="message-item" data-message-item="true"
                                   id='chat_user_{{ $group->id }}' data-group-id='{{ $group->id }}'
                                   data-url="{{ route('teacher.chat_group_message.get', $group->id) }}">
                                    <div class="mail-contnet">
                                        <h5 class="message-title">{{ $group->name }}</h5>
                                        {{--                                        <span class="time">{{ $group->created_at }}</span>--}}
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-part border-top">
            <div class="p-20">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Chat Messages</h4>
                        <div class="chat-box scrollable" style="height:calc(100vh - 300px);">

                        </div>
                    </div>
                    <div class="card-body border-top">
                        <div class="row">
                            <div class="col-9">
                                <div class="input-group m-t-0 m-b-0">
                                    <input type="file" id="attachment" class="form-control"
                                           accept="image/*,video/*,audio/*,application/pdf" style="display: none;">
                                    <button class="btn btn-light" id="attach-file">
                                        <i class="fa fa-paperclip"></i>
                                    </button>
                                    <input id="message_data" placeholder="Type and enter" class="form-control border-0"
                                           type="text">
                                </div>
                            </div>
                            <div class="col-3">
                                <a class="btn-circle btn-lg btn-cyan float-right text-white" data-send-message="true"
                                   href="#">
                                    <i class="fas fa-paper-plane"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="imagePopup" class="image-popup">
        <span class="close" onclick="closeImage()">&times;</span>
        <img class="image-popup-content" id="popupImg">
    </div>
@endsection

@push('js')
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <script>
        const socket = io('http://localhost:3000');
        var groupId = null;
        var fileObject = null;

        $('[data-search-group]').on('keyup', function () {
            let searchText = $(this).val().toLowerCase();

            $('.message-item').filter(function () {
                let groupName = $(this).find('.message-title').text().toLowerCase();
                $(this).toggle(groupName.indexOf(searchText) > -1);
            });
        });

        $('[data-message-item]').on('click', function (e) {
            e.preventDefault();
            let URLData = $(this).data('url');
            groupId = $(this).data('group-id');
            $.ajax({
                url: URLData,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function (response) {
                    $('.chat-box').html(response.messages);
                    // Join the chat group in Socket.IO
                    socket.emit('joinGroup', groupId);
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        });

        // Listen for real-time messages from Socket.IO
        socket.on('message', (data) => {
            console.log(data)
            if (data.type !== 'teacher') {
                let dt = new Date();
                let time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
                let dataImgHtml = '';

                if (data.file) {
                    // Check file type and render accordingly
                    if (isImage(data.file)) {
                        // Render image preview
                        dataImgHtml = `<br><img src="${data.file}" alt="Attachment" style="max-width: 200px; max-height: 200px;" class="chat-image" onclick="openImage(this)">`;
                    } else {
                        // Render as a download link
                        dataImgHtml = `<br><a href="${data.file}" target="_blank">Download Attachment</a>`;
                    }
                }

                let dataHtml = `<li class="chat-item">
                        <div class="chat-content">
                            <h6 class="font-medium">${data.user_name}</h6>
                            <div class="box bg-light-info">${data.message}</div>
                            <br>
                            ${dataImgHtml}
                        </div>
                        <div class="chat-time">${time}</div>
                    </li>`;
                $('.chat-list').append(dataHtml);
            }
        });

        socket.on('message_edited', function (data) {
            // Update the message in the chat window
            $('#message-text-' + data.messageId + ' span').text(data.newMessage);
        });

        socket.on('message_deleted', function (data) {
            // Remove the message from the chat window
            $('#message-text-' + data.messageId).closest('.chat-message-right, .chat-message-left').remove();
        });

        // Send a message and store it in the database
        $(document).on('click', '[data-send-message]', function (e) {
            e.preventDefault();
            const message = $('#message_data').val();
            sendMessageData(message)
        })

        $('#message_data').on('keypress', function (e) {
            if (e.which === 13) {
                const message = $(this).val();
                sendMessageData(message)
            }
        });

        function sendMessageData(message) {
            let formData = new FormData();
            formData.append('groupId', groupId);
            formData.append('message', message);
            if (fileObject) {
                formData.append('file', fileObject);  // Add file to formData if present
            }
            formData.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: "{{ route('teacher.chat_group_message.store') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                data: formData,
                dataType: 'json',
                success: function (response) {
                    let fileUrl = response.fileUrl || null;  // File URL if any

                    // Send the message via Socket.IO
                    socket.emit('message', {
                        groupId: groupId,
                        message: message,
                        file: fileUrl,
                        type: 'teacher',
                        user_id: "{{ \Illuminate\Support\Facades\Auth::guard('teacher')->user()->id }}",
                        user_name: "{{ \Illuminate\Support\Facades\Auth::guard('teacher')->user()->name }}",
                    });

                    let dt = new Date();
                    let time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
                    let dataImgHtml = '';

                    if (fileUrl) {
                        // Check file type and render accordingly
                        if (isImage(fileUrl)) {
                            // Render image preview
                            dataImgHtml = `<br><img src="${fileUrl}" alt="Attachment" style="max-width: 200px; max-height: 200px;" class="chat-image" onclick="openImage(this)">`;
                        } else {
                            // Render as a download link
                            dataImgHtml = `<br><a href="${fileUrl}" target="_blank">Download Attachment</a>`;
                        }
                    }

                    const dataHtml = `<li class="odd chat-item">
                        <div class="chat-content">
                            <div class="box bg-light-inverse">${message}</div>
                            <br>
                            ${dataImgHtml}
                        </div>
                        <div class="chat-time">${time}</div>
                    </li>`;

                    $('.chat-list').append(dataHtml);
                    $('#message_data').val('');
                    $('#attachment').val('');
                    fileObject = null;
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        }

        // Handle file attachment button click
        $('#attach-file').on('click', function () {
            $('#attachment').click();  // Trigger file input click
        });

        // Capture file input change event
        $('#attachment').on('change', function () {
            fileObject = this.files[0]; // Store the file
        });

        // Function to check if the file is an image
        function isImage(fileUrl) {
            return /\.(jpg|jpeg|png|gif|bmp)$/i.test(fileUrl);
        }

        $(document).on('click', '[data-edit-message]', function () {
            let messageId = $(this).data('edit-message');
            let messageText = $('#message-text-' + messageId + ' .bg-light-inverse').text();

            // Replace the message text with an input field to edit
            $('#message-text-' + messageId).html(`
                <input type="text" class="form-control" id="edit-message-input-${messageId}" value="${messageText}">
                <button class="btn btn-sm btn-success" data-save-message="${messageId}">Save</button>
                <button class="btn btn-sm btn-secondary" data-cancel-edit="${messageId}">Cancel</button>
            `);
        });

        $(document).on('click', '[data-save-message]', function () {
            let messageId = $(this).data('save-message');
            let newMessage = $('#edit-message-input-' + messageId).val();

            $.ajax({
                url: "{{ route('teacher.chat_group_message.update') }}",
                type: 'POST',
                data: {
                    id: messageId,
                    message: newMessage,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    $('#message-text-' + messageId).html(`<div class="chat-content">
                        <div class="box bg-light-inverse">${newMessage}</div>
                        <br>
                    </div>`);
                    socket.emit('message_edit', {
                        groupId: groupId,
                        messageId: messageId,
                        newMessage: newMessage
                    });
                },
                error: function (xhr) {
                    console.error('Error saving message:', xhr.responseText);
                }
            });
        });

        $(document).on('click', '[data-cancel-edit]', function () {
            let messageId = $(this).data('cancel-edit');
            let originalMessage = $('#edit-message-input-' + messageId).val();

            // Restore the original message
            $('#message-text-' + messageId).html(`<div class="chat-content">
                <div class="box bg-light-inverse">${originalMessage}</div>
                <br>
            </div>`);
        });

        $(document).on('click', '[data-delete-message]', function () {
            let messageId = $(this).data('delete-message');

            if (confirm('Are you sure you want to delete this message?')) {
                $.ajax({
                    url: "{{ route('teacher.chat_group_message.delete') }}",
                    type: 'POST',
                    data: {
                        id: messageId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        $('#message-text-' + messageId).remove();
                        socket.emit('message_delete', {
                            groupId: groupId,
                            messageId: messageId
                        });
                    },
                    error: function (xhr) {
                        console.error('Error deleting message:', xhr.responseText);
                    }
                });
            }
        });

        function openImage(imgElement) {
            var popup = document.getElementById("imagePopup");
            var popupImg = document.getElementById("popupImg");
            popupImg.src = imgElement.src;
            popup.style.display = "flex"; // Show the popup as a flex container for centering
        }

        function closeImage() {
            document.getElementById("imagePopup").style.display = "none";
        }
    </script>
@endpush