{{-- <div class="messenger-sendCard">
    <form id="message-form" method="POST" action="{{ route('send.message') }}" enctype="multipart/form-data">
        @csrf
        <label><span class="fas fa-plus-circle"></span><input disabled='disabled' type="file" class="upload-attachment" name="file" accept=".{{implode(', .',config('chatify.attachments.allowed_images'))}}, .{{implode(', .',config('chatify.attachments.allowed_files'))}}" /></label>
        <button class="emoji-button"></span><span class="fas fa-smile"></button>
        <textarea readonly='readonly' name="message" class="m-send app-scroll" placeholder="Type a message.."></textarea>
        <button disabled='disabled' class="send-button"><span class="fas fa-paper-plane"></span></button>
    </form>
</div> --}}
<div class="messenger-sendCard">
    <form id="message-form" method="POST" action="{{ route('send.message') }}" enctype="multipart/form-data">
        @csrf
        <img id="preview-image" style="max-width: 180px; max-height: 150px; display: none; margin-top: -150px;" />
        <label>
            <span class="fas fa-plus-circle"></span>
            <input type="file" class="upload-attachment" id="file-input" name="file"
                accept=".{{ implode(', .', config('chatify.attachments.allowed_images')) }}, .{{ implode(', .', config('chatify.attachments.allowed_files')) }}" />
        </label>
        <button type="button" class="emoji-button"><span class="fas fa-smile"></span></button>
        <textarea name="message" class="m-send app-scroll" placeholder="Type a message.."  maxlength="4000"></textarea>
        <button type="submit" class="send-button"><span class="fas fa-paper-plane"></span></button>
    </form>
</div>
<script>
    document.querySelector(".m-send").addEventListener("paste", (event) => {
        const clipboardItems = event.clipboardData.items;
        for (const item of clipboardItems) {
            if (item.type.startsWith("image/")) {
                const file = item.getAsFile();
                // Show preview
                const reader = new FileReader();
                reader.onload = (e) => {
                    const previewImage = document.getElementById("preview-image");
                    previewImage.src = e.target.result;
                    previewImage.style.display = "block";
                };
                reader.readAsDataURL(file);
                // Append image to file input            
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                document.getElementById("file-input").files = dataTransfer.files;
                break;
            }
        }
    });
    // Clear form after submission  
    document.getElementById("message-form").addEventListener("submit", function(event) {
        event.preventDefault();
        // Prevent default form submission for testing    
        // Simulate successful submission      
        setTimeout(() => {
 
            this.reset();
            document.querySelector(".m-send").value = "";
            document.getElementById("preview-image").style.display = "none";
        }, 500);
        // Simulating request delay
    });
</script>