Subversion Repositories SmartDukaan

<style>
    .quill-editor {
        height: 250px;
    }

    .quill-editor .ql-editor {
        min-height: 200px;
        font-size: 14px;
    }

    .uploaded-file-item {
        margin-top: 6px;
        font-size: 13px;
        color: #3a8bbf;
        font-weight: 500;
    }

    .uploaded-file-item i {
        margin-right: 6px;
        color: #3a8bbf;
    }

</style>


<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Post Bulletin</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Post Bulletin</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form method="post" action="${rc.contextPath}/bulletin/save">

                <div class="row">
                    <div class="col-md-8">
                        <!-- Title -->
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" id="btitle" class="form-control" required>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <!-- Region -->
                        <div class="form-group">
                            <label>Region</label>
                            <select id="bregionId" class="form-control" required>
                                #foreach($region in $regionList)
                                    <option value="$region.getId()">$region.getName()</option>
                                #end
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">

                        <div class="form-group">
                            <img id="imgPreview" style="max-width:200px; display:none; margin-top:10px;"/>
                        </div>
                        <div class="form-group">
                            <div id="uploadedFileList"></div>
                        </div>
                    </div>
                </div>

                <!-- Description (Editor) -->
                <div class="form-group">
                    <label>Description</label>
                    <div id="bulletinEditor" class="quill-editor"></div>
                </div>


                <button type="submit" class="btn btn-primary post-bulletin-button">
                    Post Bulletin
                </button>
            </form>
        </div>
    </div>
</section>


<form id="uploadForm" enctype="multipart/form-data" style="display:none">
    <input type="file" id="uploadFileInput" name="file"
           accept="image/*,.pdf,.csv,.xls,.xlsx">
</form>

<input type="hidden" id="bulletinDocumentIds"/>


<script>
    var quill;
    var uploadedDocumentIds = [];

    $(document).ready(function () {
        quill = new Quill('#bulletinEditor', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: [
                        [{font: []}, {size: []}],
                        ['bold', 'italic', 'underline'],
                        [{color: []}, {background: []}],
                        [{header: 1}, {header: 2}],
                        [{list: 'ordered'}, {list: 'bullet'}],
                        [{align: []}],
                        ['link', 'image'],   // image button kept
                        ['clean']
                    ],
                    handlers: {
                        image: imageHandler
                    }
                }
            }
        });
    });

    function imageHandler() {
        const input = document.getElementById('uploadFileInput');
        input.value = '';
        input.click();

        input.onchange = function () {
            const file = input.files[0];
            if (!file) return;
            const fileList = document.getElementById("uploadedFileList");

            // Show preview ONLY for image
            if (file.type.startsWith("image/")) {
                const preview = document.getElementById("imgPreview");
                preview.src = URL.createObjectURL(file);
                preview.style.display = "block";
            }
            // NON-IMAGE FILE (PDF, CSV, XLS)
            else {
                const fileItem = document.createElement("div");
                fileItem.className = "uploaded-file-item";
                fileItem.innerHTML = `
            <i class="fa fa-file"></i>
            <span>${file.name}</span>
        `;
                fileList.appendChild(fileItem);
            }

            // ✅ Reuse existing working upload method
            uploadDocument(file, function (documentId) {

                // Store document id
                uploadedDocumentIds.push(documentId);
                $("#bulletinDocumentIds").val(uploadedDocumentIds.join(","));
                // Success message
                bootbox.alert("File uploaded successfully");

            });
        };
    }
</script>