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;
    }

    /* Emoji Picker Styles */
    .ql-emoji {
        font-size: 16px !important;
    }

    .emoji-picker-container {
        position: absolute;
        z-index: 1000;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: none;
        max-width: 320px;
    }

    .emoji-picker-container.show {
        display: block;
    }

    .emoji-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 5px;
    }

    .emoji-item {
        font-size: 22px;
        cursor: pointer;
        padding: 5px;
        text-align: center;
        border-radius: 4px;
        transition: background 0.2s;
    }

    .emoji-item:hover {
        background: #e8e8e8;
    }

    .emoji-category {
        font-size: 12px;
        color: #666;
        margin: 8px 0 5px 0;
        font-weight: bold;
        border-bottom: 1px solid #eee;
        padding-bottom: 3px;
    }

    .emoji-category:first-child {
        margin-top: 0;
    }

</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"/>

<!-- Emoji Picker (populated by JavaScript) -->
<div id="emojiPicker" class="emoji-picker-container"></div>

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

    // Emoji data with Unicode code points (using String.fromCodePoint for compatibility)
    var emojiData = {
        'Smileys': [
            0x1F600, 0x1F603, 0x1F604, 0x1F601, 0x1F60A, 0x1F60D,
            0x1F970, 0x1F618, 0x1F61C, 0x1F60E, 0x1F929, 0x1F607,
            0x1F642, 0x1F609, 0x1F60B, 0x1F917
        ],
        'Emotions': [
            0x1F622, 0x1F62D, 0x1F624, 0x1F620, 0x1F621, 0x1F914,
            0x1F610, 0x1F611, 0x1F62E, 0x1F631, 0x1F634, 0x1F912,
            0x1F637, 0x1F922, 0x1F973, 0x1F92D
        ],
        'Gestures': [
            0x1F44D, 0x1F44E, 0x1F44F, 0x1F64C, 0x1F91D, 0x270C,
            0x1F91E, 0x1F44C, 0x1F44B, 0x1F4AA, 0x1F64F, 0x261D,
            0x1F446, 0x1F447, 0x1F448, 0x1F449
        ],
        'Objects': [
            0x2764, 0x1F4AF, 0x1F525, 0x2B50, 0x2728, 0x1F4B0,
            0x1F4E2, 0x1F4E3, 0x1F389, 0x1F38A, 0x1F3C6, 0x1F4C8,
            0x1F4C9, 0x2705, 0x274C, 0x26A0
        ]
    };

    // Build emoji picker HTML
    function buildEmojiPicker() {
        var html = '';
        for (var category in emojiData) {
            html += '<div class="emoji-category">' + category + '</div>';
            html += '<div class="emoji-grid">';
            emojiData[category].forEach(function (codePoint) {
                var emoji = String.fromCodePoint(codePoint);
                html += '<span class="emoji-item">' + emoji + '</span>';
            });
            html += '</div>';
        }
        document.getElementById('emojiPicker').innerHTML = html;
    }

    $(document).ready(function () {
        // Build emoji picker
        buildEmojiPicker();

        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', 'emoji'],
                        ['clean']
                    ],
                    handlers: {
                        image: imageHandler,
                        emoji: emojiHandler
                    }
                }
            }
        });

        // Add emoji icon to the toolbar button
        var emojiButton = document.querySelector('.ql-emoji');
        if (emojiButton) {
            emojiButton.innerHTML = String.fromCodePoint(0x1F600);
        }

        // Handle emoji selection
        $('#emojiPicker').on('click', '.emoji-item', function () {
            var emoji = $(this).text();
            var range = quill.getSelection(true);
            quill.insertText(range.index, emoji);
            quill.setSelection(range.index + emoji.length);
            $('#emojiPicker').removeClass('show');
        });

        // Close emoji picker when clicking outside
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#emojiPicker, .ql-emoji').length) {
                $('#emojiPicker').removeClass('show');
            }
        });
    });

    function emojiHandler() {
        var emojiPicker = document.getElementById('emojiPicker');
        var emojiButton = document.querySelector('.ql-emoji');

        // Position the picker below the emoji button
        var rect = emojiButton.getBoundingClientRect();
        var editorContainer = document.querySelector('.quill-editor');
        var editorRect = editorContainer.getBoundingClientRect();

        emojiPicker.style.top = (rect.bottom + window.scrollY + 5) + 'px';
        emojiPicker.style.left = Math.min(rect.left, editorRect.right - 330) + 'px';

        // Toggle visibility
        emojiPicker.classList.toggle('show');
    }

    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>