<%-include ('./header')%>
    <div class="container">
        <div class="card">
            <h2 class="text-center mb-4"><i class="fa-solid fa-comment mr-2"></i>Create Post</h2>
            <form action="/posts/create?groupId=<%= groupId %>" enctype="multipart/form-data" method="POST">
                <div class="form-group">
                    <label for="groupId">Project ID:</label>
                    <input type="text" class="form-control" id="groupId" name="groupId" value="<%= groupId %>" readonly>
                </div>
                <div class="form-group">
                    <label for="userName">Post Creator:</label>
                    <input type="text" class="form-control" id="userName" name="userName" value="<%= currUser.userName %>" disabled>
                </div>
                <div class="form-group">
                    <label for="postHeading">Post Heading:</label>
                    <input type="text" class="form-control" id="postHeading" name="postHeading" required>
                </div>
                <div class="form-group">
                    <label for="postContent">Post Content:</label>
                    <textarea id="postContent" name="postContent" required></textarea>
                </div>
                <div class="form-group">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="postImage" name="postImage" 
                        accept="image/*" style="cursor: pointer;" onchange="checkFileSizeAndType()" required>
                        <label class="custom-file-label" for="postImage" >Choose file</label>
                    </div>
                </div>

                <div class="card">
                    <img id="imagePreview" class="image-preview" src="#" alt=" No Image Chosen.... ">
                </div>
                <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk mr-2"></i>Add Post</button>
            </form>
        </div>
    </div>
<%-include ('./footer')%>

<script>
    // File size limit
    function checkFileSizeAndType() {
        const input=document.getElementById('postImage');
        if (input.files && input.files[0]) 
        {
            var fileSize = input.files[0].size; // Size in bytes
            var maxSize = 1048576; // 1MB in bytes
            if (fileSize > maxSize) 
            {
                Swal.fire({
                    title: 'File Size Limit Exceeded!',
                    text: "Please choose a smaller file. (< 1MB)",
                    icon: 'warning',
                    confirmButtonText: 'OK'
                })
                input.value = ''; // Clear the selected file
            }
            else if(!input.files[0].type.includes('image/')){
                Swal.fire({
                    title: 'Incorrect File Type!',
                    text: "Upload Images ONLY",
                    icon: 'warning',
                    confirmButtonText: 'OK'
                })
                input.value = ''; // Clear the selected file
            }
            else{
                previewImage();
            }
        }
    }

    // preview Image
    function previewImage() {
        const input=document.getElementById('postImage');
        var image = document.getElementById('imagePreview');
        image.src = URL.createObjectURL(input.files[0]);
    }

    $(document).ready(function() {
        $('#postContent').summernote({
            height: 300,                 // set editor height
            minHeight: 300,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true,               // set focus to editable area after initializing summernote
            toolbar: [
                [ 'style', [ 'style' ] ],
                [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
                [ 'fontname', [ 'fontname' ] ],
                [ 'fontsize', [ 'fontsize' ] ],
                [ 'color', [ 'color' ] ],
                [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
                [ 'insert', [ 'link'] ],
                [ 'view', [ 'undo', 'redo', 'fullscreen', 'help' ] ]
            ]
        });
    });

</script>

