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>